Page MenuHomePhabricator

Define changes within wikidiff2 for mobile
Open, NormalPublic

Description

This ticket is for tracking progress on the wikidiff2 changes, as well as serving as a handover document for the frontend part.

Background:
WMDE's TCB-Team will extend the wikidiff2 library so that the mobile view can show moved paragraphs and the changes within.
The WMF will then improve the design for mobile, so that moves are easily understandable.
Additional background is shared in the wikitech-l announcement and on wiki.

What WMDE will do:

  • Changes within the moved paragraphs will only be displayed in the new location. The old location will show the paragraph in "deleted style"
  • The diff html that comes out of wikidiff2 will be changed to contain links between the two locations, and markup to indicate what which paragraph is. In detail this means:

TODO

Event Timeline

Lea_WMDE created this task.Nov 9 2017, 12:06 PM
Restricted Application added a project: TCB-Team. · View Herald TranscriptNov 9 2017, 12:06 PM
Lea_WMDE moved this task from Proposed to Todo on the WMDE-QWERTY-Team board.Nov 9 2017, 12:47 PM

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.

Tobi_WMDE_SW renamed this task from Changes within wikidiff2 for mobile to Define changes within wikidiff2 for mobile.Nov 17 2017, 1:08 PM
Tobi_WMDE_SW moved this task from Sprint Backlog to Review on the WMDE-QWERTY-Sprint-2017-11-14 board.
Tobi_WMDE_SW closed this task as Resolved.Nov 28 2017, 8:42 AM
Tobi_WMDE_SW claimed this task.
Tobi_WMDE_SW moved this task from Currently in sprint to Done on the WMDE-QWERTY-Team board.

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 :)

Lea_WMDE reopened this task as Open.Feb 6 2018, 2:52 PM
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE moved this task from Done to Todo on the WMDE-QWERTY-Team board.

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.

Tobi_WMDE_SW removed Tobi_WMDE_SW as the assignee of this task.Apr 17 2018, 10:20 AM
Niedzielski updated the task description. (Show Details)Jun 11 2018, 3:48 PM

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