1724956 - [Windows 8] The text of the tabs cannot be read when using the dark theme

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, defect, P1)

Description

[Félix]

Attachment: navbar.gif

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Steps to reproduce:

I updated to version 91.

Actual results:

The text of the tabs cannot be read, nor is the separation between them distinguished.

Expected results:

The different tabs must be readable and distinguishable.
This defect appeared in version 90, until now it had been solved by disabling proton but apparently they removed that option and did not fix the problem.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Firefox now automatically enables High Contrast Mode when "Increase Contrast" is checked on MacOS

https://www.mozilla.org/en-US/firefox/91.0/releasenotes/

Can you navigate to about:preferences > Language and Appearance > Colors > set dropdown to "never" > OK, and confirm if this fixes your issue?

Best,
Clara

Comment 3

[Félix]

No change is noticed when changing the preference.
I have Windows 8.1, not MacOS.

Comment 4

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Could this be a duplicate for? https://bugzilla.mozilla.org/show_bug.cgi?id=1705072

Setting [proton-tabs-bar] whiteboard for dev visibility.

Comment 5

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi,

I'm marking this as Resolved-Incomplete due to lack of response. If the issue is still reproducible with the latest Firefox version, feel free to reopen the bug with more information.

Regards, Clara.

Comment 6

[Félix]

It is not resolved. I still have trouble reading.

Comment 7

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi Felix,
Do you experience this issue with any Theme?
Best,
Clara

Comment 8

[:Gijs (he/him)]

Harry, can you take a look? It looks like the regression window in bug 1714507 would be relevant here, and it contains bug 1700873 which seems like a plausible cause for this issue.

Clara: please stop adding things to the proton metabugs, it doesn't help, nobody is actively looking at them. If you think something needs attention, ping the triage owner or someone else you know works on the component in question.

Comment 9

[Félix]

Attachment: DarkTheme.gif

Comment 10

[Félix]

Attachment: FirefoxAlpenglow.gif

Comment 11

[Félix]

Attachment: LightTheme.gif

Comment 12

[Félix]

Attachment: SystemTheme.gif

Comment 13

[Harry Twyford]

Gijs, I don't think bug 1714507 is relevant here. That bug is about how we're not applying the accent color correctly to the window frame when the entire window is inactive. This one is about inactive tabs in active windows.

We discussed this briefly on Slack and you mentioned that on Windows 8, inactive tabs are supposed to get the system caption foreground color. I assume you're referring to this rule. That only applies to not(:-moz-lwtheme), so Dark theme is not covered. Is there another rule I'm missing? I'm not really familar with our Windows styling. It seems like we need to be applying some kind of dark background color to inactive tabs if we want white text to be legible.

Comment 14

[:Gijs (he/him)]

(In reply to Harry Twyford [:harry] from comment #13)

Gijs, I don't think bug 1714507 is relevant here. That bug is about how we're not applying the accent color correctly to the window frame when the entire window is inactive.

It's been a while since I used Win8, but I don't think so - my understanding is the accent colour is expected not to apply to inactive windows on win8 - that's how the active/inactive windows are distinguished. It'd be worth doublechecking what happens to the titlebars of other apps like notepad in that situation. In other words, I think we're meant to be using InactiveCaptionText for the tabstrip there, and we don't, hence the lack of contrast.

This one is about inactive tabs in active windows.

We discussed this briefly on Slack and you mentioned that on Windows 8, inactive tabs are supposed to get the system caption foreground color. I assume you're referring to this rule.

That rule sets a background, not a foreground, and is in a moz-classic media query which will never apply on Windows 8, I think?

That only applies to not(:-moz-lwtheme), so Dark theme is not covered. Is there another rule I'm missing? I'm not really familar with our Windows styling. It seems like we need to be applying some kind of dark background color to inactive tabs if we want white text to be legible.

Right, the point is that the text shouldn't be white, I think?

I think the rule above the one you highlighted, https://searchfox.org/mozilla-central/rev/49b6e60550243b4b4d71d6ab35a3ff2b9a9f7c69/browser/themes/windows/browser.css#115-127 , should be applied in this case (ie specific to win8, for themes where we don't set a background on the tabstrip).

I'm out for the next few weeks, if there's more that isn't clear here I'd recommend pinging :jaws .

Comment 15

[Félix]

Attachment: notepad.gif

Comment 16

[Harry Twyford]

Attachment: Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers

This bug was introduced with the Proton tab design. Since we no longer draw a background behind inactive tabs, tabs are not legible against some accent colors. This problem is especially bad in brighttext themes. This patch also fixes 1714507, since the tabs are now legible against the light gray inactive window color.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9c629ed9c582
Use system colors on :root on Windows 10 when compacttheme.css is active. r=desktop-theme-reviewers,dao

Comment 18

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/9c629ed9c582

Comment 19

[Harry Twyford]

I'm going to request 93 uplift. Recent changes to Windows 8 window accents have created regressions, so I'm going to wait a few days first. Leaving needinfo.

[Tracking Requested - why for this release]:
a11y/contrast issue in primary browser UI on Windows 8. This issue has existed since 89, so it's not a recent regression, but is something that should be fixed ASAP.

Comment 20

[Pascal Chevrel:pascalc (PTO until April 26)]

Can we target an uplift this Thursday for beta 6?

Comment 21

[Harry Twyford]

Comment on attachment 9240562 [details]
Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers

Beta/Release Uplift Approval Request

• User impact if declined: Contrast regression on inactive tabs in dark mode or when the window is unfocused (bug 1714507).
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Using Windows 8, set the system accent color to a bright color like orange.

2. In Firefox, apply the dark theme.
3. Open a new tab and observe the text in the inactive tab. It should be black.
4. Unfocus the window by clicking on the desktop. Observe that the Firefox window accent color turns grey and that the tab text is still legible against the background (this tests 1714507).

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small, well-understood, CSS-only patch.
• String changes made/needed:

Comment 22

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9240562 [details]
Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers

Fix for a visible contrast regression in our primary UI, approved for 93 beta 6, thanks!

Comment 23

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/4666423cd926

Comment 24

[Bogdan Maris, Desktop QA]

I used old Nightly from 2021-08-10 on Windows 8.1 to reproduce the issue here. Verified that using latest Nightly 94.0a1 from today and Firefox 93.0b7 the text of the tabs can be read with every theme preinstalled in Firefox. Leaving the qa-verify+ until the decision is made for esr91.

Comment 25

[Ryan VanderMeulen [:RyanVM]]

Please nominate this for ESR91 approval also when you get a chance. It grafts cleanly as-landed.

Comment 26

[Harry Twyford]

Comment on attachment 9240562 [details]
Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers

ESR Uplift Approval Request

• If this is not a sec:{high,crit} bug, please state case for ESR consideration: Contrast regression leading to accessibility issues.
• User impact if declined: Users on Windows 8 using the dark theme will have a hard time distinguishing the inactive. Since this patch also resolves bug 1714507, users with any theme will have a hard time distinguishing inactive tabs in inactive windows.
• Fix Landed on Version:
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): CSS-only, no issues on Nightly or Beta uplift.
• String or UUID changes made by this patch:

Comment 27

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9240562 [details]
Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers

Approved for 91.3esr.

Comment 28

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-esr91/rev/e5be4545d68e

Comment 29

[Bogdan Maris, Desktop QA]

Also verified that this is fixed using latest esr 91.3 build from treeherder.