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

Source/devtools/front_end/elements/Spectrum.js

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * 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.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 354 matching lines @@
             this.hide(true);
         }
 
         this._anchorElement = element;
 
         this._spectrum.setColor(color);
         this._spectrum._originalFormat = format !== WebInspector.Color.Format.Original ? format : color.format();
         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;
     },
 
     reposition: function(element)
     {
         if (!this._previousFocusElement)
             this._previousFocusElement = WebInspector.currentFocusElement();
         this._popover.showView(this._spectrum, element);
         WebInspector.setCurrentFocusElement(this._spectrum.element);
     },
 
     /**
      * @param {boolean=} commitEdit
      */
     hide: function(commitEdit)
     {
         if (!this._popover.isShowing())
             return;
         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);
 
         WebInspector.setCurrentFocusElement(this._previousFocusElement);
         delete this._previousFocusElement;
 
         delete this._anchorElement;
     },
 
     _onKeyDown: function(event)
     {
         if (event.keyIdentifier === "Enter") {
             this.hide(true);
             event.consume(true);
             return;
         }
         if (event.keyIdentifier === "U+001B") { // Escape key
             this.hide(false);
             event.consume(true);
         }
     },
 
+    /**
+     * @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
 }
 
 /**
  * @constructor
  * @param {boolean=} readOnly
  */
 WebInspector.ColorSwatch = function(readOnly)
 {
     this.element = document.createElementWithClass("span", "swatch");
     this._swatchInnerElement = this.element.createChild("span", "swatch-inner");
     var shiftClickMessage = WebInspector.UIString("Shift-click to change color format.");
     this.element.title = readOnly ? shiftClickMessage : String.sprintf("%s\n%s", WebInspector.UIString("Click to open a colorpicker."), shiftClickMessage);
     this.element.addEventListener("mousedown", consumeEvent, false);
     this.element.addEventListener("dblclick", consumeEvent, false);
 }
 
 WebInspector.ColorSwatch.prototype = {
     /**
      * @param {string} colorString
      */
     setColorString: function(colorString)
     {
         this._swatchInnerElement.style.backgroundColor = colorString;
     }
 }