1153271 - Animation inspector panel v3 - list all animated nodes in subtree and sync timelines

Status: VERIFIED FIXED

(DevTools :: Inspector: Animations, defect)

Description

[Patrick Brosset <:pbro>]

The animation inspector panel has pretty much reached v2 with bug 1120900.
This (meta) bug is about the next big milestone.
The 3 main feature ideas for v3 are:

- Displaying all animations on the current node and nodes in its subtree.
- Displaying all animations as blocks positioned according to their start times and durations along a global timeline.
- Selecting a single animation shows the corresponding keyframes and animated properties.

Some use cases are described here: https://etherpad.mozilla.org/devtools-animation

Comment 1

[Patrick Brosset <:pbro>]

Mockup idea for v3: https://dl.dropboxusercontent.com/u/714210/animation-inspector-v3-mockup.png

Comment 2

[Patrick Brosset <:pbro>]

I just made a bit of cleaning up:
- I moved all the small-ish bugs and annoyances to bug 1201278. We may decide to make some of these still block this one, to be determined before we enable v3 by default.
- I moved the keyframes display to bug 1201279 which is now v4. Unlike v3, v4 isn't going to be a new UI behind a pref, just an evolution of v3 that displays information about the various keyframes of each animations. But it makes sense to move it to its own meta bug because it's the next logical step for the tool and has platform dependencies and complexity attached to it.

Comment 3

[Patrick Brosset <:pbro>]

Jeff, I'm about to land bug 1155661 which adds a toolbar to the timeline that allows to play/pause animations shown in it.
With that bug in, the panel would allow pretty much everything that the v2 UI used to allow, but looks nicer and is a lot easier to use when working with multiple animations (see this animated gif: https://bug1155661.bmoattachments.org/attachment.cgi?id=8661748 ).
For now, this new UI is still behind a pref, but I'm tempted to turn that pref ON by default before the merge.
There are a tone of things I still want to do like adding a way to change the playbackRate of all animations at once, showing the current time while the scrubber is moving, and there's a bunch of polish-style bugs I need to take care of. But I don't think we need to wait further before we enable the new UI. I can even uplift some of the polish bugs after the merge.

Comment 4

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #3)
> Jeff, I'm about to land bug 1155661 which adds a toolbar to the timeline
> that allows to play/pause animations shown in it.
> With that bug in, the panel would allow pretty much everything that the v2
> UI used to allow, but looks nicer and is a lot easier to use when working
> with multiple animations (see this animated gif:
> https://bug1155661.bmoattachments.org/attachment.cgi?id=8661748 ).
> For now, this new UI is still behind a pref, but I'm tempted to turn that
> pref ON by default before the merge.
> There are a tone of things I still want to do like adding a way to change
> the playbackRate of all animations at once, showing the current time while
> the scrubber is moving, and there's a bunch of polish-style bugs I need to
> take care of. But I don't think we need to wait further before we enable the
> new UI. I can even uplift some of the polish bugs after the merge.

Sounds good to me! Aside: do you have a try build I can look at that is up to date?

Comment 5

[Patrick Brosset <:pbro>]

(In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #4)
> Sounds good to me! Aside: do you have a try build I can look at that is up
> to date?
Thanks Jeff.
Yes: https://treeherder.mozilla.org/#/jobs?repo=try&revision=3ef43a5f06e0
Note that you'll need to turn ON devtools.inspector.animationInspectorV3

Comment 6

[Patrick Brosset <:pbro>]

The main timeline feature has landed a while back, and is now ON by default, so really, v3 should be considered DONE.
I've moved all of the less important bugs to block other animation-related bugs rather than this one and will close this meta bug.

Comment 7

[Mihai Boldan, Desktop QA [:mboldan]]

I've performed Exploratory Testing around the animation inspector panel on Nightly 44.0a1 (20151021065025) across platforms [1] and I confirm that:
- the animations are displayed as nodes 
- the animations are displayed as blocks positioned according to their start time and duration along a global timeline
- the nodes can be selected individually and any action can be performed on the selected node;
- the correct information is displayed if hovering the mouse above the animation blocks;
- the 'Click to highlight this node in the page' button is working correctly;

While testing, I noticed a potential issue:
STR: - Play an animation with multiple nodes.
     - Select a node in the Inspector.
     - Click the <body> from the Inspector.
	 
AR: - The blocks are wrongly displayed (See the 'blocks' screenshot).

Patrick, should I file a new bug for the issue described above?

[1]Windows 10 x86, Ubuntu 14.04 x32 and Mac OS X 10.10.4

Comment 8

[Mihai Boldan, Desktop QA [:mboldan]]

Attachment: blocks.png

Comment 9

[Patrick Brosset <:pbro>]

(In reply to Mihai Boldan, QA [:mboldan] from comment #7)
> While testing, I noticed a potential issue:
> STR: - Play an animation with multiple nodes.
>      - Select a node in the Inspector.
>      - Click the <body> from the Inspector.
> 	 
> AR: - The blocks are wrongly displayed (See the 'blocks' screenshot).
> 
> Patrick, should I file a new bug for the issue described above?
Hmm, I'm not seeing this on my end, but maybe I'm not testing exactly what I should be testing. Please do file a bug for this and elaborate a bit more on the STR, I feel like I'm missing something.

Comment 10

[Mihai Boldan, Desktop QA [:mboldan]]

The potential issue described in Comment 7 is no longer reproducible on the Latest Nightly 44.0a1 (2015-10-26), so I'm marking this bug Verified Fixed.