Bug 154215 – Web Inspector: Show inherited CSS variables in the Style sidebar

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Timothy Hatcher]

When a selector only has CSS variables and no other inherited or applied properties, we don't show the rule.

[Radar WebKit Bug Importer]

<rdar://problem/24644058>

[Timothy Hatcher]

Created attachment 271284 [details]
Patch

[Timothy Hatcher]

Created attachment 271285 [details]
Screenshot

[Timothy Hatcher]

Some follow up bugs. Bug 154216 and bug 154217.

[Timothy Hatcher]

Created attachment 271291 [details]
Computed Styles Screenshot

They show up in computed styles, as expected too.

[Nikita Vasilyev]

Comment on attachment 271284 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=271284&action=review

Looks good to me, but I'm not a reviewer.

> Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45
> +        return /^--[\w-]+$/.test(name);

"--9" is a valid CSS variable name in WebKit, I just checked. This regex should be fine.

[Devin Rousso]

(In reply to comment #6)
> Comment on attachment 271284 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=271284&action=review
> 
> Looks good to me, but I'm not a reviewer.
> 
> > Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45
> > +        return /^--[\w-]+$/.test(name);
> 
> "--9" is a valid CSS variable name in WebKit, I just checked. This regex
> should be fine.

So I just tested this, and the variable name "--" is valid in the Nightlies.  Not really sure if that's a bug, as it doesn't work in Chrome, but if that is allowed via the spec then we may want to change the regex to /^--[\w-]*$/

[Joseph Pecoraro]

(In reply to comment #7)
> (In reply to comment #6)
> > Comment on attachment 271284 [details]
> > Patch
> > 
> > View in context:
> > https://bugs.webkit.org/attachment.cgi?id=271284&action=review
> > 
> > Looks good to me, but I'm not a reviewer.
> > 
> > > Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45
> > > +        return /^--[\w-]+$/.test(name);
> > 
> > "--9" is a valid CSS variable name in WebKit, I just checked. This regex
> > should be fine.
> 
> So I just tested this, and the variable name "--" is valid in the Nightlies.
> Not really sure if that's a bug, as it doesn't work in Chrome, but if that
> is allowed via the spec then we may want to change the regex to /^--[\w-]*$/

A custom property is defined as:
<https://drafts.csswg.org/css-variables/#defining-variables> (CSS Custom Properties 1)
> A custom property is any property whose name starts with two dashes
> (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name>
> production corresponds to this: it’s defined as any valid identifier
> that starts with two dashes.

An "identifier" here means:
<https://drafts.csswg.org/css-syntax-3/#identifier> (CSS Syntax 3)
> identifier
>   A portion of the CSS source that has the same syntax as an <ident-token>.

And an <ident-token> has this sweet diagram:
<https://drafts.csswg.org/css-syntax-3/#ident-token-diagram>

So if we are looking at <ident-token> starting with two dashes (a subset of that diagram), then yes, I see both "--" and "--9" as valid tokens.

[Joseph Pecoraro]

Comment on attachment 271284 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=271284&action=review

r=me

>>>> Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:45
>>>> +        return /^--[\w-]+$/.test(name);
>>> 
>>> "--9" is a valid CSS variable name in WebKit, I just checked. This regex should be fine.
>> 
>> So I just tested this, and the variable name "--" is valid in the Nightlies.  Not really sure if that's a bug, as it doesn't work in Chrome, but if that is allowed via the spec then we may want to change the regex to /^--[\w-]*$/
> 
> A custom property is defined as:
> <https://drafts.csswg.org/css-variables/#defining-variables> (CSS Custom Properties 1)

Technically an escape sequence is allowed here as well:
<https://drafts.csswg.org/css-syntax-3/#escape-diagram>

    --\u1234: valid;

Perhaps just checking if it starts with double dashes is enough?

    name.startsWith("--");

[Timothy Hatcher]

Created attachment 271365 [details]
Patch for Landing

[WebKit Commit Bot]

Comment on attachment 271365 [details]
Patch for Landing

Clearing flags on attachment: 271365

Committed r196597: <http://trac.webkit.org/changeset/196597>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.