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 11 matching lines @@
     this.contentElement.appendChild(this._createHeader());
     this._animationsContainer = this.contentElement.createChild("div", "animation-timeline-rows");
     this._duration = this._defaultDuration();
     this._scrubberRadius = 25;
     this._timelineControlsWidth = 200;
     /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.NodeUI>} */
     this._nodesMap = new Map();
     this._symbol = Symbol("animationTimeline");
     /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationPlayer>} */
     this._animationsMap = new Map();
+    this._editorPopoverHelper = new WebInspector.EditorPopoverHelper();
+    this._bezierEditor = new WebInspector.BezierEditor();
+
     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
 
     WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);
 }
 
 WebInspector.AnimationTimeline.GlobalPlaybackRates = [0.1, 0.25, 0.5, 1.0];
 
 WebInspector.AnimationTimeline.prototype = {
     wasShown: function()
@@ skipping 573 matching lines @@
  */
 WebInspector.AnimationTimeline.NodeUI = function(animationNode) {
     /**
      * @param {?WebInspector.DOMNode} node
      * @this {WebInspector.AnimationTimeline.NodeUI}
      */
     function nodeResolved(node)
     {
         this._node = node;
         this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
-        this.element.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
+        this.element.addEventListener("mousedown", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
     }
 
     this._rows = [];
     this.element = createElementWithClass("div", "animation-node-row");
     this._description = this.element.createChild("div", "animation-node-description");
     animationNode.deferredNode().resolve(nodeResolved.bind(this));
     this._timelineElement = this.element.createChild("div", "animation-node-timeline");
 }
 
 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}} */
@@ skipping 87 matching lines @@
  * @constructor
  * @param {!WebInspector.AnimationModel.AnimationPlayer} animation
  * @param {!WebInspector.AnimationTimeline} timeline
  * @param {!Element} parentElement
  */
 WebInspector.AnimationUI = function(animation, timeline, parentElement) {
     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._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}
  */
 WebInspector.AnimationUI.MouseEvents = {
     AnimationDrag: "AnimationDrag",
     KeyframeMove: "KeyframeMove",
     StartEndpointMove: "StartEndpointMove",
     FinishEndpointMove: "FinishEndpointMove"
 }
 
 WebInspector.AnimationUI.prototype = {
     /**
      * @return {!WebInspector.AnimationModel.AnimationPlayer}
      */
     animation: function()
     {
         return this._animation;
     },
 
     /**
+     * @return {?Array.<!WebInspector.AnimationModel.KeyframeStyle>}
+     */
+    _keyframes: function()
+    {
+        return this._animation.source().keyframesRule() ? this._animation.source().keyframesRule().keyframes() : null;
+    },
+
+    /**
      * @param {?WebInspector.DOMNode} node
      */
     setNode: function(node)
     {
         this._node = node;
     },
 
     /**
      * @param {!Element} parentElement
      * @param {string} className
@@ skipping 124 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.classList.toggle("hidden", this._animation.playState() === "idle");
+        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)
             this._tailGroup = this._activeIntervalGroup.createSVGChild("g", "animation-tail-iterations");
         var iterationWidth = this._duration() * this._timeline.pixelMsRatio();
         for (var iteration = 1; iteration < this._animation.source().iterations() && iterationWidth * (iteration - 1) < this._timeline.width(); iteration++)
             this._renderIteration(this._tailGroup, iteration);
         while (iteration < this._cachedElements.length)
             this._cachedElements.pop().group.remove();
     },
 
-
     _renderTransition: function()
     {
         if (!this._cachedElements[0])
             this._cachedElements[0] = { animationLine: null, keyframePoints: {}, keyframeRender: {}, group: null };
         this._drawAnimationLine(0, this._activeIntervalGroup);
         this._renderKeyframe(0, 0, this._activeIntervalGroup, WebInspector.AnimationUI.Options.AnimationMargin, this._duration() * this._timeline.pixelMsRatio(), this._animation.source().easing());
         this._drawPoint(0, this._activeIntervalGroup, WebInspector.AnimationUI.Options.AnimationMargin, 0, true);
         this._drawPoint(0, this._activeIntervalGroup, this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, true);
     },
 
     /**
      * @param {!Element} parentElement
      * @param {number} iteration
      */
     _renderIteration: function(parentElement, iteration)
     {
         if (!this._cachedElements[iteration])
             this._cachedElements[iteration] = { animationLine: null, keyframePoints: {}, keyframeRender: {}, group: parentElement.createSVGChild("g") };
         var group = this._cachedElements[iteration].group;
         group.style.transform = "translateX(" + (iteration * this._duration() * this._timeline.pixelMsRatio()).toFixed(2) + "px)";
         this._drawAnimationLine(iteration, group);
-        console.assert(this._keyframes.length > 1);
-        for (var i = 0; i < this._keyframes.length - 1; i++) {
+        console.assert(this._keyframes().length > 1);
+        for (var i = 0; i < this._keyframes().length - 1; i++) {
             var leftDistance = this._offset(i) * this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin;
             var width = this._duration() * (this._offset(i + 1) - this._offset(i)) * this._timeline.pixelMsRatio();
-            this._renderKeyframe(iteration, i, group, leftDistance, width, this._keyframes[i].easing());
+            this._renderKeyframe(iteration, i, group, leftDistance, width, this._keyframes()[i].easing());
             if (i || (!i && iteration === 0))
                 this._drawPoint(iteration, group, leftDistance, i, iteration === 0);
         }
         this._drawPoint(iteration, group, this._duration() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, iteration === 0);
     },
 
     /**
      * @return {number}
      */
     _delay: function()
@@ skipping 17 matching lines @@
             duration -= Math.max(this._movementInMs, -this._animation.source().delay()); // Cannot have negative delay
         return Math.max(0, duration);
     },
 
     /**
      * @param {number} i
      * @return {number} offset
      */
     _offset: function(i)
     {
-        var offset = this._keyframes[i].offsetAsNumber();
+        var offset = this._keyframes()[i].offsetAsNumber();
         if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove && i === this._keyframeMoved) {
-            console.assert(i > 0 && i < this._keyframes.length - 1, "First and last keyframe cannot be moved");
+            console.assert(i > 0 && i < this._keyframes().length - 1, "First and last keyframe cannot be moved");
             offset += this._movementInMs / this._animation.source().duration();
-            offset = Math.max(offset, this._keyframes[i - 1].offsetAsNumber());
-            offset = Math.min(offset, this._keyframes[i + 1].offsetAsNumber());
+            offset = Math.max(offset, this._keyframes()[i - 1].offsetAsNumber());
+            offset = Math.min(offset, this._keyframes()[i + 1].offsetAsNumber());
         }
         return offset;
     },
 
     /**
      * @param {!WebInspector.AnimationUI.MouseEvents} mouseEventType
      * @param {?number} keyframeIndex
      * @param {!Event} event
      */
     _mouseDown: function(mouseEventType, keyframeIndex, event)
