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() |