Bug 1406285 - Part 11: Implement negative endDelay path. r?gl
MozReview-Commit-ID: 5Hbmewfr65t
new file mode 100644
--- /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;
--- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
@@ -7,16 +7,17 @@
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
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.
const MIN_KEYFRAMES_EASING_OPACITY = 0.5;
class SummaryGraphPath extends PureComponent {
static get propTypes() {
return {
@@ -201,14 +202,28 @@ class SummaryGraphPath extends PureCompo
durationPerPixel,
keyframes,
simulateAnimation,
totalDuration,
}
);
})
:
+ null,
+ animation.state.iterationCount && animation.state.endDelay < 0 ?
+ keyframesList.map(keyframes => {
+ return NegativeEndDelayPath(
+ {
+ animation,
+ durationPerPixel,
+ keyframes,
+ simulateAnimation,
+ totalDuration,
+ }
+ );
+ })
+ :
null
);
}
}
module.exports = SummaryGraphPath;
--- a/devtools/client/inspector/animation/components/graph/moz.build
+++ b/devtools/client/inspector/animation/components/graph/moz.build
@@ -3,13 +3,14 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'ComputedTimingPath.js',
'DelaySign.js',
'EffectTimingPath.js',
'EndDelaySign.js',
'NegativeDelayPath.js',
+ 'NegativeEndDelayPath.js',
'NegativePath.js',
'SummaryGraph.js',
'SummaryGraphPath.js',
'TimingPath.js'
)
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -114,17 +114,18 @@
transform: scale(1, -1);
vector-effect: non-scaling-stroke;
}
.animation-effect-timing-path path.infinity:nth-child(n+2) {
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;
transform: scale(1, -1);
vector-effect: non-scaling-stroke;
}
.animation-delay-sign,