Changeset 239690 in webkit

Timestamp:

Jan 7, 2019 12:20:17 PM (5 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: "white" isn't recognized as a color keyword
​https://bugs.webkit.org/show_bug.cgi?id=193173
<rdar://problem/47068595>

Reviewed by Joseph Pecoraro.

Attempt to parse "atom" token types as colors.

Display color picker only for color-aware properties. For instance,
display it for "color: white" but not for "-apple-pay-button-style: white".

• UserInterface/Models/CSSKeywordCompletions.js:

(addKeywordsForName):
(WI.CSSKeywordCompletions.forProperty):
(WI.CSSKeywordCompletions.isColorAwareProperty):

• UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype._renderValue):
(WI.SpreadsheetStyleProperty.prototype._addColorTokens):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/CSSKeywordCompletions.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-01-07  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: "white" isn't recognized as a color keyword
+        https://bugs.webkit.org/show_bug.cgi?id=193173
+        <rdar://problem/47068595>
+
+        Reviewed by Joseph Pecoraro.
+
+        Attempt to parse "atom" token types as colors.
+
+        Display color picker only for color-aware properties. For instance,
+        display it for "color: white" but not for "-apple-pay-button-style: white".
+
+        * UserInterface/Models/CSSKeywordCompletions.js:
+        (addKeywordsForName):
+        (WI.CSSKeywordCompletions.forProperty):
+        (WI.CSSKeywordCompletions.isColorAwareProperty):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype._renderValue):
+        (WI.SpreadsheetStyleProperty.prototype._addColorTokens):
+
 2019-01-04  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js

@@ -44 +44 @@
             acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + name]);
 
-        if (name in WI.CSSKeywordCompletions._colorAwareProperties)
-            acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
-        else if (isNotPrefixed && ("-webkit-" + name) in WI.CSSKeywordCompletions._colorAwareProperties)
-            acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
-        else if (name.endsWith("color"))
+        if (WI.CSSKeywordCompletions.isColorAwareProperty(name))
             acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
 
@@ -76 +72 @@
 
     return new WI.CSSCompletions(Array.from(new Set(acceptedKeywords)), true);
+};
+
+WI.CSSKeywordCompletions.isColorAwareProperty = function(name)
+{
+    if (name in WI.CSSKeywordCompletions._colorAwareProperties)
+        return true;
+
+    let isNotPrefixed = name.charAt(0) !== "-";
+    if (isNotPrefixed && ("-webkit-" + name) in WI.CSSKeywordCompletions._colorAwareProperties)
+        return true;
+
+    if (name.endsWith("color"))
+        return true;
+
+    return false;
 };
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -421 +421 @@
         if (this._property.enabled) {
             // FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
-            tokens = this._addGradientTokens(tokens);
-            tokens = this._addColorTokens(tokens);
+
+            // CSS variables may contain color - display color picker for them.
+            if (this._property.variable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
+                tokens = this._addGradientTokens(tokens);
+                tokens = this._addColorTokens(tokens);
+            }
             tokens = this._addTimingFunctionTokens(tokens, "cubic-bezier");
             tokens = this._addTimingFunctionTokens(tokens, "spring");
@@ -563 +567 @@
                 // Color Function start
                 colorFunctionStartIndex = i;
-            } else if (isNaN(colorFunctionStartIndex) && token.type && token.type.includes("keyword")) {
+            } else if (isNaN(colorFunctionStartIndex) && token.type && (token.type.includes("atom") || token.type.includes("keyword"))) {
                 // Color keyword
                 pushPossibleColorToken(token.value, token);