1210363 - The animation timeline should be emptied when new animations are added after a while (animation grouping)

Status: NEW

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

Description

[Patrick Brosset <:pbro>]

about:home is somewhat of a good example for this.
If you keep on hovering over buttons at the bottom, new animations are added all the time in the timeline. In the end, you end up with a timeline that contains a whole lot of animations, having very little to do with each other, and being spread out over a long period of time.
This makes it hard to inspect a single animation, because its timeline becomes so tiny.

One way around this would be to provide a "clear" button in the UI that empties the panel whenever the user clicks it.

Another way would be to find a set of heuristics used to empty the timeline before new animations are added.
If a new set of animations are added after say, 5 seconds, then there's a good chance these new animations aren't related to the ones displayed previously in any way.

The 2 approaches are compatible by the way.

Comment 1

[simplyblue24]

Hi, I like to work on this bug. Can you please provide more info, so that i can get started. Thank you :)

Comment 2

[Patrick Brosset <:pbro>]

(In reply to simplyblue24 from comment #1)
> Hi, I like to work on this bug. Can you please provide more info, so that i
> can get started. Thank you :)
Hm, I'd be glad to, but the thing is, I don't yet have a clear idea on how to do this. This bug is pretty tricky one to get right.
If you do have ideas on how we could deal elegantly with the problem, I'm all hears. Otherwise, I think there are other, better suited, bugs. Like bug 1214664 or bug 1219611

Comment 3

[Patrick Brosset <:pbro>]

We need a way to group animations together. At first I had thought of 2 ways to do this: animations that are close to each other in the DOM, and animations to are close to each other in time.
I think the latter makes much more sense. In fact, we could even use the animations' startTime for this. Often times, animation that are played together actually start at the same time, but some may use some animation delay.

Comment 4

[Patrick Brosset <:pbro>]

Attachment: Bug_1210363_-_Group_animations_by_startTime_and_on.diff

Comment 5

[Patrick Brosset <:pbro>]

A good test case for this is the apple website: http://www.apple.com/
If you click on the search icon in the menu bar (top right), then a dropdown appears, with menu items that animate to the left.
All of these start at the same time, and use different delays for a nice effect.
The thing is, on this page, there's also an accordion in the center that uses animations to rotate through images.
And so, with our current implementation of the timeline, we show all of these animations, and you can't really work on the search animation on its own because it constantly gets reset/moved around in the timeline because of the accordion animation.
Grouping by startTimes would help a lot, but only if you had access to previous "groups".
This is what ChromeDevTools currently does. It groups animations by startTime, and displayes previously recorded groups in thumbnails at the top of the timeline, so you can select them again.

Comment 6

[Patrick Brosset <:pbro>]

(In reply to Patrick Brosset [:pbro] from comment #5)
> A good test case for this is the apple website: http://www.apple.com/
> If you click on the search icon in the menu bar (top right), then a dropdown
> appears, with menu items that animate to the left.
> All of these start at the same time, and use different delays for a nice
> effect.
> The thing is, on this page, there's also an accordion in the center that
> uses animations to rotate through images.
> And so, with our current implementation of the timeline, we show all of
> these animations, and you can't really work on the search animation on its
> own because it constantly gets reset/moved around in the timeline because of
> the accordion animation.
One way around it is to select the div.ac-gn-searchview-content in the DOM, this way the animation inspector will only show animations on and below this node.

Comment 8

[Patrick Brosset <:pbro>]

It doesn't make sense for me to be assigned to this anymore. This is still an important feature for the animation panel. But I won't be working on it myself.