1122416 - Provide a (chrome only?) way from an Animation to get to the CSS rule that contains either the transition or the keyframes animation

Status: NEW

(Core :: DOM: Animation, defect)

Description

[Patrick Brosset <:pbro>]

It would be extra useful for users of the new devtools Animation Inspector panel to know which css animation or transition a specific widget in the tool's UI corresponds to.

And to do this, we would like to be able to link these widgets to the CSS rule (if any) they correspond to, so for instance, you'd be able to click on a button/link that would jump, from the animation panel widget, to the right rule in the inspector or style-editor.

Right now, using the AnimationEffect's name (which is only defined for CSS animations), we can iterate over all the @keyframes rules and compare the name.
We can't do this for CSS transitions.

I don't know whether we want to add something new in the waapi spec for this or just add a chrome-only helper function somewhere that allows this.

I can see these 2 things being useful for the devtools:
- something that tells you whether an AnimationPlayer corresponds to a css transition or a css animation
- something that returns the Rule object from a given AnimationPlayer (or AnimationEffect). In fact, Animation sources have a 'target' property that links back to the node, having something similar for the css rule would be great.

Comment 1

[Brian Birtles (:birtles)]

I think the idea of being able to tell if an AnimationPlayer corresponds to a CSS transition or a CSS animation is definitely do-able. Long-term there should definitely be a standardized way of doing this but we can easily add a chrome-only member until then.

Going from a KeyframeEffect object to the corresponding @keyframes rule also seems very useful and likely to be standardised. The Google guys were already playing around with that here:

  http://dev.w3.org/csswg/web-animations-css-integration/#the-csskeyframesmap-mapping

But that spec is definitely not stable. In fact, it's likely to disappear altogether and be replaced by css-animations-2 and css-transitions-2.

For transitions, however, it's tricky. The resulting transition could come from a number of rule sets that individually set transition-property, transition-duration etc.? Perhaps we could just locate the rule set that set transition-property property?

Comment 2

[Patrick Brosset <:pbro>]

(In reply to Brian Birtles (:birtles) from comment #1)
> For transitions, however, it's tricky. The resulting transition could come
> from a number of rule sets that individually set transition-property,
> transition-duration etc.? Perhaps we could just locate the rule set that set
> transition-property property?
Hmm, I see. I guess yeah, the rule that sets transition-property would be the best in that case.

Comment 3

[Brian Birtles (:birtles)]

I talked about this with Google and we started fleshing out the interfaces here:

  https://rawgit.com/shans/csswg-drafts/animations-2/css-animations-2/Overview.html#the-CSSAnimation-interface
  https://rawgit.com/shans/csswg-drafts/animations-2/css-transitions-2/Overview.html#the-CSSTransition-interface

I plan to:
* Add the interfaces (so you can differentiate between animations and transitions)
* Implement the animationName and transitionProperty interfaces
* Move DevTools tests over to using the animationName / transitionProperty members
* Move the 'name' attribute on AnimationEffectReadOnly to Animation
* Implement CSSKeyframeEffectReadOnly.rule

Comment 4

[Brian Birtles (:birtles)]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #0)
> I can see these 2 things being useful for the devtools:
> - something that tells you whether an AnimationPlayer corresponds to a css
> transition or a css animation
> - something that returns the Rule object from a given AnimationPlayer (or
> AnimationEffect). In fact, Animation sources have a 'target' property that
> links back to the node, having something similar for the css rule would be
> great.

The first one is done, but is just waiting for review.

For the second one, I had in mind to expose the CSSKeyframesRule as tentatively specced here:

  https://rawgit.com/shans/csswg-drafts/animations-2/css-animations-2/Overview.html#the-CSSKeyframeEffectReadOnly-interface

However, looking at this comment, I'm not sure if that's what you want. This ties back to comment 1 where I brought up transitions, but it also applies to animations.

The animation / transition the API gives you back is the resolving animation properties from possibly many different rules.
e.g.

  * {
    animation-timing-function: linear; /* No easing here */
    animation-duration: 1s; /* Overridden below */
  }
  .animated {
    animation-duration: 3s;
  }
  .spin {
    animation-name: spin;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(0deg); }
  }
  <div class="animated spin" style="animation-iteration-count: infinite"></div>

When you do document.querySelector("div").getAnimations()[0] here, what rule should the animation point to?

As suggested above, we can give you a link to the keyframes rule fairly easily so you can do:

  var anim = document.querySelector("div").getAnimations()[0];
  var rule = anim.effect.rule;

Beyond that, the best I can think of is that for CSS animations, the 'animation-name' property is really what causes an animation to come into being. For transitions it's 'transition-property'. So we could provide a link but to those rules but I'm a bit out of my depth with regards to how that would work. I'd have to look into it.

Seeing as DevTools is already able to present to the user information along the lines of "where does this element's computed animation-name come from" I wonder if the necessary APIs already exist? Bear in mind that when bug 1178186 (and bug 1179111) land it will be possible to work out what the winning *value* of each of those properties is.

I guess I need to know two things:

1) Do you need the link to the CSSKeyframesRule? (I can do that fairly easily I think if it's useful)
2) Do you need additional APIs to get to the winning rule for animation-name and transition-property?

Comment 5

[Patrick Brosset <:pbro>]

(In reply to Brian Birtles (:birtles) from comment #4)
> (In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #0)
> > I can see these 2 things being useful for the devtools:
> > - something that tells you whether an AnimationPlayer corresponds to a css
> > transition or a css animation
> > - something that returns the Rule object from a given AnimationPlayer (or
> > AnimationEffect). In fact, Animation sources have a 'target' property that
> > links back to the node, having something similar for the css rule would be
> > great.
> 
> The first one is done, but is just waiting for review.
Awesome! I think there's a patch I need to review for this btw, will get to it shortly.

> For the second one, I had in mind to expose the CSSKeyframesRule as
> tentatively specced here:
> 
>  
> https://rawgit.com/shans/csswg-drafts/animations-2/css-animations-2/Overview.
> html#the-CSSKeyframeEffectReadOnly-interface
> 
> However, looking at this comment, I'm not sure if that's what you want. This
> ties back to comment 1 where I brought up transitions, but it also applies
> to animations.
> 
> The animation / transition the API gives you back is the resolving animation
> properties from possibly many different rules.
> e.g.
> 
>   * {
>     animation-timing-function: linear; /* No easing here */
>     animation-duration: 1s; /* Overridden below */
>   }
>   .animated {
>     animation-duration: 3s;
>   }
>   .spin {
>     animation-name: spin;
>   }
>   @keyframes spin {
>     from { transform: rotate(0deg); }
>     to { transform: rotate(0deg); }
>   }
>   <div class="animated spin" style="animation-iteration-count:
> infinite"></div>
> 
> When you do document.querySelector("div").getAnimations()[0] here, what rule
> should the animation point to?
Hmm, you're right. One UI idea I had was simply "select" the element in the inspector panel, switch to the rule-view, and fill the rule-view search field with the animation name or transition-property. This would nicely highlight the rule that the animation originated from to the user.

> As suggested above, we can give you a link to the keyframes rule fairly
> easily so you can do:
> 
>   var anim = document.querySelector("div").getAnimations()[0];
>   var rule = anim.effect.rule;
This looks very useful.

> Beyond that, the best I can think of is that for CSS animations, the
> 'animation-name' property is really what causes an animation to come into
> being. For transitions it's 'transition-property'. So we could provide a
> link but to those rules but I'm a bit out of my depth with regards to how
> that would work. I'd have to look into it.
> 
> Seeing as DevTools is already able to present to the user information along
> the lines of "where does this element's computed animation-name come from" I
> wonder if the necessary APIs already exist? Bear in mind that when bug
> 1178186 (and bug 1179111) land it will be possible to work out what the
> winning *value* of each of those properties is.
You are very right, the Computed-View indeed already knows how to do this.

> I guess I need to know two things:
> 
> 1) Do you need the link to the CSSKeyframesRule? (I can do that fairly
> easily I think if it's useful)
Yes!
> 2) Do you need additional APIs to get to the winning rule for animation-name
> and transition-property?
No!

Comment 6

[Patrick Brosset <:pbro>]

Clearing the NI flag.

Comment 7

[Brian Birtles (:birtles)]

I haven't added the rule member to CSSAnimation. Part of the reason is that there was talk about allowing @keyframes to cascade (i.e. multiple @keyframes rules with the same name would be smooshed together) which would mean that we'd need to point to a sequence of rules instead of a single one.

No one has implemented that but until that spec issue is resolved, it's probably best not to add this member unless this becomes necessary for the animation inspector.