1798350 - HCM: Tab Pickup text and border inheriting disabled text property

Status: VERIFIED FIXED

(Firefox :: Firefox View, defect, P2)

Description

[Josh Berman]

Attachment: current state HCM

Actual:
Tab pickup text and border color inheriting the disabled text property in Windows HCM

Expected:
Tab pickup text inherits the hyperlink color property in Windows HCM
Tab pickup card border inherits the text color property in Windows HCM
Last Active text inherits the text color property in Windows HCM
Last Active status indicator (8px circle) inherits the text color property in Windows HCM
Last active badge fill inherits background color property and stroke inherits text color property in Windows HCM

https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=11853%3A146579

Figma file with expected specs above. Screenshot attached.

Comment 1

[Tim Giles [:tgiles]]

(In reply to Josh Berman from comment #0)

Tab pickup text and border color inheriting the disabled text property in Windows HCM

I'm sure this has been discussed and I'm just missing context, but we're okay with changing the visited link color for Firefox View right? Like I think this answer is a "yes" considering the Recently Closed tabs section is in a similar situation where the link button things have, by definition, been visited before. These recently closed tabs have white text on the black HCM theme on Windows 10. Just want to be sure I'm understanding the issue correctly since the disabled text and visited link text colors are the same from the Windows HCM themes I've seen :)

Comment 2

[Tim Giles [:tgiles]]

Attachment: win10-high-contrast-black-theme.png

Hey Josh, just want to make sure this is the look we're going for. The inner text of the tabs in the tab pickup list is now LinkText, the border of each of the tabs are FieldText, the last active dot and text are also FieldText and the fill background is black since this is the background color of the High Contrast Black theme. Additionally if there is no favicon for a particular page, the svg icon takes the LinkText color from the high contrast theme.

I think that addresses all the concerns in Comment #0, but I want to make sure I'm understanding the ticket correctly.

Comment 3

[Josh Berman]

Hey Tim,

Thanks for hopping on this. You got that all right. Looks great to me.

Comment 4

[Tim Giles [:tgiles]]

Attachment: Bug 1798350 - Fix tab pickup text and border colors in HCM. r=cmkm

Prevent the synced tab anchor element and its children from using
the inherited VisitedText system color in HCM. This helps bring the
tab pickup list into alignment with the Firefox View "Stepping Stone"
design spec.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/42788b3c96a5
Fix tab pickup text and border colors in HCM. r=cmkm

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/42788b3c96a5

Comment 7

[Daniel Bodea [:danibodea]]

I can confirm this issue in Windows 10, Firefox Release v107.0; the Tab Pickup text and border inherit disabled text property when in HCM.
Considering the fact that the colors depend on the HCM theme you choose, I can confirm that:

• Tab pickup text inherits the hyperlink color property in Windows HCM
• Tab pickup card border inherits the text color property in Windows HCM
• Last Active text inherits the text color property in Windows HCM
• Last Active status indicator (8px circle) inherits the text color property in Windows HCM
• Last active badge fill inherits background-color property and stroke inherits text color property in Windows HCM
  This confirms the fix intended in this bug in Beta v108.0b4 and Nightly v109.0a1.

This verification was also attempted in Windows 7, however, the colors for each of the High Contrast Themes are not exemplified. I can assume that the colors of the Tab pickup cards are correct there as well because the Tab pickup text color is different from the last Active text, last active status indicator and last active badge color, which are the same color.