From 86f02f7e6311dce0203ca1ad4f7bb1de916ec1e8 Mon Sep 17 00:00:00 2001 From: Daisuke Akatsuka Date: Tue, 13 Mar 2018 16:45:19 +0900 Subject: [PATCH] Bug 1431573 - Part 6: Make summary graph reflect to playback rate. r=gl MozReview-Commit-ID: HFffrPAyJIh --- .../client/inspector/animation/animation.js | 3 ++- .../components/AnimationTimelineTickList.js | 10 +++---- .../components/graph/ComputedTimingPath.js | 3 ++- .../animation/components/graph/DelaySign.js | 20 ++++++++------ .../components/graph/EffectTimingPath.js | 3 ++- .../components/graph/EndDelaySign.js | 27 ++++++++++++------- .../components/graph/NegativeDelayPath.js | 16 ++--------- .../components/graph/NegativeEndDelayPath.js | 16 ++--------- .../components/graph/NegativePath.js | 6 ++--- .../components/graph/SummaryGraphPath.js | 8 +++++- .../inspector/animation/utils/timescale.js | 4 +-- 11 files changed, 55 insertions(+), 61 deletions(-) diff --git a/devtools/client/inspector/animation/animation.js b/devtools/client/inspector/animation/animation.js index 8bc290f5123e..943b0605daa6 100644 --- a/devtools/client/inspector/animation/animation.js +++ b/devtools/client/inspector/animation/animation.js @@ -383,7 +383,6 @@ class AnimationInspector { updateState(animations) { this.stopAnimationsCurrentTimeTimer(); - this.inspector.store.dispatch(updateAnimations(animations)); // If number of displayed animations is one, we select the animation automatically. // But if selected animation is in given animations, ignores. const selectedAnimation = this.state.selectedAnimation; @@ -393,6 +392,8 @@ class AnimationInspector { this.selectAnimation(animations.length === 1 ? animations[0] : null); } + this.inspector.store.dispatch(updateAnimations(animations)); + if (hasPlayingAnimation(animations)) { this.startAnimationsCurrentTimeTimer(); } diff --git a/devtools/client/inspector/animation/components/AnimationTimelineTickList.js b/devtools/client/inspector/animation/components/AnimationTimelineTickList.js index 2a0f68625d4b..02369acb94d0 100644 --- a/devtools/client/inspector/animation/components/AnimationTimelineTickList.js +++ b/devtools/client/inspector/animation/components/AnimationTimelineTickList.js @@ -35,11 +35,11 @@ class AnimationTimelineTickList extends PureComponent { } componentDidMount() { - this.updateTickList(); + this.updateTickList(this.props); } componentWillReceiveProps(nextProps) { - this.updateTickList(); + this.updateTickList(nextProps); } shouldComponentUpdate(nextProps, nextState) { @@ -51,7 +51,7 @@ class AnimationTimelineTickList extends PureComponent { const currentTickItem = this.state.tickList[i]; const nextTickItem = nextState.tickList[i]; - if (currentTickItem.text !== nextTickItem.text) { + if (currentTickItem.timeTickLabel !== nextTickItem.timeTickLabel) { return true; } } @@ -59,8 +59,8 @@ class AnimationTimelineTickList extends PureComponent { return false; } - updateTickList() { - const { timeScale } = this.props; + updateTickList(props) { + const { timeScale } = props; const tickListEl = ReactDOM.findDOMNode(this); const width = tickListEl.offsetWidth; const animationDuration = timeScale.getDuration(); diff --git a/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js index 40f865ef9f52..12cc17ba7a1d 100644 --- a/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js +++ b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js @@ -16,6 +16,7 @@ class ComputedTimingPath extends TimingPath { animation: PropTypes.object.isRequired, durationPerPixel: PropTypes.number.isRequired, keyframes: PropTypes.object.isRequired, + offset: PropTypes.number.isRequired, opacity: PropTypes.number.isRequired, simulateAnimation: PropTypes.func.isRequired, totalDuration: PropTypes.number.isRequired, @@ -27,6 +28,7 @@ class ComputedTimingPath extends TimingPath { animation, durationPerPixel, keyframes, + offset, opacity, simulateAnimation, totalDuration, @@ -78,7 +80,6 @@ class ComputedTimingPath extends TimingPath { const helper = new SummaryGraphHelper(state, keyframes, totalDuration, durationPerPixel, getValueFunc, toPathStringFunc); - const offset = state.previousStartTime ? state.previousStartTime : 0; return dom.g( { diff --git a/devtools/client/inspector/animation/components/graph/DelaySign.js b/devtools/client/inspector/animation/components/graph/DelaySign.js index 9430c202f138..bab98082953b 100644 --- a/devtools/client/inspector/animation/components/graph/DelaySign.js +++ b/devtools/client/inspector/animation/components/graph/DelaySign.js @@ -21,19 +21,23 @@ class DelaySign extends PureComponent { animation, timeScale, } = this.props; + const { + fill, + playbackRate, + previousStartTime = 0, + } = animation.state; - const { state } = animation; - const startTime = (state.previousStartTime || 0) - timeScale.minStartTime - + (state.delay < 0 ? state.delay : 0); + const delay = animation.state.delay / playbackRate; + const startTime = + previousStartTime - timeScale.minStartTime + (delay < 0 ? 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" : ""; + const width = Math.abs(delay) / timeScale.getDuration() * 100; return dom.div( { - className: `animation-delay-sign ${ delayClass } ${ fillClass }`, + className: "animation-delay-sign" + + (delay < 0 ? " negative" : "") + + (fill === "both" || fill === "backwards" ? " fill" : ""), style: { width: `${ width }%`, left: `${ offset }%`, diff --git a/devtools/client/inspector/animation/components/graph/EffectTimingPath.js b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js index b2c820b4b6c0..6d45b91f3eba 100644 --- a/devtools/client/inspector/animation/components/graph/EffectTimingPath.js +++ b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js @@ -15,6 +15,7 @@ class EffectTimingPath extends TimingPath { return { animation: PropTypes.object.isRequired, durationPerPixel: PropTypes.number.isRequired, + offset: PropTypes.number.isRequired, simulateAnimation: PropTypes.func.isRequired, totalDuration: PropTypes.number.isRequired, }; @@ -24,6 +25,7 @@ class EffectTimingPath extends TimingPath { const { animation, durationPerPixel, + offset, simulateAnimation, totalDuration, } = this.props; @@ -57,7 +59,6 @@ class EffectTimingPath extends TimingPath { const helper = new SummaryGraphHelper(state, null, totalDuration, durationPerPixel, getValueFunc, toPathStringFunc); - const offset = state.previousStartTime ? state.previousStartTime : 0; return dom.g( { diff --git a/devtools/client/inspector/animation/components/graph/EndDelaySign.js b/devtools/client/inspector/animation/components/graph/EndDelaySign.js index 4fb20efd8ce7..6314163fb737 100644 --- a/devtools/client/inspector/animation/components/graph/EndDelaySign.js +++ b/devtools/client/inspector/animation/components/graph/EndDelaySign.js @@ -21,20 +21,27 @@ class EndDelaySign extends PureComponent { animation, timeScale, } = this.props; + const { + delay, + duration, + fill, + iterationCount, + playbackRate, + previousStartTime = 0, + } = animation.state; - 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" : ""; + const endDelay = animation.state.endDelay / playbackRate; + const startTime = previousStartTime - timeScale.minStartTime; + const endTime = + (duration * iterationCount + delay) / playbackRate + (endDelay < 0 ? endDelay : 0); + const offset = (startTime + endTime) / timeScale.getDuration() * 100; + const width = Math.abs(endDelay) / timeScale.getDuration() * 100; return dom.div( { - className: `animation-end-delay-sign ${ endDelayClass } ${ fillClass }`, + className: "animation-end-delay-sign" + + (endDelay < 0 ? " negative" : "") + + (fill === "both" || fill === "forwards" ? " fill" : ""), style: { width: `${ width }%`, left: `${ offset }%`, diff --git a/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js b/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js index c3c60ba2075b..3d54b6b5def1 100644 --- a/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js +++ b/devtools/client/inspector/animation/components/graph/NegativeDelayPath.js @@ -4,25 +4,13 @@ "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 NegativeDelayPath 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-delay-path"; - super(props); + getClassName() { + return "animation-negative-delay-path"; } renderGraph(state, helper) { diff --git a/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js b/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js index 2f59580b597f..79a5110f5e63 100644 --- a/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js +++ b/devtools/client/inspector/animation/components/graph/NegativeEndDelayPath.js @@ -4,25 +4,13 @@ "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); + getClassName() { + return "animation-negative-end-delay-path"; } renderGraph(state, helper) { diff --git a/devtools/client/inspector/animation/components/graph/NegativePath.js b/devtools/client/inspector/animation/components/graph/NegativePath.js index 5ed5f45b6d76..52d961e316e4 100644 --- a/devtools/client/inspector/animation/components/graph/NegativePath.js +++ b/devtools/client/inspector/animation/components/graph/NegativePath.js @@ -17,6 +17,7 @@ class NegativePath extends PureComponent { className: PropTypes.string.isRequired, durationPerPixel: PropTypes.number.isRequired, keyframes: PropTypes.object.isRequired, + offset: PropTypes.number.isRequired, simulateAnimation: PropTypes.func.isRequired, totalDuration: PropTypes.number.isRequired, }; @@ -25,9 +26,9 @@ class NegativePath extends PureComponent { render() { const { animation, - className, durationPerPixel, keyframes, + offset, simulateAnimation, totalDuration, } = this.props; @@ -75,11 +76,10 @@ class NegativePath extends PureComponent { const helper = new SummaryGraphHelper(state, keyframes, totalDuration, durationPerPixel, getValueFunc, toPathStringFunc); - const offset = state.previousStartTime ? state.previousStartTime : 0; return dom.g( { - className, + className: this.getClassName(), transform: `translate(${ offset })` }, this.renderGraph(state, helper) diff --git a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js index 4603428b0a43..ae3b21884a4a 100644 --- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js +++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js @@ -174,7 +174,9 @@ class SummaryGraphPath extends PureComponent { } = this.props; const totalDuration = this.getTotalDuration(animation, timeScale); - const startTime = timeScale.minStartTime; + const { playbackRate, previousStartTime = 0 } = animation.state; + const startTime = timeScale.minStartTime * playbackRate; + const offset = previousStartTime * playbackRate; const opacity = Math.max(1 / keyframesList.length, MIN_KEYFRAMES_EASING_OPACITY); return dom.svg( @@ -190,6 +192,7 @@ class SummaryGraphPath extends PureComponent { animation, durationPerPixel, keyframes, + offset, opacity, simulateAnimation, totalDuration, @@ -201,6 +204,7 @@ class SummaryGraphPath extends PureComponent { { animation, durationPerPixel, + offset, simulateAnimation, totalDuration, } @@ -214,6 +218,7 @@ class SummaryGraphPath extends PureComponent { animation, durationPerPixel, keyframes, + offset, simulateAnimation, totalDuration, } @@ -228,6 +233,7 @@ class SummaryGraphPath extends PureComponent { animation, durationPerPixel, keyframes, + offset, simulateAnimation, totalDuration, } diff --git a/devtools/client/inspector/animation/utils/timescale.js b/devtools/client/inspector/animation/utils/timescale.js index cb16b1c67172..d65565bea1fd 100644 --- a/devtools/client/inspector/animation/utils/timescale.js +++ b/devtools/client/inspector/animation/utils/timescale.js @@ -45,7 +45,7 @@ class TimeScale { endDelay = 0, iterationCount, playbackRate, - previousStartTime, + previousStartTime = 0, } = state; const toRate = v => v / playbackRate; @@ -56,8 +56,6 @@ class TimeScale { // be displaying the delay outside the time window if we didn't take it into // account here. const relevantDelay = delay < 0 ? toRate(delay) : 0; - previousStartTime = previousStartTime || 0; - const startTime = toRate(minZero(delay)) + rateRelativeDuration + endDelay;