Modified: trunk/LayoutTests/ChangeLog (291739 => 291740)
--- trunk/LayoutTests/ChangeLog 2022-03-23 08:09:32 UTC (rev 291739)
+++ trunk/LayoutTests/ChangeLog 2022-03-23 08:40:10 UTC (rev 291740)
@@ -1,3 +1,15 @@
+2022-03-23 Razvan Caliman <[email protected]>
+
+ Web Inspector: Styles panel: Unwanted extra dash when autocompleting CSS variable names
+ https://bugs.webkit.org/show_bug.cgi?id=237676
+
+ Reviewed by Patrick Angle.
+
+ Add tests for special cases of matching incomplete CSS variable names in autocompletion.
+
+ * inspector/unit-tests/css-keyword-completions-expected.txt:
+ * inspector/unit-tests/css-keyword-completions.html:
+
2022-03-22 Ben Nham <[email protected]>
Only show notification permission prompt on transient activation
Modified: trunk/LayoutTests/inspector/unit-tests/css-keyword-completions-expected.txt (291739 => 291740)
--- trunk/LayoutTests/inspector/unit-tests/css-keyword-completions-expected.txt 2022-03-23 08:09:32 UTC (rev 291739)
+++ trunk/LayoutTests/inspector/unit-tests/css-keyword-completions-expected.txt 2022-03-23 08:40:10 UTC (rev 291740)
@@ -71,6 +71,26 @@
PASS: Expected result prefix to be "--o"
PASS: All expected completions were present.
+-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.InvalidVariableName
+PASS: Expected result prefix to be "-x"
+PASS: All expected completions were present.
+
+-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.IncompleteVariableName
+PASS: Expected result prefix to be "--"
+PASS: All expected completions were present.
+
+-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.DashedEnvironmentVariableName
+PASS: Expected result prefix to be "--"
+PASS: All expected completions were present.
+
+-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VendorPrefixedValue
+PASS: Expected result prefix to be "-webkit"
+PASS: All expected completions were present.
+
+-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.SubtractionCalc
+PASS: Expected result prefix to be ""
+PASS: All expected completions were present.
+
-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc
PASS: Expected result prefix to be ""
PASS: All expected completions were present.
Modified: trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html (291739 => 291740)
--- trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html 2022-03-23 08:09:32 UTC (rev 291739)
+++ trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html 2022-03-23 08:40:10 UTC (rev 291740)
@@ -231,6 +231,52 @@
additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
});
+ // `var(-x|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.InvalidVariableName",
+ description: "Test that an invalid variable name is still used as a prefix",
+ text: "var(-x",
+ expectedPrefix: "-x",
+ expectedCompletions: [],
+ });
+
+ // `var(--|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.IncompleteVariableName",
+ description: "Test that an incomplete variable name is still used as a prefix",
+ text: "var(--",
+ expectedPrefix: "--",
+ expectedCompletions: [],
+ });
+
+ // `env(--|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.DashedEnvironmentVariableName",
+ description: "Test that a dashed name used within env() is entirely used as a prefix",
+ text: "env(--",
+ expectedPrefix: "--",
+ expectedCompletions: [],
+ });
+
+ // `-webkit|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VendorPrefixedValue",
+ description: "Test that a value that looks vendor-prefixed is entirely used as a prefix",
+ propertyName: "display",
+ text: "-webkit",
+ expectedPrefix: "-webkit",
+ expectedCompletions: ["-webkit-flex"],
+ });
+
+ // `calc(1 - |`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.SubtractionCalc",
+ description: "Test that a whitespace-separated minus sign in calc() isn't included in the prefix",
+ text: "calc(1 - ",
+ expectedPrefix: "",
+ expectedCompletions: [],
+ });
+
// `calc(1 + var(|))`
addTestForPartialPropertyValue({
name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc",
Modified: trunk/Source/WebInspectorUI/ChangeLog (291739 => 291740)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-03-23 08:09:32 UTC (rev 291739)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-03-23 08:40:10 UTC (rev 291740)
@@ -1,3 +1,26 @@
+2022-03-23 Razvan Caliman <[email protected]>
+
+ Web Inspector: Styles panel: Unwanted extra dash when autocompleting CSS variable names
+ https://bugs.webkit.org/show_bug.cgi?id=237676
+
+ Reviewed by Patrick Angle.
+
+ The CSS-mode tokenizer provided by CodeMirror and used in Web Inspector matches strictly conforming
+ CSS variable names, i.e. prefixed with two dahses, `--`.
+
+ An identifier like `-name` gets split into two tokens `-` and `name`.
+ The token at the cursor position becomes just `name`.
+ This token's value is used as a query string for autocompletion.
+
+ When a completion suggestion is picked, the query string gets replaced with the suggestion text in
+ `WI.SpreadsheetTextField._updatePendingValueWithCompletionText()`.
+ But because it was split from the query, the dash ends up prepended to the replaced string.
+
+ This patch adds a special case in `WI.CSSKeywordCompletions.forPartialPropertyValue()`
+ to account for this aspect of the tokenizer.
+
+ * UserInterface/Models/CSSKeywordCompletions.js:
+
2022-03-22 Patrick Angle <[email protected]>
Web Inspector: Elements tab: selection variable not displayed after losing focus
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js (291739 => 291740)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2022-03-23 08:09:32 UTC (rev 291739)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2022-03-23 08:40:10 UTC (rev 291740)
@@ -101,6 +101,11 @@
if (currentTokenValue === ")" || tokenBeforeCaret?.value === ")")
return {prefix: "", completions: []};
+ // The CodeMirror CSS-mode tokenizer splits a string like `-name` into two tokens: `-` and `name`.
+ if (currentTokenValue.length && tokenBeforeCaret?.value === "-") {
+ currentTokenValue = tokenBeforeCaret.value + currentTokenValue;
+ }
+
let functionName = null;
let preceedingFunctionDepth = 0;
for (let i = indexOfTokenAtCaret; i >= 0; --i) {
