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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2297873004: DevTools: Add bezier swatches to CSS Sources (Closed)
Patch Set: Created 4 years, 4 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
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 7fd36524368405e12bbf0d8879feeb2759b2cb2e..c5a0c7d2b89cd39cd4b0c8d41d3e3fe212aea410 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
@@ -47,7 +47,7 @@ WebInspector.CSSSourceFrame = function(uiSourceCode)
/** @type {number} */
WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300;
-
+/** @type {symbol} */
WebInspector.CSSSourceFrame.SwatchBookmark = Symbol("swatch");
WebInspector.CSSSourceFrame.prototype = {
@@ -111,80 +111,84 @@ WebInspector.CSSSourceFrame.prototype = {
* @param {number} startLine
* @param {number} endLine
*/
- _updateColorSwatches: function(startLine, endLine)
+ _updateSwatches: function(startLine, endLine)
{
- var colorPositions = [];
+ var swatches = [];
+ var swatchPositions = [];
- var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi;
+ var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex, WebInspector.Geometry.CubicBezier.Regex, WebInspector.Color.Regex];
for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) {
- var line = "\n" + this.textEditor.line(lineNumber).substring(0, WebInspector.CSSSourceFrame.maxSwatchProcessingLength) + "\n";
- var match;
- while ((match = colorRegex.exec(line)) !== null) {
- if (match.length < 2)
+ var line = this.textEditor.line(lineNumber).substring(0, WebInspector.CSSSourceFrame.maxSwatchProcessingLength);
+ var results = WebInspector.TextUtils.splitStringByRegexes(line, regexes);
+ for (var i = 0; i < results.length; i++) {
+ var result = results[i];
+ if (result.regexIndex !== 2 && result.regexIndex !== 3)
lushnikov 2016/08/31 20:25:39 Let's rewrite this with Handlers: var regexes =
flandy 2016/09/01 21:18:54 Done.
+ continue;
+ var delimiters = /[\s:;,(){}]/;
+ var positionBefore = result.position - 1;
+ var positionAfter = result.position + result.value.length;
+ if (positionBefore >= 0 && !delimiters.test(line.charAt(positionBefore))
+ || positionAfter < line.length && !delimiters.test(line.charAt(positionAfter)))
continue;
- var colorText = match[1];
- var color = WebInspector.Color.parse(colorText);
- if (color)
- colorPositions.push(new WebInspector.CSSSourceFrame.ColorPosition(color, lineNumber, match.index, colorText.length));
+
+ var swatch;
+ var swatchPosition = WebInspector.TextRange.createFromLocation(lineNumber, result.position);
+ if (result.regexIndex === 2) {
+ if (!WebInspector.Geometry.CubicBezier.parse(result.value))
lushnikov 2016/08/31 20:25:39 let's extract this logic into a handler
flandy 2016/09/01 21:18:54 Done.
+ continue;
+ swatch = WebInspector.BezierSwatch.create();
+ swatch.setText(result.value);
+ swatch.iconElement().title = WebInspector.UIString("Open cubic bezier editor.");
+ swatch.setTextHidden(true);
+ } else if (result.regexIndex === 3) {
+ if (!WebInspector.Color.parse(result.value))
lushnikov 2016/08/31 20:25:39 let's extract this logic into a handler as well
flandy 2016/09/01 21:18:54 Done.
+ continue;
+ swatch = WebInspector.ColorSwatch.create();
+ swatch.setColorText(result.value);
+ swatch.iconElement().title = WebInspector.UIString("Open color picker.");
+ swatch.hideText(true);
+ }
+ swatches.push(swatch);
+ swatchPositions.push(swatchPosition);
}
}
-
- this.textEditor.operation(putColorSwatchesInline.bind(this));
+ this.textEditor.operation(putSwatchesInline.bind(this));
/**
* @this {WebInspector.CSSSourceFrame}
*/
- function putColorSwatchesInline()
+ function putSwatchesInline()
{
- this._clearBookmarks(startLine, endLine);
+ var clearRange = new WebInspector.TextRange(startLine, 0, endLine, this.textEditor.line(endLine).length);
+ this.textEditor.bookmarks(clearRange, WebInspector.CSSSourceFrame.SwatchBookmark).forEach(marker => marker.clear());
- 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.hideText(true);
- var bookmark = this.textEditor.addBookmark(colorPosition.textRange.startLine, colorPosition.textRange.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark);
- swatch.iconElement().addEventListener("click", this._showSpectrum.bind(this, swatch, bookmark), true);
+ for (var i = 0; i < swatches.length; i++) {
+ var swatch = swatches[i];
+ var swatchPosition = swatchPositions[i];
+ var bookmark = this.textEditor.addBookmark(swatchPosition.startLine, swatchPosition.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark);
+ if (swatch instanceof WebInspector.BezierSwatch)
+ swatch.iconElement().addEventListener("click", this._showBezierEditor.bind(this, swatch, bookmark), false);
+ else if (swatch instanceof WebInspector.ColorSwatch)
+ swatch.iconElement().addEventListener("click", this._showSpectrum.bind(this, swatch, bookmark), false);
}
}
},
/**
- * @param {number} startLine
- * @param {number} endLine
- */
- _clearBookmarks: function(startLine, endLine)
- {
- var range = new WebInspector.TextRange(startLine, 0, endLine, this.textEditor.line(endLine).length);
- this.textEditor.bookmarks(range, WebInspector.CSSSourceFrame.SwatchBookmark).forEach(marker => marker.clear());
- },
-
- /**
* @param {!WebInspector.ColorSwatch} swatch
* @param {!WebInspector.TextEditorBookMark} bookmark
* @param {!Event} event
*/
_showSpectrum: function(swatch, bookmark, event)
{
- event.consume(true);
- if (this._swatchPopoverHelper.isShowing()) {
- this._swatchPopoverHelper.hide(true);
- return;
+ this._swatchIconClicked(swatch, bookmark, event);
+ if (!this._spectrum) {
+ this._spectrum = new WebInspector.Spectrum();
+ this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+ this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
}
- this._hadSpectrumChange = false;
- var position = bookmark.position();
- var colorText = swatch.color().asString(WebInspector.Color.Format.Original);
- this.textEditor.setSelection(position);
- this._currentColorTextRange = position.clone();
- this._currentColorTextRange.endColumn += colorText.length;
- this._currentSwatch = swatch;
-
- 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));
+ this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._swatchPopoverHidden.bind(this));
},
/**
@@ -200,27 +204,75 @@ WebInspector.CSSSourceFrame.prototype = {
*/
_spectrumChanged: function(event)
{
- this._muteColorProcessing = true;
- this._hadSpectrumChange = true;
var colorString = /** @type {string} */ (event.data);
this._currentSwatch.setColorText(colorString);
- this._textEditor.editRange(this._currentColorTextRange, colorString, "*color-text-changed");
- this._currentColorTextRange.endColumn = this._currentColorTextRange.startColumn + colorString.length;
+ this._changeSwatchText(colorString);
+ },
+
+ /**
+ * @param {!WebInspector.BezierSwatch} swatch
+ * @param {!WebInspector.TextEditorBookMark} bookmark
+ * @param {!Event} event
+ */
+ _showBezierEditor: function(swatch, bookmark, event)
+ {
+ this._swatchIconClicked(swatch, bookmark, event);
+ if (!this._bezierEditor) {
+ this._bezierEditor = new WebInspector.BezierEditor();
+ this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+ }
+ var cubicBezier = swatch.cubicBezier();
+ if (!cubicBezier)
+ cubicBezier = /** @type {!WebInspector.Geometry.CubicBezier} */ (WebInspector.Geometry.CubicBezier.parse("linear"));
+ this._bezierEditor.setBezier(cubicBezier);
+ this._swatchPopoverHelper.show(this._bezierEditor, swatch.iconElement(), this._swatchPopoverHidden.bind(this));
+ },
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _bezierChanged: function(event)
+ {
+ var bezierString = /** @type {string} */ (event.data);
+ this._currentSwatch.setText(bezierString);
+ this._changeSwatchText(bezierString);
+ },
+
+ /**
+ * @param {!Element} swatch
+ * @param {!WebInspector.TextEditorBookMark} bookmark
+ * @param {!Event} event
+ */
+ _swatchIconClicked: function(swatch, bookmark, event)
lushnikov 2016/08/31 20:25:39 let's make this function a click listener, and let
flandy 2016/09/01 21:18:54 Done.
+ {
+ event.consume(true);
+ this._hadSwatchChange = false;
+ var swatchPosition = bookmark.position();
+ this.textEditor.setSelection(swatchPosition);
+ this._currentSwatchTextRange = swatchPosition.clone();
+ this._currentSwatchTextRange.endColumn += swatch.textContent.length;
+ this._currentSwatch = swatch;
+ },
+
+ /**
+ * @param {string} text
+ */
+ _changeSwatchText: function(text)
+ {
+ this._muteColorProcessing = true;
+ this._hadSwatchChange = true;
+ this._textEditor.editRange(this._currentSwatchTextRange, text, "*swatch-text-changed");
+ this._currentSwatchTextRange.endColumn = this._currentSwatchTextRange.startColumn + text.length;
},
/**
* @param {boolean} commitEdit
*/
- _spectrumHidden: function(commitEdit)
+ _swatchPopoverHidden: function(commitEdit)
{
this._muteColorProcessing = false;
- this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
- this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
- if (!commitEdit && this._hadSpectrumChange)
+ if (!commitEdit && this._hadSwatchChange)
this.textEditor.undo();
- delete this._spectrum;
- delete this._currentSwatch;
- delete this._currentColorTextRange;
},
/**
@@ -230,7 +282,7 @@ WebInspector.CSSSourceFrame.prototype = {
{
WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this);
if (!this._muteColorProcessing)
- this._updateColorSwatches(0, this.textEditor.linesCount - 1);
+ this._updateSwatches(0, this.textEditor.linesCount - 1);
},
/**
@@ -242,7 +294,7 @@ WebInspector.CSSSourceFrame.prototype = {
{
WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange);
if (!this._muteColorProcessing)
- this._updateColorSwatches(newRange.startLine, newRange.endLine);
+ this._updateSwatches(newRange.startLine, newRange.endLine);
},
/**
@@ -320,16 +372,3 @@ WebInspector.CSSSourceFrame.prototype = {
__proto__: WebInspector.UISourceCodeFrame.prototype
}
-
-/**
- * @constructor
- * @param {!WebInspector.Color} color
- * @param {number} lineNumber
- * @param {number} startColumn
- * @param {number} textLength
- */
-WebInspector.CSSSourceFrame.ColorPosition = function(color, lineNumber, startColumn, textLength)
-{
- this.color = color;
- this.textRange = new WebInspector.TextRange(lineNumber, startColumn, lineNumber, startColumn + textLength);
-}
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698