1630950 - color swatch isn't added for nested CSS variables

Status: RESOLVED FIXED

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

Description

[Julian Descottes [:jdescottes]]

Consider the following rules:

some-selector {
  --foo: 40%;
  --bar: hsl(50, 70%, var(--foo));
  --test: hsl(50, 70%, 40%);
}

Currently the rule view will correctly detect that --test is a color and will show a color swatch next to it.

However it won't detect that --bar is also a color and will not show any swatch for this element.

A similar issue applies to swatches displayed for color properties using css variables after Bug 1594402 lands.

If you try to open data:text/html,<style>body {--foo: 40%;--bar: hsl(50, 70%, var(--foo));} div {color: var(--bar);}</style><div>Hello World, and select the div in the inspector we should see a swatch for the color property, but we don't at the moment.

The parser used will evaluate CSS variables recursively, which seems to be the root cause of the issue here.

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Note that once Bug 1626234 lands, we might be able to use the computed value to get the actual color and display the swatch.
The way we put the color in the swatch is that we simply get the variable value, and so we might need to make sure we handle light-dark();
light-dark() reacts to the current displayed node color-scheme. Here it would match devtools color scheme, which would draw the wrong color. What we could do is set the color-scheme from the page node (which we'll have when Bug 1857006 lands) on the span we use for the color swatch.

Comment 2

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: Bug 1630950 - [devtools] Parse colors for CSS variable declaration if computed value is a valid color. r=#devtools-reviewers.

For the computation of options.supportsColor, we were checking
if the variable declaration value was a valid color. This is
working well for simple case, but not when the declaration is
using other variables.
Switching to the computed value fixes this case.
The output parser test for variables is modified so we can
check all the test cases for a css variable declaration (we only
use to test for a color declaration).
A couple test cases are skipped because they're not supported yet.
Bugs have been filed and reference added in comments.

Depends on D218530

Comment 3

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: Bug 1630950 - [devtools] Use CSS variable computed values to display color swatches. r=#devtools-reviewers.

Using the computed value makes it possible to easily
show the color swatch where we previously couldn't,
mostly when a variable was based of other variables.
Test cases are added to assert the new behavior.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c30f0ff046b1
[devtools] Parse colors for CSS variable declaration if computed value is a valid color. r=devtools-reviewers,jdescottes.
https://hg.mozilla.org/integration/autoland/rev/6d5bf0f0176f
[devtools] Use CSS variable computed values to display color swatches. r=devtools-reviewers,bomsy.

Comment 5

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/c30f0ff046b1
https://hg.mozilla.org/mozilla-central/rev/6d5bf0f0176f