Page MenuHomePhabricator

History, Special:Contributions, Special:RecentChanges, Special:Watchlist should be fully skinnable - use pseudo elements for separating elements
Closed, ResolvedPublic

Assigned To
None
Authored By
Jdlrobson
Sep 26 2018, 8:50 PM
Referenced Files
F28212598: Screen Shot 2019-02-13 at 3.13.18 PM.png
Feb 13 2019, 11:13 PM
F28212599: Screen Shot 2019-02-13 at 3.13.15 PM.png
Feb 13 2019, 11:13 PM
F28212177: Screen Shot 2019-02-13 at 2.14.07 PM.png
Feb 13 2019, 10:35 PM
F27933899: Screen Shot 2019-01-17 at 5.58.47 PM.png
Jan 18 2019, 2:04 AM
F27933897: Screen Shot 2019-01-17 at 5.58.57 PM.png
Jan 18 2019, 2:04 AM
F27933902: Screen Shot 2019-01-17 at 5.59.52 PM.png
Jan 18 2019, 2:04 AM
F27933900: Screen Shot 2019-01-17 at 5.59.31 PM.png
Jan 18 2019, 2:04 AM
Tokens
"Love" token, awarded by alexhollender_WMF."Like" token, awarded by Volker_E.

Description

NOTE: current status T205581#4891329

Jon Robson has become the only person who understands the special pages maintained by MobileFrontend. He is desperate to find a path of least resistance to removing those special pages. The fundamental problem is special pages that make use of feeds cannot be easily skinned. This forced the mobile site to re-invent these pages for mobile. I'm keen to reduce some(all?) of this code by making upstream changes in core that provide more flexibility to skin developers.

Screen Shot 2018-09-26 at 1.49.09 PM.png (28×698 px, 13 KB)

In this row, the characters "(", "...", ")" and "|" are part of the output and thus cannot be skinned differently by other skins.

Pseudo elements solve this by keeping the status quo for Vector while enabling other skins to do as they wish.

Currently:

<span class="mw-tag-markers">(<a href="/w/index.php?title=Special:Tags" title="Special:Tags">Tags</a>: <span class="mw-tag-marker mw-tag-marker-mobile_edit">Mobile edit</span>, <span class="mw-tag-marker mw-tag-marker-mobile_web_edit">Mobile web edit</span>, <span class="mw-tag-marker mw-tag-marker-mw-contentmodelchange">content model change</span>)</span>

Proposed HTML:

<span class="mw-tag-markers"><a href="/w/index.php?title=Special:Tags" title="Special:Tags">Tags</a>: <span class="mw-tag-marker mw-tag-marker-mobile_edit">Mobile edit</span>, <span class="mw-tag-marker mw-tag-marker-mobile_web_edit">Mobile web edit</span>, <span class="mw-tag-marker mw-tag-marker-mw-contentmodelchange">content model change</span></span>

Visual changes: None

To start with we will focus on Special:Contributions, and then expand out to other special pages e.g. Vector

Checklist

For Special:Contributions:

  • Provide a mechanism for handling '. .' separator in CSS

Screen Shot 2018-11-12 at 3.47.54 PM.png (30×63 px, 7 KB)

  • Provide a mechanism for handling '' | ' separator between diff/history links and brackets surrounding them

Screen Shot 2018-11-12 at 3.51.50 PM.png (25×77 px, 7 KB)

  • Provide a mechanism for wrapping number of bytes change with CSS. Use it on Special:Contributions. gerrit

Screen Shot 2018-11-12 at 3.53.42 PM.png (89×42 px, 9 KB)

  • Provide a mechanism for wrapping comment in brackets with CSS. Use it on Special:Contributions. gerrit

Screen Shot 2018-11-12 at 3.53.29 PM.png (33×413 px, 12 KB)

  • Remove hardcoded parentheticals from ChangesList mw-tag-markers. Use it on Special:Contributions.gerrit

Screen Shot 2018-11-12 at 3.53.04 PM.png (24×210 px, 9 KB)

  • pseudo elements used on uctop gerrit

Screen Shot 2018-11-15 at 6.00.43 PM.png (26×69 px, 7 KB)

  • pseudo elements used on mw-usertoollinks on Special:RecentChanges gerrit

Screen Shot 2018-11-13 at 5.04.03 PM.png (26×143 px, 9 KB)

  • Watchlist and RecentChanges style diff and hist links using pseudo elements gerrit
  • History page uses mw-changeslist-links for mw-history-histlinks, history-size, mw-usertoollinks and mw-changeslist-separator and mw-history-undo

Screen Shot 2019-02-13 at 2.14.07 PM.png (42×103 px, 5 KB)
https://gerrit.wikimedia.org/r/#/c/mediawiki/core/ /490485 History page is now using pseudo elements for presentation

Sign off steps

RecentChanges has been descoped and is tracked in T219348
Using these in Minerva is descoped and tracked in T219349

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 473144 merged by jenkins-bot:
[mediawiki/core@master] Accessibility: Improve contributions navigation for screen reader users

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

Change 473314 merged by jenkins-bot:
[mediawiki/core@master] Wrap the "bytes changed" indication on Special:Contributions with CSS

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

