From aacd37d7d83a4f15d4385170f342795688794038 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Thu, 15 Jan 2015 10:40:55 +0100 Subject: [PATCH] Bug 1120852 - 2 - Don't start the animation timeline UI before the animation delay has passed; r=bgrins --- .../animationinspector/animation-panel.js | 45 ++++++++++------- .../animationinspector/test/browser.ini | 4 +- ...owser_animation_playerWidgets_meta_data.js | 49 +++++++++++++++++++ ...wser_animation_timeline_waits_for_delay.js | 24 +++++++++ .../test/doc_simple_animation.html | 25 +++++++--- .../devtools/animationinspector.properties | 5 ++ 6 files changed, 125 insertions(+), 27 deletions(-) create mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js create mode 100644 browser/devtools/animationinspector/test/browser_animation_timeline_waits_for_delay.js diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js index d6a5825b169..1fd762a7e6f 100644 --- a/browser/devtools/animationinspector/animation-panel.js +++ b/browser/devtools/animationinspector/animation-panel.js @@ -193,21 +193,26 @@ PlayerWidget.prototype = { }); let titleHTML = ""; - // Name + // Name. if (state.name) { - // Css animations have names + // Css animations have names. titleHTML += L10N.getStr("player.animationNameLabel"); titleHTML += "" + state.name + ""; } else { - // Css transitions don't + // Css transitions don't. titleHTML += L10N.getStr("player.transitionNameLabel"); } - // Duration and iteration count + // Duration, delay and iteration count. titleHTML += ""; titleHTML += L10N.getStr("player.animationDurationLabel"); titleHTML += "" + L10N.getFormatStr("player.timeLabel", this.getFormattedTime(state.duration)) + ""; + if (state.delay) { + titleHTML += L10N.getStr("player.animationDelayLabel"); + titleHTML += "" + L10N.getFormatStr("player.timeLabel", + this.getFormattedTime(state.delay)) + ""; + } titleHTML += L10N.getStr("player.animationIterationCountLabel"); let count = state.iterationCount || L10N.getStr("player.infiniteIterationCount"); titleHTML += "" + count + ""; @@ -215,7 +220,7 @@ PlayerWidget.prototype = { titleEl.innerHTML = titleHTML; - // Timeline widget + // Timeline widget. let timelineEl = createNode({ parent: this.el, attributes: { @@ -223,7 +228,7 @@ PlayerWidget.prototype = { } }); - // Playback control buttons container + // Playback control buttons container. let playbackControlsEl = createNode({ parent: timelineEl, attributes: { @@ -241,7 +246,7 @@ PlayerWidget.prototype = { } }); - // Sliders container + // Sliders container. let slidersContainerEl = createNode({ parent: timelineEl, attributes: { @@ -249,9 +254,9 @@ PlayerWidget.prototype = { } }); - let max = state.duration; // Infinite iterations + let max = state.duration; // Infinite iterations. if (state.iterationCount) { - // Finite iterations + // Finite iterations. max = state.iterationCount * state.duration; } @@ -267,6 +272,7 @@ PlayerWidget.prototype = { "min": "0", "max": max, "step": "10", + "value": "0", // The currentTime isn't settable yet, so disable the timeline slider "disabled": "true" } @@ -280,7 +286,7 @@ PlayerWidget.prototype = { } }); this.timeDisplayEl.textContent = L10N.getFormatStr("player.timeLabel", - this.getFormattedTime()); + this.getFormattedTime(0)); this.containerEl.appendChild(this.el); }, @@ -290,14 +296,11 @@ PlayerWidget.prototype = { * @param {Number} time Defaults to the player's currentTime. * @return {String} The formatted time, e.g. "10.55" */ - getFormattedTime: function(time=this.player.state.currentTime) { - let str = time/1000 + ""; - str = str.split("."); - if (str.length === 1) { - return str[0] + ".00"; - } else { - return str[0] + "." + str[1].substring(0, 2); - } + getFormattedTime: function(time) { + return (time/1000).toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }); }, /** @@ -390,6 +393,12 @@ PlayerWidget.prototype = { displayTime: function(time) { let state = this.player.state; + // If the animation is delayed, don't start displaying the time until the + // delay has passed. + if (state.delay) { + time = Math.max(0, time - state.delay); + } + this.timeDisplayEl.textContent = L10N.getFormatStr("player.timeLabel", this.getFormattedTime(time)); if (!state.iterationCount && time !== state.duration) { diff --git a/browser/devtools/animationinspector/test/browser.ini b/browser/devtools/animationinspector/test/browser.ini index 9a8cd21659a..6d528f7ef96 100644 --- a/browser/devtools/animationinspector/test/browser.ini +++ b/browser/devtools/animationinspector/test/browser.ini @@ -11,8 +11,10 @@ support-files = [browser_animation_play_pause_button.js] [browser_animation_playerFronts_are_refreshed.js] [browser_animation_playerWidgets_destroy.js] +[browser_animation_playerWidgets_meta_data.js] [browser_animation_refresh_when_active.js] [browser_animation_same_nb_of_playerWidgets_and_playerFronts.js] [browser_animation_shows_player_on_valid_node.js] [browser_animation_timeline_animates.js] -[browser_animation_ui_updates_when_animation_changes.js] +[browser_animation_timeline_waits_for_delay.js] +[browser_animation_ui_updates_when_animation_changes.js] \ No newline at end of file diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js new file mode 100644 index 00000000000..69d5a3ba0e8 --- /dev/null +++ b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js @@ -0,0 +1,49 @@ +/* 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"; + +// Test that player widgets show the right player meta-data (name, duration, +// iteration count, delay). + +add_task(function*() { + yield addTab(TEST_URL_ROOT + "doc_simple_animation.html"); + let {inspector, panel} = yield openAnimationInspector(); + + info("Select the simple animated node"); + yield selectNode(".animated", inspector); + + let titleEl = panel.playerWidgets[0].el.querySelector(".animation-title"); + ok(titleEl, + "The player widget has a title element, where meta-data should be displayed"); + + let nameEl = titleEl.querySelector("strong"); + ok(nameEl, "The first tag was retrieved, it should contain the name"); + is(nameEl.textContent, "simple-animation", "The animation name is correct"); + + let metaDataEl = titleEl.querySelector(".meta-data"); + ok(metaDataEl, "The meta-data element exists"); + + let metaDataEls = metaDataEl.querySelectorAll("strong"); + is(metaDataEls.length, 2, "2 meta-data elements were found"); + is(metaDataEls[0].textContent, "2.00s", + "The first meta-data is the duration, and is correct"); + + info("Select the node with the delayed animation"); + yield selectNode(".delayed", inspector); + + titleEl = panel.playerWidgets[0].el.querySelector(".animation-title"); + nameEl = titleEl.querySelector("strong"); + is(nameEl.textContent, "simple-animation", "The animation name is correct"); + + metaDataEls = titleEl.querySelectorAll(".meta-data strong"); + is(metaDataEls.length, 3, + "3 meta-data elements were found for the delayed animation"); + is(metaDataEls[0].textContent, "3.00s", + "The first meta-data is the duration, and is correct"); + is(metaDataEls[1].textContent, "60.00s", + "The second meta-data is the delay, and is correct"); + is(metaDataEls[2].textContent, "10", + "The third meta-data is the iteration count, and is correct"); +}); diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_waits_for_delay.js b/browser/devtools/animationinspector/test/browser_animation_timeline_waits_for_delay.js new file mode 100644 index 00000000000..65d688e98ff --- /dev/null +++ b/browser/devtools/animationinspector/test/browser_animation_timeline_waits_for_delay.js @@ -0,0 +1,24 @@ +/* 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"; + +// Test that the currentTime timeline doesn't move if the animation is currently +// waiting for an animation-delay. + +add_task(function*() { + yield addTab(TEST_URL_ROOT + "doc_simple_animation.html"); + let {inspector, panel} = yield openAnimationInspector(); + + info("Select the delayed animation node"); + yield selectNode(".delayed", inspector); + + let widget = panel.playerWidgets[0]; + + let timeline = widget.currentTimeEl; + is(timeline.value, 0, "The timeline is at 0 since the animation hasn't started"); + + let timeLabel = widget.timeDisplayEl; + is(timeLabel.textContent, "0.00s", "The current time is 0"); +}); diff --git a/browser/devtools/animationinspector/test/doc_simple_animation.html b/browser/devtools/animationinspector/test/doc_simple_animation.html index 3582cef3432..945f7bd7847 100644 --- a/browser/devtools/animationinspector/test/doc_simple_animation.html +++ b/browser/devtools/animationinspector/test/doc_simple_animation.html @@ -4,8 +4,8 @@