Devtools Animations: Add cubic bezier easing editor for animations

Source/devtools/front_end/elements/StylesPopoverHelper.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.Object}
  */
 WebInspector.StylesPopoverHelper = function()
 {
@@ skipping 130 matching lines @@
  */
 WebInspector.BezierPopoverIcon = function(treeElement, stylesPopoverHelper, text)
 {
     this._treeElement = treeElement;
     this._stylesPopoverHelper = stylesPopoverHelper;
     this._createDOM(text);
 
     this._boundBezierChanged = this._bezierChanged.bind(this);
 }
 
+/**
+ * @param {!Element} parentElement
+ * @return {!Element}
+ */
+WebInspector.BezierPopoverIcon.createIcon = function(parentElement)
+{
+    var element = parentElement.createSVGChild("svg", "popover-icon bezier-icon");
+    element.setAttribute("height", 10);
+    element.setAttribute("width", 10);
+    var path = element.createSVGChild("path");
+    path.setAttribute("d", "M2,8 C2,3 8,7 8,2");
+    return element;
+}
+
 WebInspector.BezierPopoverIcon.prototype = {
     /**
      * @return {!Element}
      */
     element: function()
     {
         return this._element;
     },
 
     /**
      * @param {string} text
      */
     _createDOM: function(text)
     {
         this._element = createElement("nobr");
-
-        this._iconElement = this._element.createSVGChild("svg", "popover-icon bezier-icon");
-        this._iconElement.setAttribute("height", 10);
-        this._iconElement.setAttribute("width", 10);
+        this._iconElement = WebInspector.BezierPopoverIcon.createIcon(this._element);
         this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
-        var g = this._iconElement.createSVGChild("g");
-        var path = g.createSVGChild("path");
-        path.setAttribute("d", "M2,8 C2,3 8,7 8,2");
-
         this._bezierValueElement = this._element.createChild("span");
         this._bezierValueElement.textContent = text;
     },
 
     /**
      * @param {!Event} event
      */
     _iconClick: function(event)
     {
         event.consume(true);
@@ skipping 131 matching lines @@
     {
         this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._boundSpectrumChanged);
         delete this._spectrum;
 
         var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText;
         this._treeElement.applyStyleText(propertyText, true);
         this._treeElement.parentPane().setEditingStyle(false);
         delete this._originalPropertyText;
     }
 }