Bug 1254408 - Part 1 - Expose animation performance information in DevTools. r=pbro

MozReview-Commit-ID: FHC41UoFEUl

devtools/client/animationinspector/components/animation-details.js

@@ -57,6 +57,29 @@ AnimationDetails.prototype = {
     }
   },
 
+  getPerfDataForProperty: function (animation, propertyName) {
+    let warning = "";
+    let className = "";
+    if (animation.state.propertyState) {
+      let isRunningOnCompositor;
+      for (let propState of animation.state.propertyState) {
+        if (propState.property == propertyName) {
+          isRunningOnCompositor = propState.runningOnCompositor;
+          if (typeof propState.warning != "undefined") {
+            warning = propState.warning;
+          }
+          break;
+        }
+      }
+      if (isRunningOnCompositor && warning == "") {
+        className = "oncompositor";
+      } else if (!isRunningOnCompositor && warning != "") {
+        className = "warning";
+      }
+    }
+    return {className, warning};
+  },
+
   /**
    * Get a list of the tracks of the animation actor
    * @return {Object} A list of tracks, one per animated property, each
@@ -137,16 +160,19 @@ AnimationDetails.prototype = {
         parent: this.containerEl,
         attributes: {"class": "property"}
       });
-
+      let {warning, className} =
+        this.getPerfDataForProperty(animation, propertyName);
       createNode({
         // text-overflow doesn't work in flex items, so we need a second level
         // of container to actually have an ellipsis on the name.
         // See bug 972664.
         parent: createNode({
           parent: line,
-          attributes: {"class": "name"},
+          attributes: {"class": "name"}
         }),
-        textContent: getCssPropertyName(propertyName)
+        textContent: getCssPropertyName(propertyName),
+        attributes: {"title": warning,
+                     "class": className}
       });
 
       // Add the keyframes diagram for this property.

devtools/client/animationinspector/components/animation-time-block.js

@@ -175,7 +175,15 @@ AnimationTimeBlock.prototype = {
 
     // Adding a note that the animation is running on the compositor thread if
     // needed.
-    if (state.isRunningOnCompositor) {
+    if (state.propertyState) {
+      if (state.propertyState
+          .every(propState => propState.runningOnCompositor)) {
+        text += L10N.getStr("player.allPropertiesOnCompositorTooltip");
+      } else if (state.propertyState
+                 .some(propState => propState.runningOnCompositor)) {
+        text += L10N.getStr("player.somePropertiesOnCompositorTooltip");
+      }
+    } else if (state.isRunningOnCompositor) {
       text += L10N.getStr("player.runningOnCompositorTooltip");
     }
 

devtools/client/animationinspector/components/animation-timeline.js

@@ -271,6 +271,21 @@ AnimationsTimeline.prototype = {
     });
   },
 
+  getCompositorStatusClassName: function (state) {
+    let className = state.isRunningOnCompositor
+                    ? " fast-track"
+                    : "";
+
+    if (state.isRunningOnCompositor && state.propertyState) {
+      className +=
+        state.propertyState.some(propState => !propState.runningOnCompositor)
+        ? " some-properties"
+        : " all-properties";
+    }
+
+    return className;
+  },
+
   render: function (animations, documentCurrentTime) {
     this.unrender();
 
@@ -288,7 +303,6 @@ AnimationsTimeline.prototype = {
 
     for (let animation of this.animations) {
       animation.on("changed", this.onAnimationStateChanged);
-
       // Each line contains the target animated node and the animation time
       // block.
       let animationEl = createNode({
@@ -297,7 +311,7 @@ AnimationsTimeline.prototype = {
         attributes: {
           "class": "animation " +
                    animation.state.type +
-                   (animation.state.isRunningOnCompositor ? " fast-track" : "")
+                   this.getCompositorStatusClassName(animation.state)
         }
       });
 
@@ -307,7 +321,7 @@ AnimationsTimeline.prototype = {
         parent: this.animationsEl,
         nodeType: "li",
         attributes: {
-          "class": "animated-properties"
+          "class": "animated-properties " + animation.state.type
         }
       });
 

devtools/client/locales/en-US/animationinspector.properties

@@ -88,6 +88,16 @@ player.playbackRateLabel=%S×
 # animation is running on the compositor thread.
 player.runningOnCompositorTooltip=This animation is running on compositor thread
 
+# LOCALIZATION NOTE (player.allPropertiesOnCompositorTooltip):
+# This string is displayed as a tooltip for the icon that indicates that
+# all of animation is running on the compositor thread.
+player.allPropertiesOnCompositorTooltip=All animation properties are optimized
+
+# LOCALIZATION NOTE (player.somePropertiesOnCompositorTooltip):
+# This string is displayed as a tooltip for the icon that indicates that
+# all of animation is not running on the compositor thread.
+player.somePropertiesOnCompositorTooltip=Some animation properties are optimized
+
 # LOCALIZATION NOTE (timeline.rateSelectorTooltip):
 # This string is displayed in the timeline toolbar, as the tooltip of the
 # drop-down list that can be used to change the rate at which the animations

devtools/client/themes/animationinspector.css

@@ -387,7 +387,7 @@ body {
   align-items: center;
   padding: 0 2px;
   box-sizing: border-box;
-  --fast-track-icon-width: 12px;
+  --fast-track-icon-width: 15px;
   z-index: 1;
 }
 
@@ -407,13 +407,23 @@ body {
   content: "";
   display: block;
   position: absolute;
-  top: 0;
+  top: 1px;
   right: 0;
   height: 100%;
   width: var(--fast-track-icon-width);
   z-index: 1;
+}
 
-  background-image: url("images/animation-fast-track.svg");
+.animation-timeline .all-properties .name::after {
+  background-color: white;
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.animation-timeline .some-properties .name::after {
+  background-color: var(--theme-content-color3);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -529,6 +539,32 @@ body {
   text-overflow: ellipsis;
 }
 
+.animated-properties.cssanimation {
+  --background-color: var(--theme-contrast-background);
+}
+
+.animated-properties.csstransition {
+  --background-color: var(--theme-highlight-blue);
+}
+
+.animated-properties.scriptanimation {
+  --background-color: var(--theme-graphs-green);
+}
+
+.animation-timeline .animated-properties .oncompositor::before {
+  content: "";
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  background-color: var(--background-color);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  vertical-align: middle;
+}
+
+.animation-timeline .animated-properties .warning {
+  text-decoration: underline dotted;
+}
+
 .animation-timeline .animated-properties .frames {
   /* The frames list is absolutely positioned and the left and width properties
      are dynamically set from javascript to match the animation's startTime and

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

@@ -1,6 +1,8 @@
 <!-- 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" viewBox="0 0 9 12" width="16" height="16">
-  <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z" fill="#fff"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+  <clipPath id="thunderbolt" transform="scale(1.4)">
+    <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z"/>
+  </clipPath>
 </svg>

devtools/server/actors/animation.js

@@ -249,6 +249,17 @@ var AnimationPlayerActor = ActorClass({
     return this.player.effect.getComputedTiming().iterationStart;
   },
 
+  getPropertiesCompositorStatus: function() {
+    let properties = this.player.effect.getProperties();
+    return properties.map(prop => {
+      return {
+        property: prop.property,
+        runningOnCompositor: prop.runningOnCompositor,
+        warning: prop.warning
+      };
+    });
+  },
+
   /**
    * Return the current start of the Animation.
    * @return {Object}
@@ -282,7 +293,10 @@ var AnimationPlayerActor = ActorClass({
       iterationStart: this.getIterationStart(),
       // animation is hitting the fast path or not. Returns false whenever the
       // animation is paused as it is taken off the compositor then.
-      isRunningOnCompositor: this.player.isRunningOnCompositor,
+      isRunningOnCompositor:
+        this.getPropertiesCompositorStatus()
+            .some(propState => propState.runningOnCompositor),
+      propertyState: this.getPropertiesCompositorStatus(),
       // The document timeline's currentTime is being sent along too. This is
       // not strictly related to the node's animationPlayer, but is useful to
       // know the current time of the animation with respect to the document's.
@@ -512,6 +526,7 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
       iterationCount: this._form.iterationCount,
       iterationStart: this._form.iterationStart,
       isRunningOnCompositor: this._form.isRunningOnCompositor,
+      propertyState: this._form.propertyState,
       documentCurrentTime: this._form.documentCurrentTime
     };
   },