Modified: trunk/Source/WebInspectorUI/ChangeLog (260589 => 260590)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-04-23 19:49:01 UTC (rev 260589)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-04-23 19:49:50 UTC (rev 260590)
@@ -1,5 +1,24 @@
2020-04-23 Devin Rousso <[email protected]>
+ Web Inspector: REGRESSION: Elements: Styles: color functions are missing swatches
+ https://bugs.webkit.org/show_bug.cgi?id=210930
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addGradientTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addColorTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addTimingFunctionTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addBoxShadowTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
+ Only attempt to `WI.Color.fromString` when at a ")" that is not part of another function.
+ Drive-by: add variable tokens after variable text is resolved, as otherwise the variable is
+ replaced with a `WI.InlineSwatch`, which replaces the original text, preventing it
+ from being used for looking up the variable name.
+
+2020-04-23 Devin Rousso <[email protected]>
+
Web Inspector: Uncaught Exception: SyntaxError: Invalid regular _expression_: missing )
https://bugs.webkit.org/show_bug.cgi?id=210890
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (260589 => 260590)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2020-04-23 19:49:01 UTC (rev 260589)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2020-04-23 19:49:50 UTC (rev 260590)
@@ -555,8 +555,6 @@
if (this._property.name === "box-shadow")
return this._addBoxShadowTokens(tokens);
- tokens = this._addVariableTokens(tokens);
-
if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
tokens = this._addGradientTokens(tokens);
tokens = this._addColorTokens(tokens);
@@ -567,6 +565,8 @@
tokens = this._addTimingFunctionTokens(tokens, "spring");
}
+ tokens = this._addVariableTokens(tokens);
+
return tokens;
}
@@ -592,7 +592,10 @@
}
let rawTokens = tokens.slice(gradientStartIndex, i + 1);
+
let text = this._resolveVariables(rawTokens.map((token) => token.value).join(""));
+ rawTokens = this._addVariableTokens(rawTokens);
+
let gradient = WI.Gradient.fromString(text);
if (gradient)
newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Gradient, rawTokens, gradient));
@@ -639,16 +642,17 @@
continue;
}
- if (token.value === ")") {
- --openParentheses;
- if (openParentheses)
- continue;
- }
+ if (token.value !== ")")
+ continue;
- // Color Function end
+ if (--openParentheses)
+ continue;
let rawTokens = tokens.slice(colorFunctionStartIndex, i + 1);
+
let text = this._resolveVariables(rawTokens.map((token) => token.value).join(""));
+ rawTokens = this._addVariableTokens(rawTokens);
+
pushPossibleColorToken(text, ...rawTokens);
colorFunctionStartIndex = NaN;
} else
@@ -678,7 +682,9 @@
continue;
let rawTokens = tokens.slice(startIndex, i + 1);
+
let text = this._resolveVariables(rawTokens.map((token) => token.value).join(""));
+ rawTokens = this._addVariableTokens(rawTokens);
let valueObject;
let inlineSwatchType;
@@ -731,6 +737,8 @@
newTokens.pushAll(rawTokens.slice(0, firstNonWhitespaceIndex));
let text = this._resolveVariables(nonWhitespaceTokens.map((rawToken) => rawToken.value).join(""));
+ nonWhitespaceTokens = this._addVariableTokens(nonWhitespaceTokens);
+
let boxShadow = WI.BoxShadow.fromString(text);
if (boxShadow)
newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.BoxShadow, nonWhitespaceTokens, boxShadow));
@@ -803,7 +811,15 @@
let fallbackStartIndex = rawTokens.findIndex((value, i) => i > variableNameIndex + 1 && /\bm-css\b/.test(value.type));
if (fallbackStartIndex !== -1) {
contents.pushAll(rawTokens.slice(variableNameIndex + 1, fallbackStartIndex));
- contents.pushAll(this._replaceSpecialTokens(rawTokens.slice(fallbackStartIndex, i)));
+
+ let fallbackTokens = rawTokens.slice(fallbackStartIndex, i);
+ fallbackTokens = this._addBoxShadowTokens(fallbackTokens);
+ fallbackTokens = this._addGradientTokens(fallbackTokens);
+ fallbackTokens = this._addColorTokens(fallbackTokens);
+ fallbackTokens = this._addTimingFunctionTokens(fallbackTokens, "cubic-bezier");
+ fallbackTokens = this._addTimingFunctionTokens(fallbackTokens, "spring");
+ fallbackTokens = this._addVariableTokens(fallbackTokens);
+ contents.pushAll(fallbackTokens);
} else
contents.pushAll(rawTokens.slice(variableNameIndex + 1, i));
contents.push(token);
