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

Status: RESOLVED FIXED

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

Comment 1

[Patrick Brosset <:pbro>]

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).

Comment 2

[Brian Birtles (:birtles)]

(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.

Comment 3

[Patrick Brosset <:pbro>]

(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.

Comment 4

[Patrick Brosset <:pbro>]

Got a bump about this from Ana Tudor today: https://twitter.com/anatudor/status/649251932893278212

Comment 5

[stuart robson]

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/

Comment 6

[Patrick Brosset <:pbro>]

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.

Comment 7

[Patrick Brosset <:pbro>]

Attachment: MozReview Request: Bug 1206420 - Display animated pseudo-elements in the animation-inspector; r=tromey

Review commit: https://reviewboard.mozilla.org/r/42161/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/42161/

Comment 8

[Patrick Brosset <:pbro>]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=54c7d71c168e&group_state=expanded

Comment 9

[Tom Tromey :tromey]

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.

Comment 10

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/a8a4422d6038

Comment 11

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/5291c136bb0b

Comment 12

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a8a4422d6038
https://hg.mozilla.org/mozilla-central/rev/5291c136bb0b

Comment 13

[Patrick Brosset <:pbro>]

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

Comment 14

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Added to Fx48 Aurora release notes

Comment 15

[Will Bamberg [:wbamberg]]

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

Comment 16

[Patrick Brosset <:pbro>]

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.