1900064 - Show impact of invalid at computed-value time custom property declaration in var() tooltip

Status: NEW

(DevTools :: Inspector: Rules, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>@property --a { syntax: '<color>'; inherits: true; initial-value: blue; } @property --b { syntax: '<color>'; inherits: true; initial-value: red; } body {--a: 1em;--b: gold;} h1 { --b: 10px;color: var(--b); background-color: var(--a); }</style><h1>hello</h1>
2. Inspect <h1>

Actual results

Here's the CSS we have:

@property --a {
  syntax: '<color>';
  inherits: true;
  initial-value: blue;
}
@property --b {
  syntax: '<color>';
  inherits: true;
  initial-value: red;
}
body {
  --a: 1em;
  --b: gold;
}
h1 {
  --b: 10px;
  color: var(--b);
  background-color: var(--a);
}

both --a and --b have a <color> syntax.

When Bug 1866712 lands, --b: 10px from h1 rule, and --a: 1em from inherited body, will both have an icon indicating that those are invalid at computed value time.

if you hover --a in background-color: var(--a) , the tooltip will show --a: 1em (the declaration value from the inherited body rule), and we don't display the color swatch, although on the page, the background is blue, i.e. the initial value of the registered property.

if you hover --b in color: var(--b) , the tooltip will show --b: 10px (the declaration value), and we don't display the color swatch, although on the page, the text is gold, i.e. the declared value from the inherited body rule.

When a declaration is invalid at computed-value time, it's substituted with the unset value.
From MDN:

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

So in case we have an invalid at computed-value time variable, we should try to compute the value correctly, and highlight this in the UI.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Note that in Bug 1899489, we'll show the registered property information, and in Bug 1836396, we want to show the computed value
So we could have another "sections" here, showing the different declarations and the one that is actually picked.