Web Inspector: Styles: variable swatch not shown for var() with a fallback
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 5 Aug 2019 23:40:40 +0000 (23:40 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 5 Aug 2019 23:40:40 +0000 (23:40 +0000)
commite5927258437ae9e0ba115068a11bcc18c6565723
treed90f7f6cb1a5776c91d070ef390d9e70f0dbbe51
parent61e7154488429bf3eb49b54ec9a45beac39745bc
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248279 268f45cc-cd09-0410-ab3c-d52691b4dbfc
LayoutTests/ChangeLog
LayoutTests/inspector/css/resolve-variable-value-expected.txt [new file with mode: 0644]
LayoutTests/inspector/css/resolve-variable-value.html [new file with mode: 0644]
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js