Closed Bug 1205991 Opened 9 years ago Closed 8 years ago

Selecting an animated node from the animation-inspector when animations are paused shows NaN in the timeline

Categories

(DevTools :: Inspector: Animations, defect)

Product:
DevTools
Component:
Inspector: Animations
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WORKSFORME

People

(Reporter: pbro, Unassigned)

References

Details

STR:
- open jsbin.com
- open the animation inspector
- click on the jsbin logo (this starts a set of animations)
- in the animation inspector, click somewhere in the timeline header to move the scrubber there and pause all animations
- click on the inspector icon next to any of the animated nodes displayed in the timeline below

Expected: the inspector selects this node, and the animation-inspector refreshes to show only the animation(s) applied to that node

Actual: all of this actually happens, but the timeline header doesn't show time graduations and the background is missing. NaN is displayed instead.

That's because the animation is paused and therefore doesn't have a startTime. So we can't know where the animation starts, and the code doesn't account for this.
Update: I made a last minute fix in bug 1155661 that makes animations start at 0 instead of showing NaN. So at least something is displayed, but this is incorrect.

The correct fix would be to reuse, in the animations actor, the player actors that have already been created before (and stored in this.actors) when a new node is selected.
Right now we clear them all and create new ones, even if the animations end up being the same, and so the new actors have no way of know their startTimes (or previousStarttimes).
Another set of STR :
- open http://codepen.io/yusufbkr/full/RPBQqg/
- open the inspector, and make sure the <body> inside the codepen's iframe is selected
- click on the + sign to start the animations
- animations get added/removed in the timeline

=> At the end, one of the animations displayed is gray, meaning that it has no type, and the timeline says NaN. And the toolbox can't be closed.
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #2)
> Another set of STR :
> - open http://codepen.io/yusufbkr/full/RPBQqg/
> - open the inspector, and make sure the <body> inside the codepen's iframe
> is selected
> - click on the + sign to start the animations
> - animations get added/removed in the timeline
> 
> => At the end, one of the animations displayed is gray, meaning that it has
> no type, and the timeline says NaN. And the toolbox can't be closed.
The biggest problem being of course that the toolbox is broken at this stage, it can't be closed. The fact that all animations involved in this codepen aren't all displayed in the inspector isn't as bad. Fwiw, chromedevtools doesn't do a better job at showing them either.
Blocks: 985861, 1201278
No longer blocks: 1153271
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Works for me now. Something else must have fixed it in the meantime.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → WORKSFORME
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.