From 4fe4fe77889f017d161d9a860313cfa1da42a56b Mon Sep 17 00:00:00 2001
From: Daisuke Akatsuka <dakatsuka@mozilla.com>
Date: Thu, 18 Jan 2018 13:02:13 +0900
Subject: [PATCH] Bug 1406285 - Part 11: Implement negative endDelay path. r=gl

MozReview-Commit-ID: 5Hbmewfr65t

--HG--
extra : rebase_source : 9b6b5020f2a0e49259b25d58f6cf2e0d9f9c78f3
---
 .../components/graph/NegativeEndDelayPath.js  | 41 +++++++++++++++++++
 .../components/graph/SummaryGraphPath.js      | 15 +++++++
 .../animation/components/graph/moz.build      |  1 +
 devtools/client/themes/animation.css          |  3 +-
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js

diff --git a/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js b/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js
new file mode 100644
index 000000000000..2f59580b597f
--- /dev/null
+++ b/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;
diff --git a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
index e532ad26efed..23c272136fa7 100644
--- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
+++ b/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
     );
   }
diff --git a/devtools/client/inspector/animation/components/graph/moz.build b/devtools/client/inspector/animation/components/graph/moz.build
index e72e63012bab..c3bcf93727d1 100644
--- a/devtools/client/inspector/animation/components/graph/moz.build
+++ b/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',
diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css
index 9dbfaae27b69..d65bd3cd3ddf 100644
--- a/devtools/client/themes/animation.css
+++ b/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;