2001562 - Animations on button elements are not displayed in the animation panel

Status: VERIFIED FIXED

(DevTools :: Inspector: Animations, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: test case

Steps to reproduce

1. Open test case
2. Open the inspector
3. Open the animation panel

Expected results

The animation on the button color is displayed

Actual results

The animation panel stays empty

---

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

There's an error in the browser toolbox:

TypeError: Window.getComputedStyle: Argument 1 is not an object.
    getAnimationTimingFunction resource://devtools/server/actors/animation.js:336
    getState resource://devtools/server/actors/animation.js:376
    getCurrentState resource://devtools/server/actors/animation.js:406
    form resource://devtools/server/actors/animation.js:180

in https://searchfox.org/firefox-main/rev/70425199e9a5fa80aa7419fa51763013a67226e1/devtools/server/actors/animation.js#317,322-330

getAnimationTimingFunction() {
...
  let pseudo = null;
  let target = this.player.effect.target;
  if (target.type) {
    // Animated element is a pseudo element.
    pseudo = target.type;
    target = target.element;
  }
  return this.window.getComputedStyle(target, pseudo).animationTimingFunction;
}

Here, for a <button> element, target.type does return something (e.g. "button", "submit", …), and so we re-assign target with target.element, which is undefined.
Note that it's probably not returning what we want for pseudo element either: target is always the binding element, not the actual pseudo element anonymous node, so we wouldn't go inside the if block when we have pseudo elements.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2001562 - [devtools] Fix AnimationPlayerActor for element with `type` property. r=#devtools.

In the class, there were a couple places where we would check the animation target
type property as a way to detect if the animated element was a pseudo element.
This means that we were considering button elements as pseudo element, and re-assigning
variables with erroneous properties, which would ultimately make the methods throw.
This is also wrong for pseudo elements: the animation target is always the binding
element and we have a pseudoElement string property on the animation to detect
if this applies to a pseudo element.

We fix the faulty callsites and add a server test that is covering this.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e8fb3ed027fd
https://hg.mozilla.org/integration/autoland/rev/2d15c1d5edd1
[devtools] Fix AnimationPlayerActor for element with `type` property. r=devtools-reviewers,bomsy.

Comment 4

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/2d15c1d5edd1

Comment 5

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2025-11-21 Firefox Nightly build on Windows 10.
Verified as fixed on Firefox Nightly 148.0a1 and Firefox 147.0b1 on Windows 10, macOS 15 and Ubuntu 22.