Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso committed Jul 6, 2022
1 parent 72de969 commit 714fd40be95d509cecf97ce368918383ed1fe37d
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 6 deletions.
@@ -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:
[
@@ -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; */
@@ -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];
@@ -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;

@@ -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);

0 comments on commit 714fd40

Please sign in to comment.