Page MenuHomePhabricator

Diff legend does not display in mobile HTML
Closed, ResolvedPublic

Description

Expected:

there should be a key explaining the diff colos

Actual

There isn't
It should work like https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Spain&diff=prev&diffonly=1&oldid=534766&useskin=minerva

QA Results - Beta

ACStatusDetails
1T353479#9540504
2T353479#9540504

QA Results - Prod

ACStatusDetails
1T353479#9540517
2T353479#9540517

Related Objects

StatusSubtypeAssignedTask
Declineddchen
OpenNone
OpenNone
DuplicateNone
OpenFeatureNone
OpenBUG REPORTNone
OpenNone
StalledNone
OpenFeatureNone
DuplicateNone
ResolvedNone
OpenNone
OpenNone
OpenFeatureNone
OpenNone
ResolvedNone
ResolvedNone
OpenFeatureNone
OpenNone
ResolvedHalfak
OpenNone
OpenNone
OpenFeatureNone
StalledNone
OpenNone
OpenNone
OpenNone
ResolvedPetrb
OpenNone
OpenNone
Resolvedtstarling
OpenNone
DeclinedNone
OpenBUG REPORTNone
ResolvedNone
ResolvedNone
ResolvedJSengupta-WMF

Event Timeline

Izno updated the task description. (Show Details)

Talking to community tech team it sounds like this was conciously descoped so we are going to need design input.

@JSengupta-WMF please take a look at my proposal in the patch demo.
Demo links:

I propose the following changes. Are you comfortable with us making these changes?

  1. We add a label to the key to explain it is a key

Screenshot 2023-12-14 at 3.39.11 PM.png (1×2 px, 320 KB)

  1. At lower resolutions (as you resize the browser) we move the key below the diff.

Screenshot 2023-12-14 at 3.43.31 PM.png (1×974 px, 176 KB)

Change 983284 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Make the diff legend responsive

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

Change 983285 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Add a legend label to the diff legend

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

Change 983282 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Remove unnecessary MobileFrontend diff hook

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

Hi, Am I looking at the mobile resolution? .... when I look at it on mobile it shows different color and the feature is not available.

Sorry for the confusion. If you are viewing the diff and it is showing red/green you are viewing the deprecated page that we're removing.
I've created a less confusing patchdemo to make it impossible to see the deprecated page:
https://patchdemo.wmflabs.org/wikis/0c6936f0ca/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&mobileaction=toggle_view_mobile

However, if I open it on desktop and reduce the resolution to mobile, the legends go from top to bottom. I was wondering if it's possible to keep the legends still on the top. In case the diffs are too long, the user has to scroll all the way to the end to read them.

Moving them to the bottom was my proposed change and the one I wanted you to consider.

If you put them at the top of the diff, the legend becomes visually disconnected from the diff itself and it's not obvious what it belongs to. It also pushes down information such as modified date and edit summary which will annoy editors as it cannot be dismissed. The visual diff tab is already taking up significant screen real estate there.

image.png (1×774 px, 143 KB)
{F41602450}
Diff is pushed below the windowDiff is discoverable - peeks out of bottom of screen

Change 983282 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Remove unnecessary MobileFrontend diff hook

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

Looks good. I wonder if we keep the legend at the top still under the buttons (left aligned and push the content down by another line, how would it look. My concern remains the same that if the diff is too long, it will be at the end of the page. But if users generally know what the colors mean then showing it at the bottom doesn't matter.

Thanks for weighing in. We could perhaps add some kind of help icon on top that links to the bottom. What do you think about that?

But if users generally know what the colors mean then showing it at the bottom doesn't matter.

@Samwalton9 what do you think?

Thanks for weighing in. We could perhaps add some kind of help icon on top that links to the bottom. What do you think about that?

I like the idea of a link down to the legend at the top. Another idea, perhaps in addition - what if we had some kind of popup containing the legend if you tap any highlighted text?

But if users generally know what the colors mean then showing it at the bottom doesn't matter.

@Samwalton9 what do you think?

This is the core problem, I think - although users who are well accustomed to editing on desktop will know what these colours mean, my concern is that we don't want new users to be confused by this. A significant % of new editors are mobile-only, and they may never see the two-column desktop layout.

There is also tooltips on all the highlights displaying "added"/"deleted" so now that I think of it, showing the legends at the bottom should also work.

There is also tooltips on all the highlights displaying "added"/"deleted" so now that I think of it, showing the legends at the bottom should also work.

Are these tooltips visible on mobile?

How about showing a jump to link like this:

Screenshot 2023-12-21 at 12.00.49 PM.png (765×485 px, 125 KB)

It would also act as a helpful jump to bottom of the diff link.

Screenshot 2023-12-21 at 12.00.04 PM.png (219×483 px, 20 KB)

Change 983285 abandoned by Jdlrobson:

[mediawiki/core@master] Add a legend label to the diff legend

Reason:

Folded into https://gerrit.wikimedia.org/r/c/mediawiki/core/+/983284/4

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

How about showing a jump to link like this:

Screenshot 2023-12-21 at 12.00.49 PM.png (765×485 px, 125 KB)

It would also act as a helpful jump to bottom of the diff link.

Screenshot 2023-12-21 at 12.00.04 PM.png (219×483 px, 20 KB)

I don't love it, feels clunky, and doesn't help with long diffs if the user is already partially scrolled down. What about the proposal above to have a small popup (I don't know the right term) when users tap highlighted text? Something like this:

Screenshot 2024-01-09 at 17.01.05.png (832×1 px, 388 KB)

There was also a proposal elsewhere that the removed text should have a strikethrough, has that been considered recently?

Yeah the pop up is really clunky. Is it a system component?

We would use the PopupWidget. https://www.mediawiki.org/wiki/OOUI/Widgets/Popups.
I will create that today for comparison.

Change 989235 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Clicking added or deleted content in diff shows tooltip.

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/284b468b83/w

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/284b468b83/w/

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/ae4a5525de/w

Looks cleaner. Can the boxes be of smaller size encompassing the text only?

Change 983284 abandoned by Jdlrobson:

[mediawiki/core@master] Make the diff legend responsive

Reason:

Abandoned in favor of approach in https://gerrit.wikimedia.org/r/c/mediawiki/core/+/989235/

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

Change 989235 merged by jenkins-bot:

[mediawiki/core@master] Clicking added or deleted content in diff shows tooltip.

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Spain&diff=prev&diffonly=1&oldid=534766&useskin=minerva
Make sure browser is desktop resolution > 1000px
✅ AC1: there should be a key explaining the diff colors

screenshot 501.png (1×1 px, 223 KB)

✅ AC2: At 720px width and below the key dissappears and when clicking on the diff text a popup bubble appears indicating Content added/Contend deleted.

screenshot 251.mov.gif (1×720 px, 642 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.org/w/index.php?title=Jonathan_M._Wainwright_(general)&diff=next&oldid=777501&diffonly=1
Make sure browser is desktop resolution > 1000px
✅ AC1: there should be a key explaining the diff colors

screenshot 503.png (1×1 px, 203 KB)

✅ AC2: At 720px width and below the key dissappears and when clicking on the diff text a popup bubble appears indicating Content added/Contend deleted.
screenshot 252.mov.gif (1×720 px, 709 KB)