Bug 1180134 - Color code animations and transitions so they look different; r=bgrins

browser/devtools/animationinspector/components.js

@@ -926,7 +926,7 @@ AnimationsTimeline.prototype = {
     let iterations = createNode({
       parent: el,
       attributes: {
-        "class": "iterations" + (count ? "" : " infinite"),
+        "class": state.type + " iterations" + (count ? "" : " infinite"),
         // Individual iterations are represented by setting the size of the
         // repeating linear-gradient.
         "style": `left:${x}px;
@@ -940,7 +940,8 @@ AnimationsTimeline.prototype = {
       parent: iterations,
       attributes: {
         "class": "name",
-        "title": state.name
+        "title": L10N.getFormatStr("timeline." + state.type + ".nameLabel",
+                                   state.name)
       },
       textContent: state.name
     });

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

@@ -63,3 +63,22 @@ player.runningOnCompositorTooltip=This animation is running on compositor thread
 # graduation, to indicate what duration (in milliseconds) this graduation
 # corresponds to.
 timeline.timeGraduationLabel=%Sms
+
+# LOCALIZATION NOTE (timeline.cssanimation.nameLabel):
+# This string is displayed in a tooltip of the animation panel that is shown
+# when hovering over the name of a CSS Animation in the timeline UI.
+# %S will be replaced by the name of the animation at run-time.
+timeline.cssanimation.nameLabel=%S - CSS Animation
+
+# LOCALIZATION NOTE (timeline.csstransition.nameLabel):
+# This string is displayed in a tooltip of the animation panel that is shown
+# when hovering over the name of a CSS Transition in the timeline UI.
+# %S will be replaced by the name of the transition at run-time.
+timeline.csstransition.nameLabel=%S - CSS Transition
+
+# LOCALIZATION NOTE (timeline.unknown.nameLabel):
+# This string is displayed in a tooltip of the animation panel that is shown
+# when hovering over the name of an unknown animation type in the timeline UI.
+# This can happen if devtools couldn't figure out the type of the animation.
+# %S will be replaced by the name of the transition at run-time.
+timeline.unknown.nameLabel=%S

browser/themes/shared/devtools/animationinspector.css

@@ -162,7 +162,9 @@ body {
   height: 20px;
   overflow: hidden;
   position: relative;
-  border-bottom: 1px solid var(--theme-splitter-color);
+  /* This is the same color as the time graduations in
+     browser/devtools/animationinspector/utils.js */
+  border-bottom: 1px solid rgba(128, 136, 144, .5);
   cursor: col-resize;
   -moz-user-select: none;
 }
@@ -216,19 +218,37 @@ body {
 .animation-timeline .animation .iterations {
   position: relative;
   height: 100%;
-  border: 1px solid var(--theme-highlight-lightorange);
   box-sizing: border-box;
-  background: var(--theme-contrast-background);
-  /* Iterations are displayed with a repeating linear-gradient which size is
-     dynamically changed from JS */
+
+  --timelime-border-color: var(--theme-body-color);
+  --timeline-background-color: var(--theme-splitter-color);
+
+  /* Iterations of the animation are displayed with a repeating linear-gradient
+     which size is dynamically changed from JS. The gradient only draws 1px
+     borders between each iteration. These borders must have the same color as
+     the border of this element */
   background-image:
     linear-gradient(to right,
-                    var(--theme-highlight-lightorange) 0,
-                    var(--theme-highlight-lightorange) 1px,
+                    var(--timelime-border-color) 0,
+                    var(--timelime-border-color) 1px,
                     transparent 1px,
                     transparent 2px);
   background-repeat: repeat-x;
   background-position: -1px 0;
+  border: 1px solid var(--timelime-border-color);
+
+  /* The background color is set independently */
+  background: var(--timeline-background-color);
+}
+
+.animation-timeline .animation .cssanimation {
+  --timelime-border-color: var(--theme-highlight-lightorange);
+  --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation-timeline .animation .csstransition {
+  --timelime-border-color: var(--theme-highlight-bluegrey);
+  --timeline-background-color: var(--theme-highlight-blue);
 }
 
 .animation-timeline .animation .iterations.infinite {
@@ -254,6 +274,7 @@ body {
 }
 
 .animation-timeline .animation .name {
+  color: var(--theme-selection-color);
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -270,8 +291,8 @@ body {
   background-image: linear-gradient(to bottom,
                                     transparent,
                                     transparent 9px,
-                                    var(--theme-highlight-lightorange) 9px,
-                                    var(--theme-highlight-lightorange) 11px,
+                                    var(--timelime-border-color) 9px,
+                                    var(--timelime-border-color) 11px,
                                     transparent 11px,
                                     transparent);
 }
@@ -284,7 +305,7 @@ body {
   height: 8px;
   top: 50%;
   margin-top: -4px;
-  background: var(--theme-highlight-lightorange);
+  background: var(--timelime-border-color);
 }
 
 /* Animation target node gutter, contains a preview of the dom node */

toolkit/devtools/server/actors/animation.js

@@ -40,6 +40,13 @@ const events = require("sdk/event/core");
 // animationPlayer.
 const PLAYER_DEFAULT_AUTO_REFRESH_TIMEOUT = 500;
 
+// Types of animations.
+const ANIMATION_TYPES = {
+  CSS_ANIMATION: "cssanimation",
+  CSS_TRANSITION: "csstransition",
+  UNKNOWN: "unknown"
+};
+
 /**
  * The AnimationPlayerActor provides information about a given animation: its
  * startTime, currentTime, current state, etc.
@@ -121,6 +128,16 @@ let AnimationPlayerActor = ActorClass({
     return player instanceof this.tabActor.window.CSSTransition;
   },
 
+  getType: function() {
+    if (this.isAnimation()) {
+      return ANIMATION_TYPES.CSS_ANIMATION;
+    } else if (this.isTransition()) {
+      return ANIMATION_TYPES.CSS_TRANSITION;
+    }
+
+    return ANIMATION_TYPES.UNKNOWN;
+  },
+
   /**
    * Some of the player's properties are retrieved from the node's
    * computed-styles because the Web Animations API does not provide them yet.
@@ -168,9 +185,9 @@ let AnimationPlayerActor = ActorClass({
       return this.player.animationName;
     } else if (this.isTransition()) {
       return this.player.transitionProperty;
-    } else {
-      return  "";
     }
+
+    return "";
   },
 
   /**
@@ -254,6 +271,7 @@ let AnimationPlayerActor = ActorClass({
     // add the corresponding property in the AnimationPlayerFront' initialState
     // getter.
     let newState = {
+      type: this.getType(),
       // startTime is null whenever the animation is paused or waiting to start.
       startTime: this.player.startTime,
       currentTime: this.player.currentTime,
@@ -416,6 +434,7 @@ let AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
    */
   get initialState() {
     return {
+      type: this._form.type,
       startTime: this._form.startTime,
       currentTime: this._form.currentTime,
       playState: this._form.playState,

toolkit/devtools/server/tests/browser/browser_animation_actors_03.js

@@ -40,6 +40,7 @@ function* playerHasAnInitialState(walker, front) {
   ok("delay" in player.initialState, "Player's state has delay");
   ok("iterationCount" in player.initialState, "Player's state has iterationCount");
   ok("isRunningOnCompositor" in player.initialState, "Player's state has isRunningOnCompositor");
+  ok("type" in player.initialState, "Player's state has type");
 }
 
 function* playerStateIsCorrect(walker, front) {
@@ -52,6 +53,7 @@ function* playerStateIsCorrect(walker, front) {
   is(state.iterationCount, null, "Iteration count is correct");
   is(state.playState, "running", "PlayState is correct");
   is(state.playbackRate, 1, "PlaybackRate is correct");
+  is(state.type, "cssanimation", "Type is correct");
 
   info("Checking the state of the transition");
 
@@ -62,6 +64,7 @@ function* playerStateIsCorrect(walker, front) {
   is(state.iterationCount, 1, "Transition iteration count is correct");
   is(state.playState, "running", "Transition playState is correct");
   is(state.playbackRate, 1, "Transition playbackRate is correct");
+  is(state.type, "csstransition", "Transition type is correct");
 
   info("Checking the state of one of multiple animations on a node");