Page MenuHomePhabricator

UserMenu: Disable red links style: content-links feature creates overly specific styles relating to #p-personal
Closed, ResolvedPublic3 Estimated Story Points

Description

The content-links feature includes a very specific rule that does not belong there relating to the #p-personal menu that seems to exist only for the Vector skin:
https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.links.less#L7

In Vector, a designer has requested that we disable the red link color in this menu T276561#7070166 - this is a skin-level decision and skins should not have to create overly specific selectors to do that kind of thing (see T282254).

It is proposed that styles scoped to #p-personal a.new are dropped from the content-links feature and that we update skins to not require this rule.

Changes

  • Update required in CologneBlue - it uses #quickbar span.new a rather than #quickbar .new a to achieve the same goal
  • Update required in Vector to copy across the rule
  • Remove the rule in core.

Benefits

Apart from giving more control to the skin, this fixes a bug with Monobook which does not style red links consistently (currently the red link in personal tools is inconsistent with the rest of the page)

QA

Screen Shot 2021-05-27 at 12.22.18 PM.png (198×700 px, 30 KB)

QA Results - Beta

ACStatusDetails
1T282884#7160064

QA Results - Prod

ACStatusDetails
1T282884#7163689

Event Timeline

Jdlrobson renamed this task from content-links feature creates overly specific styles relating to #p-personal to UserMenu: Disable red links style: content-links feature creates overly specific styles relating to #p-personal.May 14 2021, 4:26 PM
Jdlrobson assigned this task to ovasileva.
Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
Jdlrobson added a subscriber: ovasileva.

Change 695259 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/CologneBlue@master] Add CSS selector for red-links in the `#p-personal` menu

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

Change 695259 merged by jenkins-bot:

[mediawiki/skins/CologneBlue@master] Add CSS selector for red-links in the `#p-personal` menu

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

Change 696608 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/core@master] Remove Vector specific CSS selector for red-links in personal menu

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

Change 696608 merged by jenkins-bot:

[mediawiki/core@master] Remove Vector specific CSS selector for red-links in personal menu

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

Edtadros subscribed.

@Jdlrobson When I go to the URL in the test steps I get the following (for a new user):

Screen Shot 2021-06-09 at 11.49.15 PM.png (440×1 px, 106 KB)

This is different than the image in the QA steps. Please confirm if this is a pass or fail.

Jdlrobson updated the task description. (Show Details)

Sorry, the link was wrong. This one is a desktop only change.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

login as a user with no user page (use a new account if not sure)

AC1: On https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?useskinversion=1 confirm the link in the top right is red:

Screen Shot 2021-06-16 at 4.12.24 PM.png (904×1 px, 333 KB)

@Jdlrobson There are a couple of red links. Just to be sure, you're only concerned with the user name, correct?

Yep! This is a pass. Sandbox and talk can be ignored here.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

login as a user with no user page (use a new account if not sure)

AC1: On https://en.wikipedia.org/wiki/Main_Page?useskinversion=1 confirm the link in the top right is red:

Screen Shot 2021-06-19 at 10.38.59 AM.png (279×1 px, 97 KB)