Changeset 291740 in webkit


Ignore:
Timestamp:
Mar 23, 2022 1:40:10 AM (4 months ago)
Author:
Razvan Caliman
Message:

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.

Source/WebInspectorUI:

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:

LayoutTests:

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:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r291737 r291740  
     12022-03-23  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Styles panel: Unwanted extra dash when autocompleting CSS variable names
     4        https://bugs.webkit.org/show_bug.cgi?id=237676
     5
     6        Reviewed by Patrick Angle.
     7
     8        Add tests for special cases of matching incomplete CSS variable names in autocompletion.
     9
     10        * inspector/unit-tests/css-keyword-completions-expected.txt:
     11        * inspector/unit-tests/css-keyword-completions.html:
     12
    1132022-03-22  Ben Nham  <nham@apple.com>
    214

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

    r287934 r291740  
    7272PASS: All expected completions were present.
    7373
     74-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.InvalidVariableName
     75PASS: Expected result prefix to be "-x"
     76PASS: All expected completions were present.
     77
     78-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.IncompleteVariableName
     79PASS: Expected result prefix to be "--"
     80PASS: All expected completions were present.
     81
     82-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.DashedEnvironmentVariableName
     83PASS: Expected result prefix to be "--"
     84PASS: All expected completions were present.
     85
     86-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VendorPrefixedValue
     87PASS: Expected result prefix to be "-webkit"
     88PASS: All expected completions were present.
     89
     90-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.SubtractionCalc
     91PASS: Expected result prefix to be ""
     92PASS: All expected completions were present.
     93
    7494-- Running test case: WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc
    7595PASS: Expected result prefix to be ""

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

    r287934 r291740  
    232232    });
    233233
     234    // `var(-x|`
     235    addTestForPartialPropertyValue({
     236        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.InvalidVariableName",
     237        description: "Test that an invalid variable name is still used as a prefix",
     238        text: "var(-x",
     239        expectedPrefix: "-x",
     240        expectedCompletions: [],
     241    });
     242
     243    // `var(--|`
     244    addTestForPartialPropertyValue({
     245        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.IncompleteVariableName",
     246        description: "Test that an incomplete variable name is still used as a prefix",
     247        text: "var(--",
     248        expectedPrefix: "--",
     249        expectedCompletions: [],
     250    });
     251
     252    // `env(--|`
     253    addTestForPartialPropertyValue({
     254        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.DashedEnvironmentVariableName",
     255        description: "Test that a dashed name used within env() is entirely used as a prefix",
     256        text: "env(--",
     257        expectedPrefix: "--",
     258        expectedCompletions: [],
     259    });
     260
     261    // `-webkit|`
     262    addTestForPartialPropertyValue({
     263        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VendorPrefixedValue",
     264        description: "Test that a value that looks vendor-prefixed is entirely used as a prefix",
     265        propertyName: "display",
     266        text: "-webkit",
     267        expectedPrefix: "-webkit",
     268        expectedCompletions: ["-webkit-flex"],
     269    });
     270
     271    // `calc(1 - |`
     272    addTestForPartialPropertyValue({
     273        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.SubtractionCalc",
     274        description: "Test that a whitespace-separated minus sign in calc() isn't included in the prefix",
     275        text: "calc(1 - ",
     276        expectedPrefix: "",
     277        expectedCompletions: [],
     278    });
     279
    234280    // `calc(1 + var(|))`
    235281    addTestForPartialPropertyValue({

  • trunk/Source/WebInspectorUI/ChangeLog

    r291729 r291740  
     12022-03-23  Razvan Caliman  <rcaliman@apple.com>
     2
     3        Web Inspector: Styles panel: Unwanted extra dash when autocompleting CSS variable names
     4        https://bugs.webkit.org/show_bug.cgi?id=237676
     5
     6        Reviewed by Patrick Angle.
     7
     8        The CSS-mode tokenizer provided by CodeMirror and used in Web Inspector matches strictly conforming
     9        CSS variable names, i.e. prefixed with two dahses, `--`.
     10
     11        An identifier like `-name` gets split into two tokens `-` and `name`.
     12        The token at the cursor position becomes just `name`.
     13        This token's value is used as a query string for autocompletion.
     14
     15        When a completion suggestion is picked, the query string gets replaced with the suggestion text in
     16        `WI.SpreadsheetTextField._updatePendingValueWithCompletionText()`.
     17        But because it was split from the query, the dash ends up prepended to the replaced string.
     18
     19        This patch adds a special case in `WI.CSSKeywordCompletions.forPartialPropertyValue()`
     20        to account for this aspect of the tokenizer.
     21
     22        * UserInterface/Models/CSSKeywordCompletions.js:
     23
    1242022-03-22  Patrick Angle  <pangle@apple.com>
    225

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

    r287934 r291740  
    101101    if (currentTokenValue === ")" || tokenBeforeCaret?.value === ")")
    102102        return {prefix: "", completions: []};
     103
     104    // The CodeMirror CSS-mode tokenizer splits a string like `-name` into two tokens: `-` and `name`.
     105    if (currentTokenValue.length && tokenBeforeCaret?.value === "-") {
     106        currentTokenValue = tokenBeforeCaret.value + currentTokenValue;
     107    }
    103108
    104109    let functionName = null;
Note: See TracChangeset for help on using the changeset viewer.