Add render moved paragraphs marker in diff view

This overwrites the generic marker from the wikidiff2 lib and adds
simple RTL aware arrows that indicate movement of the paragraphs.

Bug:T176486
Change-Id: I3554785772a091c3813e41071efcb7bb9a26a951

diff --git a/docs/uidesign/mediawiki.diff.html b/docs/uidesign/mediawiki.diff.html
index 0372595..cd13dba 100644 (file)
--- a/docs/uidesign/mediawiki.diff.html
+++ b/docs/uidesign/mediawiki.diff.html
@@ -88,5 +88,54 @@
        <tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr>
 </table>
 
+<p>Here an example for the diff output when a whole paragraph was moved:</p>
+
+<table class="diff diff-contentalign-left">
+       <colgroup><col class="diff-marker">
+               <col class="diff-content">
+               <col class="diff-marker">
+               <col class="diff-content">
+       </colgroup><tbody>
+<tr>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+</tr>
+<tr>
+       <td class="diff-marker"><a class="mw-diff-movedpara-left" href="#movedpara_3_1_rhs">⚫</a></td>
+       <td class="diff-deletedline"><div><a name="movedpara_1_1_lhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td>
+       <td colspan="2" class="diff-empty">&nbsp;</td>
+</tr>
+<tr>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+</tr>
+<tr>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td>
+</tr>
+<tr>
+       <td colspan="2" class="diff-empty">&nbsp;</td>
+       <td class="diff-marker">+</td>
+       <td class="diff-addedline"></td>
+</tr>
+<tr>
+       <td colspan="2" class="diff-empty">&nbsp;</td>
+       <td class="diff-marker"><a class="mw-diff-movedpara-right" href="#movedpara_1_1_lhs">⚫</a></td>
+       <td class="diff-addedline"><div><a name="movedpara_3_1_rhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td>
+</tr>
+<tr>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+       <td class="diff-marker">&nbsp;</td>
+       <td class="diff-context"></td>
+</tr>
+</tbody></table>
+
 </body>
 </html>

diff --git a/resources/src/mediawiki/mediawiki.diff.styles.css b/resources/src/mediawiki/mediawiki.diff.styles.css
index 6345020..1f6e54c 100644 (file)
--- a/resources/src/mediawiki/mediawiki.diff.styles.css
+++ b/resources/src/mediawiki/mediawiki.diff.styles.css
@@ -119,3 +119,39 @@ td.diff-marker {
        direction: ltr !important; /* stylelint-disable-line declaration-no-important */
        unicode-bidi: embed;
 }
+
+/*!
+ * Wikidiff2 rendering for moved paragraphs
+ */
+
+.mw-diff-movedpara-left,
+.mw-diff-movedpara-right,
+.mw-diff-movedpara-left:visited,
+.mw-diff-movedpara-right:visited,
+.mw-diff-movedpara-left:active,
+.mw-diff-movedpara-right:active {
+       display: block;
+       color: transparent;
+}
+
+.mw-diff-movedpara-left:hover,
+.mw-diff-movedpara-right:hover {
+       text-decoration: none;
+}
+
+.mw-diff-movedpara-left:after,
+.mw-diff-movedpara-right:after {
+       display: block;
+       color: #222;
+       margin-top: -1.25em;
+}
+
+.mw-diff-movedpara-left:after,
+.rtl .mw-diff-movedpara-right:after {
+       content: '↪';
+}
+
+.mw-diff-movedpara-right:after,
+.rtl .mw-diff-movedpara-left:after {
+       content: '↩';
+}