Bug 1406285 - Part 8: Implement delay component. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 18 Jan 2018 13:00:43 +0900
changeset 454264 2e4538c1d08effdbdf02fce6f29d087b04793cbd
parent 454263 92156bb3ceb69b3eeedcceb4857ac52b86da2053
child 454265 d948ac6aff2cbfdffaa0dcfb1fbe4c3eaf6a6ac2
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 8: Implement delay component. r=gl MozReview-Commit-ID: lU16RS3ZPq
devtools/client/inspector/animation/components/graph/DelaySign.js
devtools/client/inspector/animation/components/graph/SummaryGraph.js
devtools/client/inspector/animation/components/graph/moz.build
devtools/client/themes/animation.css
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/DelaySign.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class DelaySign extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      timeScale,
+    } = this.props;
+
+    const { state } = animation;
+    const startTime = (state.previousStartTime || 0) - timeScale.minStartTime
+                      + (state.delay < 0 ? state.delay : 0);
+    const offset = startTime / timeScale.getDuration() * 100;
+    const width = Math.abs(state.delay) / timeScale.getDuration() * 100;
+
+    const delayClass = state.delay < 0 ? "negative" : "";
+    const fillClass = state.fill === "both" || state.fill === "backwards" ? "fill" : "";
+
+    return dom.div(
+      {
+        className: `animation-delay-sign ${ delayClass } ${ fillClass }`,
+        style: {
+          width: `${ width }%`,
+          left: `${ offset }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = DelaySign;
--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const DelaySign = createFactory(require("./DelaySign"));
 const SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
 
 class SummaryGraph extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       timeScale: PropTypes.object.isRequired,
@@ -31,14 +32,23 @@ class SummaryGraph extends PureComponent
         className: "animation-summary-graph",
       },
       SummaryGraphPath(
         {
           animation,
           simulateAnimation,
           timeScale,
         }
-      )
+      ),
+      animation.state.delay ?
+        DelaySign(
+          {
+            animation,
+            timeScale,
+          }
+        )
+      :
+      null
     );
   }
 }
 
 module.exports = SummaryGraph;
--- a/devtools/client/inspector/animation/components/graph/moz.build
+++ b/devtools/client/inspector/animation/components/graph/moz.build
@@ -1,11 +1,12 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'ComputedTimingPath.js',
+    'DelaySign.js',
     'EffectTimingPath.js',
     'SummaryGraph.js',
     'SummaryGraphPath.js',
     'TimingPath.js'
 )
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -83,16 +83,17 @@
 .animation-target .tag-name {
   cursor: default;
 }
 
 /* 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-path {
   height: 100%;
   width: 100%;
 }
 
@@ -113,16 +114,43 @@
   transform: scale(1, -1);
   vector-effect: non-scaling-stroke;
 }
 
 .animation-effect-timing-path path.infinity:nth-child(n+2) {
   opacity: 0.3;
 }
 
+.animation-delay-sign {
+  background-color: var(--theme-graphs-grey);
+  height: 3px;
+  position: absolute;
+  top: calc(100% - 1.5px);
+}
+
+.animation-delay-sign::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: "";
+  height: 6px;
+  left: -3px;
+  position: absolute;
+  top: -1.5px;
+  width: 6px;
+}
+
+.animation-delay-sign.fill {
+  background-color: var(--effect-timing-graph-color);
+}
+
+.animation-delay-sign.negative::before {
+  left: unset;
+  right: -3px;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }