Page MenuHomePhabricator

Mobile diff: inline format new line and deleted line markers
Closed, ResolvedPublic

Description

Currently the inline format new line and deleted line markers are showing up in desktop.
Ex: https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/595998
Ex: https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/596001

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptJul 18 2023, 7:15 PM
HMonroy renamed this task from Mobile diff: new line and deleted line markers to Mobile diff: inline format new line and deleted line markers.Jul 18 2023, 7:16 PM
HMonroy updated the task description. (Show Details)

Let's hide them for now as mobile diff is out of scope and we need to align the colors between desktop and mobile web as per Design System's recommendation in future.

Change 940271 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/extensions/MobileFrontend@master] Hide inline format line markers in Mobile

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

Let's hide them for now

Hide the markers but keep the empty line, or collapse it? e.g. this

T342160 mobile with space.png (237ร—1 px, 65 KB)
vs
T342160 mobile without space.png (205ร—1 px, 59 KB)

The table diff shows the empty line:

T342160 table.png (538ร—865 px, 66 KB)

T342160 inline.png (166ร—912 px, 40 KB)

@Samwilson @JSengupta-WMF Thank you for looking into this!

I believe the line markers in mobile used to show up with a background color to convey that a newline or deleted line. I reverted the markers in my local and this is what I get. I might be missing something.

Screenshot from 2023-07-21 12-19-58.png (202ร—1 px, 53 KB)

Let me know what you think.

As mentioned on T330247, the mobile site previously had a continuous background color. This was flagged on https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Not_digging_the_new_mobile_diffs
I don't see anything in any tasks that this was intentional.

Previously:

Screenshot 2023-07-21 at 1.52.40 PM.png (1ร—2 px, 410 KB)

Now

Screenshot 2023-07-21 at 1.52.26 PM.png (1ร—2 px, 525 KB)

Assuming that the new lines were not intended to separate the different lines, you'll need to move the styling to the parent elements.
e.g.

.mw-diff-inline-added {
	background-color: #75c877;
}

.mw-diff-inline-deleted {
	background-color: #e07076;
}

FWIW as a mobile user I do find the whitespace jarring. It makes diffs on mobile much harder to scan.

As mentioned on T330247, the mobile site previously had a continuous background color. This was flagged on https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Not_digging_the_new_mobile_diffs
I don't see anything in any tasks that this was intentional.

Previously:

Screenshot 2023-07-21 at 1.52.40 PM.png (1ร—2 px, 410 KB)

Now

Screenshot 2023-07-21 at 1.52.26 PM.png (1ร—2 px, 525 KB)

Assuming that the new lines were not intended to separate the different lines, you'll need to move the styling to the parent elements.
e.g.

.mw-diff-inline-added {
	background-color: #75c877;
}

.mw-diff-inline-deleted {
	background-color: #e07076;
}

FWIW as a mobile user I do find the whitespace jarring. It makes diffs on mobile much harder to scan.

We just merged https://gerrit.wikimedia.org/r/c/mediawiki/core/+/940995 to make the whitespace a bit less jarring in desktop and mobile. The issue you mentioned was introduced when trying to improve T327645: Inline Diff: Insert/delete introduce line breaks. I hope this helps. Thank you @Jdlrobson !!

Change 940271 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Hide inline format line markers in Mobile

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

@HMonroy For this task there are no more delete and new line markers for mobile diff, only on desktop. There are a couple of different issues that I came across though as seen below. Please let me know if you want me to close this task and create new ones, thanks!

OS: macOS 13.4, Windows 11
Browsers: Chrome 115, Firefox 115, Edge 114, Safari 16.5
Test Links
Desktop/new line: https://en.wikipedia.beta.wmflabs.org/w/index.php?title=R%C3%A9seau_Jean-Bernard&diff=596946&oldid=596001&diffmode=source&diff-type=inline
Desktop/delete line: https://en.wikipedia.beta.wmflabs.org/w/index.php?title=R%C3%A9seau_Jean-Bernard&diff=596001&oldid=596000&diffmode=source&diff-type=inline
Mobile/new line: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:MobileDiff/596946&diff-type=inline&diffmode=source
Mobile/delete line: https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/596001

Desktop: White space- Some have white space and some don't or not the same size for add/delete

T342160_BetterDiffs_MobileDiff_WsConnect.png (1ร—3 px, 595 KB)
T342160_BetterDiffs_MobileDiff_WsConnect2.png (958ร—1 px, 271 KB)

Mobile: Add/Delete crosses over

T342160_BetterDiffs_MobileDiff_CrossesOver2.png (889ร—1 px, 503 KB)
T342160_BetterDiffs_MobileDiff_CrossesOver.png (1ร—2 px, 274 KB)

@GMikesell-WMF thank you for looking into this. I was able to reproduce some of the crossing over and white lines in my local, but I think they are very low priority. The main issue is for users to be able to easily scan the diffs. We can close this task and see if any other issues are reported. Thanks again!

@HMonroy Ok sounds good. There are no other issues that I came across besides the ones mentioned above. Thanks for the work and I'll move this to Done!