Closed Bug 1862760 Opened 1 year ago Closed 1 year ago

Various popups in devtools have dark color (following my website-appearance preference instead of devtools theme), with partiuclarly hard-to-read dark-blue links on black background

Categories

(DevTools :: Inspector: Rules, defect, P3)

defect

Tracking

(firefox121 fixed)

RESOLVED FIXED
121 Branch
Tracking Status
firefox121 --- fixed

People

(Reporter: dholbert, Assigned: nchevobbe)

Details

Attachments

(4 files)

Attached image screenshot

What were you doing?

  1. In Firefox Preferences, choose "dark" as your color-scheme preference ("Website appearance" section)
  2. Load the attached testcase and right-click the text and choose Inspect (Q)
  3. Click the lightbulb icon next to the clip declaration.

What happened?

The popup has a "Learn more" link that is barely readable, due to being dark blue on black background.

What should have happened?

The popup should use a lighter link-color to be readable. Or, the popup should use a white background.

If it matters, here are my theme choices:

  • Ubuntu Settings, "Appearance" section: Light
  • Firefox theme: default ("System theme - auto")
  • DevTools theme: default ("auto")

Hence, I get light-colored UI in Ubuntu and Firefox and DevTools, but I did choose "dark" as my prefererred website appearance in Firefox Preferences.

Probably that means the link color is correct in this popup, and the white-text/black-background are incorrect; it should really be following the devtools theme which works out to light in my case.

Summary: Tooltip in rules inspector has bad contrast for link color (dark-blue-on-black), with dark color-preference → Tooltip in rules inspector has bad contrast for link color (dark-blue-on-black), with dark website color-preference but light system theme (and default Firefox/DevTools themes)

I still see the same bug if I explicitly choose DevTools Theme "light", too.

And maybe-relatedly: most other devtools menu-popups[1] are shown with white text on a dark background, too, (with a few exceptions[2]) which seems odd now that I think of it (since the rest of devtools is light themed, either due to me explicitly choosing light or choosing "auto" with a light System theme and default firefox theme).

[1] menu popups that are dark-themed (incorrect?) for me: the menu for the "cog icon" on the Console, Debugger, Network, and Accessibility Panels; the "Check for issues" and "Simulate" menus on Accessibility panel; and the 3-dot-menu at the very top-right of devtools. Counterexamples
[2] menu popups that are light-themed (correct?) for me: the menu for the "cog icon" on the Style Editor panel, the throttling menu on Network panel.

--> Generalizing bug summary, per comment 3.

Summary: Tooltip in rules inspector has bad contrast for link color (dark-blue-on-black), with dark website color-preference but light system theme (and default Firefox/DevTools themes) → Various popups in devtools have dark color (following my website-appearance preference instead of devtools theme), with partiuclarly hard-to-read dark-blue links on black background
Severity: -- → S3
Flags: needinfo?(nchevobbe)
Priority: -- → P3

Release is impacted but not ESR

For the light theme, this is how we define the color being used for the popup:
https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/devtools/client/themes/variables.css#206-208

--theme-popup-background: Field;
--theme-popup-color: FieldText;
--theme-popup-border-color: ThreeDShadow;

So we depend on those built-in values, which seems to compute based on the Firefox theme.

Emilio, I'd have expected the color-scheme property we have to properly set the underlying color on those https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/devtools/client/themes/common.css#28-33

:root.theme-light {
  color-scheme: light;
}

:root.theme-dark {
  color-scheme: dark;

am I missing something?

Flags: needinfo?(nchevobbe) → needinfo?(emilio)

Panels reset the color-scheme to the preferred one (see bug 1854315). Does something like menupopup, panel { color-scheme: unset } fix it?

Flags: needinfo?(emilio) → needinfo?(nchevobbe)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

Panels reset the color-scheme to the preferred one (see bug 1854315). Does something like menupopup, panel { color-scheme: unset } fix it?

Yes it does, thanks!

Flags: needinfo?(nchevobbe)

This unset specific color-scheme that is set on popup by the platform.

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/ad76a13ca034 [devtools] Fix popup colors on DevTools light theme for Firefox dark theme. r=devtools-reviewers,bomsy.
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 121 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: