зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1199589 - Display the current timeline time in the toolbar; r=bgrins
--HG-- extra : commitid : EUwwgmqS8bd extra : rebase_source : eeff4cbcf4409f7bb35801782fc3345738220473
This commit is contained in:
Родитель
319eee8553
Коммит
ddce066416
|
@ -22,6 +22,7 @@
|
||||||
<div id="timeline-toolbar" class="theme-toolbar">
|
<div id="timeline-toolbar" class="theme-toolbar">
|
||||||
<button id="rewind-timeline" standalone="true" class="devtools-button"></button>
|
<button id="rewind-timeline" standalone="true" class="devtools-button"></button>
|
||||||
<button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></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>
|
||||||
<div id="players"></div>
|
<div id="players"></div>
|
||||||
<div id="error-message">
|
<div id="error-message">
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const {AnimationsTimeline} = require("devtools/client/animationinspector/components");
|
const {AnimationsTimeline} = require("devtools/client/animationinspector/components");
|
||||||
|
const {formatStopwatchTime} = require("devtools/client/animationinspector/utils");
|
||||||
|
|
||||||
var $ = (selector, target = document) => target.querySelector(selector);
|
var $ = (selector, target = document) => target.querySelector(selector);
|
||||||
|
|
||||||
|
@ -37,6 +38,7 @@ var AnimationsPanel = {
|
||||||
this.toggleAllButtonEl = $("#toggle-all");
|
this.toggleAllButtonEl = $("#toggle-all");
|
||||||
this.playTimelineButtonEl = $("#pause-resume-timeline");
|
this.playTimelineButtonEl = $("#pause-resume-timeline");
|
||||||
this.rewindTimelineButtonEl = $("#rewind-timeline");
|
this.rewindTimelineButtonEl = $("#rewind-timeline");
|
||||||
|
this.timelineCurrentTimeEl = $("#timeline-current-time");
|
||||||
|
|
||||||
// If the server doesn't support toggling all animations at once, hide the
|
// If the server doesn't support toggling all animations at once, hide the
|
||||||
// whole global toolbar.
|
// whole global toolbar.
|
||||||
|
@ -84,6 +86,7 @@ var AnimationsPanel = {
|
||||||
this.playersEl = this.errorMessageEl = null;
|
this.playersEl = this.errorMessageEl = null;
|
||||||
this.toggleAllButtonEl = this.pickerButtonEl = null;
|
this.toggleAllButtonEl = this.pickerButtonEl = null;
|
||||||
this.playTimelineButtonEl = this.rewindTimelineButtonEl = null;
|
this.playTimelineButtonEl = this.rewindTimelineButtonEl = null;
|
||||||
|
this.timelineCurrentTimeEl = null;
|
||||||
|
|
||||||
this.destroyed.resolve();
|
this.destroyed.resolve();
|
||||||
}),
|
}),
|
||||||
|
@ -190,6 +193,16 @@ var AnimationsPanel = {
|
||||||
.catch(error => console.error(error))
|
.catch(error => console.error(error))
|
||||||
.then(() => this.setCurrentTimeAllPromise = null);
|
.then(() => this.setCurrentTimeAllPromise = null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.displayTimelineCurrentTime();
|
||||||
|
},
|
||||||
|
|
||||||
|
displayTimelineCurrentTime: function() {
|
||||||
|
let {isMoving, isPaused, time} = this.timelineData;
|
||||||
|
|
||||||
|
if (isMoving || isPaused) {
|
||||||
|
this.timelineCurrentTimeEl.textContent = formatStopwatchTime(time);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -674,7 +674,7 @@ AnimationsTimeline.prototype = {
|
||||||
!this.isAtLeastOneAnimationPlaying()) {
|
!this.isAtLeastOneAnimationPlaying()) {
|
||||||
this.stopAnimatingScrubber();
|
this.stopAnimatingScrubber();
|
||||||
this.emit("timeline-data-changed", {
|
this.emit("timeline-data-changed", {
|
||||||
isPaused: false,
|
isPaused: !this.isAtLeastOneAnimationPlaying(),
|
||||||
isMoving: false,
|
isMoving: false,
|
||||||
time: TimeScale.distanceToRelativeTime(x, this.timeHeaderEl.offsetWidth)
|
time: TimeScale.distanceToRelativeTime(x, this.timeHeaderEl.offsetWidth)
|
||||||
});
|
});
|
||||||
|
|
|
@ -24,6 +24,7 @@ support-files =
|
||||||
[browser_animation_shows_player_on_valid_node.js]
|
[browser_animation_shows_player_on_valid_node.js]
|
||||||
[browser_animation_target_highlight_select.js]
|
[browser_animation_target_highlight_select.js]
|
||||||
[browser_animation_target_highlighter_lock.js]
|
[browser_animation_target_highlighter_lock.js]
|
||||||
|
[browser_animation_timeline_currentTime.js]
|
||||||
[browser_animation_timeline_header.js]
|
[browser_animation_timeline_header.js]
|
||||||
[browser_animation_timeline_pause_button.js]
|
[browser_animation_timeline_pause_button.js]
|
||||||
[browser_animation_timeline_rewind_button.js]
|
[browser_animation_timeline_rewind_button.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");
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,4 +6,5 @@ firefox-appdir = browser
|
||||||
skip-if = toolkit == 'android' || toolkit == 'gonk'
|
skip-if = toolkit == 'android' || toolkit == 'gonk'
|
||||||
|
|
||||||
[test_findOptimalTimeInterval.js]
|
[test_findOptimalTimeInterval.js]
|
||||||
|
[test_formatStopwatchTime.js]
|
||||||
[test_timeScale.js]
|
[test_timeScale.js]
|
||||||
|
|
|
@ -177,3 +177,34 @@ var TargetNodeHighlighter = {
|
||||||
|
|
||||||
EventEmitter.decorate(TargetNodeHighlighter);
|
EventEmitter.decorate(TargetNodeHighlighter);
|
||||||
exports.TargetNodeHighlighter = 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;
|
||||||
|
|
|
@ -62,7 +62,8 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
#global-toolbar .label {
|
#global-toolbar .label,
|
||||||
|
#timeline-toolbar .label {
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче