Page MenuHomePhabricator

Regression: Colour of 'new' ('red') links has changed to #d33 in Vector skin
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
RhinosF1
Aug 12 2021, 2:01 PM
Referenced Files
F34656906: Screen Shot 2021-09-26 at 9.37.55 AM.png
Sep 26 2021, 4:40 PM
F34656893: Screen Shot 2021-09-26 at 9.35.41 AM.png
Sep 26 2021, 4:40 PM
F34656891: Screen Shot 2021-09-26 at 9.31.50 AM.png
Sep 26 2021, 4:40 PM
F34656903: Screen Shot 2021-09-26 at 9.36.15 AM.png
Sep 26 2021, 4:40 PM
F34656902: Screen Shot 2021-09-26 at 9.36.10 AM.png
Sep 26 2021, 4:40 PM
F34656881: Screen Shot 2021-09-26 at 9.23.32 AM.png
Sep 26 2021, 4:33 PM
F34656877: Screen Shot 2021-09-26 at 9.08.47 AM.png
Sep 26 2021, 4:33 PM
F34656887: Screen Shot 2021-09-26 at 9.29.11 AM.png
Sep 26 2021, 4:33 PM
Tokens
"Burninate" token, awarded by Draceane.

Description

Compare https://meta.wikimedia.org/wiki/Tech#Color_of_red_links_across_Mediawiki (where first reported) with https://en.wikipedia.org/wiki/Wikipedia:Red_link

Screen Shot 2021-08-12 at 7.49.45 AM.png (68×238 px, 7 KB)

The core definition of red links for all skins is #d33, which is part of the Wikimedia Design Style Guide color palette.

In Vector (legacy) this was overriden to #ba0000 for normal 'new' ('red') and #a55858 for visited new links (and normal Vector tabs new links).

Acceptance criteria

  • Vector (legacy) should show #ba0000 for normal 'new' ('red') links
  • Vector (legacy) should turn color to #a55858 for visited 'new' ('red') links
  • Vector (legacy) should show #a55858 on Vector Tabs new links, like empty Discussion pages, both in normal and visited state
  • Vector (modern) should be unchanged and have #d33 for normal 'new' ('red') links

QA Results - Beta

QA Results - Prod

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson renamed this task from Colour of 'red' links has changed from #a55858 to #d33 in Vector skin to Regression: Colour of 'red' links has changed from #a55858 to #d33 in Vector skin.Aug 12 2021, 3:13 PM
Jdlrobson added a project: Regression.

@Jdlrobson,
For clarification, is #a55858 a new color for "new" links in Vector - https://github.com/wikimedia/Vector/blob/master/resources/common/variables.less#L15? It is a color for visited red links as well. Previously the default color was #ba0000, at least in the legacy vector on ruwiki.

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

[mediawiki/skins/Vector@master] Inherit link colors from core variables and override @color-link-new

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

Jdlrobson lowered the priority of this task from High to Medium.Aug 23 2021, 8:21 PM

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

[mediawiki/skins/Vector@master] Restore legacy Vector link color

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

Before I continue spending time working on this, in the color #a55858 less accessible than #d33 ?

My understanding is that #d33 is the preferred value, but Vector and MonoBook were overriding that for historic reasons.
What I care about as part of this task most is not introducing more legacy code.

Depending on the answer I suggest either we change the core value for all skins OR patch MonoBook and Vector (legacy only)

Change 712987 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Inherit link colors from core variables and override @color-link-new

Reason:

After more thought, given we're supporting legacy, I'd rather keep the core value for modern Vector and add a legacy specific rule: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/714415

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

Jdlrobson assigned this task to Volker_E.

@Jdlrobson: yes someone complained it was less accessible

Can we add ensuring this doesn't affect usability and if it does reverting to 1.37 blockers?

Changing of the colours is clearly in the test plan (but for some strange reason only on enwiki) so it's disappointing despite that we're still without a fix now.

@Jdlrobson: yes someone complained it was less accessible

I meant from a scientific point of view. I know we changed the red link color in the past because of data. I'm just not sure which of these 2 is the correct one. @Volker_E should know.

Changing of the colours is clearly in the test plan (but for some strange reason only on enwiki) so it's disappointing despite that we're still without a fix now.

Agreed it's disappointing, but we're doing the best we can given the people we have.

If you can't be responsible for the code you're deploying, there's a serious issue.

It was listed as a risky patch and you had a test plan. You could have checked it on beta in seconds or group0 in seconds.

If you can't be responsible for the code you're deploying, there's a serious issue.

It was listed as a risky patch and you had a test plan. You could have checked it on beta in seconds or group0 in seconds.

For the record, I got hit by a car during that deployment window and was regretfully not available. I'm on limited hours right now as a result of my injuries. As I said we're doing the best we can given the people we have. This conversation is not helping to get the answers I need to address the problem I am trying to solve.

