Bug 1205704 - Show an icon and tooltip when animations are running on the compositor; r=tromey

--HG--
extra : commitid : HgpfT7Qj1BP
extra : rebase_source : f4a374d177d34defa1e3d7237f8799d0bff7ad9b

devtools/client/animationinspector/components.js

@@ -34,6 +34,9 @@ const L10N = new ViewHelpers.L10N(STRINGS_URI);
 const MILLIS_TIME_FORMAT_MAX_DURATION = 4000;
 // The minimum spacing between 2 time graduation headers in the timeline (px).
 const TIME_GRADUATION_MIN_SPACING = 40;
+// The size of the fast-track icon (for compositor-running animations), this is
+// used to position the icon correctly.
+const FAST_TRACK_ICON_SIZE = 20;
 
 /**
  * UI component responsible for displaying a preview of the target dom node of
@@ -631,7 +634,9 @@ AnimationsTimeline.prototype = {
         parent: this.animationsEl,
         nodeType: "li",
         attributes: {
-          "class": "animation"
+          "class": "animation" + (animation.state.isRunningOnCompositor
+                                  ? " fast-track"
+                                  : "")
         }
       });
 
@@ -801,6 +806,8 @@ AnimationTimeBlock.prototype = {
 
     let x = TimeScale.startTimeToDistance(start + (delay / rate), width);
     let w = TimeScale.durationToDistance(duration / rate, width);
+    let iterationW = w * (count || 1);
+    let delayW = TimeScale.durationToDistance(Math.abs(delay) / rate, width);
 
     let iterations = createNode({
       parent: this.containerEl,
@@ -809,7 +816,7 @@ AnimationTimeBlock.prototype = {
         // Individual iterations are represented by setting the size of the
         // repeating linear-gradient.
         "style": `left:${x}px;
-                  width:${w * (count || 1)}px;
+                  width:${iterationW}px;
                   background-size:${Math.max(w, 2)}px 100%;`
       }
     });
@@ -817,15 +824,17 @@ AnimationTimeBlock.prototype = {
     // The animation name is displayed over the iterations.
     // Note that in case of negative delay, we push the name towards the right
     // so the delay can be shown.
+    let negativeDelayW = delay < 0 ? delayW : 0;
     createNode({
       parent: iterations,
       attributes: {
         "class": "name",
         "title": this.getTooltipText(state),
-        "style": delay < 0
-                 ? "margin-left:" +
-                   TimeScale.durationToDistance(Math.abs(delay), width) + "px"
-                 : ""
+        // Position the fast-track icon with background-position, and make space
+        // for the negative delay with a margin-left.
+        "style": "background-position:" +
+                 (iterationW - FAST_TRACK_ICON_SIZE - negativeDelayW) +
+                 "px center;margin-left:" + negativeDelayW + "px"
       },
       textContent: state.name
     });
@@ -835,9 +844,6 @@ AnimationTimeBlock.prototype = {
       // Negative delays need to start at 0.
       let delayX = TimeScale.durationToDistance(
         (delay < 0 ? 0 : delay) / rate, width);
-      let delayW = TimeScale.durationToDistance(
-        Math.abs(delay) / rate, width);
-
       createNode({
         parent: iterations,
         attributes: {
@@ -864,6 +870,9 @@ AnimationTimeBlock.prototype = {
     let iterations = L10N.getStr("player.animationIterationCountLabel") + " " +
                      (state.iterationCount ||
                       L10N.getStr("player.infiniteIterationCountText"));
-    return [title, duration, iterations, delay].join("\n");
+    let compositor = state.isRunningOnCompositor
+                     ? L10N.getStr("player.runningOnCompositorTooltip")
+                     : "";
+    return [title, duration, iterations, delay, compositor].join("\n");
   }
 };

devtools/client/animationinspector/test/browser.ini

@@ -20,6 +20,7 @@ support-files =
 [browser_animation_refresh_on_added_animation.js]
 [browser_animation_refresh_on_removed_animation.js]
 [browser_animation_refresh_when_active.js]
+[browser_animation_running_on_compositor.js]
 [browser_animation_same_nb_of_playerWidgets_and_playerFronts.js]
 [browser_animation_shows_player_on_valid_node.js]
 [browser_animation_target_highlight_select.js]

devtools/client/animationinspector/test/browser_animation_running_on_compositor.js

@@ -0,0 +1,43 @@
+/* vim: set 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 when animations displayed in the timeline are running on the
+// compositor, they get a special icon and information in the tooltip.
+
+const STRINGS_URI = "chrome://browser/locale/devtools/animationinspector.properties";
+const L10N = new ViewHelpers.L10N(STRINGS_URI);
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = yield openAnimationInspector();
+  let timeline = panel.animationsTimelineComponent;
+
+  info("Select a test node we know has an animation running on the compositor");
+  yield selectNode(".animated", inspector);
+
+  let animationEl = timeline.animationsEl.querySelector(".animation");
+  ok(animationEl.classList.contains("fast-track"),
+     "The animation element has the fast-track css class");
+  ok(hasTooltip(animationEl),
+     "The animation element has the right tooltip content");
+
+  info("Select a node we know doesn't have an animation on the compositor");
+  yield selectNode(".no-compositor", inspector);
+
+  animationEl = timeline.animationsEl.querySelector(".animation");
+  ok(!animationEl.classList.contains("fast-track"),
+     "The animation element does not have the fast-track css class");
+  ok(!hasTooltip(animationEl),
+     "The animation element has the right tooltip content");
+});
+
+function hasTooltip(animationEl) {
+  let el = animationEl.querySelector(".name");
+  let tooltip = el.getAttribute("title");
+
+  let expected = L10N.getStr("player.runningOnCompositorTooltip");
+  return tooltip.indexOf(expected) !== -1;
+}

devtools/client/animationinspector/test/doc_simple_animation.html

@@ -74,6 +74,14 @@
       animation-fill-mode: forwards;
     }
 
+    .no-compositor {
+      top: 0;
+      right: 10px;
+      background: gold;
+
+      animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
+    }
+
     @keyframes simple-animation {
       100% {
         transform: translateX(300px);
@@ -85,6 +93,12 @@
         background: blue;
       }
     }
+
+    @keyframes no-compositor {
+      100% {
+        margin-right: 600px;
+      }
+    }
   </style>
 </head>
 <body>
@@ -97,5 +111,6 @@
   <div class="ball short"></div>
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
+  <div class="ball no-compositor"></div>
 </body>
 </html>

devtools/client/themes/animationinspector.css

@@ -341,6 +341,12 @@ body {
   padding: 0 2px;
 }
 
+.animation-timeline .fast-track .name {
+  /* Animations running on the compositor have the fast-track background image*/
+  background-image: url("images/animation-fast-track.svg");
+  background-repeat: no-repeat;
+}
+
 .animation-timeline .animation .delay {
   position: absolute;
   top: 0;

devtools/client/themes/images/animation-fast-track.svg

@@ -4,6 +4,6 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" width="9" height="12">
   <g transform="matrix(1.0251088,0,0,0.85613344,-3.1546734,-888.94343)">
-    <path d="m 5.1284819,1038.3667 6.4950901,0 -2.7147491,4.6651 2.9438561,0 -8.1148915,9.3081 1.6126718,-6.8973 -2.2701022,0 z" style="fill:#4cb0e1;"/>
+    <path d="m 5.1284819,1038.3667 6.4950901,0 -2.7147491,4.6651 2.9438561,0 -8.1148915,9.3081 1.6126718,-6.8973 -2.2701022,0 z" style="fill:white;"/>
   </g>
 </svg>