Bug 1468343 - Part 2: Change tick label to address infinity duration. r?jdescottes,r?flod
MozReview-Commit-ID: LBnH5GnZ25z
--- a/devtools/client/inspector/animation/components/AnimationListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.js
@@ -11,16 +11,17 @@ const dom = require("devtools/client/sha
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const AnimationList = createFactory(require("./AnimationList"));
const CurrentTimeScrubber = createFactory(require("./CurrentTimeScrubber"));
const ProgressInspectionPanel = createFactory(require("./ProgressInspectionPanel"));
const { findOptimalTimeInterval } = require("../utils/utils");
+const { getStr } = require("../utils/l10n");
// The minimum spacing between 2 time graduation headers in the timeline (px).
const TIME_GRADUATION_MIN_SPACING = 40;
class AnimationListContainer extends PureComponent {
static get propTypes() {
return {
addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
@@ -54,30 +55,34 @@ class AnimationListContainer extends Pur
this.updateState(this.props);
}
componentWillReceiveProps(nextProps) {
this.updateState(nextProps);
}
updateState(props) {
- const { timeScale } = props;
+ const { animations, timeScale } = props;
const tickLinesEl = ReactDOM.findDOMNode(this).querySelector(".tick-lines");
const width = tickLinesEl.offsetWidth;
const animationDuration = timeScale.getDuration();
const minTimeInterval = TIME_GRADUATION_MIN_SPACING * animationDuration / width;
const intervalLength = findOptimalTimeInterval(minTimeInterval);
const intervalWidth = intervalLength * width / animationDuration;
- const tickCount = width / intervalWidth;
+ const tickCount = parseInt(width / intervalWidth, 10);
+ const isAllDurationInfinity =
+ animations.every(animation => animation.state.duration === Infinity);
const ticks = [];
for (let i = 0; i <= tickCount; i++) {
const position = i * intervalWidth * 100 / width;
- const label = timeScale.formatTime(timeScale.distanceToRelativeTime(position));
+ const label = isAllDurationInfinity && i === tickCount
+ ? getStr("player.infiniteTimeLabel")
+ : timeScale.formatTime(timeScale.distanceToRelativeTime(position));
ticks.push({ position, label });
}
this.setState({ ticks });
}
render() {
const {
--- a/devtools/client/locales/en-US/animationinspector.properties
+++ b/devtools/client/locales/en-US/animationinspector.properties
@@ -101,16 +101,21 @@ player.animationFillLabel=Fill:
player.animationDirectionLabel=Direction:
# 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
# time (in seconds too);
player.timeLabel=%Ss
+# LOCALIZATION NOTE (player.infiniteDurationText):
+# This string is displayed in animation player widget, in case the duration of the
+# animation is infinite.
+player.infiniteTimeLabel=∞
+
# LOCALIZATION NOTE (player.playbackRateLabel):
# This string is displayed in each animation player widget, as the label of
# drop-down list items that can be used to change the rate at which the
# animation runs (1× being the default, 2× being twice as fast).
player.playbackRateLabel=%S×
# LOCALIZATION NOTE (player.runningOnCompositorTooltip):
# This string is displayed as a tooltip for the icon that indicates that the