Devtools Animations: Update matching style rule for timing changes

This change utilises the setEffectivePropertyValueForNode() method to
update the appropriate style rule when updating the timing information
of an animation. This change also refactors timing update logic to live
within AnimationModel.

BUG=447083

Review URL: https://codereview.chromium.org/1360033002

Cr-Commit-Position: refs/heads/master@{#350636}

third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js

@@ -138,6 +138,13 @@ WebInspector.AnimationModel.Animation.parsePayload = function(target, payload)
     return new WebInspector.AnimationModel.Animation(target, payload);
 }
 
+/** @enum {string} */
+WebInspector.AnimationModel.Animation.Type = {
+    CSSTransition: "CSSTransition",
+    CSSAnimation: "CSSAnimation",
+    WebAnimation: "WebAnimation"
+}
+
 WebInspector.AnimationModel.Animation.prototype = {
     /**
      * @return {!AnimationAgent.Animation}
@@ -230,11 +237,11 @@ WebInspector.AnimationModel.Animation.prototype = {
     },
 
     /**
-     * @return {string}
+     * @return {!WebInspector.AnimationModel.Animation.Type}
      */
     type: function()
     {
-        return this._payload.type;
+        return /** @type {!WebInspector.AnimationModel.Animation.Type} */(this._payload.type);
     },
 
     /**
@@ -252,6 +259,41 @@ WebInspector.AnimationModel.Animation.prototype = {
         return firstAnimation.endTime() >= secondAnimation.startTime();
     },
 
+    /**
+     * @param {number} duration
+     * @param {number} delay
+     */
+    setTiming: function(duration, delay)
+    {
+        this._source.node().then(this._updateNodeStyle.bind(this, duration, delay));
+        this._source._duration = duration;
+        this._source._delay = delay;
+        if (this.type() !== WebInspector.AnimationModel.Animation.Type.CSSAnimation)
+            this.target().animationAgent().setTiming(this.id(), duration, delay);
+    },
+
+    /**
+     * @param {number} duration
+     * @param {number} delay
+     * @param {!WebInspector.DOMNode} node
+     */
+    _updateNodeStyle: function(duration, delay, node)
+    {
+        var animationPrefix;
+        if (this.type() == WebInspector.AnimationModel.Animation.Type.CSSTransition)
+            animationPrefix = "transition-";
+        else if (this.type() == WebInspector.AnimationModel.Animation.Type.CSSAnimation)
+            animationPrefix = "animation-";
+        else
+            return;
+
+        var cssModel = WebInspector.CSSStyleModel.fromTarget(node.target());
+        if (!cssModel)
+            return;
+        cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + "duration", duration + "ms");
+        cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + "delay", delay + "ms");
+    },
+
     __proto__: WebInspector.SDKObject.prototype
 }
 
@@ -280,14 +322,6 @@ WebInspector.AnimationModel.AnimationEffect.prototype = {
         return this._delay;
     },
 
-    /**
-     * @param {number} delay
-     */
-    setDelay: function(delay)
-    {
-        this._delay = delay;
-    },
-
     /**
      * @return {number}
      */
@@ -328,11 +362,6 @@ WebInspector.AnimationModel.AnimationEffect.prototype = {
         return this._duration;
     },
 
-    setDuration: function(duration)
-    {
-        this._duration = duration;
-    },
-
     /**
      * @return {string}
      */
@@ -357,6 +386,16 @@ WebInspector.AnimationModel.AnimationEffect.prototype = {
         return this._payload.name;
     },
 
+    /**
+     * @return {!Promise.<!WebInspector.DOMNode>}
+     */
+    node: function()
+    {
+        if (!this._deferredNode)
+            this._deferredNode = new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
+        return this._deferredNode.resolvePromise();
+    },
+
     /**
      * @return {!WebInspector.DeferredDOMNode}
      */

third_party/WebKit/Source/devtools/front_end/animation/AnimationTimeline.js

@@ -1104,19 +1104,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._animation.setTiming(this._duration(), this._delay());
 
         this._movementInMs = 0;
         this.redraw();
@@ -1128,57 +1119,6 @@ WebInspector.AnimationUI.prototype = {
         delete this._mouseEventType;
         delete this._downMouseX;
         delete this._keyframeMoved;
-    },
-
-    /**
-     * @param {number} value
-     */
-    _setDelay: function(value)
-    {
-        if (!this._node || this._animation.source().delay() == this._delay())
-            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");
-    },
-
-    /**
-     * @param {number} value
-     */
-    _setDuration: function(value)
-    {
-        if (!this._node || this._animation.source().duration() == value)
-            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");
-    },
-
-    /**
-     * @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 + "; -webkit-" + valueString + ";");
     }
 }
 

third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js

@@ -582,6 +582,16 @@ WebInspector.CSSStyleModel.prototype = {
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.LayoutEditorChange, {id: id, range: range});
     },
 
+    /**
+     * @param {number} nodeId
+     * @param {string} name
+     * @param {string} value
+     */
+    setEffectivePropertyValueForNode: function(nodeId, name, value)
+    {
+        this._agent.setEffectivePropertyValueForNode(nodeId, name, value);
+    },
+
     __proto__: WebInspector.SDKModel.prototype
 }
 

third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js

@@ -994,6 +994,30 @@ WebInspector.DeferredDOMNode.prototype = {
         }
     },
 
+    /**
+     * @return {!Promise.<!WebInspector.DOMNode>}
+     */
+    resolvePromise: function()
+    {
+        /**
+         * @param {function(?)} fulfill
+         * @param {function(*)} reject
+         * @this {WebInspector.DeferredDOMNode}
+         */
+        function resolveNode(fulfill, reject)
+        {
+            /**
+             * @param {?WebInspector.DOMNode} node
+             */
+            function mycallback(node)
+            {
+                fulfill(node)
+            }
+            this.resolve(mycallback);
+        }
+        return new Promise(resolveNode.bind(this));
+    },
+
     /**
      * @return {number}
      */