DevTools: front-end part of color picker (behind experiment).

Source/devtools/front_end/elements/Spectrum.js

Index: Source/devtools/front_end/elements/Spectrum.js
diff --git a/Source/devtools/front_end/elements/Spectrum.js b/Source/devtools/front_end/elements/Spectrum.js
index 492424f5992b5f361ca8e7723ab5d1cddd7bf1cf..f831fbb099c5f13b78a040614a018a86122bc1e8 100644
--- a/Source/devtools/front_end/elements/Spectrum.js
+++ b/Source/devtools/front_end/elements/Spectrum.js
@@ -372,7 +372,10 @@ WebInspector.SpectrumPopupHelper.prototype = {
         this.reposition(element);
 
         document.addEventListener("mousedown", this._hideProxy, false);
-        window.addEventListener("blur", this._hideProxy, false);
+        if (WebInspector.experimentsSettings.colorPicker.isEnabled()) {
+            WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.ColorPicked, this._colorPicked, this);
+            PageAgent.setColorPickerEnabled(true);
+        }
         return true;
     },
 
@@ -394,7 +397,11 @@ WebInspector.SpectrumPopupHelper.prototype = {
         this._popover.hide();
 
         document.removeEventListener("mousedown", this._hideProxy, false);
-        window.removeEventListener("blur", this._hideProxy, false);
+
+        if (WebInspector.experimentsSettings.colorPicker.isEnabled()) {
+            PageAgent.setColorPickerEnabled(false);
+            WebInspector.targetManager.removeModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.ColorPicked, this._colorPicked, this);
+        }
 
         this.dispatchEventToListeners(WebInspector.SpectrumPopupHelper.Events.Hidden, !!commitEdit);
 
@@ -417,6 +424,18 @@ WebInspector.SpectrumPopupHelper.prototype = {
         }
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _colorPicked: function(event)
+    {
+        var color = /** @type {!DOMAgent.RGBA} */ (event.data);
+        var rgba = [color.r, color.g, color.b, (color.a / 2.55 | 0) / 100];
+        this._spectrum.setColor(WebInspector.Color.fromRGBA(rgba));
+        this._spectrum._onchange();
+        InspectorFrontendHost.bringToFront();
+    },
+
     __proto__: WebInspector.Object.prototype
 }