@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).

In T197491#4300353, @alexhollender wrote:

@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?

• 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?
• smooth scroll is working on Chrome desktop but not Chrome mobile, Safari mobile, or Safari desktop. This is not a major concern as we agreed that we don't need to implement smooth scrolling in this ticket, but I was just wondering if it works in Chrome desktop if perhaps we can get it working in other browsers as well?

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

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 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!

Blocked by T197093

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 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!

☝️ per T197491#4400205.

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

Change 444755 abandoned by Jdlrobson:
Move arrows outside diff

Reason:
POC

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