1866712 - Mark custom property declaration invalid when value does not match registered custom property definition

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Chrome DevTools Screenshot

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>@property --b { syntax: '<length>'; inherits: true; initial-value: 100px; } h1 { --b: blue;color: var(--b); }</style><h1>hello</h1>
2. Open the inspector and select the <h1> node

Expected results

The --b: blue property is marked as invalid, as it doesn't match the <length> syntax.
(color: var(--b) property should also be marked as invalid but that may be its own bug since we don't do it for unregistered custom properties at the moment)

---

In Chrome DevTools, a tooltip is displayed to indicate why the property value is invalid, which is a good information to surface IMO

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

This impacts the var() tooltip: if the value doesn't match the syntax, the registered property initial value will be used.
This also impacts the computed panel: when "expanding" the variable node, the declaration that we show should be marked as invalid/unused somehow. We could also show the initial value declaration, but that's maybe its own bug

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1866712 - [devtools] Add TextProperty#getDomRuleDeclaration. r=#devtools-reviewers.

Multiple functions were writing the same 2 lines to retrieve the associated
declaration (and I'm planning to add more).
Let's refactor things a bit.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1866712 - [devtools] Display invalid at computed value time custom property declarations. r=#devtools-reviewers.

This adds an icon next to custom property declaration for registered property
when a value does not match the registered property syntax (e.g. it's invalid
at computed-value time).
The icon title indicates the syntax that is expected.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

This impacts the var() tooltip: if the value doesn't match the syntax, the registered property initial value will be used.

This isn't always true, the value is substituted with unset, which means the inherited value could be used. We'll handle this in Bug 1900064.

This also impacts the computed panel: when "expanding" the variable node, the declaration that we show should be marked as invalid/unused somehow. We could also show the initial value declaration, but that's maybe its own bug

This should be handled in Bug 1900070

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/99a7a139957d
[devtools] Add TextProperty#getDomRuleDeclaration. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/afababa6dd0e
[devtools] Display invalid at computed value time custom property declarations. r=devtools-reviewers,bomsy.

Comment 6

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/99a7a139957d
https://hg.mozilla.org/mozilla-central/rev/afababa6dd0e