1773549 - Authoring tool for `linear(...)` easing function

Status: RESOLVED FIXED

(DevTools :: Inspector: Animations, enhancement, P3)

Description

[David Shin[:dshin]]

bug 1764126 implements a new animation-timing-function with linear() function that let authors define easing functions as piecewise linear functions.
Once the spec stabilizes, it'd be nice to add an editor for it into timing-function editor.

Comment 1

[Daniel Holbert [:dholbert]]

One could imagine an editor or visualizer that looks something like the graph in https://github.com/w3c/csswg-drafts/pull/6533#issue-975699295

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: graph, as inspiration for how this might look (from github pull request)

Here's the graph that I linked to in previous comment (from the github issue), which corresponds to this syntax: linear(0, 0.7, 0.87, 0.98, 1)

Comment 3

[Ann Droyd]

<unanvelibeble=magisk_job>

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Attachment: Sample file

Based on the example in comment 2

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Attachment: Screenshot of current animation inspector

It looks like the animation inspector part already works so I guess this bug is about the authoring component only.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1773549 - [devtools] Add widget for linear easing function. r=#devtools-reviewers.

Comment 7

[Daniel Holbert [:dholbert]]

This has been behind a flag (default-enabled on Nightly only) for a little while, since we've been the only engine with an implementation, but Chromium is now implementing/shipping this feature per https://groups.google.com/a/chromium.org/g/blink-dev/c/Q7fjvM9Mn0c/m/Mz14zzFhAAAJ , so we will probably ship soon, per bug 1819447.

Would it be possible to circle back and finish off the devtools authoring tool here? I suspect it doesn't strictly block us shipping the feature (since it works properly for users regardless of the presence of an authoring tool), but it would definitely be nice to have!

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: authoring tool WIP

sure, I got a chart linked up, need to add the ability to add/remove/move points now

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f62858af25e4
[devtools] Add widget for linear easing function. r=devtools-reviewers,jdescottes.

Comment 11

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/f62858af25e4