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)
Tracking
(firefox121 fixed)
Tracking | Status | |
---|---|---|
firefox121 | --- | fixed |
People
(Reporter: dholbert, Assigned: nchevobbe)
Details
Attachments
(4 files)
What were you doing?
- In Firefox Preferences, choose "dark" as your color-scheme preference ("Website appearance" section)
- Load the attached testcase and right-click the text and choose
Inspect (Q)
- 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.
Reporter | ||
Comment 1•1 year ago
|
||
Reporter | ||
Comment 2•1 year ago
|
||
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.
Reporter | ||
Comment 3•1 year ago
|
||
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.
Reporter | ||
Comment 4•1 year ago
|
||
--> Generalizing bug summary, per comment 3.
Reporter | ||
Comment 5•1 year ago
|
||
Updated•1 year ago
|
Assignee | ||
Comment 6•1 year ago
|
||
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?
Comment 7•1 year ago
|
||
Panels reset the color-scheme to the preferred one (see bug 1854315). Does something like menupopup, panel { color-scheme: unset }
fix it?
Assignee | ||
Comment 8•1 year ago
|
||
(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!
Assignee | ||
Comment 9•1 year ago
|
||
This unset specific color-scheme that is set on popup by the platform.
Updated•1 year ago
|
Comment 10•1 year ago
|
||
Comment 11•1 year ago
|
||
bugherder |
Description
•