Closed Bug 1724956 Opened 4 months ago Closed 3 months ago

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

Categories

(Firefox :: Tabbed Browser, defect, P1)

Firefox 91
defect
Points:
2

Tracking

()

VERIFIED FIXED
94 Branch
Iteration:
93.2 - Aug 23 - Sep 5
Tracking Status
firefox-esr91 --- verified
firefox92 --- wontfix
firefox93 + verified
firefox94 --- verified

People

(Reporter: superfelo, Assigned: harry)

References

Details

(Whiteboard: [proton-tabs-bar])

Attachments

(7 files)

Attached image 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.

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.

Component: Untriaged → Tabbed Browser

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

Flags: needinfo?(superfelo)

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

Flags: needinfo?(superfelo)

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

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

Whiteboard: [proton-tabs-bar]

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.

Status: UNCONFIRMED → RESOLVED
Closed: 3 months ago
Resolution: --- → INCOMPLETE

It is not resolved. I still have trouble reading.

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

Flags: needinfo?(superfelo)

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.

Status: RESOLVED → REOPENED
Ever confirmed: true
Flags: needinfo?(htwyford)
Resolution: INCOMPLETE → ---
See Also: → 1714507
Summary: The text of the tabs cannot be read, nor is the separation between them distinguished. → [Windows 8] The text of the tabs cannot be read when using the dark theme
Attached image DarkTheme.gif
Flags: needinfo?(superfelo)
Attached image FirefoxAlpenglow.gif
Attached image LightTheme.gif
Attached image SystemTheme.gif
Status: REOPENED → NEW
Assignee: nobody → htwyford
Status: NEW → ASSIGNED
Iteration: --- → 93.2 - Aug 23 - Sep 5
Points: --- → 2
Flags: needinfo?(htwyford)
Priority: -- → P1

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.

Flags: needinfo?(gijskruitbosch+bugs)

(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 .

Flags: needinfo?(gijskruitbosch+bugs) → needinfo?(htwyford)
Attached image notepad.gif

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.

Attachment #9240562 - Attachment description: Bug 1724956 - Use system colors on :root on Windows 10. r?#desktop-theme-reviewers → Bug 1724956 - Use system colors on :root on Windows 10 when compacttheme.css is active. r?#desktop-theme-reviewers
Pushed by htwyford@mozilla.com:
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
Status: ASSIGNED → RESOLVED
Closed: 3 months ago3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 94 Branch
Blocks: 1714507

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.

Can we target an uplift this Thursday for beta 6?

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.
  1. In Firefox, apply the dark theme.
  2. Open a new tab and observe the text in the inactive tab. It should be black.
  3. 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:
Flags: needinfo?(htwyford)
Attachment #9240562 - Flags: approval-mozilla-beta?
Flags: qe-verify+

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!

Attachment #9240562 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [qa-triaged]

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.

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

Flags: needinfo?(htwyford)

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:
Flags: needinfo?(htwyford)
Attachment #9240562 - Flags: approval-mozilla-esr91?

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.

Attachment #9240562 - Flags: approval-mozilla-esr91? → approval-mozilla-esr91+

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

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.