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

VERIFIED FIXED

Status

defect
VERIFIED FIXED
4 years ago
Last year

People

(Reporter: pbro, Unassigned)

Tracking

unspecified
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox44 verified)

Details

Attachments

(1 attachment)

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
Depends on: 1155651
Depends on: 1155653
Depends on: 1155661
Depends on: 1155663
Depends on: 1156754
Depends on: 1156757
Depends on: 1160988
Depends on: 1169563
Depends on: 1170159
Depends on: 1171863
Depends on: 1173761
Depends on: 1174060
Depends on: 1180134
Depends on: 1110739
Blocks: 1194146
Depends on: 1194201
Depends on: 1194278
Depends on: 1197100
Depends on: 1197192
Depends on: 1199589
Depends on: 1199712
No longer depends on: 1199712
No longer depends on: 1197192
No longer depends on: 1194201
No longer depends on: 1171863
No longer depends on: 1160988
No longer depends on: 1197100
Blocks: 1201279
Summary: Animation inspector panel v3 - list all animated nodes in subtree, sync timelines, show keyframes → Animation inspector panel v3 - list all animated nodes in subtree and sync timelines
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.
No longer depends on: 1110739
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.
Flags: needinfo?(jgriffiths)
Depends on: 1205681
(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?
Flags: needinfo?(jgriffiths)
(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
Depends on: 1205991
Depends on: 1211801
Depends on: 1211886
No longer depends on: 1170159
Blocks: 1194278
No longer depends on: 1194278
No longer depends on: 1199589
No longer depends on: 1205991
No longer depends on: 1211801
No longer depends on: 1211886
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.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
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
Flags: needinfo?(pbrosset)
(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.
Flags: needinfo?(pbrosset)
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.
Status: RESOLVED → VERIFIED
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.