Devtools Animations: Add cubic bezier easing editor for animations

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 49 matching lines @@
 
     this._requestShowCallback = requestShowCallback;
 
     this._createElementStatePane();
     this.bodyElement.appendChild(this._elementStatePane);
     this._animationsControlPane = new WebInspector.AnimationControlPane();
     this.bodyElement.appendChild(this._animationsControlPane.element);
     this._sectionsContainer = createElement("div");
     this.bodyElement.appendChild(this._sectionsContainer);
 
-    this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
+    this._editorPopoverHelper = new WebInspector.EditorPopoverHelper();
 
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
 }
 
 /**
@@ skipping 275 matching lines @@
         // We should update SSP on main frame navigation only.
         var mainFrameNavigated = node && this.node() && node.ownerDocument !== this.node().ownerDocument;
         if (!mainFrameNavigated && node !== this.node()) {
             this.element.classList.toggle("no-affect", this._isEditingStyle);
             if (this._isEditingStyle) {
                 this._pendingNode = node;
                 return;
             }
         }
 
-        this._stylesPopoverHelper.hide();
+        this._editorPopoverHelper.hide();
         node = WebInspector.StylesSidebarPane.normalizeNode(node);
 
         this._resetCache();
         this._animationsControlPane.setNode(node);
         if (this._animationTimeline)
             this._animationTimeline.setNode(node);
         WebInspector.ElementsSidebarPane.prototype.setNode.call(this, node);
     },
 
     /**
@@ skipping 516 matching lines @@
         this.element.ownerDocument.body.addEventListener("keyup", this._keyUpBound, false);
     },
 
     /**
      * @override
      */
     willHide: function()
     {
         this.element.ownerDocument.body.removeEventListener("keydown", this._keyDownBound, false);
         this.element.ownerDocument.body.removeEventListener("keyup", this._keyUpBound, false);
-        this._stylesPopoverHelper.hide();
+        this._editorPopoverHelper.hide();
         this._discardElementUnderMouse();
         WebInspector.ElementsSidebarPane.prototype.willHide.call(this);
     },
 
     _discardElementUnderMouse: function()
     {
         if (this._elementUnderMouse)
             this._elementUnderMouse.classList.remove("styles-panel-hovered");
         delete this._elementUnderMouse;
     },
@@ skipping 1248 matching lines @@
         var color = WebInspector.Color.parse(text);
         if (!color)
             return createTextNode(text);
 
         if (!this._styleRule.editable()) {
             var swatch = WebInspector.ColorSwatch.create();
             swatch.setColorText(text);
             return swatch;
         }
 
-        var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
-        return new WebInspector.ColowSwatchPopoverIcon(this, stylesPopoverHelper, text).element();
+        var editorPopoverHelper = this._parentPane._editorPopoverHelper;
+        return new WebInspector.ColorSwatchPopoverIcon(this, editorPopoverHelper, text).element();
     },
 
     /**
      * @return {string}
      */
     renderedPropertyText: function()
     {
         return this.nameElement.textContent + ": " + this.valueElement.textContent;
     },
 
     /**
      * @param {string} text
      * @return {!Node}
      */
     _processBezier: function(text)
     {
         var geometry = WebInspector.Geometry.CubicBezier.parse(text);
         if (!geometry || !this._styleRule.editable())
             return createTextNode(text);
-        var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
-        return new WebInspector.BezierPopoverIcon(this, stylesPopoverHelper, text).element();
+        var editorPopoverHelper = this._parentPane._editorPopoverHelper;
+        return new WebInspector.BezierPopoverIcon(this, editorPopoverHelper, text).element();
     },
 
     _updateState: function()
     {
         if (!this.listItemElement)
             return;
 
         if (this.style().isPropertyImplicit(this.name))
             this.listItemElement.classList.add("implicit");
         else
@@ skipping 1050 matching lines @@
 
 WebInspector.StylesSidebarPane.MatchedRulesPayload.prototype = {
     /**
      * @return {boolean}
      */
     fulfilled: function()
     {
         return !!(this.matchedCSSRules && this.pseudoElements && this.inherited);
     }
 }