1718894 - Color picker is not displayed when CSS custom property is used in colour definition

Status: RESOLVED FIXED

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

Description

[Luke Warlow]

Attachment: Actual results.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4557.4 Safari/537.36

Steps to reproduce:

Steps to reproduce the problem:

1. Go to https://jsfiddle.net/qz3206rf/3/
2. Inspect the red text

Actual results:

No colour picker is displayed.

Expected results:

It would be nice if dev tools could display the colour picker for colour definitions (color, background-color etc) that make use of a CSS custom property.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Visible in data:text/html,<meta charset=utf8><style>body { --alpha: 1;%20 background: rgba(100, 0, 100, var(--alpha)) }</style>hello
The body background value does not have the color swatch

Comment 3

[Julian Descottes [:jdescottes]]

Since we resolve variables on the client at the moment, we might still have cases where we can't resolve the value at the moment. But as long as we have a value for the color we should show the color swatch.

In case the value gets modified by the color picker, we will just override the whole value and won't try to preserve the usage of the variable in the property definition.

Comment 4

[Luke Warlow]

Just as an fyi this is now supported in chromium.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1718894 - [devtools] Display swatches for functions with css variables. r=#devtools-reviewers.

This should show the color swatch for case like rgb(var(--r), 0, var(--b)).

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9d21544852f8
[devtools] Display swatches for functions with css variables. r=devtools-reviewers,bomsy.

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/9d21544852f8