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.
Created attachment 321357 [details] [PATCH] Proposed Fix
Created attachment 321358 [details] [IMAGE] Suggest "constant()"
Created attachment 321359 [details] [IMAGE] Highlight "constant()" and suggest inside it
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
Created attachment 321361 [details] [PATCH] Proposed Fix
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).
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.
(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).
Comment on attachment 321361 [details] [PATCH] Proposed Fix Clearing flags on attachment: 321361 Committed r222359: <http://trac.webkit.org/changeset/222359>
All reviewed patches have been landed. Closing bug.
(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
<rdar://problem/34693126>