DevTools: Source color picker experiment. Make color swatches clickable

third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js

Index: third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
index 58bdf45e533b57dca5820d254a73a6d9d2db28a3..939e2be1848af8ad92fff04cb50f0a82a5a67155 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
@@ -39,6 +39,8 @@ WebInspector.CSSSourceFrame = function(uiSourceCode)
     this.textEditor.setAutocompleteDelegate(new WebInspector.CSSSourceFrame.AutocompleteDelegate());
     this._registerShortcuts();
     this._colorBookmarks = [];
+    this._iconPopoverHelper = new WebInspector.IconPopoverHelper();
+    this._analyzeTextColors = true;
 }
 
 /** @type {number} */
@@ -152,12 +154,8 @@ WebInspector.CSSSourceFrame.prototype = {
 
         for (var i = 0; i < colorPositions.length; i++) {
             var colorPosition = colorPositions[i];
-
-            var swatch = WebInspector.ColorSwatch.create();
-            swatch.setColorText(colorPosition.color.asString(WebInspector.Color.Format.Original));
-            swatch.hideText(true);
-
-            var bookmark = this.textEditor.addBookmark(colorPosition.textRange.startLine, colorPosition.textRange.startColumn, swatch);
+            var swatch = new WebInspector.CSSSourceFrame.ColorSwatch(this, colorPosition);
+            var bookmark = this.textEditor.addBookmark(colorPosition.textRange.startLine, colorPosition.textRange.startColumn, swatch.getElement());
             this._colorBookmarks.push(bookmark);
         }
     },
@@ -170,12 +168,73 @@ WebInspector.CSSSourceFrame.prototype = {
     },
 
     /**
+     * @param {!WebInspector.ColorSwatch} swatch
+     */
+    _showSpectrum: function(swatch)
+    {
+        if (this._iconPopoverHelper.isShowing()) {
+            this._iconPopoverHelper.hide();
+            return;
+        }
+        var color = swatch.color();
+        var format = swatch.format();
+        if (format === WebInspector.Color.Format.Original)
+            format = color.format();
+
+        this._spectrum = new WebInspector.Spectrum();
+        this._spectrum.setColor(color, format);
+        this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+        this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
+
+        var anchorElement = swatch.iconElement();
+        this._iconPopoverHelper.show(this._spectrum, anchorElement, null, this._spectrumHidden.bind(this));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _spectrumResized: function(event)
+    {
+        this._iconPopoverHelper.reposition();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _spectrumChanged: function(event)
+    {
+        this._analyzeTextColors = false;
+        var colorString = /** @type {string} */ (event.data);
+        this._currentSwatch.setColorText(colorString);
+        this._replaceColorText(this._currentSwatch.getColorPosition(), colorString);
+    },
+
+    _spectrumHidden: function()
+    {
+        this._analyzeTextColors = true;
+        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
+        delete this._spectrum;
+    },
+
+    /**
+     * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition
+     * @param {string} colorString
+     */
+    _replaceColorText: function(colorPosition, colorString)
+    {
+        this._textEditor.editRange(colorPosition.textRange, colorString);
+        colorPosition.color = WebInspector.Color.parse(colorString);
+        colorPosition.textRange.endColumn = colorPosition.textRange.startColumn + colorString.length;
+    },
+
+    /**
      * @override
      */
     onTextEditorContentSet: function()
     {
         WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this);
-        if (Runtime.experiments.isEnabled("sourceColorPicker"))
+        if (Runtime.experiments.isEnabled("sourceColorPicker") && this._analyzeTextColors)
             this._updateColorSwatches();
     },
 
@@ -187,13 +246,24 @@ WebInspector.CSSSourceFrame.prototype = {
     onTextChanged: function(oldRange, newRange)
     {
         WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange);
-        if (Runtime.experiments.isEnabled("sourceColorPicker")) {
+        if (Runtime.experiments.isEnabled("sourceColorPicker") && this._analyzeTextColors) {
             if (this._updateTimeout)
                 clearTimeout(this._updateTimeout);
             this._updateTimeout = setTimeout(this._updateColorSwatches.bind(this), WebInspector.CSSSourceFrame.UpdateTimeout);
         }
     },
 
+    /**
+     * @override
+     * @param {number} lineNumber
+     */
+    scrollChanged: function(lineNumber)
+    {
+        WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNumber);
+        if (this._iconPopoverHelper.isShowing())
+            this._iconPopoverHelper.hide();
+    },
+
     __proto__: WebInspector.UISourceCodeFrame.prototype
 }
 
@@ -212,6 +282,69 @@ WebInspector.CSSSourceFrame.ColorPosition = function(color, lineNumber, startCol
 
 /**
  * @constructor
+ * @param {!WebInspector.CSSSourceFrame} cssSourceFrame
+ * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition
+ */
+WebInspector.CSSSourceFrame.ColorSwatch = function(cssSourceFrame, colorPosition)
+{
+    this._cssSourceFrame = cssSourceFrame;
+    this._colorPosition = colorPosition;
+
+    this._swatch = WebInspector.ColorSwatch.create();
+    this._swatch.setColorText(colorPosition.color.asString(WebInspector.Color.Format.Original) || "white");
+    var shiftClickMessage = WebInspector.UIString("Shift + Click to change color format.");
+    this._swatch.iconElement().title = WebInspector.UIString("Open color picker. %s", shiftClickMessage);
+    this._swatch.removeClickListener();

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

this is hackish! We need to come up with something logical/meaningful

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

How about adding a function to ColorSwatch to set the click handler to something
different than the default?

+    this._swatch.iconElement().addEventListener("click", this._handleSwatchClick.bind(this), true);
+    this._swatch.hideText(true);
+}
+
+WebInspector.CSSSourceFrame.ColorSwatch.prototype = {
+    /**
+     * @param {!Event} event
+     */
+    _handleSwatchClick: function(event)
+    {
+        this._cssSourceFrame._currentSwatch = this;
+
+        if (event.shiftKey) {
+            this._swatch.toggleNextFormat();
+            this._cssSourceFrame._analyzeTextColors = false;
+            this._cssSourceFrame._replaceColorText(this._colorPosition, this._swatch.getColorText());
+            this._cssSourceFrame._analyzeTextColors = true;
+        } else {
+            this._cssSourceFrame._showSpectrum(this._swatch);
+        }
+        event.consume(true);
+    },
+
+    /**
+     * @return {!WebInspector.ColorSwatch}
+     */
+    getElement: function()
+    {
+        return this._swatch;
+    },
+
+    /**
+     * @return {!WebInspector.CSSSourceFrame.ColorPosition}
+     */
+    getColorPosition: function()
+    {
+        return this._colorPosition;
+    },
+
+    /**
+     * @param {string} colorString
+     */
+    setColorText: function(colorString)
+    {
+        this._swatch.setColorText(colorString);
+    }
+}
+
+/**
+ * @constructor
  * @implements {WebInspector.TextEditorAutocompleteDelegate}
  */
 WebInspector.CSSSourceFrame.AutocompleteDelegate = function()