Devtools Animations: Update timing information of related animations

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}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.AnimationTimeline = function()
@@ skipping 268 matching lines @@
     {
         this._addAnimation(/** @type {!WebInspector.AnimationModel.AnimationPlayer} */ (event.data.player), event.data.resetTimeline)
     },
 
     /**
      * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @param {boolean} resetTimeline
      */
     _addAnimation: function(animation, resetTimeline)
     {
-        /**
-         * @param {?WebInspector.DOMNode} node
-         * @this {WebInspector.AnimationTimeline}
-         */
-        function nodeResolved(node)
-        {
-            uiAnimation.setNode(node);
-            node[this._symbol] = nodeUI;
-        }
-
         if (resetTimeline)
             this._reset();
 
         // Ignore Web Animations custom effects & groups
         if (animation.type() === "WebAnimation" && animation.source().keyframesRule().keyframes().length === 0)
             return;
 
         if (this._resizeWindow(animation))
             this.scheduleRedraw();
         else
             this._resetTimerAnimation();
 
         var nodeUI = this._nodesMap.get(animation.source().backendNodeId());
         if (!nodeUI) {
-            nodeUI = new WebInspector.AnimationTimeline.NodeUI(animation.source());
+            nodeUI = new WebInspector.AnimationTimeline.NodeUI(this, animation.source());
             this._animationsContainer.appendChild(nodeUI.element);
             this._nodesMap.set(animation.source().backendNodeId(), nodeUI);
         }
-        var nodeRow = nodeUI.findRow(animation);
-        var uiAnimation = new WebInspector.AnimationUI(animation, this, nodeRow.element);
-        animation.source().deferredNode().resolve(nodeResolved.bind(this));
-        nodeRow.animations.push(uiAnimation);
+        nodeUI.addAnimation(animation);
         this._animationsMap.set(animation.id(), animation);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _animationCanceled: function(event)
     {
         this._cancelAnimation(/** @type {string} */ (event.data.playerId));
     },
@@ skipping 248 matching lines @@
     bezierEditor: function()
     {
         return this._timelineBezierEditor;
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
+ * @param {!WebInspector.AnimationTimeline} timeline
  * @param {!WebInspector.AnimationModel.AnimationNode} animationNode
  */
-WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
+WebInspector.AnimationTimeline.NodeUI = function(timeline, animationNode) {
     /**
      * @param {?WebInspector.DOMNode} node
      * @this {WebInspector.AnimationTimeline.NodeUI}
      */
     function nodeResolved(node)
     {
+        this._node = node;
+        this._node[this._timeline._symbol] = this;
         this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+        for (var nodeRow of this._rows) {
+            for (var ui of nodeRow.animations)
+                ui.setNode(this._node);
+        }
     }
 
+    this._timeline = timeline;
     this._rows = [];
     this.element = createElementWithClass("div", "animation-node-row");
     this._description = this.element.createChild("div", "animation-node-description");
     animationNode.deferredNode().resolve(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
+     */
+    addAnimation: function(animation)
+    {
+        var nodeRow = this._findRow(animation);
+        var uiAnimation = new WebInspector.AnimationUI(animation, this._timeline, nodeRow.element);
+        uiAnimation.addEventListener(WebInspector.AnimationUI.Events.TimingChanged, this._timingChanged, this);
+        uiAnimation.addEventListener(WebInspector.AnimationUI.Events.EasingChanged, this._easingChanged, this);
+        nodeRow.animations.push(uiAnimation);
+        if (this._node)
+            uiAnimation.setNode(this._node);
+
+    },
+
+    /**
+     * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
      * @return {!WebInspector.AnimationTimeline.NodeRow}
      */
-    findRow: function(animation)
+    _findRow: function(animation)
     {
         // Check if it can fit into an existing row
         var existingRow = this._collapsibleIntoRow(animation);
         if (existingRow)
             return existingRow;
 
         // Create new row
         var container = this._timelineElement.createChild("div", "animation-timeline-row");
         var nodeRow = {element: container, animations: []};
         this._rows.push(nodeRow);
@@ skipping 22 matching lines @@
                 overlap |= animation.overlaps(ui.animation());
             if (!overlap)
                 return nodeRow;
         }
         return null;
     },
 
     nodeRemoved: function()
     {
         this.element.classList.add("animation-node-removed");
+    },
+
+    /**
+     * @param {string} id
+     * @param {string} animationType
+     * @param {function(!WebInspector.AnimationUI)} processor
+     */
+    _applyToFilteredAnimations: function(id, animationType, processor)
+    {
+        for (var nodeRow of this._rows) {
+            for (var ui of nodeRow.animations) {
+                if (id === ui.animation().id() || ui.animation().type() !== animationType || ui.canceled())
+                    continue;
+                processor(ui);
+                ui.redraw();
+            }
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _timingChanged: function(event)
+    {
+        /**
+         * @param {number} delay
+         * @param {number} duration
+         * @param {!WebInspector.AnimationUI} ui
+         */
+        function updateTiming(delay, duration, ui)
+        {
+            ui.innerSetDelayDuration(delay, duration);
+        }
+
+        var animationType = /** @type {string} */(event.data.animationType);
+        if (animationType === "WebAnimation")
+            return;
+        var delay = /** @type {number} */(event.data.delay);
+        var duration = /** @type {number} */(event.data.duration);
+        this._applyToFilteredAnimations(/** @type {string} */(event.data.animationId), animationType, updateTiming.bind(null, delay, duration));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _easingChanged: function(event)
+    {
+        /**
+         * @param {string} easing
+         * @param {!WebInspector.AnimationUI} ui
+         */
+        function updateEasing(easing, ui)
+        {
+            ui.innerSetEasing(easing);
+        }
+
+        var animationType = /** @type {string} */(event.data.animationType);
+        if (animationType === "WebAnimation")
+            return;
+        this._applyToFilteredAnimations(/** @type {string} */(event.data.animationId), animationType, updateEasing.bind(null, /** @type {string} */(event.data.easing)));
     }
 }
 
 /**
  * @constructor
  * @param {number} steps
  * @param {string} stepAtPosition
  */
 WebInspector.AnimationTimeline.StepTimingFunction = function(steps, stepAtPosition)
 {
@@ skipping 10 matching lines @@
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(1, match[1]);
     match = text.match(/^steps\((\d+), (start|middle|end)\)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), match[2]);
     return null;
 }
 
 /**
  * @constructor
+ * @extends {WebInspector.Object}
  * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
  * @param {!WebInspector.AnimationTimeline} timeline
  * @param {!Element} parentElement
  */
 WebInspector.AnimationUI = function(animation, timeline, parentElement) {
     this._animation = animation;
     this._timeline = timeline;
     this._parentElement = parentElement;
 
     if (this._animation.source().keyframesRule())
@@ skipping 25 matching lines @@
 /**
  * @enum {string}
  */
 WebInspector.AnimationUI.MouseEvents = {
     AnimationDrag: "AnimationDrag",
     KeyframeMove: "KeyframeMove",
     StartEndpointMove: "StartEndpointMove",
     FinishEndpointMove: "FinishEndpointMove"
 }
 
+/**
+ * @enum {string}
+ */
+WebInspector.AnimationUI.Events = {
+    TimingChanged: "TimingChanged",
+    EasingChanged: "EasingChanged"
+}
+
 WebInspector.AnimationUI.prototype = {
     /**
      * @return {!WebInspector.AnimationModel.AnimationPlayer}
      */
     animation: function()
     {
         return this._animation;
     },
 
     /**
@@ skipping 122 matching lines @@
         } else {
             var stepFunction = WebInspector.AnimationTimeline.StepTimingFunction.parse(easing);
             group.removeChildren();
             const offsetMap = {"start": 0, "middle": 0.5, "end": 1};
             const offsetWeight = offsetMap[stepFunction.stepAtPosition];
             for (var i = 0; i < stepFunction.steps; i++)
                 createStepLine(group, (i + offsetWeight) * width / stepFunction.steps, this._color());
         }
     },
 
+    /**
+     * @return {boolean}
+     */
+    canceled: function()
+    {
+        return this._animation.playState() === "idle";
+    },
+
     redraw: function()
     {
         var durationWithDelay = this._delay() + this._duration() * this._animation.source().iterations() + this._animation.source().endDelay();
         var leftMargin = ((this._animation.startTime() - this._timeline.startTime()) * this._timeline.pixelMsRatio());
         var maxWidth = this._timeline.width() - WebInspector.AnimationUI.Options.AnimationMargin - leftMargin;
         var svgWidth = Math.min(maxWidth, durationWithDelay * this._timeline.pixelMsRatio());
 
-        this._svg.classList.toggle("animation-ui-canceled", this._animation.playState() === "idle");
+        this._svg.classList.toggle("animation-ui-canceled", this.canceled());
         this._svg.setAttribute("width", (svgWidth + 2 * WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2));
         this._svg.style.transform = "translateX(" + leftMargin.toFixed(2)  + "px)";
         this._activeIntervalGroup.style.transform = "translateX(" + (this._delay() * this._timeline.pixelMsRatio()).toFixed(2) + "px)";
 
         var leftPosition = (leftMargin + this._delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2);
         this._nameElement.style.transform = "translateX(" + leftPosition + "px)";
         this._bezierIconElement.style.marginLeft = leftPosition + "px";
         this._nameElement.style.width = (this._duration() * this._timeline.pixelMsRatio().toFixed(2)) + "px";
         this._drawDelayLine(this._svg);
 
@@ skipping 120 matching lines @@
     },
 
     /**
      * @param {!Event} event
      */
     _mouseUp: function(event)
     {
         this._movementInMs = (event.clientX - this._downMouseX) / this._timeline.pixelMsRatio();
 
         // Commit changes
-        if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove) {
+        if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove)
             this._keyframes[this._keyframeMoved].setOffset(this._offset(this._keyframeMoved));
-        } else {
-            var delay = this._delay();
-            var duration = this._duration();
-            this._setDelay(delay);
-            this._setDuration(duration);
-            if (this._animation.type() !== "CSSAnimation") {
-                var target = WebInspector.targetManager.mainTarget();
-                if (target)
-                    target.animationAgent().setTiming(this._animation.id(), duration, delay);
-            }
-        }
+        else
+            this._setDelayDuration(this._delay(), this._duration());
 
         this._movementInMs = 0;
         this.redraw();
 
         this._parentElement.ownerDocument.removeEventListener("mousemove", this._mouseMoveHandler);
         this._parentElement.ownerDocument.removeEventListener("mouseup", this._mouseUpHandler);
         delete this._mouseMoveHandler;
         delete this._mouseUpHandler;
         delete this._mouseEventType;
         delete this._downMouseX;
         delete this._keyframeMoved;
     },
 
     /**
      * @param {boolean} show
      */
     _toggleBezierIcon: function(show)
     {
         var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.source().easing());
         if (show && (this._animation.playState() === "idle" || !bezier))
             return;
         this._bezierIconElement.classList.toggle("shown", show);
     },
 
     /**
+     * @return {string}
+     */
+    _animationProperty: function()
+    {
+        return this._animation.type() === "CSSTransition" ? "transition" : "animation";
+    },
+
+    /**
      * @param {string} value
      */
-    _setEasing: function(value)
+    setEasing: function(value)
     {
-        if (!this._node || this._animation.source().easing() == value)
+        if (!this._node)
             return;
 
+        this.innerSetEasing(value);
+
+        if (this._animation.type() !== "WebAnimation") {
+            var style = this._node.getAttribute("style") || "";
+            style = style.replace(new RegExp("\\s*(-webkit-)?" + this._animationProperty() + "-timing-function:[^;]*;?\\s*", "g"), "");
+            this._node.setAttributeValue("style", String.sprintf("%s %s-timing-function: %s;", style, this._animationProperty(), value));
+        }
+
+        this.redraw();
+        this.dispatchEventToListeners(WebInspector.AnimationUI.Events.EasingChanged, { "animationId": this._animation.id(), "animationType": this._animation.type(), "easing": value });
+    },
+
+    /**
+     * @param {string} value
+     */
+    innerSetEasing: function(value)
+    {
         this._animation.source().setEasing(value);
-        this.redraw();
 
-        var animationType = this._animation.type();
-        if (animationType !== "CSSAnimation") {
+        if (this._animation.type() !== "CSSAnimation") {
             var target = WebInspector.targetManager.mainTarget();
             if (target)
                 target.animationAgent().setEasing(this._animation.id(), value);
         }
-
-        if (animationType !== "WebAnimation")
-            this._setNodeStyle(animationType === "CSSTransition" ? "transition-timing-function" : "animation-timing-function", value);
     },
 
     /**
-     * @param {number} value
+     * @param {number} delay
+     * @param {number} duration
      */
-    _setDelay: function(value)
+    _setDelayDuration: function(delay, duration)
     {
-        if (!this._node || this._animation.source().delay() == this._delay())
+        if (!this._node)
             return;
 
-        this._animation.source().setDelay(this._delay());
-        var propertyName;
-        if (this._animation.type() == "CSSTransition")
-            propertyName = "transition-delay";
-        else if (this._animation.type() == "CSSAnimation")
-            propertyName = "animation-delay";
-        else
-            return;
-        this._setNodeStyle(propertyName, Math.round(value) + "ms");
+        this.innerSetDelayDuration(delay, duration);
+
+        if (this._animation.type() === "WebAnimation") {
+            var style = this._node.getAttribute("style") || "";
+            style = style.replace(new RegExp("\\s*(-webkit-)?" + this._animationProperty() + "-(delay|duration):[^;]*;?\\s*", "g"), "");
+            this._node.setAttributeValue("style", String.sprintf("%s %s-delay: %sms; %s-duration: %sms;", style, this._animationProperty(), Math.round(delay), this._animationProperty(), Math.round(duration)));
+        }
+
+        this.dispatchEventToListeners(WebInspector.AnimationUI.Events.TimingChanged, { "animationId": this._animation.id(), "animationType": this._animation.type(), "delay": delay, "duration": duration });
     },
 
     /**
-     * @param {number} value
+     * @param {number} delay
+     * @param {number} duration
      */
-    _setDuration: function(value)
+    innerSetDelayDuration: function(delay, duration)
     {
-        if (!this._node || this._animation.source().duration() == value)
-            return;
+        this._animation.source().setDelay(delay);
+        this._animation.source().setDuration(duration);
 
-        this._animation.source().setDuration(value);
-        var propertyName;
-        if (this._animation.type() == "CSSTransition")
-            propertyName = "transition-duration";
-        else if (this._animation.type() == "CSSAnimation")
-            propertyName = "animation-duration";
-        else
-            return;
-        this._setNodeStyle(propertyName, Math.round(value) + "ms");
+        if (this._animation.type() !== "CSSAnimation") {
+            var target = WebInspector.targetManager.mainTarget();
+            if (target)
+                target.animationAgent().setTiming(this._animation.id(), duration, delay);
+        }
     },
 
     /**
-     * @param {string} name
-     * @param {string} value
-     */
-    _setNodeStyle: function(name, value)
-    {
-        var style = this._node.getAttribute("style") || "";
-        if (style)
-            style = style.replace(new RegExp("\\s*(-webkit-)?" + name + ":[^;]*;?\\s*", "g"), "");
-        var valueString = name + ": " + value;
-        this._node.setAttributeValue("style", style + " " + valueString + ";");
-    },
-
-    /**
      * @return {string}
      */
     _color: function()
     {
         /**
          * @param {string} string
          * @return {number}
          */
         function hash(string)
         {
             var hash = 0;
             for (var i = 0; i < string.length; i++)
                 hash = (hash << 5) + hash + string.charCodeAt(i);
             return Math.abs(hash);
         }
 
         if (!this._selectedColor) {
             var names = Object.keys(WebInspector.AnimationUI.Colors);
             var color = WebInspector.AnimationUI.Colors[names[hash(this._animation.name() || this._animation.id()) % names.length]];
             this._selectedColor = color.asString(WebInspector.Color.Format.RGB);
         }
         return this._selectedColor;
-    }
+    },
+
+    __proto__: WebInspector.Object.prototype
 }
 
 WebInspector.AnimationUI.Options = {
     AnimationHeight: 32,
     AnimationSVGHeight: 80,
     AnimationMargin: 7,
     EndpointsClickRegionSize: 10,
     GridCanvasHeight: 40
 }
 
@@ skipping 65 matching lines @@
     /**
      * @param {boolean=} commitEdit
      */
     _hide: function(commitEdit)
     {
         if (!this._popover.isShowing())
             return;
         this._anchorElement.classList.remove("bezier-editor-open");
         this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
         if (!commitEdit)
-            this._animationUI._setEasing(this._originalEasing);
+            this._animationUI.setEasing(this._originalEasing);
+
         this._popover.hide();
         this._bezierEditor.detach();
         this._bezierEditor.contentElement.removeEventListener("keydown", this._boundOnKeyDown);
         this._bezierEditor.contentElement.removeEventListener("focusout", this._boundOnFocusOut);
         WebInspector.setCurrentFocusElement(this._previousFocusElement);
     },
 
     /**
      * @param {!Event} event
      */
@@ skipping 16 matching lines @@
             this._hide(false);
             event.consume(true);
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _bezierChanged: function(event)
     {
-        this._animationUI._setEasing(/** @type {string} */ (event.data));
+        this._animationUI.setEasing(/** @type {string} */ (event.data));
     }
 }