Modified: trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html (279501 => 279502)
--- trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html 2021-07-02 08:13:46 UTC (rev 279501)
+++ trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html 2021-07-02 14:13:18 UTC (rev 279502)
@@ -66,7 +66,7 @@
expectedCompletions: ["range"],
});
- function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions}) {
+ function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions, additionalFunctionValueCompletionsProvider}) {
suite.addTestCase({
name,
description,
@@ -74,8 +74,9 @@
caretPosition ??= text.length;
expectedPrefix ??= text;
expectedCompletions ??= [];
+ additionalFunctionValueCompletionsProvider ??= () => {};
- let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition});
+ let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider});
InspectorTest.expectEqual(completionResults.prefix, expectedPrefix, `Expected result prefix to be "${expectedPrefix}"`);
// Because expected completions could be added at any time, just make sure the list contains our expected completions, instead of enforcing an exact match between expectations and reality.
@@ -176,6 +177,58 @@
expectedCompletions: ["auto-fill", "auto-fit", "var()"],
});
+ // `attr(|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.AttributeFunction",
+ description: "Test that attribute function value completions from the custom provider are used.",
+ text: "attr(",
+ expectedPrefix: "",
+ expectedCompletions: ["class", "id", "var()"],
+ additionalFunctionValueCompletionsProvider: () => ["class", "id"],
+ });
+
+ // `attr(c|)`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineAttributeFunction",
+ description: "Test that attribute function value completions is inside a function with a closing parenthesis uses completions from the custom provider",
+ text: "attr(c)",
+ caretPosition: 6,
+ expectedPrefix: "c",
+ expectedCompletions: ["class"],
+ additionalFunctionValueCompletionsProvider: () => ["class", "id"],
+ });
+
+ // `var(|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunction",
+ description: "Test that variable function value completions from the custom provider are used.",
+ text: "var(",
+ expectedPrefix: "",
+ expectedCompletions: ["--one", "--two"],
+ additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
+ });
+
+ // `var(--o|`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionFiltered",
+ description: "Test that variable function value completions from the custom provider are filtered.",
+ text: "var(--o",
+ expectedPrefix: "--o",
+ expectedCompletions: ["--one"],
+ additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
+ });
+
+ // `calc(1 + var(|))`
+ addTestForPartialPropertyValue({
+ name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc",
+ description: "Test that variable function value completions from the custom provider are used when the var() is nested inside a calc()",
+ text: "calc(1 + var())",
+ caretPosition: 13,
+ expectedPrefix: "",
+ expectedCompletions: ["--one", "--two"],
+ additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
+ });
+
suite.runTestCasesAndFinish();
}
</script>
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js (279501 => 279502)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2021-07-02 08:13:46 UTC (rev 279501)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js 2021-07-02 14:13:18 UTC (rev 279502)
@@ -45,7 +45,7 @@
return {prefix: text, completions:WI.CSSCompletions.cssNameCompletions.startsWith(text)};
};
-WI.CSSKeywordCompletions.forPartialPropertyValue = function(text, propertyName, {caretPosition} = {})
+WI.CSSKeywordCompletions.forPartialPropertyValue = function(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider} = {})
{
caretPosition ??= text.length;
@@ -108,9 +108,12 @@
}
}
- // FIXME: <webkit.org/b/227098> Styles sidebar panel should autocomplete `var()` values.
- if (functionName)
- return {prefix: currentTokenValue, completions: WI.CSSKeywordCompletions.forFunction(functionName).startsWith(currentTokenValue)};
+ if (functionName) {
+ let completions = WI.CSSKeywordCompletions.forFunction(functionName);
+ let contextualValueCompletions = additionalFunctionValueCompletionsProvider?.(functionName) || [];
+ completions.addValues(contextualValueCompletions);
+ return {prefix: currentTokenValue, completions: completions.startsWith(currentTokenValue)};
+ }
return {prefix: currentTokenValue, completions: WI.CSSKeywordCompletions.forProperty(propertyName).startsWith(currentTokenValue)};
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (279501 => 279502)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2021-07-02 08:13:46 UTC (rev 279501)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2021-07-02 14:13:18 UTC (rev 279502)
@@ -47,6 +47,7 @@
this._propertyNameToEffectivePropertyMap = {};
this._usedCSSVariables = new Set;
+ this._allCSSVariables = new Set;
this._pendingRefreshTask = null;
this.refresh();
@@ -131,6 +132,7 @@
get orderedStyles() { return this._orderedStyles; }
get computedPrimaryFont() { return this._computedPrimaryFont; }
get usedCSSVariables() { return this._usedCSSVariables; }
+ get allCSSVariables() { return this._allCSSVariables; }
get needsRefresh()
{
@@ -769,7 +771,7 @@
this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
- this._collectUsedCSSVariables(cascadeOrderedStyleDeclarations);
+ this._collectCSSVariables(cascadeOrderedStyleDeclarations);
for (let pseudoElementInfo of this._pseudoElements.values()) {
pseudoElementInfo.orderedStyles = this._collectStylesInCascadeOrder(pseudoElementInfo.matchedRules, null, null);
@@ -945,12 +947,16 @@
}
}
- _collectUsedCSSVariables(styles)
+ _collectCSSVariables(styles)
{
+ this._allCSSVariables = new Set;
this._usedCSSVariables = new Set;
for (let style of styles) {
for (let property of style.enabledProperties) {
+ if (property.isVariable)
+ this._allCSSVariables.add(property.name);
+
let variables = WI.CSSProperty.findVariableNames(property.value);
if (!style.inherited) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (279501 => 279502)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-07-02 08:13:46 UTC (rev 279501)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-07-02 14:13:18 UTC (rev 279502)
@@ -339,6 +339,19 @@
return matches;
}
+ additionalFunctionValueCompletionsProvider(functionName)
+ {
+ switch (functionName) {
+ case "var":
+ return Array.from(this._property.ownerStyle.nodeStyles.allCSSVariables);
+
+ case "attr":
+ return this._property.ownerStyle.node.attributes().map((attribute) => attribute.name);
+ }
+
+ return [];
+ }
+
// SpreadsheetTextField delegate
spreadsheetTextFieldWillStartEditing(textField)
@@ -912,9 +925,8 @@
_valueCompletionDataProvider(text, {allowEmptyPrefix} = {})
{
- // FIXME: <webkit.org/b/227098> Styles sidebar panel should autocomplete `var()` values.
// FIXME: <webkit.org/b/227411> Styles sidebar panel should support midline and multiline completions.
- return WI.CSSKeywordCompletions.forPartialPropertyValue(text, this._nameElement.textContent.trim());
+ return WI.CSSKeywordCompletions.forPartialPropertyValue(text, this._nameElement.textContent.trim(), {additionalFunctionValueCompletionsProvider: this.additionalFunctionValueCompletionsProvider.bind(this)});
}
_setupJumpToSymbol(element)
