Branch: refs/heads/main Home: https://github.com/WebKit/WebKit Commit: a933f8f850288f74e86d7d521a4106e83739719a https://github.com/WebKit/WebKit/commit/a933f8f850288f74e86d7d521a4106e83739719a Author: Devin Rousso <h...@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 _______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes