Bug 1121896 - Show when animations are running on the compositor in the animation panel. r=pbro

--HG--
extra : rebase_source : b64325cb65d0413d8802cde86285424267849de3

browser/devtools/animationinspector/components.js

@@ -82,6 +82,16 @@ PlayerMetaDataHeader.prototype = {
       }
     });
 
+    // Animation is running on compositor
+    this.compositorIcon = createNode({
+      parent: metaData,
+      nodeType: "span",
+      attributes: {
+        "class": "compositor-icon",
+        "title": L10N.getStr("player.runningOnCompositorTooltip")
+      }
+    });
+
     // Animation duration.
     this.durationLabel = createNode({
       parent: metaData,
@@ -137,6 +147,7 @@ PlayerMetaDataHeader.prototype = {
     this.durationLabel = this.durationValue = null;
     this.delayLabel = this.delayValue = null;
     this.iterationLabel = this.iterationValue = null;
+    this.compositorIcon = null;
   },
 
   render: function(state) {
@@ -189,6 +200,16 @@ PlayerMetaDataHeader.prototype = {
       }
     }
 
+    // Show the Running on compositor icon if needed.
+    if (state.isRunningOnCompositor !== this.state.isRunningOnCompositor) {
+      if (state.isRunningOnCompositor) {
+        this.compositorIcon.style.display = "inline";
+      } else {
+        // Hide the compositor icon
+        this.compositorIcon.style.display = "none";
+      }
+    }
+
     this.state = state;
   }
 };

browser/devtools/animationinspector/test/browser.ini

@@ -14,6 +14,7 @@ support-files =
 [browser_animation_play_pause_button.js]
 [browser_animation_playerFronts_are_refreshed.js]
 [browser_animation_playerWidgets_appear_on_panel_init.js]
+[browser_animation_playerWidgets_compositor_icon.js]
 [browser_animation_playerWidgets_destroy.js]
 [browser_animation_playerWidgets_disables_on_finished.js]
 [browser_animation_playerWidgets_dont_show_time_after_duration.js]

browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js

@@ -0,0 +1,24 @@
+/* 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 player widgets show the right player meta-data for the
+// isRunningOnCompositor property.
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel} = yield openAnimationInspector();
+
+  info("Select the simple animated node");
+  yield selectNode(".animated", inspector);
+
+  let compositorEl = panel.playerWidgets[0]
+                     .el.querySelector(".compositor-icon");
+
+  ok(compositorEl, "The compositor-icon element exists");
+  ok(isNodeVisible(compositorEl),
+     "The compositor icon is visible, since the animation is running on " +
+     "compositor thread");
+});

browser/locales/en-US/chrome/browser/devtools/animationinspector.properties

@@ -53,6 +53,11 @@ player.timeLabel=%Ss
 # animation runs (1x being the default, 2x being twice as fast).
 player.playbackRateLabel=%Sx
 
+# LOCALIZATION NOTE (player.runningOnCompositorTooltip):
+# This string is displayed as a tooltip for the icon that indicates that the
+# animation is running on the compositor thread.
+player.runningOnCompositorTooltip=This animation is running on compositor thread
+
 # LOCALIZATION NOTE (timeline.timeGraduationLabel):
 # This string is displayed at the top of the animation panel, next to each time
 # graduation, to indicate what duration (in milliseconds) this graduation

browser/themes/linux/jar.mn

@@ -272,6 +272,7 @@ browser.jar:
   skin/classic/browser/devtools/pseudo-class.svg      (../shared/devtools/images/pseudo-class.svg)
   skin/classic/browser/devtools/controls.png          (../shared/devtools/images/controls.png)
   skin/classic/browser/devtools/controls@2x.png       (../shared/devtools/images/controls@2x.png)
+  skin/classic/browser/devtools/animation-fast-track.svg (../shared/devtools/images/animation-fast-track.svg)
   skin/classic/browser/devtools/performance-icons.svg  (../shared/devtools/images/performance-icons.svg)
   skin/classic/browser/devtools/newtab.png             (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png          (../shared/devtools/images/newtab@2x.png)

browser/themes/osx/jar.mn

@@ -374,6 +374,7 @@ browser.jar:
   skin/classic/browser/devtools/pseudo-class.svg            (../shared/devtools/images/pseudo-class.svg)
   skin/classic/browser/devtools/controls.png                (../shared/devtools/images/controls.png)
   skin/classic/browser/devtools/controls@2x.png             (../shared/devtools/images/controls@2x.png)
+  skin/classic/browser/devtools/animation-fast-track.svg    (../shared/devtools/images/animation-fast-track.svg)
   skin/classic/browser/devtools/performance-icons.svg       (../shared/devtools/images/performance-icons.svg)
   skin/classic/browser/devtools/newtab.png                  (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png               (../shared/devtools/images/newtab@2x.png)

browser/themes/shared/devtools/animationinspector.css

@@ -312,6 +312,17 @@ body {
   margin: 0 .5em;
 }
 
+.animation-title .meta-data .compositor-icon {
+    display: none;
+    background-image: url("animation-fast-track.svg");
+    background-repeat: no-repeat;
+    padding-left: 12px;
+    /* Make sure the icon is positioned above the timeline range input so that
+       its tooltip appears on hover */
+    z-index: 1;
+    position: relative;
+}
+
 /* Timeline wiget */
 
 .timeline {

browser/themes/shared/devtools/images/animation-fast-track.svg

@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<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;"/>
+  </g>
+</svg>

browser/themes/windows/jar.mn

@@ -364,6 +364,7 @@ browser.jar:
         skin/classic/browser/devtools/pseudo-class.svg              (../shared/devtools/images/pseudo-class.svg)
         skin/classic/browser/devtools/controls.png                  (../shared/devtools/images/controls.png)
         skin/classic/browser/devtools/controls@2x.png               (../shared/devtools/images/controls@2x.png)
+        skin/classic/browser/devtools/animation-fast-track.svg      (../shared/devtools/images/animation-fast-track.svg)
         skin/classic/browser/devtools/performance-icons.svg         (../shared/devtools/images/performance-icons.svg)
         skin/classic/browser/devtools/newtab.png                    (../shared/devtools/images/newtab.png)
         skin/classic/browser/devtools/newtab@2x.png                 (../shared/devtools/images/newtab@2x.png)