Devtools Animations: Timeline interactions change the underlying style

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 2da13171c0071a167e31c716bf3106f0133cedef..b32dd3799a9a5b26fd2d8a7e1c442138e32fba25 100644
--- a/Source/devtools/front_end/elements/AnimationTimeline.js
+++ b/Source/devtools/front_end/elements/AnimationTimeline.js
@@ -5,11 +5,15 @@
 /**
  * @constructor
  * @extends {WebInspector.VBox}
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
  */
-WebInspector.AnimationTimeline = function() {
+WebInspector.AnimationTimeline = function(stylesPane)
+{
     WebInspector.VBox.call(this, true);
+    this._stylesPane = stylesPane;
     this.registerRequiredCSS("elements/animationTimeline.css");
     this.element.classList.add("animations-timeline");
+
     this._animations = [];
     this._uiAnimations = [];
     this._duration = this._defaultDuration();
@@ -85,6 +89,7 @@ WebInspector.AnimationTimeline.prototype = {
         function nodeResolved(description, node)
         {
             description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+            uiAnimation.setNode(node);
         }
 
         if (!this._inThreshold(animation))
@@ -98,7 +103,8 @@ WebInspector.AnimationTimeline.prototype = {
         this._resizeWindow(animation);
         this._animations.push(animation);
 
-        this._uiAnimations.push(new WebInspector.AnimationUI(animation, this, container));
+        var uiAnimation = new WebInspector.AnimationUI(this._stylesPane, animation, this, container);
+        this._uiAnimations.push(uiAnimation);
         this.redraw();
     },
 
@@ -132,11 +138,13 @@ WebInspector.AnimationTimeline.prototype = {
 
 /**
  * @constructor
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
  * @param {!WebInspector.AnimationTimeline} timeline
  * @param {!Element} parentElement
  */
-WebInspector.AnimationUI = function(animation, timeline, parentElement) {
+WebInspector.AnimationUI = function(stylesPane, animation, timeline, parentElement) {
+    this._stylesPane = stylesPane;
     this._animation = animation;
     this._timeline = timeline;
     this._parentElement = parentElement;
@@ -169,6 +177,14 @@ WebInspector.AnimationUI.MouseEvents = {
 }
 
 WebInspector.AnimationUI.prototype = {
+    /**
+     * @param {?WebInspector.DOMNode} node
+     */
+    setNode: function(node)
+    {
+        this._node = node;
+    },
+
     _renderGrid: function()
     {
         var width = parseInt(window.getComputedStyle(this._parentElement).width, 10);
@@ -292,7 +308,7 @@ WebInspector.AnimationUI.prototype = {
      */
     _pixelMsRatio: function()
     {
-        return parseInt(window.getComputedStyle(this._parentElement).width, 10) / this._timeline.duration();
+        return parseInt(window.getComputedStyle(this._parentElement).width, 10) / this._timeline.duration() || 0;
     },
 
     /**
@@ -352,6 +368,9 @@ WebInspector.AnimationUI.prototype = {
         this._parentElement.ownerDocument.addEventListener("mouseup", this._mouseUpHandler);
         event.preventDefault();
         event.stopPropagation();
+
+        if (this._node)
+            WebInspector.Revealer.reveal(this._node);
     },
 
     /**
@@ -374,8 +393,8 @@ WebInspector.AnimationUI.prototype = {
         if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove) {
             this._keyframes[this._keyframeMoved].setOffset(this._offset(this._keyframeMoved));
         } else {
-            this._animation.source().setDelay(this._delay());
-            this._animation.source().setDuration(this._duration());
+            this._setDelay(this._delay());
+            this._setDuration(this._duration());
         }
 
         this._movementInMs = 0;
@@ -391,6 +410,57 @@ WebInspector.AnimationUI.prototype = {
     },
 
     /**
+     * @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; // FIXME: support web animations
+        this._setNodeStyle(propertyName, this._delay() + "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; // FIXME: support web animations
+        this._setNodeStyle(propertyName, 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);
+    },
+
+    /**
      * @return {!WebInspector.Color}
      */
     _color: function()