Bug 1219611 - When animations end in the timeline, make sure the time-label shows the right time; r=pbro
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Thu, 28 Jan 2016 22:52:33 +0100
changeset 282464 af13bfd0725a
parent 282463 60eb968bcef1
child 282465 1b4278d9c84c
push id17324
push userpbrosset@mozilla.com
push dateMon, 01 Feb 2016 08:35:03 +0000
treeherderfx-team@af13bfd0725a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1219611
milestone47.0a1
Bug 1219611 - When animations end in the timeline, make sure the time-label shows the right time; r=pbro
devtools/client/animationinspector/animation-panel.js
devtools/client/animationinspector/components/animation-timeline.js
--- a/devtools/client/animationinspector/animation-panel.js
+++ b/devtools/client/animationinspector/animation-panel.js
@@ -223,21 +223,18 @@ var AnimationsPanel = {
                             .catch(error => console.error(error))
                             .then(() => this.setCurrentTimeAllPromise = null);
     }
 
     this.displayTimelineCurrentTime();
   },
 
   displayTimelineCurrentTime: function() {
-    let {isMoving, isPaused, time} = this.timelineData;
-
-    if (isMoving || isPaused) {
-      this.timelineCurrentTimeEl.textContent = formatStopwatchTime(time);
-    }
+    let {time} = this.timelineData;
+    this.timelineCurrentTimeEl.textContent = formatStopwatchTime(time);
   },
 
   /**
    * Make sure all known animations have their states up to date (which is
    * useful after the playState or currentTime has been changed and in case the
    * animations aren't auto-refreshing), and then refresh the UI.
    */
   refreshAnimationsStateAndUI: Task.async(function*() {
--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -352,26 +352,29 @@ AnimationsTimeline.prototype = {
            this.animations.every(({state}) => state.currentTime === 0);
   },
 
   hasInfiniteAnimations: function() {
     return this.animations.some(({state}) => !state.iterationCount);
   },
 
   startAnimatingScrubber: function(time) {
-    let x = TimeScale.startTimeToDistance(time);
-    this.scrubberEl.style.left = x + "%";
-
-    // Only stop the scrubber if it's out of bounds or all animations have been
-    // paused, but not if at least an animation is infinite.
     let isOutOfBounds = time < TimeScale.minStartTime ||
                         time > TimeScale.maxEndTime;
     let isAllPaused = !this.isAtLeastOneAnimationPlaying();
     let hasInfinite = this.hasInfiniteAnimations();
 
+    let x = TimeScale.startTimeToDistance(time);
+    if (x > 100 && !hasInfinite) {
+      x = 100;
+    }
+    this.scrubberEl.style.left = x + "%";
+
+    // Only stop the scrubber if it's out of bounds or all animations have been
+    // paused, but not if at least an animation is infinite.
     if (isAllPaused || (isOutOfBounds && !hasInfinite)) {
       this.stopAnimatingScrubber();
       this.emit("timeline-data-changed", {
         isPaused: !this.isAtLeastOneAnimationPlaying(),
         isMoving: false,
         isUserDrag: false,
         time: TimeScale.distanceToRelativeTime(x)
       });