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

[Devin Rousso]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: a933f8f850288f74e86d7d521a4106e83739719a
      https://github.com/WebKit/WebKit/commit/a933f8f850288f74e86d7d521a4106e83739719a
  Author: Devin Rousso <hi at devinrousso.com>
  Date:   2023-11-16 (Thu, 16 Nov 2023)

  Changed paths:
    M LayoutTests/inspector/animation/resources/lifecycle-utilities.js
    A LayoutTests/inspector/unit-tests/linear-timing-function-expected.txt
    A LayoutTests/inspector/unit-tests/linear-timing-function.html
    M Source/WebInspectorUI/.eslintrc
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    A Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorLinearTimingFunctionEditingController.js
    M Source/WebInspectorUI/UserInterface/Main.html
    M Source/WebInspectorUI/UserInterface/Models/Animation.js
    A Source/WebInspectorUI/UserInterface/Models/LinearTimingFunction.js
    M Source/WebInspectorUI/UserInterface/Models/TextMarker.js
    M Source/WebInspectorUI/UserInterface/Test.html
    M Source/WebInspectorUI/UserInterface/Views/AnimationContentView.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
    A Source/WebInspectorUI/UserInterface/Views/LinearTimingFunctionEditor.css
    A Source/WebInspectorUI/UserInterface/Views/LinearTimingFunctionEditor.js
    M Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
    M Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
    M Source/WebInspectorUI/UserInterface/Views/TextEditor.js

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

Reviewed by Brent Fulgham.

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

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

* Source/WebInspectorUI/UserInterface/Views/LinearTimingFunctionEditor.js: Added.
(WI.LinearTimingFunctionEditor):
(WI.LinearTimingFunctionEditor.prototype.get element):
(WI.LinearTimingFunctionEditor.prototype.set linearTimingFunction):
(WI.LinearTimingFunctionEditor.prototype.get linearTimingFunction):
(WI.LinearTimingFunctionEditor.prototype._updateLinearTimingFunction):
(WI.LinearTimingFunctionEditor.prototype._updatePreview):
(WI.LinearTimingFunctionEditor.prototype._triggerPreviewAnimation):
(WI.LinearTimingFunctionEditor.prototype._resetPreviewAnimation):
(WI.LinearTimingFunctionEditor.prototype._updatePointsTable):
(WI.LinearTimingFunctionEditor.prototype._createPointInputs):
(WI.LinearTimingFunctionEditor.prototype._handleAddPointButtonClick):
* Source/WebInspectorUI/UserInterface/Views/LinearTimingFunctionEditor.css: Added.
(.linear-timing-function-editor):
(.linear-timing-function-editor > .preview):
(.linear-timing-function-editor > .preview > div):
(.linear-timing-function-editor > .timing):
(.linear-timing-function-editor > .preview.animate > div,):
(.linear-timing-function-editor > svg):
(.linear-timing-function-editor > svg path):
(.linear-timing-function-editor > .points):
(.linear-timing-function-editor > .points :is(table, thead, tbody, tfoot, tr, input)):
(.linear-timing-function-editor > .points th):
(.linear-timing-function-editor > .points input):

* Source/WebInspectorUI/UserInterface/Models/LinearTimingFunction.js: Added.
(WI.LinearTimingFunction):
(WI.LinearTimingFunction.fromString):
(WI.LinearTimingFunction.prototype.get points):
(WI.LinearTimingFunction.prototype.copy):
(WI.LinearTimingFunction.prototype.equals):
(WI.LinearTimingFunction.prototype.toString):
(WI.LinearTimingFunction.Point):
(WI.LinearTimingFunction.Point.prototype.get value):
(WI.LinearTimingFunction.Point.prototype.get progress):
(WI.LinearTimingFunction.Point.prototype.copy):
(WI.LinearTimingFunction.Point.prototype.equals):
* Source/WebInspectorUI/UserInterface/Models/Animation.js:
(WI.Animation.prototype._updateEffect):
* Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js:
(WI.AnimationContentView.prototype._refreshPreview):
Add a new model object to represent/parse/serialize/etc. an instance of a `linear()` function.

* Source/WebInspectorUI/UserInterface/Models/TextMarker.js:
* Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js:
(createCodeMirrorLinearTimingFunctionTextMarkers): Added.
* Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorLinearTimingFunctionEditingController.js: Added.
(WI.CodeMirrorLinearTimingFunctionEditingController.prototype.get initialValue):
(WI.CodeMirrorLinearTimingFunctionEditingController.prototype.get cssClassName):
(WI.CodeMirrorLinearTimingFunctionEditingController.prototype.popoverWillPresent):
(WI.CodeMirrorLinearTimingFunctionEditingController.prototype.popoverDidPresent):
(WI.CodeMirrorLinearTimingFunctionEditingController.prototype._handleLinearTimingFunctionEditorLinearTimingFunctionChanged):
* Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js:
(WI.AnimationDetailsSidebarPanel.prototype._refreshEffectSection):
* Source/WebInspectorUI/UserInterface/Views/TextEditor.js:
(WI.TextEditor.prototype.createLinearTimingFunctionMarkers): Added.
(WI.TextEditor.prototype.editingControllerForMarker):
* Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js:
(WI.SourceCodeTextEditor.prototype._updateEditableMarkers):
Add `WI.TextMarker.Type.LinearTimingFunction`.

* 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, .linear-timing-function, .spring-timing-function, .steps-timing-function, .linear-timing-function, .variable)): Renamed from `.inline-swatch:is(.cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable)`.
(.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .linear-timing-function, .spring-timing-function, .steps-timing-function, .variable)): Renamed from `.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable)`.
(.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .linear-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):hover): Renamed from `.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):hover`.
(.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .linear-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):active): Renamed from `.inline-swatch:not(.read-only):is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-timing-function, .variable, .alignment):active`.
(.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .linear-timing-function, .spring-timing-function, .steps-timing-function, .variable) > span): Renamed from `.inline-swatch:is(.box-shadow, .cubic-bezier-timing-function, .spring-timing-function, .steps-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.LinearTimingFunction`.

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

* LayoutTests/inspector/animation/resources/lifecycle-utilities.js:
* LayoutTests/inspector/unit-tests/linear-timing-function.html: Added.
* LayoutTests/inspector/unit-tests/linear-timing-function-expected.txt: Added.

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