Bug 1406285 - Part 9: Implement endDelay component. r=gl

MozReview-Commit-ID: F62qpT8yh03

--HG--
extra : rebase_source : 3f49213bb09bb494e9e5578c78d78ec57b3f9944

devtools/client/inspector/animation/components/graph/EndDelaySign.js

@@ -0,0 +1,47 @@
+/* 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 EndDelaySign 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;
+    const endTime = state.duration * state.iterationCount + state.delay;
+    const endDelay = state.endDelay < 0 ? state.endDelay : 0;
+    const offset = (startTime + endTime + endDelay) / timeScale.getDuration() * 100;
+    const width = Math.abs(state.endDelay) / timeScale.getDuration() * 100;
+
+    const endDelayClass = state.endDelay < 0 ? "negative" : "";
+    const fillClass = state.fill === "both" || state.fill === "forwards" ? "fill" : "";
+
+    return dom.div(
+      {
+        className: `animation-end-delay-sign ${ endDelayClass } ${ fillClass }`,
+        style: {
+          width: `${ width }%`,
+          left: `${ offset }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = EndDelaySign;

devtools/client/inspector/animation/components/graph/SummaryGraph.js

@@ -9,6 +9,7 @@ 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 EndDelaySign = createFactory(require("./EndDelaySign"));
 const SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
 
 class SummaryGraph extends PureComponent {
@@ -46,6 +47,15 @@ class SummaryGraph extends PureComponent {
           }
         )
       :
+      null,
+      animation.state.iterationCount && animation.state.endDelay ?
+        EndDelaySign(
+          {
+            animation,
+            timeScale,
+          }
+        )
+      :
       null
     );
   }

devtools/client/inspector/animation/components/graph/moz.build

@@ -6,6 +6,7 @@ DevToolsModules(
     'ComputedTimingPath.js',
     'DelaySign.js',
     'EffectTimingPath.js',
+    'EndDelaySign.js',
     'SummaryGraph.js',
     'SummaryGraphPath.js',
     'TimingPath.js'

devtools/client/themes/animation.css

@@ -119,25 +119,27 @@
   opacity: 0.3;
 }
 
-.animation-delay-sign {
+.animation-delay-sign,
+.animation-end-delay-sign {
   background-color: var(--theme-graphs-grey);
   height: 3px;
   position: absolute;
   top: calc(100% - 1.5px);
 }
 
-.animation-delay-sign::before {
+.animation-delay-sign::before,
+.animation-end-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 {
+.animation-delay-sign.fill,
+.animation-end-delay-sign.fill {
   background-color: var(--effect-timing-graph-color);
 }
 
@@ -146,6 +148,15 @@
   right: -3px;
 }
 
+.animation-end-delay-sign::before {
+  right: -3px;
+}
+
+.animation-end-delay-sign.negative::before {
+  left: -3px;
+  right: unset;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;