⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 248279 in webkit


Ignore:
Timestamp:
Aug 5, 2019, 4:40:40 PM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Styles: variable swatch not shown for var() with a fallback
​https://bugs.webkit.org/show_bug.cgi?id=200237

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
(WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens): Added.
(WI.SpreadsheetStyleProperty.prototype._addGradientTokens):
(WI.SpreadsheetStyleProperty.prototype._addColorTokens):
(WI.SpreadsheetStyleProperty.prototype._addTimingFunctionTokens):
(WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
Check to see if there's a fallback value in the var() and tokenize it if there is. Mark
the property as invalid if the var() doesn't end up resolving to anything.

  • UserInterface/Views/InlineSwatch.js:

(WI.InlineSwatch):
(WI.InlineSwatch.prototype.get value):
(WI.InlineSwatch.prototype._updateSwatch):
(WI.InlineSwatch.prototype._handleContextMenuEvent):
(WI.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
(WI.InlineSwatch.prototype._getNextValidHEXFormat):
Allow the value to be a function. In that case, use the getter this.value instead of the
value this._value directly so that the function is invoked.
This is needed for variable swatches because the fallback value could change after the
swatch has been created (e.g. another swatch in a CSS property value that just modifies the
text, rather than re-renders the entire CSS property value).

  • UserInterface/Models/CSSStyleDeclaration.js:

(WI.CSSStyleDeclaration.prototype.resolveVariableValue): Added.
Follow the variable chain until an ultimate value is reached.

  • UserInterface/Models/CSSKeywordCompletions.js:

(WI.CSSKeywordCompletions.isColorAwareProperty):
(WI.CSSKeywordCompletions.isTimingFunctionAwareProperty): Added.
Limit cubic-bezier and spring tokens to only be shown for timing function properties.

LayoutTests:

  • inspector/css/resolve-variable-value.html: Added.
  • inspector/css/resolve-variable-value-expected.txt: Added.
Location:
trunk
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r248276 r248279  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: variable swatch not shown for var() with a fallback
     4        https://bugs.webkit.org/show_bug.cgi?id=200237
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/css/resolve-variable-value.html: Added.
     9        * inspector/css/resolve-variable-value-expected.txt: Added.
     10
    1112019-08-05  Chris Dumez  <cdumez@apple.com>
    212

  • trunk/Source/WebInspectorUI/ChangeLog

    r248274 r248279  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: variable swatch not shown for var() with a fallback
     4        https://bugs.webkit.org/show_bug.cgi?id=200237
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/SpreadsheetStyleProperty.js:
     9        (WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
     10        (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens): Added.
     11        (WI.SpreadsheetStyleProperty.prototype._addGradientTokens):
     12        (WI.SpreadsheetStyleProperty.prototype._addColorTokens):
     13        (WI.SpreadsheetStyleProperty.prototype._addTimingFunctionTokens):
     14        (WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
     15        Check to see if there's a fallback value in the `var()` and tokenize it if there is. Mark
     16        the property as invalid if the `var()` doesn't end up resolving to anything.
     17
     18        * UserInterface/Views/InlineSwatch.js:
     19        (WI.InlineSwatch):
     20        (WI.InlineSwatch.prototype.get value):
     21        (WI.InlineSwatch.prototype._updateSwatch):
     22        (WI.InlineSwatch.prototype._handleContextMenuEvent):
     23        (WI.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
     24        (WI.InlineSwatch.prototype._getNextValidHEXFormat):
     25        Allow the `value` to be a function. In that case, use the getter `this.value` instead of the
     26        value `this._value` directly so that the function is invoked.
     27        This is needed for variable swatches because the fallback value could change after the
     28        swatch has been created (e.g. another swatch in a CSS property value that just modifies the
     29        text, rather than re-renders the entire CSS property value).
     30
     31        * UserInterface/Models/CSSStyleDeclaration.js:
     32        (WI.CSSStyleDeclaration.prototype.resolveVariableValue): Added.
     33        Follow the variable chain until an ultimate value is reached.
     34
     35        * UserInterface/Models/CSSKeywordCompletions.js:
     36        (WI.CSSKeywordCompletions.isColorAwareProperty):
     37        (WI.CSSKeywordCompletions.isTimingFunctionAwareProperty): Added.
     38        Limit `cubic-bezier` and `spring` tokens to only be shown for timing function properties.
     39
    1402019-08-05  Devin Rousso  <drousso@apple.com>
    241

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

    r247928 r248279  
    7676WI.CSSKeywordCompletions.isColorAwareProperty = function(name)
    7777{
    78     if (name in WI.CSSKeywordCompletions._colorAwareProperties)
     78    if (WI.CSSKeywordCompletions._colorAwareProperties.has(name))
    7979        return true;
    8080
    8181    let isNotPrefixed = name.charAt(0) !== "-";
    82     if (isNotPrefixed && ("-webkit-" + name) in WI.CSSKeywordCompletions._colorAwareProperties)
     82    if (isNotPrefixed && WI.CSSKeywordCompletions._colorAwareProperties.has("-webkit-" + name))
    8383        return true;
    8484
    8585    if (name.endsWith("color"))
     86        return true;
     87
     88    return false;
     89};
     90
     91WI.CSSKeywordCompletions.isTimingFunctionAwareProperty = function(name)
     92{
     93    if (WI.CSSKeywordCompletions._timingFunctionAwareProperties.has(name))
     94        return true;
     95
     96    let isNotPrefixed = name.charAt(0) !== "-";
     97    if (isNotPrefixed && WI.CSSKeywordCompletions._timingFunctionAwareProperties.has("-webkit-" + name))
    8698        return true;
    8799
    … …  
    303315];
    304316
    305 WI.CSSKeywordCompletions._colorAwareProperties = [
    306     "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
    307     "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
    308     "fill", "outline", "outline-color", "stroke", "text-line-through", "text-line-through-color", "text-overline", "text-overline-color",
    309     "text-shadow", "text-underline", "text-underline-color", "-webkit-box-shadow", "-webkit-column-rule", "-webkit-column-rule-color",
    310     "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-fill-color", "-webkit-text-stroke", "-webkit-text-stroke-color",
    311     "-webkit-text-decoration-color",
     317WI.CSSKeywordCompletions._colorAwareProperties = new Set([
     318    "background",
     319    "background-color",
     320    "background-image",
     321    "border",
     322    "border-color",
     323    "border-bottom",
     324    "border-bottom-color",
     325    "border-left",
     326    "border-left-color",
     327    "border-right",
     328    "border-right-color",
     329    "border-top",
     330    "border-top-color",
     331    "box-shadow", "-webkit-box-shadow",
     332    "color",
     333    "column-rule", "-webkit-column-rule",
     334    "column-rule-color", "-webkit-column-rule-color",
     335    "fill",
     336    "outline",
     337    "outline-color",
     338    "stroke",
     339    "text-decoration-color", "-webkit-text-decoration-color",
     340    "text-emphasis", "-webkit-text-emphasis",
     341    "text-emphasis-color", "-webkit-text-emphasis-color",
     342    "text-line-through",
     343    "text-line-through-color",
     344    "text-overline",
     345    "text-overline-color",
     346    "text-shadow",
     347    "text-underline",
     348    "text-underline-color",
     349    "-webkit-text-fill-color",
     350    "-webkit-text-stroke",
     351    "-webkit-text-stroke-color",
    312352
    313353    // iOS Properties
    314     "-webkit-tap-highlight-color"
    315 ].keySet();
     354    "-webkit-tap-highlight-color",
     355]);
     356
     357WI.CSSKeywordCompletions._timingFunctionAwareProperties = new Set([
     358    "animation", "-webkit-animation",
     359    "animation-timing-function", "-webkit-animation-timing-function",
     360    "transition", "-webkit-transition",
     361    "transition-timing-function", "-webkit-transition-timing-function",
     362]);
    316363
    317364WI.CSSKeywordCompletions._propertyKeywordMap = {

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

    r248202 r248279  
    349349    }
    350350
     351    resolveVariableValue(text)
     352    {
     353        const invalid = Symbol("invalid");
     354
     355        let checkTokens = (tokens) => {
     356            let startIndex = NaN;
     357            let openParenthesis = 0;
     358            for (let i = 0; i < tokens.length; i++) {
     359                let token = tokens[i];
     360                if (token.value === "var" && token.type && token.type.includes("atom")) {
     361                    if (isNaN(startIndex)) {
     362                        startIndex = i;
     363                        openParenthesis = 0;
     364                    }
     365                    continue;
     366                }
     367
     368                if (isNaN(startIndex))
     369                    continue;
     370
     371                if (token.value === "(") {
     372                    ++openParenthesis;
     373                    continue;
     374                }
     375
     376                if (token.value === ")") {
     377                    --openParenthesis;
     378                    if (openParenthesis > 0)
     379                        continue;
     380
     381                    let variableTokens = tokens.slice(startIndex, i + 1);
     382                    startIndex = NaN;
     383
     384                    let variableNameIndex = variableTokens.findIndex((token) => token.value.startsWith("--") && /\bvariable-2\b/.test(token.type));
     385                    if (variableNameIndex === -1)
     386                        continue;
     387
     388                    let variableProperty = this.propertyForName(variableTokens[variableNameIndex].value, true);
     389                    if (variableProperty)
     390                        return variableProperty.value.trim();
     391
     392                    let fallbackStartIndex = variableTokens.findIndex((value, j) => j > variableNameIndex + 1 && /\bm-css\b/.test(value.type));
     393                    if (fallbackStartIndex === -1)
     394                        return invalid;
     395
     396                    let fallbackTokens = variableTokens.slice(fallbackStartIndex, i);
     397                    return checkTokens(fallbackTokens) || fallbackTokens.reduce((accumulator, token) => accumulator + token.value, "").trim();
     398                }
     399            }
     400            return null;
     401        };
     402
     403        let resolved = checkTokens(WI.tokenizeCSSValue(text));
     404        return resolved === invalid ? null : resolved;
     405    }
     406
    351407    newBlankProperty(propertyIndex)
    352408    {

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

    r242602 r248279  
    9191    get value()
    9292    {
     93        if (typeof this._value === "function")
     94            return this._value();
    9395        return this._value;
    9496    }
    … …  
    138140    _updateSwatch(dontFireEvents)
    139141    {
     142        let value = this.value;
     143
    140144        if (this._type === WI.InlineSwatch.Type.Color || this._type === WI.InlineSwatch.Type.Gradient)
    141             this._swatchInnerElement.style.background = this._value ? this._value.toString() : null;
     145            this._swatchInnerElement.style.background = value ? value.toString() : null;
    142146        else if (this._type === WI.InlineSwatch.Type.Image)
    143             this._swatchInnerElement.style.setProperty("background-image", `url(${this._value.src})`);
     147            this._swatchInnerElement.style.setProperty("background-image", `url(${value.src})`);
    144148
    145149        if (!dontFireEvents)
    146             this.dispatchEventToListeners(WI.InlineSwatch.Event.ValueChanged, {value: this._value});
     150            this.dispatchEventToListeners(WI.InlineSwatch.Event.ValueChanged, {value});
    147151    }
    148152
    … …  
    151155        event.stop();
    152156
    153         if (event.shiftKey && this._value) {
     157        let value = this.value;
     158
     159        if (event.shiftKey && value) {
    154160            if (this._type === WI.InlineSwatch.Type.Color) {
    155                 let nextFormat = this._value.nextFormat();
     161                let nextFormat = value.nextFormat();
    156162                console.assert(nextFormat);
    157163                if (nextFormat) {
    158                     this._value.format = nextFormat;
     164                    value.format = nextFormat;
    159165                    this._updateSwatch();
    160166                }
    … …  
    172178        if (this._valueEditor)
    173179            return;
     180
     181        if (!value)
     182            value = this._fallbackValue();
    174183
    175184        let bounds = WI.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
    … …  
    221230
    222231        case WI.InlineSwatch.Type.Image:
    223             this._valueEditor = {};
    224             this._valueEditor.element = document.createElement("img");
    225             this._valueEditor.element.src = this._value.src;
    226             this._valueEditor.element.classList.add("show-grid");
    227             this._valueEditor.element.style.setProperty("max-width", "50vw");
    228             this._valueEditor.element.style.setProperty("max-height", "50vh");
     232            if (value.src) {
     233                this._valueEditor = {};
     234                this._valueEditor.element = document.createElement("img");
     235                this._valueEditor.element.src = value.src;
     236                this._valueEditor.element.classList.add("show-grid");
     237                this._valueEditor.element.style.setProperty("max-width", "50vw");
     238                this._valueEditor.element.style.setProperty("max-height", "50vh");
     239            }
    229240            break;
    230241        }
    … …  
    238249        this.dispatchEventToListeners(WI.InlineSwatch.Event.Activated);
    239250
    240         let value = this._value || this._fallbackValue();
    241251        switch (this._type) {
    242252        case WI.InlineSwatch.Type.Color:
    … …  
    295305    _handleContextMenuEvent(event)
    296306    {
    297         if (!this._value)
     307        let value = this.value;
     308        if (!value)
    298309            return;
    299310
    300311        let contextMenu = WI.ContextMenu.createFromEvent(event);
    301312
    302         if (this._value.isKeyword() && this._value.format !== WI.Color.Format.Keyword) {
     313        if (value.isKeyword() && value.format !== WI.Color.Format.Keyword) {
    303314            contextMenu.appendItem(WI.UIString("Format: Keyword"), () => {
    304                 this._value.format = WI.Color.Format.Keyword;
     315                value.format = WI.Color.Format.Keyword;
    305316                this._updateSwatch();
    306317            });
    … …  
    310321        if (hexInfo) {
    311322            contextMenu.appendItem(hexInfo.title, () => {
    312                 this._value.format = hexInfo.format;
    313                 this._updateSwatch();
    314             });
    315         }
    316 
    317         if (this._value.simple && this._value.format !== WI.Color.Format.HSL) {
     323                value.format = hexInfo.format;
     324                this._updateSwatch();
     325            });
     326        }
     327
     328        if (value.simple && value.format !== WI.Color.Format.HSL) {
    318329            contextMenu.appendItem(WI.UIString("Format: HSL"), () => {
    319                 this._value.format = WI.Color.Format.HSL;
    320                 this._updateSwatch();
    321             });
    322         } else if (this._value.format !== WI.Color.Format.HSLA) {
     330                value.format = WI.Color.Format.HSL;
     331                this._updateSwatch();
     332            });
     333        } else if (value.format !== WI.Color.Format.HSLA) {
    323334            contextMenu.appendItem(WI.UIString("Format: HSLA"), () => {
    324                 this._value.format = WI.Color.Format.HSLA;
    325                 this._updateSwatch();
    326             });
    327         }
    328 
    329         if (this._value.simple && this._value.format !== WI.Color.Format.RGB) {
     335                value.format = WI.Color.Format.HSLA;
     336                this._updateSwatch();
     337            });
     338        }
     339
     340        if (value.simple && value.format !== WI.Color.Format.RGB) {
    330341            contextMenu.appendItem(WI.UIString("Format: RGB"), () => {
    331                 this._value.format = WI.Color.Format.RGB;
    332                 this._updateSwatch();
    333             });
    334         } else if (this._value.format !== WI.Color.Format.RGBA) {
     342                value.format = WI.Color.Format.RGB;
     343                this._updateSwatch();
     344            });
     345        } else if (value.format !== WI.Color.Format.RGBA) {
    335346            contextMenu.appendItem(WI.UIString("Format: RGBA"), () => {
    336                 this._value.format = WI.Color.Format.RGBA;
     347                value.format = WI.Color.Format.RGBA;
    337348                this._updateSwatch();
    338349            });
    … …  
    345356            return false;
    346357
     358        let value = this.value;
     359
    347360        function hexMatchesCurrentColor(hexInfo) {
    348361            let nextIsSimple = hexInfo.format === WI.Color.Format.ShortHEX || hexInfo.format === WI.Color.Format.HEX;
    349             if (nextIsSimple && !this._value.simple)
     362            if (nextIsSimple && !value.simple)
    350363                return false;
    351364
    352365            let nextIsShort = hexInfo.format === WI.Color.Format.ShortHEX || hexInfo.format === WI.Color.Format.ShortHEXAlpha;
    353             if (nextIsShort && !this._value.canBeSerializedAsShortHEX())
     366            if (nextIsShort && !value.canBeSerializedAsShortHEX())
    354367                return false;
    355368
    … …  
    376389        ];
    377390
    378         let currentColorIsHEX = hexFormats.some((info) => info.format === this._value.format);
     391        let currentColorIsHEX = hexFormats.some((info) => info.format === value.format);
    379392
    380393        for (let i = 0; i < hexFormats.length; ++i) {
    381             if (currentColorIsHEX && this._value.format !== hexFormats[i].format)
     394            if (currentColorIsHEX && value.format !== hexFormats[i].format)
    382395                continue;
    383396
    384397            for (let j = ~~currentColorIsHEX; j < hexFormats.length; ++j) {
    385398                let nextIndex = (i + j) % hexFormats.length;
    386                 if (hexMatchesCurrentColor.call(this, hexFormats[nextIndex]))
     399                if (hexMatchesCurrentColor(hexFormats[nextIndex]))
    387400                    return hexFormats[nextIndex];
    388401            }

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

    r247760 r248279  
    448448        let tokens = WI.tokenizeCSSValue(value);
    449449
    450         if (this._property.enabled) {
    451             // FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
    452 
    453             // CSS variables may contain color - display color picker for them.
    454             if (this._property.variable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
    455                 tokens = this._addGradientTokens(tokens);
    456                 tokens = this._addColorTokens(tokens);
    457             }
    458             tokens = this._addTimingFunctionTokens(tokens, "cubic-bezier");
    459             tokens = this._addTimingFunctionTokens(tokens, "spring");
    460             tokens = this._addVariableTokens(tokens);
    461         }
     450        if (this._property.enabled)
     451            tokens = this._replaceSpecialTokens(tokens);
    462452
    463453        tokens = tokens.map((token) => {
    … …  
    494484    }
    495485
    496     _createInlineSwatch(type, text, valueObject)
     486    _createInlineSwatch(type, contents, valueObject)
    497487    {
    498488        let tokenElement = document.createElement("span");
    499489        let innerElement = document.createElement("span");
    500         innerElement.textContent = text;
     490        for (let item of contents) {
     491            if (item instanceof Node)
     492                innerElement.appendChild(item);
     493            else if (typeof item === "object")
     494                innerElement.append(item.value);
     495            else
     496                innerElement.append(item);
     497        }
    501498
    502499        let readOnly = !this._isEditable();
    … …  
    515512        }, this);
    516513
     514        if (type === WI.InlineSwatch.Type.Variable) {
     515            swatch.value = () => {
     516                return this._property.ownerStyle.nodeStyles.computedStyle.resolveVariableValue(innerElement.textContent);
     517            };
     518        }
     519
    517520        if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchActivated === "function") {
    518521            swatch.addEventListener(WI.InlineSwatch.Event.Activated, () => {
    … …  
    530533
    531534        return tokenElement;
     535    }
     536
     537    _replaceSpecialTokens(tokens)
     538    {
     539        // FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
     540
     541        tokens = this._addVariableTokens(tokens);
     542
     543        if (this._property.variable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
     544            tokens = this._addGradientTokens(tokens);
     545            tokens = this._addColorTokens(tokens);
     546        }
     547
     548        if (this._property.variable || WI.CSSKeywordCompletions.isTimingFunctionAwareProperty(this._property.name)) {
     549            tokens = this._addTimingFunctionTokens(tokens, "cubic-bezier");
     550            tokens = this._addTimingFunctionTokens(tokens, "spring");
     551        }
     552
     553        return tokens;
    532554    }
    533555
    … …  
    557579                let gradient = WI.Gradient.fromString(text);
    558580                if (gradient)
    559                     newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Gradient, text, gradient));
     581                    newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Gradient, rawTokens, gradient));
    560582                else
    561583                    newTokens.push(...rawTokens);
    … …  
    576598            let color = WI.Color.fromString(text);
    577599            if (color)
    578                 newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Color, text, color));
     600                newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Color, rawTokens, color));
    579601            else
    580602                newTokens.push(...rawTokens);
    … …  
    643665
    644666                if (valueObject)
    645                     newTokens.push(this._createInlineSwatch(inlineSwatchType, text, valueObject));
     667                    newTokens.push(this._createInlineSwatch(inlineSwatchType, rawTokens, valueObject));
    646668                else
    647669                    newTokens.push(...rawTokens);
    … …  
    664686            let token = tokens[i];
    665687            if (token.value === "var" && token.type && token.type.includes("atom")) {
    666                 startIndex = i;
    667                 openParenthesis = 0;
     688                if (isNaN(startIndex)) {
     689                    startIndex = i;
     690                    openParenthesis = 0;
     691                }
    668692            } else if (token.value === "(" && !isNaN(startIndex))
    669693                ++openParenthesis;
    … …  
    674698
    675699                let rawTokens = tokens.slice(startIndex, i + 1);
    676                 let tokenValues = rawTokens.map((token) => token.value);
    677                 let variableName = tokenValues.find((value, i) => value.startsWith("--") && /\bvariable-2\b/.test(rawTokens[i].type));
    678 
    679                 const dontCreateIfMissing = true;
    680                 let variableProperty = this._property.ownerStyle.nodeStyles.computedStyle.propertyForName(variableName, dontCreateIfMissing);
    681                 if (variableProperty) {
    682                     let valueObject = variableProperty.value.trim();
    683                     newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Variable, tokenValues.join(""), valueObject));
     700                let variableNameIndex = rawTokens.findIndex((token) => token.value.startsWith("--") && /\bvariable-2\b/.test(token.type));
     701                if (variableNameIndex !== -1) {
     702                    let contents = [];
     703                    let fallbackStartIndex = rawTokens.findIndex((value, i) => i > variableNameIndex + 1 && /\bm-css\b/.test(value.type));
     704                    if (fallbackStartIndex !== -1) {
     705                        contents = contents.concat(rawTokens.slice(0, fallbackStartIndex));
     706                        contents = contents.concat(this._replaceSpecialTokens(rawTokens.slice(fallbackStartIndex, i)));
     707                    } else
     708                        contents = contents.concat(rawTokens.slice(0, i));
     709                    contents.push(token);
     710
     711                    let text = rawTokens.reduce((accumulator, token) => accumulator + token.value, "");
     712                    if (this._property.ownerStyle.nodeStyles.computedStyle.resolveVariableValue(text))
     713                        newTokens.push(this._createInlineSwatch(WI.InlineSwatch.Type.Variable, contents));
     714                    else
     715                        newTokens = newTokens.concat(contents);
    684716                } else {
    685717                    this._hasInvalidVariableValue = true;
Note: See TracChangeset for help on using the changeset viewer.