tor-browser

commit e8fb3ed027fd4c626f00e6ab152cad468b6ad39a
parent cd8a6e8ff7eac1a44db7474ec30da5cb30a715da
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Fri, 21 Nov 2025 16:29:38 +0000

Bug 2001562 - [devtools] Fix AnimationPlayerActor for element with `type` property. r=devtools-reviewers,bomsy.

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.

Differential Revision: https://phabricator.services.mozilla.com/D273546

Diffstat:
M
devtools/server/actors/animation.js
 | 
21
+++++----------------
M
devtools/server/tests/browser/animation.html
 | 
6
++++++
M
devtools/server/tests/browser/browser_animation_getPlayers.js
 | 
5
+++++

3 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/devtools/server/actors/animation.js b/devtools/server/actors/animation.js
@@ -324,14 +324,9 @@ class AnimationPlayerActor extends Actor {
       return null;
     }
 
-    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;
+    const { target, pseudoElement } = this.player.effect;
+    return this.window.getComputedStyle(target, pseudoElement)
+      .animationTimingFunction;
   }
 
   getPropertiesCompositorStatus() {
@@ -492,16 +487,10 @@ class AnimationPlayerActor extends Actor {
           return;
         }
         if (!underlyingValue) {
-          let pseudo = null;
-          let target = this.player.effect.target;
-          if (target.type) {
-            // This target is a pseudo element.
-            pseudo = target.type;
-            target = target.element;
-          }
+          const { target, pseudoElement } = this.player.effect;
           const value = DOMWindowUtils.getUnanimatedComputedStyle(
             target,
-            pseudo,
+            pseudoElement,
             property.name,
             DOMWindowUtils.FLUSH_NONE
           );
diff --git a/devtools/server/tests/browser/animation.html b/devtools/server/tests/browser/animation.html
@@ -131,6 +131,10 @@
     height: 100px;
   }
 
+  .button-animation {
+    animation: glow 5s infinite alternate;
+  }
+
   @keyframes move {
     100% {
       transform: translateY(100px);
@@ -160,6 +164,8 @@
 <div class="delayed-multiple-animations"></div>
 <div class="multiple-animations-2"></div>
 <div class="all-transitions"></div>
+<!-- We need this to be a button to assert fix for Bug 2001562 -->
+<button class="button-animation"></button>
 <script type="text/javascript">
   "use strict";
   // Get the transitions started when the page loads
diff --git a/devtools/server/tests/browser/browser_animation_getPlayers.js b/devtools/server/tests/browser/browser_animation_getPlayers.js
@@ -36,4 +36,9 @@ async function theRightNumberOfPlayersIsReturned(walker, animations) {
     1,
     "One animation player was returned for the transitioned node"
   );
+
+  // Asserting fix for Bug 2001562
+  node = await walker.querySelector(walker.rootNode, ".button-animation");
+  players = await animations.getAnimationPlayersForNode(node);
+  is(players.length, 1, "Got an animation player for the animated button");
 }