Bug 1431573 - Part 6: Make summary graph reflect to playback rate. r=gl

MozReview-Commit-ID: HFffrPAyJIh

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();
     }

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();

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(
       {

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 }%`,

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(
       {

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 }%`,

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) {

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) {

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)

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,
             }

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;