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:

• https://patchdemo.wmflabs.org/wikis/cf5f8b47bb/w/index.php?title=Main_Page&diff=151&oldid=1
• https://patchdemo.wmflabs.org/wikis/cf5f8b47bb/w/index.php?title=Main_Page&diff=151&oldid=1&useskin=minerva&debug=1

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

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

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

In T353478#9409479, @JSengupta-WMF wrote:

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.

	{F41602450}
Diff is pushed below the window	Diff 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?

In T353479#9410190, @Jdlrobson wrote:

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.

In T353479#9418429, @JSengupta-WMF wrote:

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?

Unfortunately not.

How about showing a jump to link like this:

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

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

In T353479#9422312, @Jdlrobson wrote:

How about showing a jump to link like this:

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

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:

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

I tried out the suggestion from @Samwalton9-WMF and it's not too bad:

https://patchdemo.wmflabs.org/wikis/36bb2d6d1e/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&diff-type=inline
https://patchdemo.wmflabs.org/wikis/36bb2d6d1e/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&diff-type=inline&mobileaction=toggle_view_mobile

Let me know what you think.

In T353479#9447990, @Jdlrobson wrote:

I tried out the suggestion from @Samwalton9-WMF and it's not too bad:

https://patchdemo.wmflabs.org/wikis/36bb2d6d1e/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&diff-type=inline
https://patchdemo.wmflabs.org/wikis/36bb2d6d1e/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&diff-type=inline&mobileaction=toggle_view_mobile

Let me know what you think.

I don't hate it! At mobile screen widths the popup for the final line (deleted) doesn't display for me for some reason.

@JSengupta-WMF what do you think of the popup approach using OOUI in https://patchdemo.wmflabs.org/wikis/36bb2d6d1e/w/index.php?title=Main_Page&diff=151&oldid=1&diffonly=1&diff-type=inline ?

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

@JSengupta-WMF yes! done:

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

✅ 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.

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

There seemed to be many related tasks, can someone point me to a specific sub task tracking this problem:

mobilefront end diff legend coloring does not match the rest of the page, example: