Bug 1406285 - Part 14: Implement compositor sign. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 18 Jan 2018 13:15:24 +0900
changeset 454270 0f89a44387fd30d262f7a22a962f6d9ecf8d0287
parent 454269 217f71d0cb61b3adcf3aa2c4763e1cdb0d72d31d
child 454271 914edf2a0415d1d187b86c4e32e7deef05a2eb47
push id1648
push usermtabara@mozilla.com
push dateThu, 01 Mar 2018 12:45:47 +0000
treeherdermozilla-release@cbb9688c2eeb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1406285
milestone59.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 1406285 - Part 14: Implement compositor sign. r=gl MozReview-Commit-ID: G2655Fr19DX
devtools/client/inspector/animation/components/graph/SummaryGraph.js
devtools/client/themes/animation.css
--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -124,17 +124,18 @@ class SummaryGraph extends PureComponent
     const {
       animation,
       simulateAnimation,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
-        className: "animation-summary-graph",
+        className: "animation-summary-graph" +
+                   (animation.state.isRunningOnCompositor ? " compositor" : ""),
         title: this.getTitleText(animation.state),
       },
       SummaryGraphPath(
         {
           animation,
           simulateAnimation,
           timeScale,
         }
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -87,16 +87,31 @@
 /* Summary Graph */
 .animation-summary-graph {
   height: 100%;
   padding-top: 5px;
   position: relative;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
+.animation-summary-graph.compositor::after {
+  background-image: url("images/animation-fast-track.svg");
+  background-repeat: no-repeat;
+  content: "";
+  display: block;
+  fill: var(--theme-content-color3);
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 15px;
+  z-index: 1;
+  -moz-context-properties: fill;
+}
+
 .animation-summary-graph-path {
   height: 100%;
   width: 100%;
 }
 
 .animation-computed-timing-path path {
   fill: var(--computed-timing-graph-color);
   vector-effect: non-scaling-stroke;