Web Inspector: CSS autocomplete: property usage counts should ignore …

…variables

https://bugs.webkit.org/show_bug.cgi?id=242397

Reviewed by Patrick Angle.

CSS variables are probably pretty unlikely to have the same named across multiple sites, and it's
also somewhat unlikely they'll be used that often (plus many sites have a gazillion of them).

* Source/WebInspectorUI/UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.isVariable): Added.
(WI.CSSProperty.isInheritedPropertyName):
(WI.CSSProperty.prototype.update):
(WI.CSSProperty.prototype._updateName):

* LayoutTests/inspector/css/css-property.html:
* LayoutTests/inspector/css/css-property-expected.txt:

* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.resolveVariableValue):
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
Drive-by: Use the new utility `WI.CSSProperty.isVariable` instead of repeating the logic.

Canonical link: https://commits.webkit.org/252195@main

LayoutTests/inspector/css/css-property-expected.txt

@@ -8,6 +8,8 @@ PASS: "background-repeat" should have at least 1 count.
 PASS: "background-repeat-x" should not be counted.
 PASS: "background-repeat-y" should not be counted.
 PASS: "background-repeat-invalid" should not be counted.
+PASS: "--foo" should not be counted.
+PASS: "--bar" should not be counted.
 
 Sorted by usage:
 [

LayoutTests/inspector/css/css-property.html

@@ -17,6 +17,8 @@
             InspectorTest.expectThat(!("background-repeat-x" in WI.CSSProperty._cachedNameCounts), `"background-repeat-x" should not be counted.`);
             InspectorTest.expectThat(!("background-repeat-y" in WI.CSSProperty._cachedNameCounts), `"background-repeat-y" should not be counted.`);
             InspectorTest.expectThat(!("background-repeat-invalid" in WI.CSSProperty._cachedNameCounts), `"background-repeat-invalid" should not be counted.`);
+            InspectorTest.expectThat(!("--foo" in WI.CSSProperty._cachedNameCounts), `"--foo" should not be counted.`);
+            InspectorTest.expectThat(!("--bar" in WI.CSSProperty._cachedNameCounts), `"--bar" should not be counted.`);
 
             InspectorTest.newline();
 
@@ -300,6 +302,8 @@
         background-repeat: repeat;
         background-repeat-x: repeat;
         background-repeat-invalid: repeat;
+        --foo: red;
+        --bar: blue;
         /* background-color: black; */
         /* Not a CSS property */
         /* foo:bar; foo:baz; */

Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

@@ -43,13 +43,17 @@ WI.CSSProperty = class CSSProperty extends WI.Object
 
     // Static
 
+    static isVariable(name)
+    {
+        return name.startsWith("--") && name.length > 2;
+    }
+
     static isInheritedPropertyName(name)
     {
         console.assert(typeof name === "string");
         if (WI.CSSKeywordCompletions.InheritedProperties.has(name))
             return true;
-        // Check if the name is a CSS variable.
-        return name.startsWith("--");
+        return WI.CSSProperty.isVariable(name);
     }
 
     // FIXME: <https://webkit.org/b/226647> This naively collects variable-like names used in values. It should be hardened.
@@ -215,7 +219,7 @@ WI.CSSProperty = class CSSProperty extends WI.Object
         this._anonymous = anonymous;
         this._inherited = WI.CSSProperty.isInheritedPropertyName(name);
         this._valid = valid;
-        this._isVariable = name.startsWith("--");
+        this._isVariable = WI.CSSProperty.isVariable(name);
         this._styleSheetTextRange = styleSheetTextRange || null;
 
         this._rawValueNewlineIndent = "";
@@ -576,7 +580,10 @@ WI.CSSProperty = class CSSProperty extends WI.Object
             return;
 
         let changeCount = (propertyName, delta) => {
-            if (!propertyName || this._implicit || this._anonymous || !this._enabled)
+            if (this._implicit || this._anonymous || !this._enabled)
+                return;
+
+            if (!propertyName || WI.CSSProperty.isVariable(propertyName))
                 return;
 
             let cachedCount = WI.CSSProperty._cachedNameCounts[propertyName];

Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js

@@ -358,7 +358,7 @@ WI.CSSStyleDeclaration = class CSSStyleDeclaration extends WI.Object
                     let variableTokens = tokens.slice(startIndex, i + 1);
                     startIndex = NaN;
 
-                    let variableNameIndex = variableTokens.findIndex((token) => token.value.startsWith("--") && /\bvariable-2\b/.test(token.type));
+                    let variableNameIndex = variableTokens.findIndex((token) => WI.CSSProperty.isVariable(token.value) && /\bvariable-2\b/.test(token.type));
                     if (variableNameIndex === -1)
                         continue;
 

Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -884,7 +884,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
                     continue;
 
                 let rawTokens = tokens.slice(startIndex, i + 1);
-                let variableNameIndex = rawTokens.findIndex((token) => token.value.startsWith("--") && /\bvariable-2\b/.test(token.type));
+                let variableNameIndex = rawTokens.findIndex((token) => WI.CSSProperty.isVariable(token.value) && /\bvariable-2\b/.test(token.type));
                 if (variableNameIndex !== -1) {
                     let contents = rawTokens.slice(0, variableNameIndex + 1);