@Volker_E I have a patch up to fix this which is https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/714415
It works on the assumption that #d33 is actually the more accessible color and what we want to get to on the long term.

If that is not the case, and we want all skins to be using #a55858 (or a third value) I suggest we go with another patch that changes the value in core.

Please let me know how to proceed.

@Jdlrobson,
For clarification, is #a55858 a new color for "new" links in Vector - https://github.com/wikimedia/Vector/blob/master/resources/common/variables.less#L15? It is a color for visited red links as well. Previously the default color was #ba0000, at least in the legacy vector on ruwiki.

This comment is correct, btw. #ba0000 (rgb(186, 0, 0)) was previous red link colour. You can verify it in Internet Archive, for example:
https://web.archive.org/web/20210514234408/https://ru.wikipedia.org/wiki/Заглавная_страница#Текущие_события

Whatever happened in the style order, the change should be reverting the colour of standard red links to #ba0000, as they are higher contrast and were the previous choice.

@RhinosF1: while accessibility of the colours is a task that is tackled in T213778: Update link colors in Vector 2022 for improved UX (and consistency), I think here we should focus on returning the (correct) old colours as soon as possible.

@stjn: unless there's time to justify it with a review. Yes, I'd rather the status quo remained in 1.37.

For the record, I got hit by a car during that deployment window and was regretfully not available. I'm on limited hours right now as a result of my injuries. As I said we're doing the best we can given the people we have. This conversation is not helping to get the answers I need to address the problem I am trying to solve.

I'm extremely sorry to hear about your injuries. Please do ask people if you need support (ever, especially as a result of something like this) and the community me included are very helpful and will always try to carry out tests if it's needed or deploy changes in your absence.

To be clear, its clear that we need to restore the color to
#ba0000. The question to @Volker_E is around approach to reduce technical debt on the long run by looking at this from a broader lens about where we want to get to.

My assumption here is if a community does not want to wait on Volker and I working this out, they should feel free to backport https://gerrit.wikimedia.org/r/c/714415 or patch Vector.css. we are committed to resolving this for 1.37

714415 looks easy enough that we could try and get someone to backport if it's merged on master so it rolls out this week. (I can do the chasing backports of master gets a +2 and works on beta.)

For the record, I got hit by a car during that deployment window and was regretfully not available. I'm on limited hours right now as a result of my injuries. As I said we're doing the best we can given the people we have. This conversation is not helping to get the answers I need to address the problem I am trying to solve.

Sorry for not noticing this comment earlier (I was asked by my colleague to repeat the question he asked earlier, so I did not read into all of them carefully enough). Best possible wishes for your recovery! <3

@stjn: unless there's time to justify it with a review. Yes, I'd rather the status quo remained in 1.37.

I always think that it’s best to return to status quo ante and then do the additional changes. While making a change to colours is probably needed (and there are opinions on that in T213778), best to first get to the fix and then take time to deliberate the future.

Change 712987 restored by Jdlrobson:

[mediawiki/skins/Vector@master] Inherit link colors from core variables and override @color-link-new

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

Change 714415 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Restore legacy Vector link color

Reason:

Not going to work because of https://phabricator.wikimedia.org/T289701 which is going to be complicated to fix.

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

@Volker_E and I have a meeting scheduled tomorrow to work out the best path forward here. There should be a fix merged on Thursday if all goes to plan.

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

[mediawiki/skins/MonoBook@master] Simplify MonoBook link styles

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

Change 715120 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] Simplify MonoBook link styles

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

Change 712987 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Inherit link colors from core variables and override @color-link-new

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

Volker could you sign this off and document why we did what we did here?

Looks like maybe it didn't work. Was there meant to be an assignment to these variables in Vector?

wmf.21 (nl.wikipedia)wmf.23 group0 (mediawiki.org)
Screenshot 2021-09-14 at 21.23.48.png (834×1 px, 199 KB)
Screenshot 2021-09-14 at 21.23.34.png (988×1 px, 222 KB)

It also seems like maybe the portlet HTML format has changed again which broke a gadget. It's possible I missed an announcement there, not sure what to do with that one. Maybe I relied on something unofficial there in my gadget. But if there was indeed a breaking change there, I suppose it would be a good time to double check whether the CSS is backward-compatible with at least the last two weeks of cached HTML generated by Vector itself (ignore my gadget for now), as otherwise this glitch might affect other parts of the interface for people after tomorrow.

It also seems like maybe the portlet HTML format has changed again which broke a gadget. It's possible I missed an announcement there, not sure what to do with that one.

(sounds like T290994)

It also seems like maybe the portlet HTML format has changed again which broke a gadget.

This is being worked on as part of T289163.

Looks like maybe it didn't work. Was there meant to be an assignment to these variables in Vector?

