Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 01:05:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1468343 - Part 2: Change tick label to address infinity duration. r=flod,jdescottes

Browse Source 
MozReview-Commit-ID: LBnH5GnZ25z

--HG--
extra : rebase_source : d93cf3bd6f7036d4b9dda792a600e4e927422592
This commit is contained in:
Daisuke Akatsuka 2018-06-26 16:05:11 +09:00
parent cf0be17a9d
commit 8d088259fc
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
devtools/client/inspector/animation/components/AnimationListContainer.js
View File

@ -16,6 +16,7 @@ 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;
@ -59,20 +60,24 @@ class AnimationListContainer extends PureComponent {
}
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 });
}

5
devtools/client/locales/en-US/animationinspector.properties
View File

@ -106,6 +106,11 @@ player.animationDirectionLabel=Direction:
# 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