Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(154)

Unified Diff: third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js

Issue 2157533003: DevTools: Source color picker experiment. Make color swatches clickable (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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
flandy 2016/07/19 17:52:19 How about adding a function to ColorSwatch to set
+ 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()

Powered by Google App Engine
This is Rietveld 408576698