Display a color swatch for all color types in color-taking CSS properties, even when they are variables
Categories
(DevTools :: Inspector: Rules, enhancement, P3)
Tracking
(firefox77 fixed)
| Tracking | Status | |
|---|---|---|
| firefox77 | --- | fixed |
People
(Reporter: pbro, Assigned: jdescottes)
References
(Blocks 2 open bugs)
Details
(Keywords: parity-chrome)
Attachments
(6 files, 2 obsolete files)
implemented_feature_screenshot.png
Consider the following test case:
:root {
--foo: red;
--bar: black;
}
body {
background: var(--bar);
color: var(--foo);
}
which you can open in your browser with the following URL:
data:text/html,<style>:root{--foo: red;--bar: black} body {background: var(--bar); color:var(--foo)}</style>Welcome
If you select the <body> element and look at the color property in the Rules panel, you will see that it does not look like other colors in devtools. That's because it's not a color type, it's a var() function.
The CSS property parser in Firefox DevTools (here) does not parse variables like colors.
This means that there is no color swatch displayed next to var(--bar) or var(--foo).
In Chrome there is. This is useful in particular because the color contrast ratio is displayed inside the color picker that appears when you click on the swatch.
Changing the color in the color picker in chrome means you're loosing the variable, but it might be useful anyway in certain cases.
|
Reporter | |
Comment 1•5 years ago
|
||
Worth noting: Chrome also shows the color swatch in cases like border: 2px solid var(--bar); and background: var(--foo) url(test.png) no-repeat.
The way they seem to do it is checking if the resolved value of the variable looks like a valid color.
|
|
Reporter | |
Updated•5 years ago
|
The changes are fairly simple:
devtools/client/shared/output-parser.js- We append a Color Swatch when parsing values if a css-variable is a valid CSS color.
- We add a
data-cssvarattribute to the Color Swatch color namespanto mark it as a CSS variable. The color name node is hidden by a new rule inrules.css.
devtools/client/inspector/rules/views/text-property-editor.js- Because the CSS Swatch can now contain a CSS variable we need to pass a method to the inplace editor to get the color value from the correct location. If we encounter a CSS variable then
element.textContentwould contain the CSS variable value appended with the CSS variable e.g.whitevar(--foo). To work around this we need to grab the value from the appropriate element to get the correct value e.g.var(--foo).
- Because the CSS Swatch can now contain a CSS variable we need to pass a method to the inplace editor to get the color value from the correct location. If we encounter a CSS variable then
devtools/client/shared/inplace-editor.js- Added the
valueCallbackargument to allow us to get the color name from a non-default location.
- Added the
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js- If a swatch is clicked we need to drop the CSS variable and change it to a normal color swatch. We do this by showing the color name and removing the CSS variable name span.
devtools/client/themes/rules.css- Added a simple rule to hide the color name span in the case that we are using a CSS variable.
devtools/client/inspector/rules/test/browser.ini- Added test.
devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js- Check that the following work okay and that normal color swatches also still work:
- color: red;
- background-color: var(--main-bg-color);
- border: 1px solid var(--main-bg-color);
- Check that the following work okay and that normal color swatches also still work:
|
Assignee | |
Comment 4•5 years ago
|
||
|
|
Reporter | |
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
|
Assignee | |
Comment 5•5 years ago
|
||
Depends on D61063
|
|
Assignee | |
Comment 6•5 years ago
|
||
|
|
Assignee | |
Comment 7•5 years ago
|
||
Depends on D68849
|
|
Assignee | |
Comment 8•5 years ago
|
||
Depends on D68849
|
|
Assignee | |
Comment 9•5 years ago
|
||
Depends on D68971
Until have a shared component to build to color swatch, some additional comments.
|
|
||
Updated•5 years ago
|
|
|
Assignee | |
Comment 10•5 years ago
|
||
|
||
Comment 11•5 years ago
|
||
|
||
Comment 12•5 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/7942f0a77334
https://hg.mozilla.org/mozilla-central/rev/f84cf278044c
https://hg.mozilla.org/mozilla-central/rev/64df37c1e0cc
https://hg.mozilla.org/mozilla-central/rev/711e0a80ad2f
https://hg.mozilla.org/mozilla-central/rev/035ce4dce72f
|
|
Assignee | |
Comment 14•5 years ago
|
||
Description
•