what will be done
Similar to the desktop diff, moved paragraphs will be detected, links inserted between them, and word diffs between the moved paragraphs will be displayed.

what will be the visual change
Links to anchors will be visible so users can move between the moved paragraphs. If additional words were inserted or removed while moving the paragraph, the difference will be shown in the same way the mobile diff currently displays a word diff.

what will be handed over so that visualizing the move can be implemented
Every paragraph that is detected as moved will have

• a link to the source/destination anchor, with a class so it can be styled by css and a data tag so the link title can be localized
• an anchor which identifies the paragraph
• differences between the lhs/rhs paragraph will be shown like in current mobile word diff

See the attached mockup. Word diff between paragraphs not shown.

Hey @jkroll @Tobi_WMDE_SW judging by this mock from @Nirzar of how this should look on mobile diff, the anchor in the top block in the diff should come after the paragraph. Can we switch the order of those 2 elements?

Is there anywhere I can see the diff so far in the context of Minerva e.g. on beta cluster or has nothing been implemented yet?
e.g.
https://en.wikipedia.org/w/index.php?title=Yellowhammer&type=revision&diff=813882689&oldid=813868645&useskin=minerva
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Test_previews&type=revision&diff=371731&oldid=371729&useskin=minerva

Side note: It would be great to be able to get rid of the MobileDiff page altogether or reduce the code needed for that page. Anything you can do in your work to help reduce the lines of code in SpecialMobileDiff and InlineDifferenceEngine and would make life easier for everyone :)

Hey @Lea_Lacroix_WMDE !
How can we help here? The styling changes look simple based on mock.
Is there any prototype / code we in reading web can deploy to http://reading-web-staging.wmflabs.org/ to replicate the new diffs and start exploring what work looks like on our end?

Given the arrow should be actionable - e.g. an anchor element, an HTML structure like so seems useful:

<DiffWrapper>
  <DiffContent/>
  <AnchorTag/>
</DiffWrapper>
<DiffWrapper>
  <DiffContent/>
</DiffWrapper>
<DiffWrapper>
  <AnchorTag/>
  <DiffContent/>
</DiffWrapper>

Does this exist or is this task about making that exist?

Should we create a separate task for the work on our end or would you rather do that when you are ready for us to help you?

Hi @Jdlrobson I think you meant me :) We don't have a prototype yet, which is why we put T187801: Set up test server that fakes backend moved paragraph changes in our current sprint. Would that help you? If yes, could you please list all the people who should get admin access for thorough testing on the test server? (I will post the request on that ticket too)

Apart from the examples given on the test server, below you will find the current HTML frames, context, additions, deletions and changes stay the same.

Context/Copy
<div class="mw-diff-inline-context">TEXT</div>
Additions
<div class="mw-diff-inline-added"><ins>TEXT</ins></div>
Deletions
<div class="mw-diff-inline-deleted"><del>TEXT</del></div>
Changes
<div class="mw-diff-inline-changed">CONTEXT <del>DELETED TEXT</del> CONTEXT <ins>ADDED TEXT</ins></div>

Moved paragraphs get there own classes that will also help to get context on if it is the div of the source or the destination and if it was moved up or down. Anchor name tags are always add at the front.

Currently the idea for the potions of the links to jump to the corresponding anchor is not quite clear. At the moment they are at the end / at the start depending on if the paragraph moved down or up. - I guess it would make more sense to put the at the end / start depending on if it is the source or destination. - Any thoughts on that?

Moves ( source at the top )

<div class="mw-diff-inline-moved mw-diff-inline-moved-source mw-diff-inline-moved-downwards">
	<a name="movedpara_1_0_lhs"></a>
	MOVED LINE
	<a class="mw-diff-movedpara-left" data-title-tag="new" href="#movedpara_5_0_rhs">▼</a>
</div>

Move ( destination at the bottom )

<div class="mw-diff-inline-moved mw-diff-inline-moved-destination mw-diff-inline-moved-upwards">
	<a name="movedpara_5_0_rhs"></a>
	<a class="mw-diff-movedpara-right" data-title-tag="old" href="#movedpara_1_0_lhs">▲</a>
	MOVED LINE
</div>

Changes in a moved paragraph are only shown at the new location

Source

<div class="mw-diff-inline-moved mw-diff-inline-moved-source mw-diff-inline-moved-downwards">
	<a name="movedpara_1_0_lhs"></a>
	TEXT
	<a class="mw-diff-movedpara-left" data-title-tag="new" href="#movedpara_5_0_rhs">▼</a>
</div>

Destination

<div class="mw-diff-inline-moved mw-diff-inline-moved-destination mw-diff-inline-moved-upwards">
	<a name="movedpara_5_0_rhs"></a>
	<a class="mw-diff-movedpara-right" data-title-tag="old" href="#movedpara_1_0_lhs">▲</a>
	<ins>ADDED</ins> TEXT <del>DELETED</del>
</div>

data-title-tag="new" and data-title-tag="old" are placeholders that in the desktop diff are replaced by i18n title tags with text of diff-paragraph-moved-tonew and diff-paragraph-moved-toold message keys.

@ovasileva, is there already a ticket we should add as a child or should we create one for the Readers Web work needed?