Bug 1406285 - Part 6: Apply computed timing graph color by animation type. r=gl

MozReview-Commit-ID: 7MR7Es9HaO1

--HG--
extra : rebase_source : 32b36bb3491fab4c6c62b922a9bd034fd539783c

devtools/client/inspector/animation/components/AnimationItem.js

@@ -39,7 +39,7 @@ class AnimationItem extends PureComponent {
 
     return dom.li(
       {
-        className: "animation-item"
+        className: `animation-item ${ animation.state.type }`
       },
       AnimationTarget(
         {

devtools/client/themes/animation.css

@@ -56,6 +56,18 @@
   background-color: var(--animation-even-background-color);
 }
 
+.animation-item.cssanimation {
+  --computed-timing-graph-color: var(--theme-contrast-background);
+}
+
+.animation-item.csstransition {
+  --computed-timing-graph-color: var(--theme-highlight-blue);
+}
+
+.animation-item.scriptanimation {
+  --computed-timing-graph-color: var(--theme-graphs-green);
+}
+
 /* Animation Target */
 .animation-target {
   align-items: center;
@@ -82,7 +94,7 @@
 }
 
 .animation-computed-timing-path path {
-  fill: lime;
+  fill: var(--computed-timing-graph-color);
   vector-effect: non-scaling-stroke;
   transform: scale(1, -1);
 }