1778407 - Support animation-composition in DevTools

Status: RESOLVED INVALID

(DevTools :: Inspector: Animations, task)

Description

[Boris Chiou [:boris]]

We would like to implement animation-composition property in Bug 1293490. We may need to add the support and/or devtools tests for this property.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Not sure what we should cover. Testing https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation-composition/_sample_.reversing_the_animation_direction.html it does show animation-composition, and values are autocompleted if you try to update the value.
We could probably surface the property value in the animation panel, when hovering the "animation chart", where we already show some animation properties

Boris, anything else we're missing? Are we showing misleading information?

Comment 2

[Boris Chiou [:boris]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Not sure what we should cover. Testing https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation-composition/_sample_.reversing_the_animation_direction.html it does show animation-composition, and values are autocompleted if you try to update the value.

We could probably surface the property value in the animation panel, when hovering the "animation chart", where we already show some animation properties

Boris, anything else we're missing? Are we showing misleading information?

Thanks for this example. Perhaps we don't need to update the animation panel for this property. However, I noticed one thing:

when I add animation-composition:add; into the first keyframe (e.g. "20%, 40%" keyframe) via DevTools, the animation doesn't update immediately. However, adding animation-timing-function: step-start; into the first keyframe makes the animation update immediately. Basically, both animation-timing-function and animation-composition have special meaning in keyframes, so perhaps we need to update animation when changing animation-composition in the keyframes. Do I miss something to update?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: setting-animation-composition-in-keyframe

(In reply to Boris Chiou [:boris] from comment #2)

Thanks for this example. Perhaps we don't need to update the animation panel for this property. However, I noticed one thing:

when I add animation-composition:add; into the first keyframe (e.g. "20%, 40%" keyframe) via DevTools, the animation doesn't update immediately. However, adding animation-timing-function: step-start; into the first keyframe makes the animation update immediately. Basically, both animation-timing-function and animation-composition have special meaning in keyframes, so perhaps we need to update animation when changing animation-composition in the keyframes. Do I miss something to update?

Do you mean adding the property in the "keyframes" section, like in the screenshot?
I don't think there's anything special we need to do, the property should be set on the rule.
I can see that editing the property in the Style Editor panel, it seems to be picked, but only after adding other properties, but I can reproduce this without involving DevTools at all:

1. Go to https://ffx-animation-composition-update-keyframe.glitch.me/
2. Click on the Set animation-composition:add on first keyframe button -> nothing happens
3. Click on the Set outline on first keyframe -> the animation gets updated, and animation-composition:add seems to be picked up

---

here's the demo code

const keyframe = document.styleSheets[0].cssRules[0].findRule("20%, 40%");
document.getElementById("comp").addEventListener("click", () => {
  keyframe.style.animationComposition = "add"  
})
document.getElementById("outline").addEventListener("click", () => {
  keyframe.style.outline = "5px solid cyan"
})

Comment 4

[Boris Chiou [:boris]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)

when I add animation-composition:add; into the first keyframe (e.g. "20%, 40%" keyframe) via DevTools, the animation doesn't update immediately. However, adding animation-timing-function: step-start; into the first keyframe makes the animation update immediately. Basically, both animation-timing-function and animation-composition have special meaning in keyframes, so perhaps we need to update animation when changing animation-composition in the keyframes. Do I miss something to update?

Do you mean adding the property in the "keyframes" section, like in the screenshot?
Yes

I don't think there's anything special we need to do, the property should be set on the rule.
I can see that editing the property in the Style Editor panel, it seems to be picked, but only after adding other properties, but I can reproduce this without involving DevTools at all:

1. Go to https://ffx-animation-composition-update-keyframe.glitch.me/
2. Click on the Set animation-composition:add on first keyframe button -> nothing happens
3. Click on the Set outline on first keyframe -> the animation gets updated, and animation-composition:add seems to be picked up

Seems I misunderstand this feature. We have to wait for the style tree refresh to apply the new animation-composition. So Perhaps we don't need this bug now because nothing needs to be added.

Thanks for handling this and providing the example