Bug 1416106 - Part 9: Set styles to graph. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 14 Feb 2018 23:18:13 +0900
changeset 404003 5df3265bb6097c870156423561b9d85598e3e83b
parent 404002 0070a351a4a4512adfe1dc1d68daad620ce63dc1
child 404004 f20d1625e15bd501a5e36a85f9b30544ae35114a
push id99924
push userebalazs@mozilla.com
push dateThu, 15 Feb 2018 20:43:51 +0000
treeherdermozilla-inbound@a7d2a49f46fb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1416106
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
 }