Bug 1199589 - Display the current timeline time in the toolbar; r=bgrins

--HG--
extra : commitid : EUwwgmqS8bd
extra : rebase_source : eeff4cbcf4409f7bb35801782fc3345738220473

devtools/client/animationinspector/animation-inspector.xhtml

@@ -22,6 +22,7 @@
     <div id="timeline-toolbar" class="theme-toolbar">
       <button id="rewind-timeline" standalone="true" class="devtools-button"></button>
       <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
+      <span id="timeline-current-time" class="label"></span>
     </div>
     <div id="players"></div>
     <div id="error-message">

devtools/client/animationinspector/animation-panel.js

@@ -9,6 +9,7 @@
 "use strict";
 
 const {AnimationsTimeline} = require("devtools/client/animationinspector/components");
+const {formatStopwatchTime} = require("devtools/client/animationinspector/utils");
 
 var $ = (selector, target = document) => target.querySelector(selector);
 
@@ -37,6 +38,7 @@ var AnimationsPanel = {
     this.toggleAllButtonEl = $("#toggle-all");
     this.playTimelineButtonEl = $("#pause-resume-timeline");
     this.rewindTimelineButtonEl = $("#rewind-timeline");
+    this.timelineCurrentTimeEl = $("#timeline-current-time");
 
     // If the server doesn't support toggling all animations at once, hide the
     // whole global toolbar.
@@ -84,6 +86,7 @@ var AnimationsPanel = {
     this.playersEl = this.errorMessageEl = null;
     this.toggleAllButtonEl = this.pickerButtonEl = null;
     this.playTimelineButtonEl = this.rewindTimelineButtonEl = null;
+    this.timelineCurrentTimeEl = null;
 
     this.destroyed.resolve();
   }),
