DevTools: Source color picker experiment. Make color swatches clickable

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 21 matching lines @@
  * @constructor
  * @extends {WebInspector.UISourceCodeFrame}
  * @param {!WebInspector.UISourceCode} uiSourceCode
  */
 WebInspector.CSSSourceFrame = function(uiSourceCode)
 {
     WebInspector.UISourceCodeFrame.call(this, uiSourceCode);
     this.textEditor.setAutocompleteDelegate(new WebInspector.CSSSourceFrame.AutocompleteDelegate());
     this._registerShortcuts();
     this._colorBookmarks = [];
+    this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper();
+    this._muteColorProcessing = false;
 }
 
 /** @type {number} */
 WebInspector.CSSSourceFrame.UpdateTimeout = 200;
 
 WebInspector.CSSSourceFrame.prototype = {
     _registerShortcuts: function()
     {
         var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts;
         for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i)
@@ skipping 96 matching lines @@
     {
         this._clearColorBookmarks();
         if (!colorPositions)
             return;
 
         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.iconElement().title = WebInspector.UIString("Open color picker.");
+            swatch.iconElement().addEventListener("click", this._showSpectrum.bind(this, swatch, colorPosition), true);
             swatch.hideText(true);
 
             var bookmark = this.textEditor.addBookmark(colorPosition.textRange.startLine, colorPosition.textRange.startColumn, swatch);
             this._colorBookmarks.push(bookmark);
         }
     },
 
     _clearColorBookmarks: function()
     {
         for (var i = 0; i < this._colorBookmarks.length; i++)
             this._colorBookmarks[i].clear();
         this._colorBookmarks = [];
     },
 
     /**
+     * @param {!WebInspector.ColorSwatch} swatch
+     * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition
+     */
+    _showSpectrum: function(swatch, colorPosition)

[lushnikov, 2016/07/20 02:45:45]

don't you want to consume event here?

[flandy, 2016/07/20 16:59:03]

Done.

+    {
+        if (this._swatchPopoverHelper.isShowing()) {
+            this._swatchPopoverHelper.hide();
+            return;
+        }
+        this._currentSwatch = swatch;
+        this._currentColorPosition = colorPosition;
+        this._spectrum = new WebInspector.Spectrum();
+        this._spectrum.setColor(swatch.color(), swatch.format());
+        this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+        this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
+        this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._spectrumHidden.bind(this));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _spectrumResized: function(event)
+    {
+        this._swatchPopoverHelper.reposition();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _spectrumChanged: function(event)
+    {
+        this._muteColorProcessing = true;
+        var colorString = /** @type {string} */ (event.data);
+        this._currentSwatch.setColorText(colorString);
+        this._textEditor.editRange(this._currentColorPosition.textRange, colorString);
+        this._currentColorPosition.color = WebInspector.Color.parse(colorString);
+        this._currentColorPosition.textRange.endColumn = this._currentColorPosition.textRange.startColumn + colorString.length;
+    },
+
+    _spectrumHidden: function()
+    {
+        this._muteColorProcessing = false;
+        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
+        delete this._spectrum;
+        this._updateColorSwatches();
+    },
+
+    /**
      * @override
      */
     onTextEditorContentSet: function()
     {
         WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this);
-        if (Runtime.experiments.isEnabled("sourceColorPicker"))
+        if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceColorPicker"))
             this._updateColorSwatches();
     },
 
     /**
      * @override
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
      */
     onTextChanged: function(oldRange, newRange)
     {
         WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange);
-        if (Runtime.experiments.isEnabled("sourceColorPicker")) {
+        if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceColorPicker")) {
             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._swatchPopoverHelper.isShowing())
+            this._swatchPopoverHelper.hide();
+    },
+
     __proto__: WebInspector.UISourceCodeFrame.prototype
 }
 
 /**
  * @constructor
  * @param {!WebInspector.Color} color
  * @param {number} lineNumber
  * @param {number} startColumn
  * @param {number} textLength
  */
@@ skipping 91 matching lines @@
         var propertyToken = this._backtrackPropertyToken(editor, prefixRange.startLine, prefixRange.startColumn - 1);
         if (!propertyToken)
             return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, substituteRange);
 
         var line = editor.line(prefixRange.startLine);
         var tokenContent = line.substring(propertyToken.startColumn, propertyToken.endColumn);
         var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent);
         return keywords.startsWith(prefix);
     },
 }