No this is working as expected. Please wait on @Volker_E

The first line of that task says current Vector would not be affected. (I'm not saying I prefer it remain as-is in current Vector, I'm just emphasing what your team has previously announced and what the audience has set their expectations to.)

I do think it might be beneficial for the design team's ability to announce, communicate, and take credit for their work, if that work rolled out intentionally and in one-go rather than scattered. Compare, contrast, showcase, etc. Sometimes it's good to be noticed and not hide the changes over a longer period of time.

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

[mediawiki/skins/Vector@master] Restore legacy red link in legacy Vector to `#a55858`

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

Volker_E renamed this task from Regression: Colour of 'red' links has changed from #a55858 to #d33 in Vector skin to Regression: Colour of 'new' ('red') links has changed to #d33 in Vector skin.Sep 20 2021, 12:44 PM
Volker_E updated the task description. (Show Details)

The confusion here has partly resulted from my miscommunication and unavailability due to critical, high-intensity work on the past Vue.js Designer Workshop and Developer Summit and my long-planned vacation after. I'm sorry for that.

The original intention of the changes was to reduce technical debt to centralized variables and by that simplify future changes – thanks to @Jdlrobson for picking those long-standing tasks up and successfully bringing them to a number of skins! But it rolled out solely for 'new' ('red') links then, even though the larger planned change of the color is outlined in T213778: Update link colors in Vector 2022 for improved UX (and consistency) and intact. And the was not communicated upfront and rolled out harmonized with the blue links and the visited link changes.

We, as in the Wikimedia Design team, have defined a color palette for our products a long time ago. It specifically focusses on accessible interfaces for the widest reaching use cases and differentiation of types of actions with each other.
The only big last interaction element missing from the unified & consistent (mobile and desktop) approach are the links with its colors in one product, Vector. See T153043 and T213778. And we continue to plan on rolling this out despite the rollback of the visited color here as it's an improvement for consistency and in parts for making our interface more accessible to a wider range of people.

If you have feedback on specific color issues with the proposed colors or run into unknown shortcomings, please share them in T153043 or T213778 respectively.

Change 721622 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore legacy new (red) link in legacy Vector to `#ba0000` & `#a55858` for visited

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

Edtadros subscribed.

@Jdlrobson This is what I see in beta

New VectorLegacy Vector
Screen Shot 2021-09-20 at 9.32.28 AM.png (333×444 px, 79 KB)
Screen Shot 2021-09-20 at 9.36.16 AM.png (363×303 px, 59 KB)

And in prod:

New VectorLegacy Vector
Screen Shot 2021-09-20 at 9.34.01 AM.png (326×418 px, 61 KB)
Screen Shot 2021-09-20 at 9.37.47 AM.png (324×390 px, 52 KB)

Beta New Vector, Prod New Vector, and Prod Legacy vector show red links with color #DD3333

Beta Legacy Vector shows red links with color #BA0000

Let me know what the acceptace criteria is. I don't want to assume.

@Edtadros Updated task description with acceptance criteria.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Vector (legacy) should show #ba0000 for normal 'new' ('red') links

Screen Shot 2021-09-26 at 9.08.47 AM.png (482×991 px, 199 KB)

✅ AC2: Vector (legacy) should turn color to #a55858 for visited 'new' ('red') links

Screen Shot 2021-09-26 at 9.27.56 AM.png (482×991 px, 190 KB)

✅ AC3: Vector (legacy) should show #a55858 on Vector Tabs new links, like empty Discussion pages, both in normal and visited state

Screen Shot 2021-09-26 at 9.23.28 AM.png (482×991 px, 146 KB)

Screen Shot 2021-09-26 at 9.23.32 AM.png (482×991 px, 147 KB)

✅ AC4: Vector (modern) should be unchanged and have #d33 for normal 'new' ('red') links

Screen Shot 2021-09-26 at 9.29.11 AM.png (482×991 px, 197 KB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Vector (legacy) should show #ba0000 for normal 'new' ('red') links

Screen Shot 2021-09-26 at 9.31.50 AM.png (482×991 px, 176 KB)

✅ AC2: Vector (legacy) should turn color to #a55858 for visited 'new' ('red') links

Screen Shot 2021-09-26 at 9.35.41 AM.png (482×991 px, 195 KB)

✅ AC3: Vector (legacy) should show #a55858 on Vector Tabs new links, like empty Discussion pages, both in normal and visited state

Screen Shot 2021-09-26 at 9.36.10 AM.png (482×991 px, 182 KB)

Screen Shot 2021-09-26 at 9.36.15 AM.png (482×991 px, 180 KB)

✅ AC4: Vector (modern) should be unchanged and have #d33 for normal 'new' ('red') links

Screen Shot 2021-09-26 at 9.37.55 AM.png (482×991 px, 205 KB)