Bug 200237 - Web Inspector: Styles: variable swatch not shown for var() with a fallback
Summary: Web Inspector: Styles: variable swatch not shown for var() with a fallback
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-07-29 13:26 PDT by Devin Rousso
Modified: 2019-08-05 16:41 PDT (History)
7 users (show)

See Also:


Attachments
Patch (9.05 KB, patch)
2019-07-29 15:34 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews104 for mac-highsierra-wk2 (2.83 MB, application/zip)
2019-07-29 16:39 PDT, Build Bot
no flags Details
Patch (31.65 KB, patch)
2019-08-03 15:23 PDT, Devin Rousso
joepeck: review+
Details | Formatted Diff | Diff
Patch (31.65 KB, patch)
2019-08-05 15:28 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2019-07-29 13:26:44 PDT
var(--test) shows a swatch

var(--test, 0) does NOT show a swatch
Comment 1 Devin Rousso 2019-07-29 15:34:43 PDT
Created attachment 375111 [details]
Patch
Comment 2 Build Bot 2019-07-29 16:39:06 PDT Comment hidden (obsolete)
Comment 3 Build Bot 2019-07-29 16:39:08 PDT Comment hidden (obsolete)
Comment 4 Joseph Pecoraro 2019-08-02 20:18:05 PDT
Comment on attachment 375111 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:98
> +WI.CSSKeywordCompletions.isTimingFunctionAwareProperty = function(name)
> +{
> +    if (name in WI.CSSKeywordCompletions._timingFunctionAwareProperties)
> +        return true;
> +
> +    let isNotPrefixed = name.charAt(0) !== "-";
> +    if (isNotPrefixed && ("-webkit-" + name) in WI.CSSKeywordCompletions._timingFunctionAwareProperties)
> +        return true;

I don't think this works at all. `_timingFunctionAwareProperties` is a Set and JavaScript's ` in ` syntax does not work with Sets.

They should be like the other code that was updated:

    if (WI.CSSKeywordCompletions._timingFunctionAwareProperties.has(name))
    ...
    if (isNotPrefixed && WI.CSSKeywordCompletions._timingFunctionAwareProperties.has("-webkit-" + name))
    ...

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:453
> +            tokens = this._addVariableTokens(tokens);

Did the order matter? This now creates an inline swatch for the variable earlier, before colors. I didn't follow this logic all the way to see if that would be good or bad.
Comment 5 Devin Rousso 2019-08-03 12:16:08 PDT
Comment on attachment 375111 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:98
>> +        return true;
> 
> I don't think this works at all. `_timingFunctionAwareProperties` is a Set and JavaScript's ` in ` syntax does not work with Sets.
> 
> They should be like the other code that was updated:
> 
>     if (WI.CSSKeywordCompletions._timingFunctionAwareProperties.has(name))
>     ...
>     if (isNotPrefixed && WI.CSSKeywordCompletions._timingFunctionAwareProperties.has("-webkit-" + name))
>     ...

Oops!  I changed `_colorAwareProperties`, but forgot about `_timingFunctionAwareProperties` 😅

>> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:453
>> +            tokens = this._addVariableTokens(tokens);
> 
> Did the order matter? This now creates an inline swatch for the variable earlier, before colors. I didn't follow this logic all the way to see if that would be good or bad.

Yes, the order does have an effect, because the various `_add*Tokens` replaces the token with an `WI.InlineSwatch`, meaning we no longer get access to the token data from CodeMirror.  I actually need to rework this a tiny bit so we get swatches for fallback values.
Comment 6 Devin Rousso 2019-08-03 15:23:59 PDT
Created attachment 375491 [details]
Patch
Comment 7 Joseph Pecoraro 2019-08-05 13:51:24 PDT
Comment on attachment 375491 [details]
Patch

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

r=me

> Source/WebInspectorUI/ChangeLog:33
> +        Follow the variable "path" until an ultimate value is reached.

Follow the variable chain?
Comment 8 Devin Rousso 2019-08-05 15:28:09 PDT
Created attachment 375571 [details]
Patch
Comment 9 WebKit Commit Bot 2019-08-05 16:40:47 PDT
Comment on attachment 375571 [details]
Patch

Clearing flags on attachment: 375571

Committed r248279: <https://trac.webkit.org/changeset/248279>
Comment 10 WebKit Commit Bot 2019-08-05 16:40:48 PDT
All reviewed patches have been landed.  Closing bug.
Comment 11 Radar WebKit Bug Importer 2019-08-05 16:41:20 PDT
<rdar://problem/53964395>