DevTools: Rename StylesPopoverHelper to SwatchPopoverHelper

Also, reposition scroll functionality from the popover helper to the
ColorSwatchPopoverIcon/BezierPopoverIcon. This will allow us to move
the popover helper so it can be re-used in Sources.

BUG=none
R=lushnikov

Review-Url: https://codereview.chromium.org/2155263002
Cr-Commit-Position: refs/heads/master@{#406087}

third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js

@@ -6,7 +6,7 @@
  * @constructor
  * @extends {WebInspector.Object}
  */
-WebInspector.StylesPopoverHelper = function()
+WebInspector.SwatchPopoverHelper = function()
 {
     this._popover = new WebInspector.Popover();
     this._popover.setCanShrink(false);
@@ -15,11 +15,10 @@ WebInspector.StylesPopoverHelper = function()
 
     this._hideProxy = this.hide.bind(this, true);
     this._boundOnKeyDown = this._onKeyDown.bind(this);
-    this._repositionBound = this.reposition.bind(this);
     this._boundFocusOut = this._onFocusOut.bind(this);
 }
 
-WebInspector.StylesPopoverHelper.prototype = {
+WebInspector.SwatchPopoverHelper.prototype = {
     /**
      * @param {!Event} event
      */
@@ -63,16 +62,9 @@ WebInspector.StylesPopoverHelper.prototype = {
         document.addEventListener("mousedown", this._hideProxy, false);
         document.defaultView.addEventListener("resize", this._hideProxy, false);
         this._view.contentElement.addEventListener("keydown", this._boundOnKeyDown, false);
-
-        this._scrollerElement = anchorElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
-        if (this._scrollerElement)
-            this._scrollerElement.addEventListener("scroll", this._repositionBound, false);
     },
 
-    /**
-     * @param {!Event=} event
-     */
-    reposition: function(event)
+    reposition: function()
     {
         if (!this._previousFocusElement)
             this._previousFocusElement = WebInspector.currentFocusElement();
@@ -94,9 +86,6 @@ WebInspector.StylesPopoverHelper.prototype = {
         this._isHidden = true;
         this._popover.hide();
 
-        if (this._scrollerElement)
-            this._scrollerElement.removeEventListener("scroll", this._repositionBound, false);
-
         document.removeEventListener("mousedown", this._hideProxy, false);
         document.defaultView.removeEventListener("resize", this._hideProxy, false);
 
@@ -136,16 +125,17 @@ WebInspector.StylesPopoverHelper.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.StylePropertyTreeElement} treeElement
- * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper
+ * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
  * @param {string} text
  */
-WebInspector.BezierPopoverIcon = function(treeElement, stylesPopoverHelper, text)
+WebInspector.BezierPopoverIcon = function(treeElement, swatchPopoverHelper, text)
 {
     this._treeElement = treeElement;
-    this._stylesPopoverHelper = stylesPopoverHelper;
+    this._swatchPopoverHelper = swatchPopoverHelper;
     this._createDOM(text);
 
     this._boundBezierChanged = this._bezierChanged.bind(this);
+    this._boundOnScroll = this._onScroll.bind(this);
 }
 
 WebInspector.BezierPopoverIcon.prototype = {
@@ -184,8 +174,8 @@ WebInspector.BezierPopoverIcon.prototype = {
     _iconClick: function(event)
     {
         event.consume(true);
-        if (this._stylesPopoverHelper.isShowing()) {
-            this._stylesPopoverHelper.hide(true);
+        if (this._swatchPopoverHelper.isShowing()) {
+            this._swatchPopoverHelper.hide(true);
             return;
         }
 
@@ -193,7 +183,10 @@ WebInspector.BezierPopoverIcon.prototype = {
         var geometry = WebInspector.Geometry.CubicBezier.parse(this._bezierValueElement.textContent);
         this._bezierEditor.setBezier(geometry);
         this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._boundBezierChanged);
-        this._stylesPopoverHelper.show(this._bezierEditor, this._iconElement, this._onPopoverHidden.bind(this));
+        this._swatchPopoverHelper.show(this._bezierEditor, this._iconElement, this._onPopoverHidden.bind(this));
+        this._scrollerElement = this._iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        if (this._scrollerElement)
+            this._scrollerElement.addEventListener("scroll", this._boundOnScroll, false);
 
         this._originalPropertyText = this._treeElement.property.propertyText;
         this._treeElement.parentPane().setEditingStyle(true);
@@ -211,11 +204,22 @@ WebInspector.BezierPopoverIcon.prototype = {
         this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
     },
 
+    /**
+     * @param {!Event} event
+     */
+    _onScroll: function(event)
+    {
+        this._swatchPopoverHelper.reposition();
+    },
+
     /**
      * @param {boolean} commitEdit
      */
     _onPopoverHidden: function(commitEdit)
     {
+        if (this._scrollerElement)
+            this._scrollerElement.removeEventListener("scroll", this._boundOnScroll, false);
+
         this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._boundBezierChanged);
         delete this._bezierEditor;
 
@@ -229,14 +233,14 @@ WebInspector.BezierPopoverIcon.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.StylePropertyTreeElement} treeElement
- * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper
+ * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
  * @param {string} colorText
  */
-WebInspector.ColorSwatchPopoverIcon = function(treeElement, stylesPopoverHelper, colorText)
+WebInspector.ColorSwatchPopoverIcon = function(treeElement, swatchPopoverHelper, colorText)
 {
     this._treeElement = treeElement;
     this._treeElement[WebInspector.ColorSwatchPopoverIcon._treeElementSymbol] = this;
-    this._stylesPopoverHelper = stylesPopoverHelper;
+    this._swatchPopoverHelper = swatchPopoverHelper;
 
     this._swatch = WebInspector.ColorSwatch.create();
     this._swatch.setColorText(colorText);
@@ -247,6 +251,7 @@ WebInspector.ColorSwatchPopoverIcon = function(treeElement, stylesPopoverHelper,
     this._contrastColor = null;
 
     this._boundSpectrumChanged = this._spectrumChanged.bind(this);
+    this._boundOnScroll = this._onScroll.bind(this);
 }
 
 WebInspector.ColorSwatchPopoverIcon._treeElementSymbol = Symbol("WebInspector.ColorSwatchPopoverIcon._treeElementSymbol");
@@ -290,8 +295,8 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
 
     showPopover: function()
     {
-        if (this._stylesPopoverHelper.isShowing()) {
-            this._stylesPopoverHelper.hide(true);
+        if (this._swatchPopoverHelper.isShowing()) {
+            this._swatchPopoverHelper.hide(true);
             return;
         }
 
@@ -306,7 +311,10 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
 
         this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
         this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._boundSpectrumChanged);
-        this._stylesPopoverHelper.show(this._spectrum, this._swatch.iconElement(), this._onPopoverHidden.bind(this));
+        this._swatchPopoverHelper.show(this._spectrum, this._swatch.iconElement(), this._onPopoverHidden.bind(this));
+        this._scrollerElement = this._swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        if (this._scrollerElement)
+            this._scrollerElement.addEventListener("scroll", this._boundOnScroll, false);
 
         this._originalPropertyText = this._treeElement.property.propertyText;
         this._treeElement.parentPane().setEditingStyle(true);
@@ -320,7 +328,7 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
      */
     _spectrumResized: function(event)
     {
-        this._stylesPopoverHelper.reposition();
+        this._swatchPopoverHelper.reposition();
     },
 
     /**
@@ -333,11 +341,22 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
         this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
     },
 
+    /**
+     * @param {!Event} event
+     */
+    _onScroll: function(event)
+    {
+        this._swatchPopoverHelper.reposition();
+    },
+
     /**
      * @param {boolean} commitEdit
      */
     _onPopoverHidden: function(commitEdit)
     {
+        if (this._scrollerElement)
+            this._scrollerElement.removeEventListener("scroll", this._boundOnScroll, false);
+
         this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._boundSpectrumChanged);
         delete this._spectrum;
 

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

@@ -40,7 +40,7 @@ WebInspector.StylesSidebarPane = function()
     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
 
     this._sectionsContainer = this.element.createChild("div");
-    this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
+    this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
@@ -136,7 +136,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     forceUpdate: function()
     {
-        this._stylesPopoverHelper.hide();
+        this._swatchPopoverHelper.hide();
         this._resetCache();
         this.update();
     },
@@ -490,7 +490,7 @@ WebInspector.StylesSidebarPane.prototype = {
     {
         this.element.ownerDocument.body.removeEventListener("keydown", this._keyDownBound, false);
         this.element.ownerDocument.body.removeEventListener("keyup", this._keyUpBound, false);
-        this._stylesPopoverHelper.hide();
+        this._swatchPopoverHelper.hide();
         this._discardElementUnderMouse();
         WebInspector.ElementsSidebarPane.prototype.willHide.call(this);
     },
@@ -2014,8 +2014,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
             return swatch;
         }
 
-        var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
-        var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, stylesPopoverHelper, text);
+        var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
+        var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, text);
 
         /**
          * @param {?Array<string>} backgroundColors
@@ -2069,8 +2069,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
         var geometry = WebInspector.Geometry.CubicBezier.parse(text);
         if (!geometry || !this._editable())
             return createTextNode(text);
-        var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
-        return new WebInspector.BezierPopoverIcon(this, stylesPopoverHelper, text).element();
+        var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
+        return new WebInspector.BezierPopoverIcon(this, swatchPopoverHelper, text).element();
     },
 
     _updateState: function()