Bug 177264 – Web Inspector: Add autocompletion suggestions for CSS functions (constant(), linear-gradient(), etc)

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

Add autocompletions suggestions for CSS functions (constant(), linear-gradient(), etc)

Example cases:

    padding: co|
       => expected "constant()"

    padding: constant(|)
       => expected "safe-area* keywords"

    background-image: linear-gradient(|)
       => expected colors

We already did something for var() that goes down a different, dynamic path. We should be better about built-in functions and their keywords / supported values.

[Joseph Pecoraro]

Created attachment 321357 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

Created attachment 321358 [details]
[IMAGE] Suggest "constant()"

[Joseph Pecoraro]

Created attachment 321359 [details]
[IMAGE] Highlight "constant()" and suggest inside it

[Joseph Pecoraro]

Comment on attachment 321357 [details]
[PATCH] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:73
> +    else if (functionName === "image-set")

I think I will also add:

    else if (functionName === "repeat")
        suggestions = suggestions.concat(["auto", "auto-fill", "auto-fit", "min-content", "max-content"]);

After glancing at:
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

[Joseph Pecoraro]

Created attachment 321361 [details]
[PATCH] Proposed Fix

[Simon Fraser (smfr)]

Comment on attachment 321361 [details]
[PATCH] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:72
> +        suggestions = suggestions.concat(["safe-area-inset-top", "safe-area-inset-right", "safe-area-inset-bottom", "safe-area-inset-left"]);

I wish we could fetch these from some central place (a JSON file).

[Matt Baker]

Comment on attachment 321361 [details]
[PATCH] Proposed Fix

r=me. In the future, it would be great to provide dynamic suggestions for `var()` and `attr()`, based on the selected node.

[Joseph Pecoraro]

(In reply to Matt Baker from comment #7)
> Comment on attachment 321361 [details]
> [PATCH] Proposed Fix
> 
> r=me. In the future, it would be great to provide dynamic suggestions for
> `var()` and `attr()`, based on the selected node.

Correct. CSSKeywordCompletions only produces static (keyword) suggestions without context. We do var() completions (sorta) elsewhere which allows us to correctly lookup the dynamic list applicable to the current selected node (e.g. looking up what computed properties are in scope).

[WebKit Commit Bot]

Comment on attachment 321361 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 321361

Committed r222359: <http://trac.webkit.org/changeset/222359>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Devin Rousso]

(In reply to Joseph Pecoraro from comment #8)
> (In reply to Matt Baker from comment #7)
> > Comment on attachment 321361 [details]
> > [PATCH] Proposed Fix
> > 
> > r=me. In the future, it would be great to provide dynamic suggestions for
> > `var()` and `attr()`, based on the selected node.
> 
> Correct. CSSKeywordCompletions only produces static (keyword) suggestions
> without context. We do var() completions (sorta) elsewhere which allows us
> to correctly lookup the dynamic list applicable to the current selected node
> (e.g. looking up what computed properties are in scope).
Just for reference, this is done in `CSSStyleDeclarationTextEditor.prototype.completionControllerCompletionsNeeded`.

I like the idea of also applying this to `attr()`!  I'll explore that when I get a chance (hopefully soon) =D

[Radar WebKit Bug Importer]

<rdar://problem/34693126>