WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
177264
Web Inspector: Add autocompletion suggestions for CSS functions (constant(), linear-gradient(), etc)
https://bugs.webkit.org/show_bug.cgi?id=177264
Summary
Web Inspector: Add autocompletion suggestions for CSS functions (constant(), ...
Joseph Pecoraro
Reported
2017-09-20 13:45:38 PDT
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.
Attachments
[PATCH] Proposed Fix
(6.67 KB, patch)
2017-09-20 13:47 PDT
,
Joseph Pecoraro
no flags
Details
Formatted Diff
Diff
[IMAGE] Suggest "constant()"
(31.10 KB, image/png)
2017-09-20 13:48 PDT
,
Joseph Pecoraro
no flags
Details
[IMAGE] Highlight "constant()" and suggest inside it
(36.02 KB, image/png)
2017-09-20 13:48 PDT
,
Joseph Pecoraro
no flags
Details
[PATCH] Proposed Fix
(6.82 KB, patch)
2017-09-20 13:55 PDT
,
Joseph Pecoraro
no flags
Details
Formatted Diff
Diff
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
Joseph Pecoraro
Comment 1
2017-09-20 13:47:45 PDT
Created
attachment 321357
[details]
[PATCH] Proposed Fix
Joseph Pecoraro
Comment 2
2017-09-20 13:48:13 PDT
Created
attachment 321358
[details]
[IMAGE] Suggest "constant()"
Joseph Pecoraro
Comment 3
2017-09-20 13:48:37 PDT
Created
attachment 321359
[details]
[IMAGE] Highlight "constant()" and suggest inside it
Joseph Pecoraro
Comment 4
2017-09-20 13:52:28 PDT
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
Comment 5
2017-09-20 13:55:27 PDT
Created
attachment 321361
[details]
[PATCH] Proposed Fix
Simon Fraser (smfr)
Comment 6
2017-09-20 14:03:18 PDT
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 7
2017-09-21 15:42:22 PDT
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
Comment 8
2017-09-21 15:47:09 PDT
(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 9
2017-09-21 16:05:26 PDT
Comment on
attachment 321361
[details]
[PATCH] Proposed Fix Clearing flags on attachment: 321361 Committed
r222359
: <
http://trac.webkit.org/changeset/222359
>
WebKit Commit Bot
Comment 10
2017-09-21 16:05:27 PDT
All reviewed patches have been landed. Closing bug.
Devin Rousso
Comment 11
2017-09-21 16:52:08 PDT
(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
Comment 12
2017-09-27 12:21:39 PDT
<
rdar://problem/34693126
>
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug