Changeset 279502 in webkit


Ignore:
Timestamp:
Jul 2, 2021, 7:13:18 AM (4 years ago)
Author:
Razvan Caliman
Message:

Web Inspector: Styles: should autocomplete var() and attr() values
​https://bugs.webkit.org/show_bug.cgi?id=227098
<rdar://problem/79418247>

Reviewed by Devin Rousso.

Source/WebInspectorUI:

Add support for completion suggestions in the Styles details sidebar panel
for CSS Variables for use with var() and DOM node attributes for use with attr().

  • UserInterface/Models/CSSCompletions.js:

(WI.CSSCompletions.prototype.addValues):

  • UserInterface/Models/CSSKeywordCompletions.js:
  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles):
(WI.DOMNodeStyles.prototype.get allCSSVariables):
(WI.DOMNodeStyles.prototype._updateStyleCascade):
(WI.DOMNodeStyles.prototype._collectCSSVariables):

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.getFunctionValueCompletions):
(WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):

LayoutTests:

Add test cases for contextual CSS function value completion.

  • inspector/unit-tests/css-keyword-completions-expected.txt:
  • inspector/unit-tests/css-keyword-completions.html:
Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r279499 r279502  
     12021-07-02  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Styles: should autocomplete `var()` and `attr()` values
     4        https://bugs.webkit.org/show_bug.cgi?id=227098
     5        <rdar://problem/79418247>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Add test cases for contextual CSS function value completion.
     10
     11        * inspector/unit-tests/css-keyword-completions-expected.txt:
     12        * inspector/unit-tests/css-keyword-completions.html:
     13
    1142021-07-02  Xabier Rodriguez Calvar  <calvaris@igalia.com>
    215

  • trunk/LayoutTests/inspector/unit-tests/css-keyword-completions-expected.txt

    r279422 r279502  
    5252PASS: All expected completions were present.
    5353
     54-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.AttributeFunction
     55PASS: Expected result prefix to be ""
     56PASS: All expected completions were present.
     57
     58-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineAttributeFunction
     59PASS: Expected result prefix to be "c"
     60PASS: All expected completions were present.
     61
     62-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunction
     63PASS: Expected result prefix to be ""
     64PASS: All expected completions were present.
     65
     66-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionFiltered
     67PASS: Expected result prefix to be "--o"
     68PASS: All expected completions were present.
     69
     70-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc
     71PASS: Expected result prefix to be ""
     72PASS: All expected completions were present.
     73

  • trunk/LayoutTests/inspector/unit-tests/css-keyword-completions.html

    r279422 r279502  
    6767    });
    6868
    69     function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions}) {
     69    function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions, additionalFunctionValueCompletionsProvider}) {
    7070        suite.addTestCase({
    7171            name,
    … …  
    7575                expectedPrefix ??= text;
    7676                expectedCompletions ??= [];
    77 
    78                 let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition});
     77                additionalFunctionValueCompletionsProvider ??= () => {};
     78
     79                let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider});
    7980                InspectorTest.expectEqual(completionResults.prefix, expectedPrefix, `Expected result prefix to be "${expectedPrefix}"`);
    8081
    … …  
    177178    });
    178179
     180    // `attr(|`
     181    addTestForPartialPropertyValue({
     182        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.AttributeFunction",
     183        description: "Test that attribute function value completions from the custom provider are used.",
     184        text: "attr(",
     185        expectedPrefix: "",
     186        expectedCompletions: ["class", "id", "var()"],
     187        additionalFunctionValueCompletionsProvider: () => ["class", "id"],
     188    });
     189
     190    // `attr(c|)`
     191    addTestForPartialPropertyValue({
     192        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineAttributeFunction",
     193        description: "Test that attribute function value completions is inside a function with a closing parenthesis uses completions from the custom provider",
     194        text: "attr(c)",
     195        caretPosition: 6,
     196        expectedPrefix: "c",
     197        expectedCompletions: ["class"],
     198        additionalFunctionValueCompletionsProvider: () => ["class", "id"],
     199    });
     200
     201    // `var(|`
     202    addTestForPartialPropertyValue({
     203        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunction",
     204        description: "Test that variable function value completions from the custom provider are used.",
     205        text: "var(",
     206        expectedPrefix: "",
     207        expectedCompletions: ["--one", "--two"],
     208        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
     209    });
     210
     211    // `var(--o|`
     212    addTestForPartialPropertyValue({
     213        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionFiltered",
     214        description: "Test that variable function value completions from the custom provider are filtered.",
     215        text: "var(--o",
     216        expectedPrefix: "--o",
     217        expectedCompletions: ["--one"],
     218        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
     219    });
     220
     221    // `calc(1 + var(|))`
     222    addTestForPartialPropertyValue({
     223        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc",
     224        description: "Test that variable function value completions from the custom provider are used when the var() is nested inside a calc()",
     225        text: "calc(1 + var())",
     226        caretPosition: 13,
     227        expectedPrefix: "",
     228        expectedCompletions: ["--one", "--two"],
     229        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
     230    });
     231
    179232    suite.runTestCasesAndFinish();
    180233}

  • trunk/Source/WebInspectorUI/ChangeLog

    r279493 r279502  
     12021-07-02  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Styles: should autocomplete `var()` and `attr()` values
     4        https://bugs.webkit.org/show_bug.cgi?id=227098
     5        <rdar://problem/79418247>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Add support for completion suggestions in the Styles details sidebar panel
     10        for CSS Variables for use with var() and DOM node attributes for use with attr().
     11
     12        * UserInterface/Models/CSSCompletions.js:
     13        (WI.CSSCompletions.prototype.addValues):
     14        * UserInterface/Models/CSSKeywordCompletions.js:
     15        * UserInterface/Models/DOMNodeStyles.js:
     16        (WI.DOMNodeStyles):
     17        (WI.DOMNodeStyles.prototype.get allCSSVariables):
     18        (WI.DOMNodeStyles.prototype._updateStyleCascade):
     19        (WI.DOMNodeStyles.prototype._collectCSSVariables):
     20        * UserInterface/Views/SpreadsheetStyleProperty.js:
     21        (WI.SpreadsheetStyleProperty.prototype.getFunctionValueCompletions):
     22        (WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):
     23
    1242021-07-01  Patrick Angle  <pangle@apple.com>
    225

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js

    r262302 r279502  
    262262    }
    263263
     264    addValues(values)
     265    {
     266        console.assert(Array.isArray(values), values);
     267        if (!values.length)
     268            return;
     269
     270        this._values.pushAll(values);
     271        this._values.sort();
     272    }
     273
    264274    startsWith(prefix)
    265275    {

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js

    r279422 r279502  
    4646};
    4747
    48 WI.CSSKeywordCompletions.forPartialPropertyValue = function(text, propertyName, {caretPosition} = {})
     48WI.CSSKeywordCompletions.forPartialPropertyValue = function(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider} = {})
    4949{
    5050    caretPosition ??= text.length;
    … …  
    109109    }
    110110
    111     // FIXME: <webkit.org/b/227098> Styles sidebar panel should autocomplete `var()` values.
    112     if (functionName)
    113         return {prefix: currentTokenValue, completions: WI.CSSKeywordCompletions.forFunction(functionName).startsWith(currentTokenValue)};
     111    if (functionName) {
     112        let completions = WI.CSSKeywordCompletions.forFunction(functionName);
     113        let contextualValueCompletions = additionalFunctionValueCompletionsProvider?.(functionName) || [];
     114        completions.addValues(contextualValueCompletions);
     115        return {prefix: currentTokenValue, completions: completions.startsWith(currentTokenValue)};
     116    }
    114117
    115118    return {prefix: currentTokenValue, completions: WI.CSSKeywordCompletions.forProperty(propertyName).startsWith(currentTokenValue)};

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

    r278607 r279502  
    4848        this._propertyNameToEffectivePropertyMap = {};
    4949        this._usedCSSVariables = new Set;
     50        this._allCSSVariables = new Set;
    5051
    5152        this._pendingRefreshTask = null;
    … …  
    132133    get computedPrimaryFont() { return this._computedPrimaryFont; }
    133134    get usedCSSVariables() { return this._usedCSSVariables; }
     135    get allCSSVariables() { return this._allCSSVariables; }
    134136
    135137    get needsRefresh()
    … …  
    770772        this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
    771773        this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
    772         this._collectUsedCSSVariables(cascadeOrderedStyleDeclarations);
     774        this._collectCSSVariables(cascadeOrderedStyleDeclarations);
    773775
    774776        for (let pseudoElementInfo of this._pseudoElements.values()) {
    … …  
    946948    }
    947949
    948     _collectUsedCSSVariables(styles)
    949     {
     950    _collectCSSVariables(styles)
     951    {
     952        this._allCSSVariables = new Set;
    950953        this._usedCSSVariables = new Set;
    951954
    952955        for (let style of styles) {
    953956            for (let property of style.enabledProperties) {
     957                if (property.isVariable)
     958                    this._allCSSVariables.add(property.name);
     959
    954960                let variables = WI.CSSProperty.findVariableNames(property.value);
    955961

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

    r279422 r279502  
    340340    }
    341341
     342    additionalFunctionValueCompletionsProvider(functionName)
     343    {
     344        switch (functionName) {
     345        case "var":
     346            return Array.from(this._property.ownerStyle.nodeStyles.allCSSVariables);
     347
     348        case "attr":
     349            return this._property.ownerStyle.node.attributes().map((attribute) => attribute.name);
     350        }
     351
     352        return [];
     353    }
     354
    342355    // SpreadsheetTextField delegate
    343356
    … …  
    913926    _valueCompletionDataProvider(text, {allowEmptyPrefix} = {})
    914927    {
    915         // FIXME: <webkit.org/b/227098> Styles sidebar panel should autocomplete `var()` values.
    916928        // FIXME: <webkit.org/b/227411> Styles sidebar panel should support midline and multiline completions.
    917         return WI.CSSKeywordCompletions.forPartialPropertyValue(text, this._nameElement.textContent.trim());
     929        return WI.CSSKeywordCompletions.forPartialPropertyValue(text, this._nameElement.textContent.trim(), {additionalFunctionValueCompletionsProvider: this.additionalFunctionValueCompletionsProvider.bind(this)});
    918930    }
    919931
Note: See TracChangeset for help on using the changeset viewer.