Open Bug 1198646 Opened 7 years ago Updated 2 months ago

Link animations displayed in the animation-inspector to their declarations in the Rules-view


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



(Not tracked)


(Reporter: pbro, Unassigned)



For now, the animation-inspector displays css animations and css transitions (in the future this might change when we add svg animations and script-generated animations).

That means these animations and transitions are created from css code.

It'd be great if the animation-inspector allowed users to jump from something displayed in the timeline to the corresponding declaration in CSS.

I'm thinking the new rules-view search feature could be used for this. For instance if the user clicks on a transition of the color property, that could select that node in the inspector and then set the rule-view search input to
`transition-property`: color

Similar for css animations.

Bug 1180134 makes it possible to know the type of an animation displayed in the inspector, so that should help.

CCing :gl who said he'd be interested in working on this.
Blocks: 985861
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Severity: normal → enhancement
Priority: -- → P2
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.