Devtools Animations: Timeline interactions change the underlying style

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() {
+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();
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
 }
 
 WebInspector.AnimationTimeline.prototype = {
     /**
      * @return {number}
      */
@@ skipping 55 matching lines @@
      */
     addAnimation: function(animation)
     {
         /**
          * @param {!Element} description
          * @param {?WebInspector.DOMNode} node
          */
         function nodeResolved(description, node)
         {
             description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+            uiAnimation.setNode(node);
         }
 
         if (!this._inThreshold(animation))
             this._reset();
 
         var row = this.contentElement.createChild("div", "animation-row");
         var description = row.createChild("div", "animation-node-description");
         animation.source().getNode(nodeResolved.bind(null, description));
         var container = row.createChild("div", "animation-timeline-row");
 
         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();
     },
 
     redraw: function()
     {
         for (var i = 0; i < this._uiAnimations.length; i++)
             this._uiAnimations[i].redraw();
     },
 
     onResize: function()
@@ skipping 13 matching lines @@
         var iterations = animation.source().iterations() || 1;
         var duration = animation.source().duration() * Math.min(2, iterations);
         this._duration = Math.max(this._duration, animation.startTime() + duration + animation.source().delay() - this._startTime + 50);
     },
 
     __proto__: WebInspector.VBox.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;
 
     this._grid = parentElement.createChild("canvas", "animation-timeline-grid-row");
     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();
@@ skipping 12 matching lines @@
  * @enum {string}
  */
 WebInspector.AnimationUI.MouseEvents = {
     AnimationDrag: "AnimationDrag",
     KeyframeMove: "KeyframeMove",
     StartEndpointMove: "StartEndpointMove",
     FinishEndpointMove: "FinishEndpointMove"
 }
 
 WebInspector.AnimationUI.prototype = {
+    /**
+     * @param {?WebInspector.DOMNode} node
+     */
+    setNode: function(node)
+    {
+        this._node = node;
+    },
+
     _renderGrid: function()
     {
         var width = parseInt(window.getComputedStyle(this._parentElement).width, 10);
         const height = WebInspector.AnimationUI.Options.GridCanvasHeight;
         const minorMs = this._timeline.duration() / 20;
         const majorMs = minorMs * 5;
 
         this._grid.width = width * window.devicePixelRatio;
         this._grid.height = height * window.devicePixelRatio;
         this._grid.style.width = width + "px";
@@ skipping 103 matching lines @@
             }
         }
         this._drawPoint(this._duration() * this._pixelMsRatio() +  WebInspector.AnimationUI.Options.AnimationMargin, -1);
     },
 
     /**
      * @return {number}
      */
     _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;
     },
 
     /**
      * @return {number}
      */
     _delay: function()
     {
         var delay = this._animation.source().delay();
         if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.AnimationDrag || this._mouseEventType    === WebInspector.AnimationUI.MouseEvents.StartEndpointMove)
             delay += this._movementInMs;
@@ skipping 39 matching lines @@
     {
         this._mouseEventType = mouseEventType;
         this._keyframeMoved = keyframeIndex;
         this._downMouseX = event.clientX;
         this._mouseMoveHandler = this._mouseMove.bind(this);
         this._mouseUpHandler = this._mouseUp.bind(this);
         this._parentElement.ownerDocument.addEventListener("mousemove", this._mouseMoveHandler);
         this._parentElement.ownerDocument.addEventListener("mouseup", this._mouseUpHandler);
         event.preventDefault();
         event.stopPropagation();
+
+        if (this._node)
+            WebInspector.Revealer.reveal(this._node);
     },
 
     /**
      * @param {!Event} event
      */
     _mouseMove: function (event)
     {
         this._movementInMs = (event.clientX - this._downMouseX) / this._pixelMsRatio();
         this.redraw();
     },
 
     /**
      * @param {!Event} event
      */
     _mouseUp: function(event)
     {
         this._movementInMs = (event.clientX - this._downMouseX) / this._pixelMsRatio();
 
         // Commit changes
         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;
         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 {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()
     {
         /**
          * @param {string} string
          * @return {number}
          */
         function hash(string)
         {
@@ skipping 24 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")
 }