Bug 1406285 - Part 11: Implement negative endDelay path. r=gl

MozReview-Commit-ID: 5Hbmewfr65t

--HG--
extra : rebase_source : 9b6b5020f2a0e49259b25d58f6cf2e0d9f9c78f3

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

@@ -0,0 +1,41 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const NegativePath = require("./NegativePath");
+
+class NegativeEndDelayPath extends NegativePath {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      durationPerPixel: PropTypes.number.isRequired,
+      keyframes: PropTypes.object.isRequired,
+      simulateAnimation: PropTypes.func.isRequired,
+      totalDuration: PropTypes.number.isRequired,
+    };
+  }
+
+  constructor(props) {
+    props.className = "animation-negative-end-delay-path";
+    super(props);
+  }
+
+  renderGraph(state, helper) {
+    const endTime = state.delay + state.iterationCount * state.duration;
+    const startTime = endTime + state.endDelay;
+    const segments = helper.createPathSegments(startTime, endTime);
+
+    return dom.path(
+      {
+        d: helper.toPathString(segments),
+      }
+    );
+  }
+}
+
+module.exports = NegativeEndDelayPath;

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

@@ -12,6 +12,7 @@ const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const ComputedTimingPath = createFactory(require("./ComputedTimingPath"));
 const EffectTimingPath = createFactory(require("./EffectTimingPath"));
 const NegativeDelayPath = createFactory(require("./NegativeDelayPath"));
+const NegativeEndDelayPath = createFactory(require("./NegativeEndDelayPath"));
 const { DEFAULT_GRAPH_HEIGHT } = require("../../utils/graph-helper");
 
 // Minimum opacity for semitransparent fill color for keyframes's easing graph.
@@ -206,6 +207,20 @@ class SummaryGraphPath extends PureComponent {
           );
         })
       :
+      null,
+      animation.state.iterationCount && animation.state.endDelay < 0 ?
+        keyframesList.map(keyframes => {
+          return NegativeEndDelayPath(
+            {
+              animation,
+              durationPerPixel,
+              keyframes,
+              simulateAnimation,
+              totalDuration,
+            }
+          );
+        })
+      :
       null
     );
   }

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

@@ -8,6 +8,7 @@ DevToolsModules(
     'EffectTimingPath.js',
     'EndDelaySign.js',
     'NegativeDelayPath.js',
+    'NegativeEndDelayPath.js',
     'NegativePath.js',
     'SummaryGraph.js',
     'SummaryGraphPath.js',

devtools/client/themes/animation.css

@@ -119,7 +119,8 @@
   opacity: 0.3;
 }
 
-.animation-negative-delay-path path {
+.animation-negative-delay-path path,
+.animation-negative-end-delay-path path {
   fill: none;
   stroke: var(--theme-graphs-grey);
   stroke-dasharray: 2px 2px;