1958997 - Animations when repeated by using the .play() function instead of by iterations aren't shown to be repeating on the animations tab in the inspect panel.

Status: NEW

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

Description

[Ash Johnson [:AshBoomstick1]]

Attachment: this is the file I was running when the error occured. The animations playing are at lines 45-181 and its getting played at the interval starting at line 616.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Steps to reproduce:

I inspected an element on a webpage that has an animation running on it that gets played periodically.

I went to the animations tab for that element in the inspect panel.

Actual results:

I saw the animation would be shown to only play once on the animation tab in the inspect panel but I would see it play multiple times in the webpage.

Expected results:

The animation should be shown to be repeating in the animation inspect panel.

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing, can you share a simple test case, with the HTML and the JS so that we can understand the use case?

Comment 2

[Ash Johnson [:AshBoomstick1]]

Attachment: example.html

This is the html source file for my most basic example of the issue.

Comment 3

[Ash Johnson [:AshBoomstick1]]

Attachment: the JS file for the example, goes with example.html

Comment 4

[Ash Johnson [:AshBoomstick1]]

you can see when you run the html file with the new js file that both animations are running and in the animation panel in the inspect window, you can only see the animation with an iterator on it repeating (anim2), while it looks like anim1 only runs once.

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: test_case.html

thanks! I added the script to the HTML example so that we can directly check it from the bug.

Comment 6

[Julian Descottes [:jdescottes]]

Moving back to triage, and back to defect.

The behavior is definitely confusing. When you open the animation inspector, you will see a first animation displayed for anim1 and subsequent animations have no effect on the panel.

We do get mutations for each "iteration" in the animation actor at https://searchfox.org/mozilla-central/rev/6cc05c6620814bf3eb05278ccf3b1f49690b7740/devtools/server/actors/animation.js#680

When the animation ends we receive "removedAnimation" but since the status is "finished" we don't actually the corresponding actor:

https://searchfox.org/mozilla-central/rev/6cc05c6620814bf3eb05278ccf3b1f49690b7740/devtools/server/actors/animation.js#686-694

// Note that animations are reported as removed either when they are
// actually removed from the node (e.g. css class removed) or when they
// are finished and don't have forwards animation-fill-mode.
// In the latter case, we don't send an event, because the corresponding
// animation can still be seeked/resumed, so we want the client to keep
// its reference to the AnimationPlayerActor.
if (player.playState !== "idle") {
  continue;
}

Afterwards, we get the same animation again as an "addedAnimation", but since it's for the exact same animation instance, we don't process it:
https://searchfox.org/mozilla-central/rev/6cc05c6620814bf3eb05278ccf3b1f49690b7740/devtools/server/actors/animation.js#707-711

// If the added player already exists, it means we previously filtered
// it out when it was reported as removed. So filter it out here too.
if (this.actors.find(a => a.player === player)) {
  continue;
}

This is possibly fine, if we want to keep the same player for this animation. But then we need to update the player to be able to process this, probably in its own onAnimationMutations logic at https://searchfox.org/mozilla-central/rev/6cc05c6620814bf3eb05278ccf3b1f49690b7740/devtools/server/actors/animation.js#415