Bug 1231945 - Display animation.id when it exists; r=tromey

devtools/server/actors/animation.js

@@ -138,13 +138,15 @@ var AnimationPlayerActor = ActorClass({
   },
 
   /**
-   * Get the name associated with the player. This is used to match
-   * up the player with values in the computed animation-name or
-   * transition-property property.
+   * Get the name of this animation. This can be either the animation.id
+   * property if it was set, or the keyframe rule name or the transition
+   * property.
    * @return {String}
    */
   getName: function() {
-    if (this.isAnimation()) {
+    if (this.player.id) {
+      return this.player.id;
+    } else if (this.isAnimation()) {
       return this.player.animationName;
     } else if (this.isTransition()) {
       return this.player.transitionProperty;

devtools/server/tests/browser/animation.html

@@ -145,6 +145,19 @@
       width: 100px;
     }
   }
+
+  .script-generated {
+    display: inline-block;
+
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: black;
+    background-image:
+      repeating-linear-gradient(45deg, transparent 0, transparent 5px, #f06 5px, #f06 10px);
+    border: 5px solid #f06;
+    box-sizing: border-box;
+  }
 </style>
 <div class="not-animated"></div>
 <div class="simple-animation"></div>
@@ -157,11 +170,26 @@
 <div class="delayed-multiple-animations"></div>
 <div class="multiple-animations-2"></div>
 <div class="all-transitions"></div>
+<div class="script-generated"></div>
 <script type="text/javascript">
   // Get the transitions started when the page loads
   var players;
   addEventListener("load", function() {
     document.querySelector(".transition").classList.add("get-round");
     document.querySelector(".delayed-transition").classList.add("get-round");
+
+    // Create a script-generated animation.
+    var animation = document.querySelector(".script-generated").animate({
+      backgroundColor: ["black", "gold"]
+    }, {
+      duration: 500,
+      iterations: Infinity,
+      direction: "alternate"
+    });
+    animation.id = "custom-animation-name";
+
+    // Add a custom animation id to an existing css animation.
+    document.querySelector(".delayed-animation")
+            .getAnimations()[0].id = "cssanimation-custom-name";
   });
 </script>

devtools/server/tests/browser/browser.ini

@@ -28,6 +28,7 @@ support-files =
 [browser_animation_getStateAfterFinished.js]
 [browser_animation_getSubTreeAnimations.js]
 [browser_animation_keepFinished.js]
+[browser_animation_name.js]
 [browser_animation_playerState.js]
 [browser_animation_playPauseIframe.js]
 [browser_animation_playPauseSeveral.js]

devtools/server/tests/browser/browser_animation_name.js

@@ -0,0 +1,51 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the AnimationPlayerActor provides the correct name for an
+// animation. Whether this animation is a CSSAnimation, CSSTransition or a
+// script-based animation that has been given an id, or even a CSSAnimation that
+// has been given an id.
+
+const TEST_DATA = [{
+  selector: ".simple-animation",
+  animationIndex: 0,
+  expectedName: "move"
+}, {
+  selector: ".transition",
+  animationIndex: 0,
+  expectedName: "width"
+}, {
+  selector: ".script-generated",
+  animationIndex: 0,
+  expectedName: "custom-animation-name"
+}, {
+  selector: ".delayed-animation",
+  animationIndex: 0,
+  expectedName: "cssanimation-custom-name"
+}];
+
+add_task(function*() {
+  let {client, walker, animations} =
+    yield initAnimationsFrontForUrl(MAIN_DOMAIN + "animation.html");
+
+  for (let {selector, animationIndex, expectedName} of TEST_DATA) {
+    let {name} = yield getAnimationStateForNode(walker, animations, selector,
+                                                animationIndex);
+    is(name, expectedName, "The animation has the expected name");
+  }
+
+  yield closeDebuggerClient(client);
+  gBrowser.removeCurrentTab();
+});
+
+function* getAnimationStateForNode(walker, animations, nodeSelector, index) {
+  let node = yield walker.querySelector(walker.rootNode, nodeSelector);
+  let players = yield animations.getAnimationPlayersForNode(node);
+  let player = players[index];
+  yield player.ready();
+  let state = yield player.getCurrentState();
+  return state;
+}