Bug 1468343 - Part 2: Change tick label to address infinity duration. r=flod,jdescottes, a=lizzard
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Jun 2018 16:05:11 +0900
changeset 480281 b7f02289be490ee7e96e14a73d743ee25f89b308
parent 480280 3720e7f2401cfe35144a259e3ec2786ecd573849
child 480282 6c3078d399f766733175d31abb214f55be8e3228
push id1757
push userffxbld-merge
push dateFri, 24 Aug 2018 17:02:43 +0000
treeherdermozilla-release@736023aebdb1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, jdescottes, lizzard
bugs1468343
milestone62.0
Bug 1468343 - Part 2: Change tick label to address infinity duration. r=flod,jdescottes, a=lizzard 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