Open Bug 1202487 Opened 9 years ago Updated 2 years ago

Animation inspector sometimes doesn't properly replay animations

Categories

(DevTools :: Inspector: Animations, defect, P2)

Product:
DevTools
Component:
Inspector: Animations
Type:
defect

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

Details

(Whiteboard: [btpp-fix-later][polish-backlog][difficulty=hard])

Attachments

(2 files)

transitions.html
488 bytes, text/html
Details
transitions.gif
1.06 MB, image/gif
Details
Attached file transitions.html — 
STR:
- open the attached test case
- open the animation-inspector
- move your mouse slowly from right to left over the red elements
- each element you hover should cause a couple of transitions to be displayed in the inspector
- once you reach the first element, you should see 10 transitions still displayed in the inspector
- grab the scrubber (vertical red line) and drag it towards the left

Expected: all transitions should replay as you move
Actual: elements all stay red until you reach the start of the timeline when they all sort of turn black to various degrees.
Attached image transitions.gif — 
Probably easier to understand with this.
Worth noting first: the inspector only shows 1 timeline per element and per transition/animation.
If element #id1 has an animation 'anim' that's displayed in the inspector and if this animation is restarted later, it won't appear twice in the inspector, the older one will go away and will be replaced with the new one.
Similarly, if element #id1 has a 'background-color' transition on hover, moving the mouse over the element plays it and a timeline is displayed in the inspector, but moving out plays the same transition, in the opposite direction, and this replaces the timeline.
Blocks: 1201278
Whiteboard: [polish-backlog]
Priority: -- → P1
Whiteboard: [polish-backlog] → [polish-backlog][difficulty=hard]
Another STR:
- open http://jsbin.com/rexitapari/edit?js,output
- using the inspector, select the <body> element in the output area
- take a look at the animation-inspector --> you should see the 4 animations, sequenced one after the other
- try to scrub back in the timeline.

==> the 4 animations going back one after the other in reverse order, they just play back all together at the same time.
The main problem comes from the way we use setCurrentTime on animations when the user scrubs back.
Right now, we use a timeline-relative time, we should really be using an absolute time and we should subtract the animation's startTime.

The other problem is if you press the "play" button again in the toolbar, then all animations play at the same time. So we need to make sure the sequence. Brian Birtles suggested a great solution, see here:

http://jsbin.com/bidiyubesi/edit?html,js,output
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
This isn't actively being worked on. No need for this to be a P1.
Filter on CLIMBING SHOES.
Priority: P1 → P2
Whiteboard: [polish-backlog][difficulty=hard] → [btpp-fix-later][polish-backlog][difficulty=hard]
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: