Devtools Animations: Add cubic bezier easing editor for 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 673 matching lines @@
     this._animation = animation;
     this._timeline = timeline;
     this._parentElement = parentElement;
 
     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();
 
+    this._bezierIconElement = WebInspector.BezierPopoverIcon.createIcon(parentElement);
+    this._bezierIconElement.style.backgroundColor = this._color();
+    this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();

[dgozman, 2015/05/23 00:53:26]

Animations should not depend on StylesPopoverHelper. I think you don't even need
it. Use plain Popover instead.

[samli, 2015/05/25 01:55:38]

Done. I've had to duplicate some of the code, ptal. Refactored so that the
timeline holds one editor/popover which is shared between all the animation ui
elements.

+    this._bezierEditor = new WebInspector.BezierEditor();
+    this._bezierIconElement.addEventListener("mousedown", this._toggleBezierEditor.bind(this));
+
     this._svg = parentElement.createSVGChild("svg", "animation-ui");
     this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationSVGHeight);
     this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.AnimationMargin + "px";
     this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspector.AnimationUI.MouseEvents.AnimationDrag, null));
     this._activeIntervalGroup = this._svg.createSVGChild("g");
+    this._activeIntervalGroup.addEventListener("mouseover", this._toggleBezierIcon.bind(this, true));
+    this._activeIntervalGroup.addEventListener("mouseout", this._toggleBezierIcon.bind(this, false));
 
     /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints: !Object.<number, !Element>, keyframeRender: !Object.<number, !Element>}>} */
     this._cachedElements = [];
 
     this._movementInMs = 0;
     this.redraw();
 }
 
 /**
  * @enum {string}
@@ skipping 152 matching lines @@
         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.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)";
 
-        this._nameElement.style.transform = "translateX(" + (leftMargin + this._delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).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);
 
         if (this._animation.type() === "CSSTransition") {
             this._renderTransition();
             return;
         }
 
         this._renderIteration(this._activeIntervalGroup, 0);
         if (!this._tailGroup)
@@ skipping 141 matching lines @@
         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);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _toggleBezierEditor: function(event)
+    {
+        if (this._stylesPopoverHelper.isShowing()) {
+            this._stylesPopoverHelper.hide();
+        } else {
+            this._originalEasing = this._animation.source().easing();
+            var bezier = WebInspector.Geometry.CubicBezier.parse(this._originalEasing);
+            this._bezierEditor.setBezier(bezier);
+            this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+            this._stylesPopoverHelper.show(this._bezierEditor, this._bezierIconElement, this._onPopoverHidden.bind(this));
+            this._bezierIconElement.classList.add("bezier-editor-open");
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _bezierChanged: function(event)
+    {
+        this._setEasing(/** @type {string} */ (event.data));
+    },
+
+    /**
+     * @param {boolean} commitEdit
+     */
+    _onPopoverHidden: function(commitEdit)
+    {
+        this._bezierIconElement.classList.remove("bezier-editor-open");
+        this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+        if (!commitEdit)
+            this._setEasing(this._originalEasing);
+    },
+
+    /**
+     * @param {string} value
+     */
+    _setEasing: function(value)
+    {
+        if (!this._node || this._animation.source().easing() == value)
+            return;
+
+        this._animation.source().setEasing(value);
+        this.redraw();
+
+        var animationType = this._animation.type();
+        if (animationType !== "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
      */
     _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")
@@ skipping 27 matching lines @@
     /**
      * @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 + ";");
+        this._node.setAttributeValue("style", style + " " + valueString + ";");
     },
 
     /**
      * @return {string}
      */
     _color: function()
     {
         /**
          * @param {string} string
          * @return {number}
@@ skipping 28 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")
 }