Bug 1468343 - Part 1: Make graph to address infinity duration. r=pbro

MozReview-Commit-ID: Cc5a55Qglpi

--HG--
extra : rebase_source : 188cbe344e3ae3a58b57fefced204952ccf5fead

devtools/client/inspector/animation/components/graph/TimingPath.js

@@ -44,6 +44,11 @@ class TimingPath extends PureComponent {
       }
     }
 
+    if (state.duration === Infinity) {
+      this.renderInfinityDuration(pathList, state, mainIterationStartTime, helper);
+      return pathList;
+    }
+
     // Append 1st section of iterations,
     // This section is only useful in cases where iterationStart has decimals.
     // e.g.
@@ -287,6 +292,32 @@ class TimingPath extends PureComponent {
     }
   }
 
+  /**
+   * Render infinity duration.
+   *
+   * @param {Array} pathList
+   *        Add rendered <path> elements to this array.
+   * @param {Object} state
+   *        State of animation.
+   * @param {Number} mainIterationStartTime
+   *        Starting time of main iteration.
+   * @param {SummaryGraphHelper} helper
+   *        Instance of SummaryGraphHelper.
+   */
+  renderInfinityDuration(pathList, state, mainIterationStartTime, helper) {
+    const startSegment = helper.getSegment(mainIterationStartTime);
+    const endSegment = { x: helper.totalDuration, y: startSegment.y };
+    const segments = [startSegment, endSegment];
+    pathList.push(
+      dom.path(
+        {
+          className: "animation-iteration-path infinity-duration",
+          d: helper.toPathString(segments),
+        }
+      )
+    );
+  }
+
   /**
    * Render 'endDelay' part in animation and add a <path> element to given pathList.
    *

devtools/client/inspector/animation/utils/timescale.js

@@ -40,10 +40,22 @@ class TimeScale {
 
       const toRate = v => v / playbackRate;
       const startTime = createdTime + toRate(Math.min(delay, 0));
-      const endTime = createdTime +
-                      toRate(delay +
-                             duration * (iterationCount || 1) +
-                             Math.max(endDelay, 0));
+      let endTime = 0;
+
+      if (duration === Infinity) {
+        // Set endTime so as to enable the scrubber with keeping the consinstency of UI
+        // even the duration was Infinity. In case of delay is longer than zero, handle
+        // the graph duration as double of the delay amount. In case of no delay, handle
+        // the duration as 1ms which is short enough so as to make the scrubber movable
+        // and the limited duration is prioritized.
+        endTime = createdTime + (delay > 0 ? delay * 2 : 1);
+      } else {
+        endTime = createdTime +
+                  toRate(delay +
+                         duration * (iterationCount || 1) +
+                         Math.max(endDelay, 0));
+      }
+
       minStartTime = Math.min(minStartTime, startTime);
       maxEndTime = Math.max(maxEndTime, endTime);
       animationsCurrentTime =

devtools/client/themes/animation.css

@@ -265,6 +265,11 @@ select.playback-rate-selector.devtools-button:not(:empty):not(:disabled):not(.ch
   opacity: 0.3;
 }
 
+.animation-computed-timing-path path.infinity-duration,
+.animation-effect-timing-path path.infinity-duration {
+  mask-image: linear-gradient(90deg, black, transparent);
+}
+
 .animation-negative-delay-path path,
 .animation-negative-end-delay-path path {
   fill: none;