Change 473991 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] ContribsPager: Don't hardcode brackets in uctop information

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

Jdlrobson updated the task description. (Show Details)
Dinoguy1000 renamed this task from Special:Contributions, Special:RecentChanges, Special:Watchlist should be fully skinable - use pseudo elements for separating elements to Special:Contributions, Special:RecentChanges, Special:Watchlist should be fully skinnable - use pseudo elements for separating elements.Nov 16 2018, 5:55 AM

Change 473991 merged by jenkins-bot:
[mediawiki/core@master] ContribsPager: Don't hardcode brackets in uctop information

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

Change 473315 merged by jenkins-bot:
[mediawiki/core@master] Changelist "tags" item is wrapped in brackets via CSS

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

Change 462008 merged by jenkins-bot:
[mediawiki/core@master] Remove hardcoded parentheticals from ChangesList "comments"

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

Change 475239 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Separate content parts of mw-usertoollinks from presentation

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

Change 475240 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] ChangesList separates content elements from presentation

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

Change 462008 merged by jenkins-bot:
[mediawiki/core@master] Remove hardcoded parentheticals from ChangesList "comments"

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

This caused a regression on action=history:

Screenshot_2018-11-22 Revision history of Sections - testwiki.png (820×1 px, 93 KB)

Change 475356 had a related patch set uploaded (by Legoktm; owner: Legoktm):
[mediawiki/core@master] Revert "Remove hardcoded parentheticals from ChangesList "comments""

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

Change 475359 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Differentiate comments with and without brackets

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

Change 475359 merged by jenkins-bot:
[mediawiki/core@master] Differentiate comments with and without brackets

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

Change 475356 abandoned by Jdlrobson:
Revert "Remove hardcoded parentheticals from ChangesList "comments""

Reason:
Revert no longer necessary given https://gerrit.wikimedia.org/r/#/c/mediawiki/core/ /475359

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

I appreciate the return of the list items back to the way they were, but now there is no space between the edit summary and the word "current" (where it appears), so for example my screen reader now reads one of my latest edit summaries as "wikilinkcurrent", which sounds like "wikilinkerant". Most screen readers do not distinguish text attributes unless told to do so.

@Graham87 As far as I see the is a whitespace in the HTML in all examples that I check. Can you link an example where you find

<span class="mw-uctop">current</span>

without a whitespace before?

at https://en.wikipedia.org/wiki/Special:Contributions/Graham87 ... there is a line break between the <span class="comment comment--without-parentheses"> ... tag and the "<span class="mw-uctop">current</span> ..." tag, but not a space character; adding one would fix this problem. On some further testing with JAWS and NVVDA, the two most popular Windos screen readers, it only occurs in the former program, and only under the default scheme where everything is virtualised so it's easier to read, but the layout is flattened.

A newline is also a whitespace. Does a space (U 0020) instead of the newline (U 000A) prevent problem in the screen reader?

Change 475240 merged by jenkins-bot:
[mediawiki/core@master] ChangesList separates content elements from presentation

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

Change 475239 merged by jenkins-bot:
[mediawiki/core@master] Separate content parts of mw-usertoollinks from presentation

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

Update: These pages are slowly becoming much more skinnable. As these screenshots show, these views need a lot of standardising. The HTML greatly differs across these pages which is unfortunate.

Special:Watchlist

Screen Shot 2019-01-17 at 5.58.57 PM.png (471×513 px, 50 KB)

Special:Contributions

Screen Shot 2019-01-17 at 5.58.47 PM.png (389×331 px, 39 KB)

Special:RecentChanges

Screen Shot 2019-01-17 at 5.59.31 PM.png (571×522 px, 75 KB)

History (needs the most work)

Screen Shot 2019-01-17 at 5.59.52 PM.png (559×529 px, 76 KB)

Change 490485 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] History page is now using pseudo elements for presentation

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

This comment was removed by Jdlrobson.

An comparison of OOUIfied Special Page would indicate the usefulness of this even stronger…

Jdlrobson renamed this task from Special:Contributions, Special:RecentChanges, Special:Watchlist should be fully skinnable - use pseudo elements for separating elements to History, Special:Contributions, Special:RecentChanges, Special:Watchlist should be fully skinnable - use pseudo elements for separating elements.Feb 21 2019, 6:31 PM

Change 490485 abandoned by Jdlrobson:
History page is now using pseudo elements for presentation

Reason:
Preserved on https://phabricator.wikimedia.org/T216420

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

Change 490485 restored by Jdlrobson:
History page is now using pseudo elements for presentation

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

Jdlrobson updated the task description. (Show Details)

Change 490485 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] History page is now using pseudo elements for presentation

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

Change 499016 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Allow skins full control of Contributions/History styles

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

Change 490485 merged by jenkins-bot:
[mediawiki/core@master] History page is now using pseudo elements for presentation

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

Jdlrobson updated the task description. (Show Details)

Change 499016 merged by jenkins-bot:
[mediawiki/core@master] Allow skins full control of Contributions/History styles

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

Change 499360 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Log entries can be rendered with parentheses in HTML

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

Jdlrobson updated the task description. (Show Details)

Change 463141 abandoned by Jdlrobson:
Use pseudo elements to style changelist-separators on other special pages

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