@@ skipping 27 matching lines @@
 
     /**
      * @param {!Event} event
      */
     _mouseUp: function(event)
     {
         this._movementInMs = (event.clientX - this._downMouseX) / this._timeline.pixelMsRatio();
 
         // Commit changes
         if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.KeyframeMove)
-            this._keyframes[this._keyframeMoved].setOffset(this._offset(this._keyframeMoved));
+            this._keyframes()[this._keyframeMoved].setOffset(this._offset(this._keyframeMoved));
         else
             this._animation.setTiming(this._delay(), this._duration());
 
         this._movementInMs = 0;
 
         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 && !bezier)
+            return;
+        this._bezierIconElement.classList.toggle("shown", show);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _toggleBezierEditor: function(event)
+    {
+        var popover = this._timeline._editorPopoverHelper;
+        var shouldShow = !popover.isShowing() || this._bezierIconElement !== popover.anchorElement();
+
+        if (popover.isShowing())
+            popover.hide();
+
+        if (shouldShow) {
+            this._originalEasing = this._animation.source().easing();
+            var bezier = WebInspector.Geometry.CubicBezier.parse(this._originalEasing);
+            this._timeline._bezierEditor.setBezier(bezier);
+            this._timeline._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+            var scrollerElement = this._bezierIconElement.enclosingNodeOrSelfWithClass(".animation-timeline-rows");
+            popover.show(this._timeline._bezierEditor, this._bezierIconElement, scrollerElement, this._onPopoverHidden.bind(this));
+            this._bezierIconElement.classList.add("bezier-editor-open");
+        }
+        event.consume(true);
+    },
+
+    /**
+     * @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._timeline._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.setEasing(value);
+    },
+
+    /**
      * @return {string}
      */
     _color: function()
     {
         /**
          * @param {string} string
          * @return {number}
          */
         function hash(string)
         {
@@ skipping 25 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")
 }