[webkit-changes] [WebKit/WebKit] 3afcee: Add variable swatches to color picker

[Anuj Panta]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 3afcee6932b3b4ddb02e3b3551fb600d8c727633
      https://github.com/WebKit/WebKit/commit/3afcee6932b3b4ddb02e3b3551fb600d8c727633
  Author: Anuj Panta <a_panta at apple.com>
  Date:   2023-08-10 (Thu, 10 Aug 2023)

  Changed paths:
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
    M Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
    M Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
    M Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
    M Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

  Log Message:
  -----------
  Add variable swatches to color picker
https://bugs.webkit.org/show_bug.cgi?id=259120
rdar://112099603

Reviewed by Devin Rousso.

Include known color variables within the color picker. Select variables based on selected element and sort them based on the HSL values. The colors are shown using the InlineSwatch class allowing developers to quickly select variable colors.

Utilize the node styles of an element to gather color variable information and sort based on visual appearance. Future work could aggregate more sources of color data and add new sorting patterns.

Rewrote InlineSwatch to allow swapping between multiple swatch types. Added ColorSwatchDisplay to show all swatches. Altered ColorPicker communication pattern with InlineSwatch.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.css:
(.color-picker):
(.color-picker > .variable-color-swatches):
(.color-picker > .variable-color-swatches > ul):
(.color-picker > .variable-color-swatches > ul > li):
(.color-picker > .variable-color-swatches > ul > li > .inline-swatch):
(.color-picker > .variable-color-swatches > h2):
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.js:
(WI.ColorPicker.prototype.async colorInputsWrapperElement):
(WI.ColorPicker.sortColorVariables.visualAppeal):
(WI.ColorPicker.sortColorVariables):
(WI.ColorPicker.prototype._updateColorForVariable):
(WI.ColorPicker):
(WI.ColorPicker.get element): Deleted.
(WI.ColorPicker.get colorSquare): Deleted.
(WI.ColorPicker.set opacity): Deleted.
(WI.ColorPicker.get color): Deleted.
(WI.ColorPicker.set color): Deleted.
* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css:
(.inline-swatch):
* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch.prototype.switch):
(WI.InlineSwatch.prototype._updateSwatch):
(WI.InlineSwatch.prototype._valueEditorValueDidChange):
(WI.InlineSwatch.prototype._findMatchingColorVariable):
(WI.InlineSwatch):
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.inlineSwatchGetColorVariables):
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
(WI.SpreadsheetStyleProperty.prototype._addVariableTokens):

Canonical link: https://commits.webkit.org/266794@main