Devtools Animations: Update timing information of related animations

Source/devtools/front_end/elements/AnimationTimeline.js

Index: Source/devtools/front_end/elements/AnimationTimeline.js
diff --git a/Source/devtools/front_end/elements/AnimationTimeline.js b/Source/devtools/front_end/elements/AnimationTimeline.js
index 98a7c7f63c1afa02cad48c4d39834eec5d2a7407..e5df50137915b8e860ff1765448afd7c9aea983b 100644
--- a/Source/devtools/front_end/elements/AnimationTimeline.js
+++ b/Source/devtools/front_end/elements/AnimationTimeline.js
@@ -286,16 +286,6 @@ WebInspector.AnimationTimeline.prototype = {
      */
     _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();
 
@@ -310,14 +300,11 @@ WebInspector.AnimationTimeline.prototype = {
 
         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);
     },
 
@@ -586,18 +573,26 @@ WebInspector.AnimationTimeline.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");
@@ -611,9 +606,24 @@ 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);
@@ -656,6 +666,66 @@ WebInspector.AnimationTimeline.NodeUI.prototype = {
     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)));
     }
 }
 
@@ -686,6 +756,7 @@ WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) {
 
 /**
  * @constructor
+ * @extends {WebInspector.Object}
  * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
  * @param {!WebInspector.AnimationTimeline} timeline
  * @param {!Element} parentElement
@@ -731,6 +802,14 @@ WebInspector.AnimationUI.MouseEvents = {
     FinishEndpointMove: "FinishEndpointMove"
 }
 
+/**
+ * @enum {string}
+ */
+WebInspector.AnimationUI.Events = {
+    TimingChanged: "TimingChanged",
+    EasingChanged: "EasingChanged"
+}
+
 WebInspector.AnimationUI.prototype = {
     /**
      * @return {!WebInspector.AnimationModel.AnimationPlayer}
@@ -873,6 +952,14 @@ WebInspector.AnimationUI.prototype = {
         }
     },
 
+    /**
+     * @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();
@@ -880,7 +967,7 @@ WebInspector.AnimationUI.prototype = {
         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)";
@@ -1021,19 +1108,10 @@ WebInspector.AnimationUI.prototype = {
         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();
@@ -1059,76 +1137,81 @@ WebInspector.AnimationUI.prototype = {
     },
 
     /**
+     * @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._animation.source().setEasing(value);
-        this.redraw();
+        this.innerSetEasing(value);
 
-        var animationType = this._animation.type();
-        if (animationType !== "CSSAnimation") {
-            var target = WebInspector.targetManager.mainTarget();
-            if (target)
-                target.animationAgent().setEasing(this._animation.id(), 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));
         }
 
-        if (animationType !== "WebAnimation")
-            this._setNodeStyle(animationType === "CSSTransition" ? "transition-timing-function" : "animation-timing-function", value);
+        this.redraw();
+        this.dispatchEventToListeners(WebInspector.AnimationUI.Events.EasingChanged, { "animationId": this._animation.id(), "animationType": this._animation.type(), "easing": value });
     },
 
     /**
-     * @param {number} value
+     * @param {string} value
      */
-    _setDelay: function(value)
+    innerSetEasing: function(value)
     {
-        if (!this._node || this._animation.source().delay() == this._delay())
-            return;
+        this._animation.source().setEasing(value);
 
-        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");
+        if (this._animation.type() !== "CSSAnimation") {
+            var target = WebInspector.targetManager.mainTarget();
+            if (target)
+                target.animationAgent().setEasing(this._animation.id(), value);
+        }
     },
 
     /**
-     * @param {number} value
+     * @param {number} delay
+     * @param {number} duration
      */
-    _setDuration: function(value)
+    _setDelayDuration: function(delay, duration)
     {
-        if (!this._node || this._animation.source().duration() == value)
+        if (!this._node)
             return;
 
-        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");
+        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 {string} name
-     * @param {string} value
+     * @param {number} delay
+     * @param {number} duration
      */
-    _setNodeStyle: function(name, value)
+    innerSetDelayDuration: function(delay, duration)
     {
-        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 + ";");
+        this._animation.source().setDelay(delay);
+        this._animation.source().setDuration(duration);
+
+        if (this._animation.type() !== "CSSAnimation") {
+            var target = WebInspector.targetManager.mainTarget();
+            if (target)
+                target.animationAgent().setTiming(this._animation.id(), duration, delay);
+        }
     },
 
     /**
@@ -1154,7 +1237,9 @@ WebInspector.AnimationUI.prototype = {
             this._selectedColor = color.asString(WebInspector.Color.Format.RGB);
         }
         return this._selectedColor;
-    }
+    },
+
+    __proto__: WebInspector.Object.prototype
 }
 
 WebInspector.AnimationUI.Options = {
@@ -1240,7 +1325,8 @@ WebInspector.AnimationTimeline.BezierEditor.prototype = {
         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);
@@ -1277,6 +1363,6 @@ WebInspector.AnimationTimeline.BezierEditor.prototype = {
      */
     _bezierChanged: function(event)
     {
-        this._animationUI._setEasing(/** @type {string} */ (event.data));
+        this._animationUI.setEasing(/** @type {string} */ (event.data));
     }
 }