Page MenuHomePhabricator

Change markup of Watchlist top tabs to support skinning
Closed, ResolvedPublic

Description

The watchlist has a set of tabs at the top of the page like so:

Screen Shot 2022-01-19 at 1.17.15 PM.png (160×1 px, 28 KB)

In Minerva we want to style like so:

Screen Shot 2022-01-19 at 1.16.57 PM.png (236×1 px, 31 KB)

To support this several things are needed

Acceptance criteria

[x ] Use the mediawiki.interface.helpers.styles module to provide the parentheses and pipes

  • Add classes to all the elements in the subtitle to allow them to be distinguished
  • Add a class to the selected tab.

QA

The two components touched are:

Screen Shot 2022-01-25 at 8.38.40 AM.png (78×534 px, 12 KB)

Screen Shot 2022-01-25 at 8.38.16 AM.png (184×1 px, 34 KB)

The above change should not have impacted how they appear.

Desktop

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Special:EditWatchlist and confirm styles match with production for this elements.
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Special:Watchlist and confirm the header doesn't appear at the top of the page.

Mobile

On mobile login and visit
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:MobileOptions and enable AMC mode.

  1. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:EditWatchlist and confirm styles match with production for the same elements.
  2. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Watchlist and confirm styles match with production for the same elements.

Event Timeline

Restricted Application added a subscriber: Masumrezarock100. · View Herald Transcript

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

[mediawiki/core@master] Watchlist tools should be more flexible for styling by skins

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

Change 755491 merged by jenkins-bot:

[mediawiki/core@master] Watchlist tools should be more flexible for styling by skins

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

Done QA my side and this looks good. Should we resolve this or does growth team also want to QA this?

Desktop looks identical.

Screen Shot 2022-01-27 at 10.35.50 AM.png (278×1 px, 44 KB)

Minerva looks identical AND I can style it differently in Minerva:

Screen Shot 2022-01-27 at 10.36.14 AM.png (230×1 px, 40 KB)

Etonkovidova added a subscriber: Etonkovidova.

Checked in wmf.20 - all looks good. The following was checked.

  • desktop/mobile - Special:EditWatchlist and Special:Watchlist with AMC mode
  • Minerva on desktop
  • no-JS UI