@@ -190,6 +193,16 @@ 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);
+    }
   },
 
   /**

devtools/client/animationinspector/components.js

@@ -674,7 +674,7 @@ AnimationsTimeline.prototype = {
         !this.isAtLeastOneAnimationPlaying()) {
       this.stopAnimatingScrubber();
       this.emit("timeline-data-changed", {
-        isPaused: false,
+        isPaused: !this.isAtLeastOneAnimationPlaying(),
         isMoving: false,
         time: TimeScale.distanceToRelativeTime(x, this.timeHeaderEl.offsetWidth)
       });

devtools/client/animationinspector/test/browser.ini

@@ -24,6 +24,7 @@ support-files =
 [browser_animation_shows_player_on_valid_node.js]
 [browser_animation_target_highlight_select.js]
 [browser_animation_target_highlighter_lock.js]
+[browser_animation_timeline_currentTime.js]
 [browser_animation_timeline_header.js]
 [browser_animation_timeline_pause_button.js]
 [browser_animation_timeline_rewind_button.js]

devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js

@@ -0,0 +1,46 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the timeline toolbar displays the current time, and that it
+// changes when animations are playing, gets back to 0 when animations are
+// rewound, and stops when animations are paused.
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+
+  let {panel} = yield openAnimationInspector();
+  let label = panel.timelineCurrentTimeEl;
+  ok(label, "The current time label exists");
+
+  // On page load animations are playing so the time shoud change, although we
+  // don't want to test the exact value of the time displayed, just that it
+  // actually changes.
+  info("Make sure the time displayed actually changes");
+  yield isCurrentTimeLabelChanging(panel, true);
+
+  info("Pause the animations and check that the time stops changing");
+  yield clickTimelinePlayPauseButton(panel);
+  yield isCurrentTimeLabelChanging(panel, false);
+
+  info("Rewind the animations and check that the time stops changing");
+  yield clickTimelineRewindButton(panel);
+  yield isCurrentTimeLabelChanging(panel, false);
+  is(label.textContent, "00:00.000");
+});
+
+function* isCurrentTimeLabelChanging(panel, isChanging) {
+  let label = panel.timelineCurrentTimeEl;
+
+  let time1 = label.textContent;
+  yield new Promise(r => setTimeout(r, 200));
+  let time2 = label.textContent;
+
+  if (isChanging) {
+    ok(time1 !== time2, "The text displayed in the label changes with time");
+  } else {
+    is(time1, time2, "The text displayed in the label doesn't change");
+  }
+}

devtools/client/animationinspector/test/unit/test_formatStopwatchTime.js

@@ -0,0 +1,63 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+var Cu = Components.utils;
+const {require} = Cu.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
+const {formatStopwatchTime} = require("devtools/client/animationinspector/utils");
+
+
+const TEST_DATA = [{
+  desc: "Formatting 0",
+  time: 0,
+  expected: "00:00.000"
+}, {
+  desc: "Formatting null",
+  time: null,
+  expected: "00:00.000"
+}, {
+  desc: "Formatting undefined",
+  time: undefined,
+  expected: "00:00.000"
+}, {
+  desc: "Formatting a small number of ms",
+  time: 13,
+  expected: "00:00.013"
+}, {
+  desc: "Formatting a slightly larger number of ms",
+  time: 500,
+  expected: "00:00.500"
+}, {
+  desc: "Formatting 1 second",
+  time: 1000,
+  expected: "00:01.000"
+}, {
+  desc: "Formatting a number of seconds",
+  time: 1532,
+  expected: "00:01.532"
+}, {
+  desc: "Formatting a big number of seconds",
+  time: 58450,
+  expected: "00:58.450"
+}, {
+  desc: "Formatting 1 minute",
+  time: 60000,
+  expected: "01:00.000"
+}, {
+  desc: "Formatting a number of minutes",
+  time: 263567,
+  expected: "04:23.567"
+}, {
+  desc: "Formatting a large number of minutes",
+  time: 1000 * 60 * 60 * 3,
+  expected: "180:00.000"
+}];
+
+function run_test() {
+  for (let {desc, time, expected} of TEST_DATA) {
+    equal(formatStopwatchTime(time), expected, desc);
+  }
+}

devtools/client/animationinspector/test/unit/xpcshell.ini

@@ -6,4 +6,5 @@ firefox-appdir = browser
 skip-if = toolkit == 'android' || toolkit == 'gonk'
 
 [test_findOptimalTimeInterval.js]
+[test_formatStopwatchTime.js]
 [test_timeScale.js]

devtools/client/animationinspector/utils.js

@@ -177,3 +177,34 @@ var TargetNodeHighlighter = {
 
 EventEmitter.decorate(TargetNodeHighlighter);
 exports.TargetNodeHighlighter = TargetNodeHighlighter;
+
+/**
+ * Format a timestamp (in ms) as a mm:ss.mmm string.
+ * @param {Number} time
+ * @return {String}
+ */
+function formatStopwatchTime(time) {
+  // Format falsy values as 0
+  if (!time) {
+    return "00:00.000";
+  }
+
+  let milliseconds = parseInt(time % 1000, 10);
+  let seconds = parseInt((time / 1000) % 60, 10);
+  let minutes = parseInt((time / (1000 * 60)), 10);
+
+  let pad = (nb, max) => {
+    if (nb < max) {
+      return new Array((max+"").length - (nb+"").length + 1).join("0") + nb;
+    }
+    return nb;
+  }
+
+  minutes = pad(minutes, 10);
+  seconds = pad(seconds, 10);
+  milliseconds = pad(milliseconds, 100);
+
+  return `${minutes}:${seconds}.${milliseconds}`;
+}
+
+exports.formatStopwatchTime = formatStopwatchTime;

devtools/client/themes/animationinspector.css

@@ -62,7 +62,8 @@ body {
   display: flex;
 }
 
-#global-toolbar .label {
+#global-toolbar .label,
+#timeline-toolbar .label {
   padding: 1px 4px;
 }