Bug 1416106 - Part 9: Set styles to graph. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 14 Feb 2018 18:52:21 +0900
changeset 754855 efd801e80eb9ccb85bb47ff0fb2595fa65e37496
parent 754854 6b6d599dd0a2985a096f13c5ff31649b3e724bfa
child 754856 f0b6186e884a5b941b39ffe4030c0803dacf9f88
push id99015
push userbmo:dakatsuka@mozilla.com
push dateWed, 14 Feb 2018 11:58:26 +0000
reviewersgl
bugs1416106
milestone60.0a1
Bug 1416106 - Part 9: Set styles to graph. r?gl MozReview-Commit-ID: J44bKeKxdZN
devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
devtools/client/themes/animation.css
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -27,17 +27,17 @@ class KeyframesGraph extends PureCompone
       property,
       simulateAnimation,
       type,
       values,
     } = this.props;
 
     return dom.div(
       {
-        className: "keyframes-graph",
+        className: `keyframes-graph ${ property }`
       },
       KeyframesGraphPath(
         {
           getComputedStyle,
           property,
           simulateAnimation,
           type,
           values,
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -365,21 +365,36 @@
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }
 
 .keyframes-graph-path path {
-  fill: lime;
+  fill: #00b0bd88;
+  stroke: #00b0bd;
   vector-effect: non-scaling-stroke;
   transform: scale(1, -1);
 }
 
+.keyframes-graph.opacity .keyframes-graph-path path {
+  fill: #df00a988;
+  stroke: #df00a9;
+}
+
+.keyframes-graph.transform .keyframes-graph-path path {
+  fill: #ea800088;
+  stroke: #ea8000;
+}
+
+.keyframes-graph-path .color-path path {
+  stroke: none;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }