- Revision
- 222359
- Author
- [email protected]
- Date
- 2017-09-21 16:05:22 -0700 (Thu, 21 Sep 2017)
Log Message
Web Inspector: Add autocompletion suggestions for CSS functions (constant(), linear-gradient(), etc)
https://bugs.webkit.org/show_bug.cgi?id=177264
Patch by Joseph Pecoraro <[email protected]> on 2017-09-21
Reviewed by Matt Baker.
* UserInterface/Controllers/CodeMirrorCompletionController.js:
(WI.CodeMirrorCompletionController.prototype._generateCSSCompletions):
Detect when we are inside of functions and provide completion suggestions
for the relevant function.
* UserInterface/Models/CSSCompletions.js:
Syntax highlight "constant()" like we do for "var()".
* UserInterface/Models/CSSKeywordCompletions.js:
(WI.CSSKeywordCompletions.forProperty):
Always suggest "constant()" everywhere, like we do for "var()".
(WI.CSSKeywordCompletions.forFunction):
Provide suggestions for some CSS functions.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (222358 => 222359)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-21 23:03:30 UTC (rev 222358)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-21 23:05:22 UTC (rev 222359)
@@ -1,5 +1,27 @@
2017-09-21 Joseph Pecoraro <[email protected]>
+ Web Inspector: Add autocompletion suggestions for CSS functions (constant(), linear-gradient(), etc)
+ https://bugs.webkit.org/show_bug.cgi?id=177264
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Controllers/CodeMirrorCompletionController.js:
+ (WI.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+ Detect when we are inside of functions and provide completion suggestions
+ for the relevant function.
+
+ * UserInterface/Models/CSSCompletions.js:
+ Syntax highlight "constant()" like we do for "var()".
+
+ * UserInterface/Models/CSSKeywordCompletions.js:
+ (WI.CSSKeywordCompletions.forProperty):
+ Always suggest "constant()" everywhere, like we do for "var()".
+
+ (WI.CSSKeywordCompletions.forFunction):
+ Provide suggestions for some CSS functions.
+
+2017-09-21 Joseph Pecoraro <[email protected]>
+
Web Inspector: Remove support for CSS Regions
https://bugs.webkit.org/show_bug.cgi?id=177287
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js (222358 => 222359)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js 2017-09-21 23:03:30 UTC (rev 222358)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js 2017-09-21 23:05:22 UTC (rev 222359)
@@ -541,8 +541,8 @@
_generateCSSCompletions(mainToken, base, suffix)
{
- // We only support completion inside CSS block context.
- if (mainToken.state.state === "media" || mainToken.state.state === "top" || mainToken.state.state === "parens")
+ // We support completion inside CSS block context and functions.
+ if (mainToken.state.state === "media" || mainToken.state.state === "top")
return [];
// Don't complete in the middle of a property name.
@@ -552,8 +552,7 @@
var token = mainToken;
var lineNumber = this._lineNumber;
- // Scan backwards looking for the current property.
- while (token.state.state === "prop") {
+ let getPreviousToken = () => {
// Found the beginning of the line. Go to the previous line.
if (!token.start) {
--lineNumber;
@@ -560,13 +559,41 @@
// No more lines, stop.
if (lineNumber < 0)
- break;
+ return null;
}
- // Get the previous token.
- token = this._codeMirror.getTokenAt({line: lineNumber, ch: token.start ? token.start : Number.MAX_VALUE});
+ return this._codeMirror.getTokenAt({line: lineNumber, ch: token.start ? token.start : Number.MAX_VALUE});
}
+ // Inside a function, determine the function name.
+ if (token.state.state === "parens") {
+ // Scan backwards looking for the function paren boundary.
+ while (token && token.state.state === "parens" && token.string !== "(")
+ token = getPreviousToken();
+
+ // The immediately preceding token should have the function name.
+ if (token)
+ token = getPreviousToken();
+
+ // No completions if no function name found.
+ if (!token)
+ return [];
+
+ let functionName = token.string;
+ if (!functionName)
+ return [];
+
+ return WI.CSSKeywordCompletions.forFunction(functionName).startsWith(this._prefix);
+ }
+
+ // Scan backwards looking for the current property.
+ while (token.state.state === "prop") {
+ let previousToken = getPreviousToken();
+ if (!previousToken)
+ break;
+ token = previousToken;
+ }
+
// If we have a property token and it's not the main token, then we are working on
// the value for that property and should complete allowed values.
if (mainToken !== token && token.type && /\bproperty\b/.test(token.type)) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js (222358 => 222359)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js 2017-09-21 23:03:30 UTC (rev 222358)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js 2017-09-21 23:05:22 UTC (rev 222359)
@@ -97,7 +97,7 @@
return;
var propertyNamesForCodeMirror = {};
- var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true};
+ var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true, "constant": true};
var colorKeywordsForCodeMirror = {};
function nameForCodeMirror(name)
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js (222358 => 222359)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2017-09-21 23:03:30 UTC (rev 222358)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2017-09-21 23:05:22 UTC (rev 222359)
@@ -33,7 +33,7 @@
WI.CSSKeywordCompletions.forProperty = function(propertyName)
{
- let acceptedKeywords = ["initial", "unset", "revert", "var()"];
+ let acceptedKeywords = ["initial", "unset", "revert", "var()", "constant()"];
let isNotPrefixed = propertyName.charAt(0) !== "-";
if (propertyName in WI.CSSKeywordCompletions._propertyKeywordMap)
@@ -62,6 +62,26 @@
return new WI.CSSCompletions(acceptedKeywords, true);
};
+WI.CSSKeywordCompletions.forFunction = function(functionName)
+{
+ let suggestions = ["var()"];
+
+ if (functionName === "var")
+ suggestions = [];
+ else if (functionName === "constant")
+ suggestions = suggestions.concat(["safe-area-inset-top", "safe-area-inset-right", "safe-area-inset-bottom", "safe-area-inset-left"]);
+ else if (functionName === "image-set")
+ suggestions.push("url()");
+ else if (functionName === "repeat")
+ suggestions = suggestions.concat(["auto", "auto-fill", "auto-fit", "min-content", "max-content"]);
+ else if (functionName.endsWith("gradient")) {
+ suggestions = suggestions.concat(["to", "left", "right", "top", "bottom"]);
+ suggestions = suggestions.concat(WI.CSSKeywordCompletions._colors);
+ }
+
+ return new WI.CSSCompletions(suggestions, true);
+}
+
WI.CSSKeywordCompletions.addCustomCompletions = function(properties)
{
for (var property of properties) {
