Page MenuHomePhabricator

Implement new design for moved paragraphs in diffs on mobile
Closed, ResolvedPublic3 Story Points

Description

wikidiff2 allows identifying paragraphs that have moved in diffs improving the readability of diffs

This has been enabled here:
http://reading-web-staging.wmflabs.org/wiki/Special:MobileDiff/9?useformat=mobile

The reading web team will update the design of the diff page so that this can be enabled in production.

Developer notes

To enable locally with vagrant enable the wikidiff2 role and add the following config:

ini_set("wikidiff2.moved_line_threshold", 0.5);
ini_set("wikidiff2.change_threshold", 0.2);

$wgWikiDiff2MovedParagraphDetectionCutoff = 30;
ini_set("wikidiff2.moved_paragraph_detection_cutoff_mobile", 30);

Also defined here:
https://wmde-wikidiff2-mobile.wmflabs.org/core/index.php/Special:MobileDiff/1455 but disabled.

Mock:

https://wikimedia.invisionapp.com/share/3HEQCYR25#/screens/266827752

Sign off steps

Talk to Wikimedia DE about the plan for deploying the changes.

QA Steps

Visit http://reading-web-staging.wmflabs.org/wiki/Special:MobileDiff/9?useformat=mobile and confirm design matches mock.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 15 2018, 7:56 PM
ovasileva added a subscriber: ovasileva.
ovasileva triaged this task as Normal priority.Jun 19 2018, 4:29 PM
ovasileva set the point value for this task to 3.Jun 19 2018, 4:51 PM

@alexhollender this estimation assumes that the scrolling effect is default browser scrolling. Invision uses a fancy bezier curve type scroll effect and we assumed this was not part of the mock. Please let us know if it is as that will considerably increase the size of the estimation.

@Jdlrobson would we be using any JS to do this, or more like an anchor tag HTML-only deal? It seems like the basic window.scroll function has a "smooth" option (https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll).

@Jdlrobson would we be using any JS to do this, or more like an anchor tag HTML-only deal? It seems like the basic window.scroll function has a "smooth" option (https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll).

There's a few accessibility concerns to be wary of when doing this https://css-tricks.com/snippets/jquery/smooth-scrolling/
Is this something we'd potential want for all internal hash fragments e.g. when we work on T197718 or is this just something for the diff page? I've done a patch for just this https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/441144 but I wonder if there's a larger problem that would be worth solving here to make the UI feel a lot more slick

Change 441144 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Smooth scrolling for jumping between moved paragraphs

https://gerrit.wikimedia.org/r/441144

Change 441143 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Show moved diffs in mobile view when present

https://gerrit.wikimedia.org/r/441143

Patch is live on http://reading-web-staging.wmflabs.org/wiki/Special:MobileDiff/9?useformat=mobile with the CSS and JS behaviour - note the single red/green background capture has been documented as a bug in wikidiff2 in T197729

Is this something we'd potential want for all internal hash fragments e.g. when we work on T197718 or is this just something for the diff page?

I think it's safe to say that this is something we'd want to implement as the default behavior across the site. There may be some cases where we want to turn it off, but I can't think of any yet.

I wonder if there's a larger problem that would be worth solving here to make the UI feel a lot more slick

Can you explain what you're thinking?

What you've said - would we want to use it on all links or links in certain parts of the UI. Meddling with link click handlers is a little risky as if we do it badly we can break site navigation so it should have its own task rather than be sneaked in just for the diff view.

We can do it just for the diff view, but that feels like introducing tech debt when we want to do it everything so would prefer to do it properly if the plan is to do it everywhere in the UI.

We'd want to use it everywhere in Minerva. I agree that it seems like a larger change. I've made a note to myself to play around a bit and create a separate task for this. Happy to skip it for the diff view.

Change 441144 abandoned by Jdlrobson:
Smooth scrolling for jumping between moved paragraphs

Reason:
Deferring till later

https://gerrit.wikimedia.org/r/441144

Change 441143 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Show moved diffs in mobile view when present

https://gerrit.wikimedia.org/r/441143

  • can we make the entire yellow area tappable, while still allowing text selection incase people want to copy&paste some of the text from the highlighted paragraph?
  • can we add a 50px offset so you land with the respective paragraph you're navigating to 50px below the top of the screen?

Change 441983 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] WIP: Leave 50px offset from top of moved paragraph

https://gerrit.wikimedia.org/r/441983

Jdlrobson added a subscriber: Jdrewniak.

an we add a 50px offset so you land with the respective paragraph you're navigating to 50px below the top of the screen?

We can. I've put a patch up on staging (can you check it's what you're asking for?). Can you also explain why so I can document in the code why we are doing this?

can we make the entire yellow area tappable, while still allowing text selection incase people want to copy&paste some of the text from the highlighted paragraph?

I can do this, but it will indeed prevent users from being able to highlight text. Unless @Jdrewniak has any tricks up his sleeve?

can we add a 50px offset so you land with the respective paragraph you're navigating to 50px below the top of the screen?

is it intentional that the styling/placement of the arrow on https://wmde-wikidiff2-mobile.wmflabs.org/core/index.php/Special:MobileDiff/1455 differs from the one on http://reading-web-staging.wmflabs.org/wiki/Special:MobileDiff/9?useformat=mobile?

Yup. The former doesn't belong to us. Please ignore. Only look at the latter.

mooth scroll is working on Chrome desktop but not Chrome mobile, Safari mobile, or Safari desktop.

We disabled smooth scroll per https://phabricator.wikimedia.org/T197491#4303202 so that shouldn't be present anymore.

Please push back to needs more work when answered!

Jdlrobson updated the task description. (Show Details)Jun 25 2018, 9:20 PM

@Jdlrobson I think we're all set here.

50px offset - this is just so that the user can be confident that they are starting at the top of the respective paragraph (i.e. that there is no part of the yellow block that is above the top of the screen)

Entire area tappable - I'm going to assume that copy & pasting text is more important here than a large tap area. If @Jdrewniak knows a way to get both then great, otherwise I'm fine leaving it as is.

Smooth scroll - gotcha, verified that it's off

https://gerrit.wikimedia.org/r/441983 is the patch that needs review in case that's not clear!

Change 441983 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Leave 50px offset from top of moved paragraph

https://gerrit.wikimedia.org/r/441983

Jdlrobson removed a project: Patch-For-Review.
Jdlrobson updated the task description. (Show Details)
Vvjjkkii renamed this task from Implement new design for moved paragraphs in diffs on mobile to gtaaaaaaaa.Jul 1 2018, 1:03 AM
Vvjjkkii removed alexhollender as the assignee of this task.
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from gtaaaaaaaa to Implement new design for moved paragraphs in diffs on mobile.Jul 2 2018, 5:32 AM
CommunityTechBot assigned this task to alexhollender.
CommunityTechBot lowered the priority of this task from High to Normal.
CommunityTechBot set the point value for this task to 3.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.

@Jdlrobson the offset looks good. Up/down arrows are working as expected.

Looks good on staging across a variety of mobile browsers.





@Lea_WMDE, @Jdlrobson - looks good. @Lea_WMDE - should we set up a deployment task/do you need anything more from us before we hand this back to you?

@Jdlrobson - minor note - this doesn't seem to be working on staging anymore. Just making sure that's expected.

Since these patches have been merged to master, I've rebased MobileFrontend on readingwebstaging and checked the wikidiff2 config. The results vary depending on the configuration and diff. For example, http://reading-web-staging.wmflabs.org/wiki/Special:MobileDiff/5 with

ini_set("wikidiff2.moved_line_threshold", 1);
ini_set("wikidiff2.change_threshold", 1);

$wgWikiDiff2MovedParagraphDetectionCutoff = 30000;
ini_set("wikidiff2.moved_paragraph_detection_cutoff_mobile", 30000);

And the same page with the recommended config:

ini_set("wikidiff2.moved_line_threshold", 0.5);
ini_set("wikidiff2.change_threshold", 0.2);

$wgWikiDiff2MovedParagraphDetectionCutoff = 30;
ini_set("wikidiff2.moved_paragraph_detection_cutoff_mobile", 30);

I believe this is working correctly on staging now given the above config.

Olga this is not done yet. We are still waiting on resolution for T197729. The green square red square above moved paragraphs is always present.

The proposal is to hide those but we need help from WIkimediaDE to do that. It would help if you could facilitate that conversation!

Jdlrobson reassigned this task from ABorbaWMF to ovasileva.Jul 5 2018, 9:07 PM
Jdlrobson added a subscriber: ABorbaWMF.

I've written https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/444755/ to move arrows outside the the moved paragraph section.
I've also written https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/444756/ to capture why T197729 would be helpful.
@ovasileva @alexhollender and I are chatting separately about options including revisiting the color choices separately.

Change 444755 had a related patch set uploaded (by Phuedx; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Move arrows outside diff

https://gerrit.wikimedia.org/r/444755

ovasileva closed this task as Resolved.Jul 10 2018, 2:14 PM

Closing based on T197729#4411388. Let's continue tracking follow-up work on that task for now.

Change 444755 abandoned by Jdlrobson:
Move arrows outside diff

Reason:
POC

https://gerrit.wikimedia.org/r/444755