Support animations on ::before and ::after in animation inspector

RESOLVED FIXED in Firefox 48

Status

defect
P1
normal
RESOLVED FIXED
4 years ago
Last year

People

(Reporter: ntim, Assigned: pbro)

Tracking

(Depends on 1 bug)

unspecified
Firefox 48
Dependency tree / graph

Firefox Tracking Flags

(firefox48 fixed, relnote-firefox 48+)

Details

(Whiteboard: [btpp-fix-now])

Attachments

(1 attachment)

No description provided.
Blocking the main animation meta bug.

Brian: we talked about this a long time ago but can't remember what the status was.
There are 2 things here: 
- we need a way for el.getAnimations() to return animations for pseudo-elements too,
- but also need a way for the MutationObserver (with type {animations: true}) to fire for changes on pseudo elements. I'm guessing this might be hard because the MutationObserver so far doesn't observe DOM mutations for pseudo-elements (see bug 1034110).
Blocks: 985861
Flags: needinfo?(bbirtles)
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #1)
> Blocking the main animation meta bug.
> 
> Brian: we talked about this a long time ago but can't remember what the
> status was.
> There are 2 things here: 
> - we need a way for el.getAnimations() to return animations for
> pseudo-elements too,

Doing that in general depends on bug 1174575. That's probably a fair bit of work.

If this is high priority, we could do the following as a temporary workaround:
- Add a ChromeOnly "pseudo" attribute to KeyframeEffect
- Make getAnimations return pseudo elements when called by chrome code

There might be some other work too since I think in a few places in the code might assume that animations for pseudo-elements aren't yet accessed using the API.

> - but also need a way for the MutationObserver (with type {animations:
> true}) to fire for changes on pseudo elements. I'm guessing this might be
> hard because the MutationObserver so far doesn't observe DOM mutations for
> pseudo-elements (see bug 1034110).

Yeah, we might need to do some extra work there for animations.
Flags: needinfo?(bbirtles)
(In reply to Brian Birtles (:birtles) from comment #2)
> If this is high priority ...
Hard to say if it is high priority or not. Is it a common thing for people to animate pseudo-elements or not? I guess that's kind of impossible to answer.

Having animated pseudo-elements show up in the animation inspector is, on one hand, really important because if they don't, then the tool isn't doing its job properly, and people might not trust it. But on the other hand, the tool is in its infancy, and not used a lot right now (although I don't yet have data to back that), so I wouldn't be too worried about not working on this urgently.
Having said this, we will be promoting the animation-related tools a lot in November (FF44 marketing campaign), and so we will suddenly get a lot more people try the tool.
Got a bump about this from Ana Tudor today: https://twitter.com/anatudor/status/649251932893278212
Depends on: 1174575
This would become extremely useful. Noticed a project today that had an animation on the H1, H1:before and H1:after, would've been great to inspect all three (different) animations as much as possible with the developer tools pane. Here's the site (not that it's required I don't think) http://2015.ampersandconf.com/
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Depends on: 1234403
No longer depends on: 1174575
Depends on: 1249219
All platform dependencies have been fixed, yay!
And we want to make this happen in the FF48 timeframe, so assigning it to me and marking as P1.
Assignee: nobody → pbrosset
Depends on: 1254761
Priority: -- → P1
Whiteboard: [btpp-fix-now]
Comment on attachment 8734301 [details]
MozReview Request: Bug 1206420 - Display animated pseudo-elements in the animation-inspector; r=tromey

https://reviewboard.mozilla.org/r/42161/#review39511

Looks great.
Attachment #8734301 - Flags: review?(ttromey) → review+
https://hg.mozilla.org/mozilla-central/rev/a8a4422d6038
https://hg.mozilla.org/mozilla-central/rev/5291c136bb0b
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
Release Note Request (optional, but appreciated)
[Why is this notable]: complex animations often make use of ::before and ::after generated content to avoid adding decoration-only elements to the DOM, and animate those elements. The animation tool in devtools now displays them like any other animated elements.
[Suggested wording]: The animation inspector now lets you visualize animations running on ::before and ::after pseudo-elements too.
[Links (documentation, blog post, etc)]: https://www.youtube.com/watch?v=Ct1xwHrGlaI
relnote-firefox: --- → ?
Added to Fx48 Aurora release notes
I've completely updated the animation inspector page for Firefox 48, please let me know if it's correct. Among other things, I've mentioned support for ::before and :after.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector
Flags: needinfo?(pbrosset)
Thanks Will. This looks great.
I see only one thing that should be changed regarding the performance indicator (the lightning bolt) since bug 1254408 just landed on fx-team. But we can talk about it in that bug.
Flags: needinfo?(pbrosset)
Depends on: 1327680
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.