Bug 1468343 - Part 2: Change tick label to address infinity duration. r?jdescottes,r?flod draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Jun 2018 16:05:11 +0900
changeset 810598 22aa40759a2b04fb877c3d96790c78adfe50c2ea
parent 810559 005165435abfa6cf0324a2e3230f8d010f7e439f
child 810599 2670f047d96dc0db032d49d00d10b4c46cb761ef
child 810623 c3f3389cacb36292af4b31e0149633351c5206a4
push id114048
push userbmo:dakatsuka@mozilla.com
push dateTue, 26 Jun 2018 07:58:30 +0000
reviewersjdescottes, flod
bugs1468343
milestone63.0a1
Bug 1468343 - Part 2: Change tick label to address infinity duration. r?jdescottes,r?flod MozReview-Commit-ID: LBnH5GnZ25z
devtools/client/inspector/animation/components/AnimationListContainer.js
devtools/client/locales/en-US/animationinspector.properties
--- 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