[webkit-changes] [WebKit/WebKit] b56ed8: Web Inspector: Elements: add an editor for CSS `st...

[Devin Rousso]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: b56ed87ee07c4b8c343fa667da061b9cc96b2b73
      https://github.com/WebKit/WebKit/commit/b56ed87ee07c4b8c343fa667da061b9cc96b2b73
  Author: Devin Rousso <hi at devinrousso.com>
  Date:   2023-08-30 (Wed, 30 Aug 2023)

  Changed paths:
    M Source/WebInspectorUI/.eslintrc
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    A Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorStepsTimingFunctionEditingController.js
    M Source/WebInspectorUI/UserInterface/Main.html
    M Source/WebInspectorUI/UserInterface/Models/TextMarker.js
    M Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js
    M Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js
    M Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
    M Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
    M Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
    M Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
    A Source/WebInspectorUI/UserInterface/Views/StepsTimingFunctionEditor.css
    A Source/WebInspectorUI/UserInterface/Views/StepsTimingFunctionEditor.js
    M Source/WebInspectorUI/UserInterface/Views/TextEditor.js

  Log Message:
  -----------
  Web Inspector: Elements: add an editor for CSS `steps()`
https://bugs.webkit.org/show_bug.cgi?id=259567

Reviewed by Patrick Angle.

We have visual previews/editors for `cubic-bezier()` and `spring()`, so we should also have something for `steps()`.

This will help developers visualize the behavior of their `steps()` function, as well as allow for better editing since there's an immediate visual feedback/preview.

* Source/WebInspectorUI/UserInterface/Views/StepsTimingFunctionEditor.js: Added.
(WI.StepsTimingFunctionEditor):
(WI.StepsTimingFunctionEditor.prototype.get element):
(WI.StepsTimingFunctionEditor.prototype.set stepsTimingFunction):
(WI.StepsTimingFunctionEditor.prototype.get stepsTimingFunction):
(WI.StepsTimingFunctionEditor.prototype._updateStepsTimingFunction):
(WI.StepsTimingFunctionEditor.prototype._updatePreview):
(WI.StepsTimingFunctionEditor.prototype._triggerPreviewAnimation):
(WI.StepsTimingFunctionEditor.prototype._resetPreviewAnimation):
(WI.StepsTimingFunctionEditor.prototype._handleTypeSelectElementChanged):
(WI.StepsTimingFunctionEditor.prototype._handleCountInputElementInput):
* Source/WebInspectorUI/UserInterface/Views/StepsTimingFunctionEditor.css: Added.
(.steps-timing-function-editor):
(.steps-timing-function-editor > .preview):
(.steps-timing-function-editor > .preview > div):
(.steps-timing-function-editor > .timing):
(.steps-timing-function-editor > .preview.animate > div, .steps-timing-function-editor > .timing.animate):
(.steps-timing-function-editor > svg):
(.steps-timing-function-editor > svg path):
(.steps-timing-function-editor > .parameter-editors):
(.steps-timing-function-editor > .parameter-editors > input):

* Source/WebInspectorUI/UserInterface/Models/TextMarker.js:
* Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js:
(createCodeMirrorStepsTimingFunctionTextMarkers): Added.
* Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorStepsTimingFunctionEditingController.js: Added.
(WI.CodeMirrorStepsTimingFunctionEditingController.prototype.get initialValue):
(WI.CodeMirrorStepsTimingFunctionEditingController.prototype.get cssClassName):
(WI.CodeMirrorStepsTimingFunctionEditingController.prototype.popoverWillPresent):
(WI.CodeMirrorStepsTimingFunctionEditingController.prototype.popoverDidPresent):
(WI.CodeMirrorStepsTimingFunctionEditingController.prototype._handleStepsTimingFunctionEditorStepsTimingFunctionChanged):
* Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js:
(WI.AnimationDetailsSidebarPanel.prototype._refreshEffectSection):
* Source/WebInspectorUI/UserInterface/Views/TextEditor.js:
(WI.TextEditor.prototype.createStepsTimingFunctionMarkers): Added.
(WI.TextEditor.prototype.editingControllerForMarker):
* Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js:
(WI.SourceCodeTextEditor.prototype._updateEditableMarkers):
Add `WI.TextMarker.Type.StepsTimingFunction`.
Drive-by: Sort `WI.TextMarker.Type`.

* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch):
(WI.InlineSwatch.prototype.didDismissPopover):
(WI.InlineSwatch.prototype._fallbackValue):
(WI.InlineSwatch.prototype._swatchElementClicked):
(WI.InlineSwatch.prototype._valueEditorValueDidChange):
* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css:
(.inline-swatch:is(.cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable)): Renamed from `.inline-swatch:is(.cubic-bezier-timing-function, .spring-timing-function, .variable)`.
(.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable)): Renamed from `.inline-swatch:is(.cubic-bezier-timing-function, .box-shadow, .spring-timing-function, .variable)`.
(.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):hover): Renamed from `.inline-swatch:not(.read-only):is(.cubic-bezier-timing-function, .box-shadow, .spring-timing-function, .variable, .alignment):hover`.
(.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):active): Renamed from `.inline-swatch:not(.read-only):is(.cubic-bezier-timing-function, .box-shadow, .spring-timing-function, .variable, .alignment):active`.
(.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable) > span): Renamed from `.inline-swatch:is(.cubic-bezier-timing-function, .box-shadow, .spring-timing-function, .variable) > span`.
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
(WI.SpreadsheetStyleProperty.prototype._addTimingFunctionTokens):
(WI.SpreadsheetStyleProperty.prototype._addVariableTokens):
Add `WI.InlineSwatch.Type.StepsTimingFunction`.
Drive-by: Sort `WI.InlineSwatch.Type`.

* Source/WebInspectorUI/.eslintrc:
* Source/WebInspectorUI/UserInterface/Main.html:
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:

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