Bug 1479756 - Clip the overlapped header tick label. r=daisuke

This patch will clip the overflowed tick label. In order to check the width,
this patch add the max-width into tick label element.

Furthermore, componentWillReceiveProps is deprecated from React 16.3.
So this patch will use componentDidUpdate instead of it.

Differential Revision: https://phabricator.services.mozilla.com/D2818

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/animation/components/AnimationListContainer.js

@@ -37,6 +37,7 @@ class AnimationListContainer extends PureComponent {
       setAnimationsCurrentTime: PropTypes.func.isRequired,
       setHighlightedNode: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
+      sidebarWidth: PropTypes.number.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       timeScale: PropTypes.object.isRequired,
     };
@@ -55,8 +56,17 @@ class AnimationListContainer extends PureComponent {
     this.updateState(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.updateState(nextProps);
+  componentDidUpdate(prevProps) {
+    const {
+      timeScale,
+      sidebarWidth
+    } = this.props;
+
+    if (timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
+        timeScale.zeroPositionTime !== prevProps.timeScale.zeroPositionTime ||
+        sidebarWidth !== prevProps.sidebarWidth) {
+      this.updateState(this.props);
+    }
   }
 
   updateState(props) {
@@ -79,25 +89,16 @@ class AnimationListContainer extends PureComponent {
     // Need to display first graduation since position will be shifted.
     if (needToShift) {
       const label = timeScale.formatTime(timeScale.distanceToRelativeTime(0));
-      ticks.push({ position: 0, label });
+      ticks.push({ position: 0, label, width: shiftWidth });
     }
 
     for (let i = 0; i <= tickCount; i++) {
       const position = ((i * intervalWidth) + shiftWidth) * 100 / width;
       const distance = timeScale.distanceToRelativeTime(position);
-      let label = isAllDurationInfinity && i === tickCount
-                  ? getStr("player.infiniteTimeLabel")
-                  : timeScale.formatTime(distance);
-      // As result of shifting the label, first shifted label might overlap
-      // to the most left label. So display empyt label in this case.
-      // And prevent to skip displaying zero position label.
-      if (i === 0 &&
-          needToShift &&
-          shiftWidth < intervalWidth &&
-          Math.abs(distance) >= 0.001) {
-        label = "";
-      }
-      ticks.push({ position, label });
+      const label = isAllDurationInfinity && i === tickCount
+                    ? getStr("player.infiniteTimeLabel")
+                    : timeScale.formatTime(distance);
+      ticks.push({ position, label, width: intervalWidth });
     }
 
     this.setState({ ticks });

devtools/client/inspector/animation/components/TickLabels.js

@@ -29,7 +29,10 @@ class TickLabels extends PureComponent {
         dom.div(
           {
             className: "tick-label",
-            style: { marginInlineStart: `${ tick.position }%` },
+            style: {
+              marginInlineStart: `${ tick.position }%`,
+              maxWidth: `${ tick.width }px`
+            },
           },
           tick.label
         )

devtools/client/themes/animation.css

@@ -646,6 +646,9 @@ select.playback-rate-selector.devtools-button:not(:empty):not(:disabled):not(.ch
   border-inline-start: var(--tick-line-style);
   height: 100%;
   position: absolute;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .animated-property-list-container .tick-label:last-child {