зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1253493 - Part1: Show iterationStart to the tooltip. r=pbro
This commit is contained in:
Daisuke Akatsuka
Родитель
c123351274
Коммит
459706a9ee
|
|
@ -129,6 +129,15 @@ AnimationTimeBlock.prototype = {
|
|||
text += "\n";
|
||||
}
|
||||
|
||||
// Adding the iteration start.
|
||||
if (state.iterationStart !== 0) {
|
||||
let iterationStartTime = state.iterationStart * state.duration / 1000;
|
||||
text += L10N.getFormatStr("player.animationIterationStartLabel",
|
||||
state.iterationStart,
|
||||
L10N.numberWithDecimals(iterationStartTime, 2));
|
||||
text += "\n";
|
||||
}
|
||||
|
||||
// Adding the playback rate if it's different than 1.
|
||||
if (state.playbackRate !== 1) {
|
||||
text += L10N.getStr("player.animationRateLabel") + " ";
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ support-files =
|
|||
doc_keyframes.html
|
||||
doc_modify_playbackRate.html
|
||||
doc_negative_animation.html
|
||||
doc_script_animation.html
|
||||
doc_simple_animation.html
|
||||
doc_multiple_animation_types.html
|
||||
head.js
|
||||
|
|
@ -38,6 +39,7 @@ skip-if = os == "linux" && !debug # Bug 1227792
|
|||
[browser_animation_target_highlighter_lock.js]
|
||||
[browser_animation_timeline_currentTime.js]
|
||||
[browser_animation_timeline_header.js]
|
||||
[browser_animation_timeline_iterationStart.js]
|
||||
[browser_animation_timeline_pause_button.js]
|
||||
skip-if = os == "linux" && bits == 32 # Bug 1220974
|
||||
[browser_animation_timeline_rate_selector.js]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/* 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 iteration start.
|
||||
|
||||
add_task(function*() {
|
||||
yield addTab(URL_ROOT + "doc_script_animation.html");
|
||||
let {panel, controller} = yield openAnimationInspector();
|
||||
|
||||
info("Getting the animation element by script");
|
||||
let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
|
||||
let timeBlockNameEl = timelineEl.querySelector(".time-block .name");
|
||||
|
||||
let state = controller.animationPlayers[0].state;
|
||||
let title = timeBlockNameEl.getAttribute("title");
|
||||
if (state.iterationStart !== 0) {
|
||||
let iterationStartTime = state.iterationStart * state.duration / 1000;
|
||||
let iterationStartTimeString =
|
||||
iterationStartTime.toLocaleString(undefined,
|
||||
{ maximumFractionDigits: 2,
|
||||
minimumFractionDigits: 2 })
|
||||
.replace(".", "\\.");
|
||||
let iterationStartString =
|
||||
state.iterationStart.toString().replace(".", "\\.");
|
||||
let regex = new RegExp("Iteration start: " + iterationStartString +
|
||||
" \\(" + iterationStartTimeString + "s\\)");
|
||||
ok(title.match(regex), "The tooltip shows the iteration start");
|
||||
} else {
|
||||
ok(!title.match(/Iteration start:/),
|
||||
"The tooltip doesn't show the iteration start");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
requestLongerTimeout(2);
|
||||
|
||||
// Check that the timeline displays animations' duration, delay and iteration
|
||||
// counts in tooltips.
|
||||
// Check that the timeline displays animations' duration, delay iteration
|
||||
// counts and iteration start in tooltips.
|
||||
|
||||
add_task(function*() {
|
||||
yield addTab(URL_ROOT + "doc_simple_animation.html");
|
||||
|
|
@ -30,5 +30,7 @@ add_task(function*() {
|
|||
} else {
|
||||
ok(!title.match(/Repeats: /), "The tooltip doesn't show the iterations");
|
||||
}
|
||||
ok(!title.match(/Iteration start:/),
|
||||
"The tooltip doesn't show the iteration start");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
#target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var el = document.getElementById("target");
|
||||
el.animate(
|
||||
[{ opacity: 0 }, { opacity: 1 }],
|
||||
{ duration: 1000,
|
||||
iterationStart: 0.5,
|
||||
fill: "both" }
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -64,6 +64,14 @@ player.infiniteIterationCount=∞
|
|||
# a tooltip.
|
||||
player.infiniteIterationCountText=∞
|
||||
|
||||
# LOCALIZATION NOTE (player.animationIterationStartLabel):
|
||||
# This string is displayed in a tooltip that appears when hovering over
|
||||
# animations in the timeline. It is the label displayed before the animation
|
||||
# iterationStart value.
|
||||
# %1$S will be replaced by the original itaration start value
|
||||
# %2$S will be replaced by the actual time of itaration start
|
||||
player.animationIterationStartLabel=Iteration start: %1$S (%2$Ss)
|
||||
|
||||
# LOCALIZATION NOTE (player.timeLabel):
|
||||
# This string is displayed in each animation player widget, to indicate either
|
||||
# how long (in seconds) the animation lasts, or what is the animation's current
|
||||
|
|
|
|||
|
|
@ -192,6 +192,15 @@ var AnimationPlayerActor = ActorClass({
|
|||
return iterations === "Infinity" ? null : iterations;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the animation iterationStart from this player, in ratio.
|
||||
* That is offset of starting position of the animation.
|
||||
* @return {Number}
|
||||
*/
|
||||
getIterationStart: function() {
|
||||
return this.player.effect.getComputedTiming().iterationStart;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the current start of the Animation.
|
||||
* @return {Object}
|
||||
|
|
@ -221,6 +230,7 @@ var AnimationPlayerActor = ActorClass({
|
|||
duration: this.getDuration(),
|
||||
delay: this.getDelay(),
|
||||
iterationCount: this.getIterationCount(),
|
||||
iterationStart: this.getIterationStart(),
|
||||
// animation is hitting the fast path or not. Returns false whenever the
|
||||
// animation is paused as it is taken off the compositor then.
|
||||
isRunningOnCompositor: this.player.isRunningOnCompositor,
|
||||
|
|
@ -286,12 +296,13 @@ var AnimationPlayerActor = ActorClass({
|
|||
}
|
||||
|
||||
if (hasCurrentAnimation(changedAnimations)) {
|
||||
// Only consider the state has having changed if any of delay, duration
|
||||
// or iterationcount has changed (for now at least).
|
||||
// Only consider the state has having changed if any of delay, duration,
|
||||
// iterationcount or iterationStart has changed (for now at least).
|
||||
let newState = this.getState();
|
||||
let oldState = this.currentState;
|
||||
hasChanged = newState.delay !== oldState.delay ||
|
||||
newState.iterationCount !== oldState.iterationCount ||
|
||||
newState.iterationStart !== oldState.iterationStart ||
|
||||
newState.duration !== oldState.duration;
|
||||
break;
|
||||
}
|
||||
|
|
@ -432,6 +443,7 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
|
|||
duration: this._form.duration,
|
||||
delay: this._form.delay,
|
||||
iterationCount: this._form.iterationCount,
|
||||
iterationStart: this._form.iterationStart,
|
||||
isRunningOnCompositor: this._form.isRunningOnCompositor,
|
||||
documentCurrentTime: this._form.documentCurrentTime
|
||||
};
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче