Devtools Animations: Represent delay and end-delay on the animation timeline

Source/devtools/front_end/elements/AnimationTimeline.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
  */
 WebInspector.AnimationTimeline = function(stylesPane)
@@ skipping 259 matching lines @@
     /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @return {boolean}
      */
     _resizeWindow: function(animation)
     {
         var resized = false;
         if (!this._startTime)
             this._startTime = animation.startTime();
 
-        // This shows at most 2 iterations
-        var iterations = animation.source().iterations() || 1;
-        var duration = animation.source().duration() * Math.min(3, iterations);
-        var requiredDuration = animation.startTime() + duration + animation.source().delay() - this.startTime();
+        // This shows at most 3 iterations
+        var duration = animation.source().duration() * Math.min(3, animation.source().iterations());
+        var requiredDuration = animation.startTime() + animation.source().delay() + duration + animation.source().endDelay() - this.startTime();
         if (requiredDuration > this._duration * 0.8) {
             resized = true;
             this._duration = requiredDuration * 1.5;
             this._animateTime(animation.startTime() - this.startTime());
         }
         return resized;
     },
 
     /**
       * @param {number=} time
       */
     _animateTime: function(time)
     {
         var oldPlayer = this._scrubberPlayer;
 
         this._scrubberPlayer = this._timelineScrubber.animate([
             { transform: "translateX(0px)" },
-            { transform: "translateX(" +  (this._cachedTimelineWidth - this._scrubberRadius) + "px)" }
+            { transform: "translateX(" +  (this.width() - this._scrubberRadius) + "px)" }
         ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRatio(), fill: "forwards" });
         this._scrubberPlayer.playbackRate = this._animationsPlaybackRate;
 
         if (time !== undefined)
             this._scrubberPlayer.currentTime = time;
         else if (oldPlayer.playState === "finished")
             this._scrubberPlayer.finish();
         else
             this._scrubberPlayer.startTime = oldPlayer.startTime;
 
         if (oldPlayer)
             oldPlayer.cancel();
         this._timelineScrubber.classList.remove("animation-timeline-end");
         this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));
     },
 
     /**
      * @return {number}
      */
     pixelMsRatio: function()
     {
-        return this._cachedTimelineWidth / this.duration() || 0;
+        return this.width() / this.duration() || 0;
     },
 
     /**
      * @param {number} timestamp
      */
     _updateScrubber: function(timestamp)
     {
+        if (!this._scrubberPlayer)
+            return;
         this._timelineScrubberHead.textContent = WebInspector.UIString(Number.millisToString(this._scrubberPlayer.currentTime));
         if (this._scrubberPlayer.playState === "pending" || this._scrubberPlayer.playState === "running") {
             this._timelineScrubberHead.window().requestAnimationFrame(this._updateScrubber.bind(this));
         } else if (this._scrubberPlayer.playState === "finished") {
             this._timelineScrubberHead.textContent = WebInspector.UIString(". . .");
             this._timelineScrubber.classList.add("animation-timeline-end");
         }
     },
 
     /**
@@ skipping 46 matching lines @@
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
     /**
      * @param {?WebInspector.DOMNode} node
+     * @this {WebInspector.AnimationTimeline.NodeUI}
      */
     function nodeResolved(node)
     {
-        description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+        this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
     }
 
     this._rows = [];
     this.element = createElementWithClass("div", "animation-node-row");
-    var description = this.element.createChild("div", "animation-node-description");
-    animationNode.getNode(nodeResolved);
+    this._description = this.element.createChild("div", "animation-node-description");
+    animationNode.getNode(nodeResolved.bind(this));
     this._timelineElement = this.element.createChild("div", "animation-node-timeline");
 }
 
 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}} */
 WebInspector.AnimationTimeline.NodeRow;
 
 WebInspector.AnimationTimeline.NodeUI.prototype = {
     /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @return {!WebInspector.AnimationTimeline.NodeRow}
@@ skipping 60 matching lines @@
     if (this._animation.source().keyframesRule())
         this._keyframes =  this._animation.source().keyframesRule().keyframes();
 
     this._nameElement = parentElement.createChild("div", "animation-name");
     this._nameElement.textContent = this._animation.name();
 
     this._svg = parentElement.createSVGChild("svg", "animation-ui");
     this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationSVGHeight);
     this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.AnimationMargin + "px";
     this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspector.AnimationUI.MouseEvents.AnimationDrag, null));
+    this._activeIntervalGroup = this._svg.createSVGChild("g");
 
     /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints: !Object.<number, !Element>, beziers: !Object.<number, !Element>}>} */
     this._cachedElements = [];
 
     this._movementInMs = 0;
     this.redraw();
 }
 
 /**
  * @enum {string}
@@ skipping 16 matching lines @@
 
     /**
      * @param {?WebInspector.DOMNode} node
      */
     setNode: function(node)
     {
         this._node = node;
     },
 
     /**
+     * @param {!Element} parentElement
+     * @param {string} className
+     */
+    _createLine: function(parentElement, className)
+    {
+        var line = parentElement.createSVGChild("line", className);
+        line.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin);
+        line.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight);
+        line.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight);
+        line.style.stroke = this._color();
+        return line;
+    },
+
+    /**
      * @param {number} iteration
      * @param {!Element} parentElement
      */
     _drawAnimationLine: function(iteration, parentElement)
     {
         var cache = this._cachedElements[iteration];
         if (!cache.animationLine)
-            cache.animationLine = parentElement.createSVGChild("line", "animation-line");
-        cache.animationLine.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight);
-        cache.animationLine.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin);
-        cache.animationLine.setAttribute("x2", this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin);
-        cache.animationLine.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight);
-        cache.animationLine.style.stroke = this._color();
+            cache.animationLine = this._createLine(parentElement, "animation-line");
+        cache.animationLine.setAttribute("x2", (this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2));
     },
 
     /**
+     * @param {!Element} parentElement
+     */
+    _drawDelayLine: function(parentElement)
+    {
+        if (!this._delayLine) {
+            this._delayLine = this._createLine(parentElement, "animation-delay-line");
+            this._endDelayLine = this._createLine(parentElement, "animation-delay-line");
+        }
+        this._delayLine.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin);
+        this._delayLine.setAttribute("x2", (this._delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2));
+        var leftMargin = (this._delay() + this._duration() * this._animation.source().iterations()) * this._timeline.pixelMsRatio();
+        this._endDelayLine.style.transform = "translateX(" + Math.min(leftMargin, this._timeline.width()).toFixed(2) + "px)";
+        this._endDelayLine.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin);
+        this._endDelayLine.setAttribute("x2", (this._animation.source().endDelay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2));
+    },
+
+    /**
      * @param {number} iteration
      * @param {!Element} parentElement
      * @param {number} x
      * @param {number} keyframeIndex
      * @param {boolean} attachEvents
      */
     _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvents)
     {
         if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) {
-            this._cachedElements[iteration].keyframePoints[keyframeIndex].setAttribute("cx", x);
+            this._cachedElements[iteration].keyframePoints[keyframeIndex].setAttribute("cx", x.toFixed(2));
             return;
         }
 
         var circle = parentElement.createSVGChild("circle", keyframeIndex <= 0 ? "animation-endpoint" : "animation-keyframe-point");
-        circle.setAttribute("cx", x);
+        circle.setAttribute("cx", x.toFixed(2));
         circle.setAttribute("cy", WebInspector.AnimationUI.Options.AnimationHeight);
         circle.style.stroke = this._color();
         circle.setAttribute("r", WebInspector.AnimationUI.Options.AnimationMargin / 2);
 
         if (keyframeIndex <= 0)
             circle.style.fill = this._color();
 
         this._cachedElements[iteration].keyframePoints[keyframeIndex] = circle;
 
         if (!attachEvents)
@@ skipping 14 matching lines @@
      * @param {!Element} parentElement
      * @param {number} leftDistance
      * @param {number} width
      * @param {!WebInspector.Geometry.CubicBezier} bezier
      */
     _renderBezierKeyframe: function(iteration, keyframeIndex, parentElement, leftDistance, width, bezier)
     {
         var bezierCache = this._cachedElements[iteration].beziers;
         if (!bezierCache[keyframeIndex])
             bezierCache[keyframeIndex] = parentElement.createSVGChild("path", "animation-keyframe");
-        bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistance + "px)";
+        bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistance.toFixed(2) + "px)";
         bezierCache[keyframeIndex].style.fill = this._color();
         WebInspector.BezierUI.drawVelocityChart(bezier, bezierCache[keyframeIndex], width);
     },
 
     redraw: function()
     {
-        var iterationWidth = this._duration() * this._timeline.pixelMsRatio();
-        var svgWidth = this._animation.source().iterations() ? Math.min(this._timeline.width(), iterationWidth * this._animation.source().iterations()) : this._timeline.width();
-        svgWidth += 2 * WebInspector.AnimationUI.Options.AnimationMargin;
-        var leftMargin = (this._animation.startTime() - this._timeline.startTime() + this._delay()) * this._timeline.pixelMsRatio();
-        this._svg.setAttribute("width", svgWidth);
+        var durationWithDelay = this._delay() + this._duration() * this._animation.source().iterations() + this._animation.source().endDelay();
+        var svgWidth = Math.min(this._timeline.width(), durationWithDelay * this._timeline.pixelMsRatio());
+        var leftMargin = ((this._animation.startTime() - this._timeline.startTime()) * this._timeline.pixelMsRatio()).toFixed(2);
+
+        this._svg.setAttribute("width", svgWidth + 2 * WebInspector.AnimationUI.Options.AnimationMargin);
         this._svg.style.transform = "translateX(" + leftMargin  + "px)";
-        this._nameElement.style.transform = "translateX(" + leftMargin + "px)";
-        this._nameElement.style.width = svgWidth + "px";
+        this._activeIntervalGroup.style.transform = "translateX(" + (this._delay() * this._timeline.pixelMsRatio()).toFixed(2) + "px)";
+
+        this._nameElement.style.transform = "translateX(" + (leftMargin + this._delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin) + "px)";
+        this._nameElement.style.width = this._duration() * this._timeline.pixelMsRatio() + "px";
+        this._drawDelayLine(this._svg);
 
         if (this._animation.type() === "CSSTransition") {
             this._renderTransition();
             return;
         }
 
-        var numIterations = this._animation.source().iterations() ? this._animation.source().iterations() : Infinity;
-        this._renderIteration(this._svg, 0);
+        this._renderIteration(this._activeIntervalGroup, 0);
         if (!this._tailGroup)
-            this._tailGroup = this._svg.createSVGChild("g", "animation-tail-iterations");
-        for (var iteration = 1; iteration < numIterations && iterationWidth * (iteration - 1) < this._timeline.width(); iteration++)
+            this._tailGroup = this._activeIntervalGroup.createSVGChild("g", "animation-tail-iterations");
+        var iterationWidth = this._duration() * this._timeline.pixelMsRatio();
+        for (var iteration = 1; iteration < this._animation.source().iterations() && iterationWidth * (iteration - 1) < this._timeline.width(); iteration++)
             this._renderIteration(this._tailGroup, iteration);
     },
 
     _renderTransition: function()
     {
         if (!this._cachedElements[0])
             this._cachedElements[0] = { animationLine: null, keyframePoints: {}, beziers: {}, group: null };
-        this._drawAnimationLine(0, this._svg);
+        this._drawAnimationLine(0, this._activeIntervalGroup);
         var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.source().easing());
         // FIXME: add support for step functions
         if (bezier)
-            this._renderBezierKeyframe(0, 0, this._svg, WebInspector.AnimationUI.Options.AnimationMargin, this._duration() * this._timeline.pixelMsRatio(), bezier);
-        this._drawPoint(0, this._svg, WebInspector.AnimationUI.Options.AnimationMargin, 0, true);
-        this._drawPoint(0, this._svg, this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, true);
+            this._renderBezierKeyframe(0, 0, this._activeIntervalGroup, WebInspector.AnimationUI.Options.AnimationMargin, this._duration() * this._timeline.pixelMsRatio(), bezier);
+        this._drawPoint(0, this._activeIntervalGroup, WebInspector.AnimationUI.Options.AnimationMargin, 0, true);
+        this._drawPoint(0, this._activeIntervalGroup, this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, true);
     },
 
     /**
      * @param {!Element} parentElement
      * @param {number} iteration
      */
     _renderIteration: function(parentElement, iteration)
     {
         if (!this._cachedElements[iteration])
             this._cachedElements[iteration] = { animationLine: null, keyframePoints: {}, beziers: {}, group: parentElement.createSVGChild("g") };
         var group = this._cachedElements[iteration].group;
-        group.style.transform = "translateX(" + (iteration * this._duration() * this._timeline.pixelMsRatio()) + "px)";
+        group.style.transform = "translateX(" + (iteration * this._duration() * this._timeline.pixelMsRatio()).toFixed(2) + "px)";
         this._drawAnimationLine(iteration, group);
         console.assert(this._keyframes.length > 1);
         for (var i = 0; i < this._keyframes.length - 1; i++) {
             var leftDistance = this._offset(i) * this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin;
             var width = this._duration() * (this._offset(i + 1) - this._offset(i)) * this._timeline.pixelMsRatio();
             var bezier = WebInspector.Geometry.CubicBezier.parse(this._keyframes[i].easing());
             // FIXME: add support for step functions
             if (bezier)
                 this._renderBezierKeyframe(iteration, i, group, leftDistance, width, bezier);
             if (i || (!i && iteration === 0))
@@ skipping 200 matching lines @@
     "Light Blue": WebInspector.Color.parse("#03A9F4"),
     "Deep Orange": WebInspector.Color.parse("#FF5722"),
     "Blue": WebInspector.Color.parse("#5677FC"),
     "Lime": WebInspector.Color.parse("#CDDC39"),
     "Blue Grey": WebInspector.Color.parse("#607D8B"),
     "Pink": WebInspector.Color.parse("#E91E63"),
     "Green": WebInspector.Color.parse("#0F9D58"),
     "Brown": WebInspector.Color.parse("#795548"),
     "Cyan": WebInspector.Color.parse("#00BCD4")
 }