DevTools: Source color picker experiment. Make color swatches clickable

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

Index: third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js
index 1f09c124c9b17abd9ca923c93794ddbdad6c7076..1a65d7ee5694fb2893bec2f219075ce5aba7fdb8 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js
@@ -4,145 +4,14 @@
 
 /**
  * @constructor
- * @extends {WebInspector.Object}
- */
-WebInspector.StylesPopoverHelper = function()

[lushnikov, 2016/07/16 00:30:26]

Let's extract the StylesPopoverHelper in a few steps:

-- Patch 1 --
1. Rename it into WebInspector.SwatchPopoverHelper in this file
2. Unbind this component from StylesSidebarPane

-- Patch 2 --
1. Move WebInspector.SwatchPopoverHelper into a ui/SwatchPopoverHelper. (should
be no changes to code itself)
2. Rename StylesPopoverHelper.js into ColorSwatchPopoverIcon.js

[flandy, 2016/07/19 17:52:19]

Done.

-{
-    this._popover = new WebInspector.Popover();
-    this._popover.setCanShrink(false);
-    this._popover.setNoMargins(true);
-    this._popover.element.addEventListener("mousedown", consumeEvent, false);
-
-    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 = {
-    /**
-     * @param {!Event} event
-     */
-    _onFocusOut: function(event)
-    {
-        if (!event.relatedTarget || event.relatedTarget.isSelfOrDescendant(this._view.contentElement))
-            return;
-        this._hideProxy();
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isShowing: function()
-    {
-        return this._popover.isShowing();
-    },
-
-    /**
-     * @param {!WebInspector.Widget} view
-     * @param {!Element} anchorElement
-     * @param {function(boolean)=} hiddenCallback
-     */
-    show: function(view, anchorElement, hiddenCallback)
-    {
-        if (this._popover.isShowing()) {
-            if (this._anchorElement === anchorElement)
-                return;
-
-            // Reopen the picker for another anchor element.
-            this.hide(true);
-        }
-
-        delete this._isHidden;
-        this._anchorElement = anchorElement;
-        this._view = view;
-        this._hiddenCallback = hiddenCallback;
-        this.reposition();
-
-        var document = this._popover.element.ownerDocument;
-        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");

[lushnikov, 2016/07/16 00:30:26]

I would try inlining scroll/repositioning functionality to the
ColorSwatchPopoverIcon/BezierIcon. Should not be a lot of code

[flandy, 2016/07/19 17:52:19]

Done.

-        if (this._scrollerElement)
-            this._scrollerElement.addEventListener("scroll", this._repositionBound, false);
-    },
-
-    /**
-     * @param {!Event=} event
-     */
-    reposition: function(event)
-    {
-        if (!this._previousFocusElement)
-            this._previousFocusElement = WebInspector.currentFocusElement();
-        // Unbind "blur" listener to avoid reenterability: |popover.showView| will hide the popover and trigger it synchronously.
-        this._view.contentElement.removeEventListener("focusout", this._boundFocusOut, false);
-        this._popover.showView(this._view, this._anchorElement);
-        this._view.contentElement.addEventListener("focusout", this._boundFocusOut, false);
-        WebInspector.setCurrentFocusElement(this._view.contentElement);
-    },
-
-    /**
-     * @param {boolean=} commitEdit
-     */
-    hide: function(commitEdit)
-    {
-        if (this._isHidden)
-            return;
-        var document = this._popover.element.ownerDocument;
-        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);
-
-        if (this._hiddenCallback)
-            this._hiddenCallback.call(null, !!commitEdit);
-
-        WebInspector.setCurrentFocusElement(this._previousFocusElement);
-        delete this._previousFocusElement;
-        delete this._anchorElement;
-        if (this._view) {
-            this._view.detach();
-            this._view.contentElement.removeEventListener("keydown", this._boundOnKeyDown, false);
-            this._view.contentElement.removeEventListener("focusout", this._boundFocusOut, false);
-            delete this._view;
-        }
-    },
-
-    /**
-     * @param {!Event} event
-     */
-    _onKeyDown: function(event)
-    {
-        if (event.key === "Enter") {
-            this.hide(true);
-            event.consume(true);
-            return;
-        }
-        if (event.key === "Escape") {
-            this.hide(false);
-            event.consume(true);
-        }
-    },
-
-    __proto__: WebInspector.Object.prototype
-}
-
-/**
- * @constructor
  * @param {!WebInspector.StylePropertyTreeElement} treeElement
- * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper
+ * @param {!WebInspector.IconPopoverHelper} iconPopoverHelper
  * @param {string} text
  */
-WebInspector.BezierPopoverIcon = function(treeElement, stylesPopoverHelper, text)
+WebInspector.BezierPopoverIcon = function(treeElement, iconPopoverHelper, text)
 {
     this._treeElement = treeElement;
-    this._stylesPopoverHelper = stylesPopoverHelper;
+    this._iconPopoverHelper = iconPopoverHelper;
     this._createDOM(text);
 
     this._boundBezierChanged = this._bezierChanged.bind(this);
@@ -184,8 +53,8 @@ WebInspector.BezierPopoverIcon.prototype = {
     _iconClick: function(event)
     {
         event.consume(true);
-        if (this._stylesPopoverHelper.isShowing()) {
-            this._stylesPopoverHelper.hide(true);
+        if (this._iconPopoverHelper.isShowing()) {
+            this._iconPopoverHelper.hide(true);
             return;
         }
 
@@ -193,7 +62,8 @@ 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));
+        var scrollerElement = this._iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        this._iconPopoverHelper.show(this._bezierEditor, this._iconElement, scrollerElement, this._onPopoverHidden.bind(this));
 
         this._originalPropertyText = this._treeElement.property.propertyText;
         this._treeElement.parentPane().setEditingStyle(true);
@@ -229,14 +99,14 @@ WebInspector.BezierPopoverIcon.prototype = {
 /**
  * @constructor
  * @param {!WebInspector.StylePropertyTreeElement} treeElement
- * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper
+ * @param {!WebInspector.IconPopoverHelper} iconPopoverHelper
  * @param {string} colorText
  */
-WebInspector.ColorSwatchPopoverIcon = function(treeElement, stylesPopoverHelper, colorText)
+WebInspector.ColorSwatchPopoverIcon = function(treeElement, iconPopoverHelper, colorText)
 {
     this._treeElement = treeElement;
     this._treeElement[WebInspector.ColorSwatchPopoverIcon._treeElementSymbol] = this;
-    this._stylesPopoverHelper = stylesPopoverHelper;
+    this._iconPopoverHelper = iconPopoverHelper;
 
     this._swatch = WebInspector.ColorSwatch.create();
     this._swatch.setColorText(colorText);
@@ -290,8 +160,8 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
 
     showPopover: function()
     {
-        if (this._stylesPopoverHelper.isShowing()) {
-            this._stylesPopoverHelper.hide(true);
+        if (this._iconPopoverHelper.isShowing()) {
+            this._iconPopoverHelper.hide(true);
             return;
         }
 
@@ -306,7 +176,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));
+
+        var anchorElement = this._swatch.iconElement();
+        var scrollerElement = anchorElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        this._iconPopoverHelper.show(this._spectrum, anchorElement, scrollerElement, this._onPopoverHidden.bind(this));
 
         this._originalPropertyText = this._treeElement.property.propertyText;
         this._treeElement.parentPane().setEditingStyle(true);
@@ -320,7 +193,7 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
      */
     _spectrumResized: function(event)
     {
-        this._stylesPopoverHelper.reposition();
+        this._iconPopoverHelper.reposition();
     },
 
     /**