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.
--HG--
extra : rebase_source : 65634e8f5e618f15e8d33c36a90217ba07a310f4
Adds a global .eslintrc file for all source files in /browser/devtools.
This file defines a set of global variables that are commonly used in
/browser/devtools code.
The files that import modules with Cu.import will need to define their
own globals as /* globals ... */ comments.
This file also defines the configuration for all the rules we want to
use.
This also adds a set of .eslintrc files, one per test directory in
/browser/devtools. Each of these files extend from one of 2 parent config
files: .eslintrc.xpcshell or .eslintrc.mochitest.
The parent config define the set of globals these types of tests have
access to (test runner functions, assertion functions, etc.).
Finally, this also adds .eslintrc files in /toolkit/devtools for code and
tests, which just extend from their counterparts in /browser/devtools.
--HG--
extra : rebase_source : d7b6f639634b64dc084d0835a5fb36c9720a87e7
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.
--HG--
extra : rebase_source : dfbf459d9de14233f125d028cf81f6b934941ea2
The failing test was rewinding a player and expecting it to pause at 0.
But rewing first pauses (async) and then sets the time (async), and the test
was only waiting for the player to pause.
With this change, we now also wait until the time is the expected one.
--HG--
extra : transplant_source : %23BU%CB%F3%3A%A8%226hWIw%E8VI%3A%94%A4V
Now when the front requests the list of AnimationPlayers for a node,
all players for this node + the nodes in its subtree are returned.
Also the mutationobserver starts observing all mutations in the node
and its subtree.
--HG--
extra : rebase_source : c419bd2f397617317fa9c9d0b7fd22f07abc12cf
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.
--HG--
extra : rebase_source : 2ae4d1dd747ad9cf630ec6ed5449a8fc33263004
extra : histedit_source : df40d357379ea965e6ab4095806ee5e4b98cf991
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.
--HG--
extra : rebase_source : f64cbdd4ad68c3cd733a86b7e2729005614a7049
(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.
--HG--
extra : rebase_source : 309a167b2218c6fc586c64977896a4715bd5a1d5
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.
--HG--
extra : rebase_source : d050fdaa4565a7b51b179ecd08a36b79be2275f1
The toolbar class was making the whole background of the animation panel
be grey, unlike the other inspector side-bar panels.
Also removed the unnecessary right-border on the global play/pause button.
This changes a few animationinspector tests by making them wait until the expected animation
state is reached rather than just waiting for the next animation auto-refresh update, which
might, in some cases, not be enough.
This is a re-landing of bug 1134500 and bug 1149711.
Backed out changeset 527c548ff03c (bug 1149711)
Backed out changeset 2fe22ffef154 (bug 1120833)
Backed out changeset 501fa7c170ed (bug 1120833)
CLOSED TREE
Wait for the playState to reach the expected state rather than just waiting for the next auto
refresh of the AnimationPlayerActor.
--HG--
extra : rebase_source : 4efede2ea007fed766e9714e2aff5399170d4b57
The toolbar class was making the whole background of the animation panel
be grey, unlike the other inspector side-bar panels.
Also removed the unnecessary right-border on the global play/pause button.
--HG--
extra : rebase_source : 7b2311bf06294e7e334aeee556d564809d4afcfe
On particularly slow test environments, it might not be enough to wait for the next
AnimationPlayerActor state update.
I introduced a helper function that makes it possible for tests to wait for state
updates until the animation state reaches the expected value. In most cases, we use
it to wait until an animation reaches a given playState (paused, running, finished).
--HG--
extra : rebase_source : 791da93c00b4eaffe8c31001fc9a2cdec4dc7e4c
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.
--HG--
extra : rebase_source : 8fe6e245ec04bfe399166e343b888b6ce3ca0ef1
This makes the AnimationsActor listen for animation mutations after each
call to getAnimationPlayersForNode on the code that was passed in.
Whenever animations are added or removed, an event is sent to the front
with the list of changes.
The server doesn't know when the client doesn't require updates for the
current node anymore, so it exposes a new method for this.
Note that removed events for finished aniations are skipped, because the
corresponding animations can still be seeked/resumed, so we want the
AnimationPlayerActor to be preserved.
--HG--
extra : rebase_source : 4a9be4695261d65a2f032117af9fce985f5c0378
The AnimationPlayerFront needs to emit events when its auto-refresh
mode is enabled, whenever the state changes. Until now, it was doing
so with EventEmitter.
But because decorating the class with EventEmitter adds on/once/off
functions to the instance, it ends up hiding the on/once/off functions
that were already there because the class extends addon sdk EventTarget.
--HG--
extra : rebase_source : 16c097df7b579b980f710ffbd98fe3d01a6fbc76
Instead of waiting for the next auto-refresh event only (which could be a
response to an older request, therefore not having the expected state yet),
wait until the state changes to what we expect in the test.
This means that if the play/pause button doesn't work anymore, then the test
will timeout, but at least it won't intermittently fail as it was doing until
now.
--HG--
extra : rebase_source : 75b7ffd38cc9fe83bb938c28109d12c57fbf3294
