This is the first step towards the animation-inspector UI v3 (bug 1153271).
The new UI is still hidden behind a pref, and this change doesn't implement
everything that is in the current v2 UI.
This introduces a new Timeline graph to represent all currently animated nodes
below the currently selected node.
v2 used to show them as independent player widgets. With this patch, we now show
them as synchronized time blocks on a common time scale.
Each animation has a preview of the animated node in the left sidebar, and a time
block on the right, the width of which represents its duration. The animation name
is also displayed.
There's also a time graduations header and background that gives the user information
about how long do the animations last.
This change does *not* provide a way to know what's the currentTime nor a way to
set it yet.
This also makes the existing animationinspector tests that still make sense with
the new timeline-based UI run with the new UI pref on.
This adds a generic walker method that cna be used to retrieve AnimationPlayerActor's
target DOM nodes in a way that they can be highlighted/selected later in the inspector.
Making the AnimationPlayerActor return the nodeActor directly wouldn't fully work, as
the walker would have missed the missing parent nodeFronts updates.
On the UI, this adds a new component in each PlayerWidget that displays a preview of the
target DOM nodes, highlight them on hover, and select them on click.
The WebAnimations API now returns names for CSS transitions too. The existing mechanism
in the animation-panel doesn't need to be changed for these names to appear, but some
comments needed modifying.
Instead of only refreshing the list of animation widgets when the animations
controller emits an event, also refresh it once after the initialization is
done. This is useful to avoid missing animations that are already applied to
the default inspector selection.
(Re-land after backout)
The animation-controler was in charge of getting new animation players and refreshing
the UI when done. This is still the case, but it now listens for mutation events from
the actor too, and when they happen, it simply asks the ui to refresh again.
Also, animations with playState "finished" that remain in the animation inspector panel
can now be played again.
This adds a playbackRate <select> dropdown next to the list of other playback
control buttons (play/pause, rw, fwd).
The list shows presets, unless the current rate isn't part of these presets
in which case it also shows this rate in the list.
The widget was created as a reusable component with a simple API, like the
PlayerMetaDataHeader.
Backed out changeset 527c548ff03c (bug 1149711)
Backed out changeset 2fe22ffef154 (bug 1120833)
Backed out changeset 501fa7c170ed (bug 1120833)
CLOSED TREE
The animation-controler was in charge of getting new animation players and refreshing
the UI when done. This is still the case, but it now listens for mutation events from
the actor too, and when they happen, it simply asks the ui to refresh again.
Also, animations with playState "finished" that remain in the animation inspector panel
can now be played again.
