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 e79ee371a22d41dcad926879ffc720d09ca22312..9778a8d4155f9536c556e16de95965f264193917 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js |
+++ b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js |
@@ -27,361 +27,343 @@ |
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
*/ |
- |
/** |
- * @constructor |
- * @extends {WebInspector.UISourceCodeFrame} |
- * @param {!WebInspector.UISourceCode} uiSourceCode |
+ * @unrestricted |
*/ |
-WebInspector.CSSSourceFrame = function(uiSourceCode) |
-{ |
- WebInspector.UISourceCodeFrame.call(this, uiSourceCode); |
+WebInspector.CSSSourceFrame = class extends WebInspector.UISourceCodeFrame { |
+ /** |
+ * @param {!WebInspector.UISourceCode} uiSourceCode |
+ */ |
+ constructor(uiSourceCode) { |
+ super(uiSourceCode); |
this._registerShortcuts(); |
this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper(); |
this._muteSwatchProcessing = false; |
- this.configureAutocomplete({ |
- suggestionsCallback: this._cssSuggestions.bind(this), |
- isWordChar: this._isWordChar.bind(this) |
- }); |
+ this.configureAutocomplete( |
+ {suggestionsCallback: this._cssSuggestions.bind(this), isWordChar: this._isWordChar.bind(this)}); |
this.textEditor.addEventListener(WebInspector.SourcesTextEditor.Events.ScrollChanged, () => { |
- if (this._swatchPopoverHelper.isShowing()) |
- this._swatchPopoverHelper.hide(true); |
+ if (this._swatchPopoverHelper.isShowing()) |
+ this._swatchPopoverHelper.hide(true); |
}); |
-}; |
- |
-/** @type {number} */ |
-WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300; |
-/** @type {symbol} */ |
-WebInspector.CSSSourceFrame.SwatchBookmark = Symbol("swatch"); |
- |
-WebInspector.CSSSourceFrame.prototype = { |
- _registerShortcuts: function() |
- { |
- var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; |
- for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) |
- this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, 1)); |
- for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) |
- this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, -1)); |
- for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) |
- this.addShortcut(shortcutKeys.IncreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, 10)); |
- for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByTen.length; ++i) |
- this.addShortcut(shortcutKeys.DecreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, -10)); |
- }, |
- |
- /** |
- * @param {string} unit |
- * @param {number} change |
- * @return {?string} |
- */ |
- _modifyUnit: function(unit, change) |
- { |
- var unitValue = parseInt(unit, 10); |
- if (isNaN(unitValue)) |
- return null; |
- var tail = unit.substring((unitValue).toString().length); |
- return String.sprintf("%d%s", unitValue + change, tail); |
- }, |
- |
- /** |
- * @param {number} change |
- * @return {boolean} |
- */ |
- _handleUnitModification: function(change) |
- { |
- var selection = this.textEditor.selection().normalize(); |
- var token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn); |
- if (!token) { |
- if (selection.startColumn > 0) |
- token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn - 1); |
- if (!token) |
- return false; |
- } |
- if (token.type !== "css-number") |
- return false; |
- |
- var cssUnitRange = new WebInspector.TextRange(selection.startLine, token.startColumn, selection.startLine, token.endColumn); |
- var cssUnitText = this.textEditor.text(cssUnitRange); |
- var newUnitText = this._modifyUnit(cssUnitText, change); |
- if (!newUnitText) |
- return false; |
- this.textEditor.editRange(cssUnitRange, newUnitText); |
- selection.startColumn = token.startColumn; |
- selection.endColumn = selection.startColumn + newUnitText.length; |
- this.textEditor.setSelection(selection); |
- return true; |
- }, |
- |
- /** |
- * @param {number} startLine |
- * @param {number} endLine |
- */ |
- _updateSwatches: function(startLine, endLine) |
- { |
- var swatches = []; |
- var swatchPositions = []; |
- |
- var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex, WebInspector.Geometry.CubicBezier.Regex, WebInspector.Color.Regex]; |
- var handlers = new Map(); |
- handlers.set(WebInspector.Color.Regex, this._createColorSwatch.bind(this)); |
- handlers.set(WebInspector.Geometry.CubicBezier.Regex, this._createBezierSwatch.bind(this)); |
- |
- for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) { |
- 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 === -1 || !handlers.has(regexes[result.regexIndex])) |
- 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 swatch = handlers.get(regexes[result.regexIndex])(result.value); |
- if (!swatch) |
- continue; |
- swatches.push(swatch); |
- swatchPositions.push(WebInspector.TextRange.createFromLocation(lineNumber, result.position)); |
- } |
- } |
- this.textEditor.operation(putSwatchesInline.bind(this)); |
- |
- /** |
- * @this {WebInspector.CSSSourceFrame} |
- */ |
- function putSwatchesInline() |
- { |
- 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 < swatches.length; i++) { |
- var swatch = swatches[i]; |
- var swatchPosition = swatchPositions[i]; |
- var bookmark = this.textEditor.addBookmark(swatchPosition.startLine, swatchPosition.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark); |
- swatch[WebInspector.CSSSourceFrame.SwatchBookmark] = bookmark; |
- } |
- } |
- }, |
- |
- /** |
- * @param {string} text |
- * @return {?WebInspector.ColorSwatch} |
- */ |
- _createColorSwatch: function(text) |
- { |
- var color = WebInspector.Color.parse(text); |
- if (!color) |
- return null; |
- var swatch = WebInspector.ColorSwatch.create(); |
- swatch.setColor(color); |
- swatch.iconElement().title = WebInspector.UIString("Open color picker."); |
- swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false); |
- swatch.hideText(true); |
- return swatch; |
- }, |
- |
- /** |
- * @param {string} text |
- * @return {?WebInspector.BezierSwatch} |
- */ |
- _createBezierSwatch: function(text) |
- { |
- if (!WebInspector.Geometry.CubicBezier.parse(text)) |
- return null; |
- var swatch = WebInspector.BezierSwatch.create(); |
- swatch.setBezierText(text); |
- swatch.iconElement().title = WebInspector.UIString("Open cubic bezier editor."); |
- swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false); |
- swatch.hideText(true); |
- return swatch; |
- }, |
- |
- /** |
- * @param {!Element} swatch |
- * @param {!Event} event |
- */ |
- _swatchIconClicked: function(swatch, event) |
- { |
- event.consume(true); |
- this._hadSwatchChange = false; |
- this._muteSwatchProcessing = true; |
- var swatchPosition = swatch[WebInspector.CSSSourceFrame.SwatchBookmark].position(); |
- this.textEditor.setSelection(swatchPosition); |
- this._editedSwatchTextRange = swatchPosition.clone(); |
- this._editedSwatchTextRange.endColumn += swatch.textContent.length; |
- this._currentSwatch = swatch; |
- |
- if (swatch instanceof WebInspector.ColorSwatch) |
- this._showSpectrum(swatch); |
- else if (swatch instanceof WebInspector.BezierSwatch) |
- this._showBezierEditor(swatch); |
- }, |
- |
- /** |
- * @param {!WebInspector.ColorSwatch} swatch |
- */ |
- _showSpectrum: function(swatch) |
- { |
- 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._spectrum.setColor(swatch.color(), swatch.format()); |
- this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._swatchPopoverHidden.bind(this)); |
- }, |
- |
- /** |
- * @param {!WebInspector.Event} event |
- */ |
- _spectrumResized: function(event) |
- { |
- this._swatchPopoverHelper.reposition(); |
- }, |
+ } |
+ |
+ _registerShortcuts() { |
+ var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; |
+ for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) |
+ this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, 1)); |
+ for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) |
+ this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, -1)); |
+ for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) |
+ this.addShortcut(shortcutKeys.IncreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, 10)); |
+ for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByTen.length; ++i) |
+ this.addShortcut(shortcutKeys.DecreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, -10)); |
+ } |
+ |
+ /** |
+ * @param {string} unit |
+ * @param {number} change |
+ * @return {?string} |
+ */ |
+ _modifyUnit(unit, change) { |
+ var unitValue = parseInt(unit, 10); |
+ if (isNaN(unitValue)) |
+ return null; |
+ var tail = unit.substring((unitValue).toString().length); |
+ return String.sprintf('%d%s', unitValue + change, tail); |
+ } |
+ |
+ /** |
+ * @param {number} change |
+ * @return {boolean} |
+ */ |
+ _handleUnitModification(change) { |
+ var selection = this.textEditor.selection().normalize(); |
+ var token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn); |
+ if (!token) { |
+ if (selection.startColumn > 0) |
+ token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn - 1); |
+ if (!token) |
+ return false; |
+ } |
+ if (token.type !== 'css-number') |
+ return false; |
+ |
+ var cssUnitRange = |
+ new WebInspector.TextRange(selection.startLine, token.startColumn, selection.startLine, token.endColumn); |
+ var cssUnitText = this.textEditor.text(cssUnitRange); |
+ var newUnitText = this._modifyUnit(cssUnitText, change); |
+ if (!newUnitText) |
+ return false; |
+ this.textEditor.editRange(cssUnitRange, newUnitText); |
+ selection.startColumn = token.startColumn; |
+ selection.endColumn = selection.startColumn + newUnitText.length; |
+ this.textEditor.setSelection(selection); |
+ return true; |
+ } |
+ |
+ /** |
+ * @param {number} startLine |
+ * @param {number} endLine |
+ */ |
+ _updateSwatches(startLine, endLine) { |
+ var swatches = []; |
+ var swatchPositions = []; |
+ |
+ var regexes = [ |
+ WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex, |
+ WebInspector.Geometry.CubicBezier.Regex, WebInspector.Color.Regex |
+ ]; |
+ var handlers = new Map(); |
+ handlers.set(WebInspector.Color.Regex, this._createColorSwatch.bind(this)); |
+ handlers.set(WebInspector.Geometry.CubicBezier.Regex, this._createBezierSwatch.bind(this)); |
+ |
+ for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) { |
+ 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 === -1 || !handlers.has(regexes[result.regexIndex])) |
+ 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 swatch = handlers.get(regexes[result.regexIndex])(result.value); |
+ if (!swatch) |
+ continue; |
+ swatches.push(swatch); |
+ swatchPositions.push(WebInspector.TextRange.createFromLocation(lineNumber, result.position)); |
+ } |
+ } |
+ this.textEditor.operation(putSwatchesInline.bind(this)); |
/** |
- * @param {!WebInspector.Event} event |
+ * @this {WebInspector.CSSSourceFrame} |
*/ |
- _spectrumChanged: function(event) |
- { |
- var colorString = /** @type {string} */ (event.data); |
- var color = WebInspector.Color.parse(colorString); |
- if (!color) |
- return; |
- this._currentSwatch.setColor(color); |
- this._changeSwatchText(colorString); |
- }, |
- |
- /** |
- * @param {!WebInspector.BezierSwatch} swatch |
- */ |
- _showBezierEditor: function(swatch) |
- { |
- if (!this._bezierEditor) { |
- this._bezierEditor = new WebInspector.BezierEditor(); |
- this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this); |
- } |
- var cubicBezier = WebInspector.Geometry.CubicBezier.parse(swatch.bezierText()); |
- 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.setBezierText(bezierString); |
- this._changeSwatchText(bezierString); |
- }, |
- |
- /** |
- * @param {string} text |
- */ |
- _changeSwatchText: function(text) |
- { |
- this._hadSwatchChange = true; |
- this._textEditor.editRange(this._editedSwatchTextRange, text, "*swatch-text-changed"); |
- this._editedSwatchTextRange.endColumn = this._editedSwatchTextRange.startColumn + text.length; |
- }, |
- |
- /** |
- * @param {boolean} commitEdit |
- */ |
- _swatchPopoverHidden: function(commitEdit) |
- { |
- this._muteSwatchProcessing = false; |
- if (!commitEdit && this._hadSwatchChange) |
- this.textEditor.undo(); |
- }, |
- |
- /** |
- * @override |
- */ |
- onTextEditorContentSet: function() |
- { |
- WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this); |
- if (!this._muteSwatchProcessing) |
- this._updateSwatches(0, this.textEditor.linesCount - 1); |
- }, |
- |
- /** |
- * @override |
- * @param {!WebInspector.TextRange} oldRange |
- * @param {!WebInspector.TextRange} newRange |
- */ |
- onTextChanged: function(oldRange, newRange) |
- { |
- WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange); |
- if (!this._muteSwatchProcessing) |
- this._updateSwatches(newRange.startLine, newRange.endLine); |
- }, |
- |
- /** |
- * @param {string} char |
- * @return {boolean} |
- */ |
- _isWordChar: function(char) |
- { |
- return WebInspector.TextUtils.isWordChar(char) || char === "." || char === "-" || char === "$"; |
- }, |
- |
- /** |
- * @param {!WebInspector.TextRange} prefixRange |
- * @param {!WebInspector.TextRange} substituteRange |
- * @return {?Promise.<!WebInspector.SuggestBox.Suggestions>} |
- */ |
- _cssSuggestions: function(prefixRange, substituteRange) |
- { |
- var prefix = this._textEditor.text(prefixRange); |
- if (prefix.startsWith("$")) |
- return null; |
- |
- var propertyToken = this._backtrackPropertyToken(prefixRange.startLine, prefixRange.startColumn - 1); |
- if (!propertyToken) |
- return null; |
- |
- var line = this._textEditor.line(prefixRange.startLine); |
- var tokenContent = line.substring(propertyToken.startColumn, propertyToken.endColumn); |
- var propertyValues = WebInspector.cssMetadata().propertyValues(tokenContent); |
- return Promise.resolve(propertyValues.filter(value => value.startsWith(prefix)).map(value => ({title: value}))); |
- }, |
- |
- /** |
- * @param {number} lineNumber |
- * @param {number} columnNumber |
- * @return {?{startColumn: number, endColumn: number, type: string}} |
- */ |
- _backtrackPropertyToken: function(lineNumber, columnNumber) |
- { |
- var backtrackDepth = 10; |
- var tokenPosition = columnNumber; |
- var line = this._textEditor.line(lineNumber); |
- var seenColon = false; |
- |
- for (var i = 0; i < backtrackDepth && tokenPosition >= 0; ++i) { |
- var token = this._textEditor.tokenAtTextPosition(lineNumber, tokenPosition); |
- if (!token) |
- return null; |
- if (token.type === "css-property") |
- return seenColon ? token : null; |
- if (token.type && !(token.type.indexOf("whitespace") !== -1 || token.type.startsWith("css-comment"))) |
- return null; |
- |
- if (!token.type && line.substring(token.startColumn, token.endColumn) === ":") { |
- if (!seenColon) |
- seenColon = true; |
- else |
- return null; |
- } |
- tokenPosition = token.startColumn - 1; |
- } |
+ function putSwatchesInline() { |
+ 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 < swatches.length; i++) { |
+ var swatch = swatches[i]; |
+ var swatchPosition = swatchPositions[i]; |
+ var bookmark = this.textEditor.addBookmark( |
+ swatchPosition.startLine, swatchPosition.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark); |
+ swatch[WebInspector.CSSSourceFrame.SwatchBookmark] = bookmark; |
+ } |
+ } |
+ } |
+ |
+ /** |
+ * @param {string} text |
+ * @return {?WebInspector.ColorSwatch} |
+ */ |
+ _createColorSwatch(text) { |
+ var color = WebInspector.Color.parse(text); |
+ if (!color) |
+ return null; |
+ var swatch = WebInspector.ColorSwatch.create(); |
+ swatch.setColor(color); |
+ swatch.iconElement().title = WebInspector.UIString('Open color picker.'); |
+ swatch.iconElement().addEventListener('click', this._swatchIconClicked.bind(this, swatch), false); |
+ swatch.hideText(true); |
+ return swatch; |
+ } |
+ |
+ /** |
+ * @param {string} text |
+ * @return {?WebInspector.BezierSwatch} |
+ */ |
+ _createBezierSwatch(text) { |
+ if (!WebInspector.Geometry.CubicBezier.parse(text)) |
+ return null; |
+ var swatch = WebInspector.BezierSwatch.create(); |
+ swatch.setBezierText(text); |
+ swatch.iconElement().title = WebInspector.UIString('Open cubic bezier editor.'); |
+ swatch.iconElement().addEventListener('click', this._swatchIconClicked.bind(this, swatch), false); |
+ swatch.hideText(true); |
+ return swatch; |
+ } |
+ |
+ /** |
+ * @param {!Element} swatch |
+ * @param {!Event} event |
+ */ |
+ _swatchIconClicked(swatch, event) { |
+ event.consume(true); |
+ this._hadSwatchChange = false; |
+ this._muteSwatchProcessing = true; |
+ var swatchPosition = swatch[WebInspector.CSSSourceFrame.SwatchBookmark].position(); |
+ this.textEditor.setSelection(swatchPosition); |
+ this._editedSwatchTextRange = swatchPosition.clone(); |
+ this._editedSwatchTextRange.endColumn += swatch.textContent.length; |
+ this._currentSwatch = swatch; |
+ |
+ if (swatch instanceof WebInspector.ColorSwatch) |
+ this._showSpectrum(swatch); |
+ else if (swatch instanceof WebInspector.BezierSwatch) |
+ this._showBezierEditor(swatch); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.ColorSwatch} swatch |
+ */ |
+ _showSpectrum(swatch) { |
+ 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._spectrum.setColor(swatch.color(), swatch.format()); |
+ this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._swatchPopoverHidden.bind(this)); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.Event} event |
+ */ |
+ _spectrumResized(event) { |
+ this._swatchPopoverHelper.reposition(); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.Event} event |
+ */ |
+ _spectrumChanged(event) { |
+ var colorString = /** @type {string} */ (event.data); |
+ var color = WebInspector.Color.parse(colorString); |
+ if (!color) |
+ return; |
+ this._currentSwatch.setColor(color); |
+ this._changeSwatchText(colorString); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.BezierSwatch} swatch |
+ */ |
+ _showBezierEditor(swatch) { |
+ if (!this._bezierEditor) { |
+ this._bezierEditor = new WebInspector.BezierEditor(); |
+ this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this); |
+ } |
+ var cubicBezier = WebInspector.Geometry.CubicBezier.parse(swatch.bezierText()); |
+ 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(event) { |
+ var bezierString = /** @type {string} */ (event.data); |
+ this._currentSwatch.setBezierText(bezierString); |
+ this._changeSwatchText(bezierString); |
+ } |
+ |
+ /** |
+ * @param {string} text |
+ */ |
+ _changeSwatchText(text) { |
+ this._hadSwatchChange = true; |
+ this._textEditor.editRange(this._editedSwatchTextRange, text, '*swatch-text-changed'); |
+ this._editedSwatchTextRange.endColumn = this._editedSwatchTextRange.startColumn + text.length; |
+ } |
+ |
+ /** |
+ * @param {boolean} commitEdit |
+ */ |
+ _swatchPopoverHidden(commitEdit) { |
+ this._muteSwatchProcessing = false; |
+ if (!commitEdit && this._hadSwatchChange) |
+ this.textEditor.undo(); |
+ } |
+ |
+ /** |
+ * @override |
+ */ |
+ onTextEditorContentSet() { |
+ super.onTextEditorContentSet(); |
+ if (!this._muteSwatchProcessing) |
+ this._updateSwatches(0, this.textEditor.linesCount - 1); |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {!WebInspector.TextRange} oldRange |
+ * @param {!WebInspector.TextRange} newRange |
+ */ |
+ onTextChanged(oldRange, newRange) { |
+ super.onTextChanged(oldRange, newRange); |
+ if (!this._muteSwatchProcessing) |
+ this._updateSwatches(newRange.startLine, newRange.endLine); |
+ } |
+ |
+ /** |
+ * @param {string} char |
+ * @return {boolean} |
+ */ |
+ _isWordChar(char) { |
+ return WebInspector.TextUtils.isWordChar(char) || char === '.' || char === '-' || char === '$'; |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TextRange} prefixRange |
+ * @param {!WebInspector.TextRange} substituteRange |
+ * @return {?Promise.<!WebInspector.SuggestBox.Suggestions>} |
+ */ |
+ _cssSuggestions(prefixRange, substituteRange) { |
+ var prefix = this._textEditor.text(prefixRange); |
+ if (prefix.startsWith('$')) |
+ return null; |
+ |
+ var propertyToken = this._backtrackPropertyToken(prefixRange.startLine, prefixRange.startColumn - 1); |
+ if (!propertyToken) |
+ return null; |
+ |
+ var line = this._textEditor.line(prefixRange.startLine); |
+ var tokenContent = line.substring(propertyToken.startColumn, propertyToken.endColumn); |
+ var propertyValues = WebInspector.cssMetadata().propertyValues(tokenContent); |
+ return Promise.resolve(propertyValues.filter(value => value.startsWith(prefix)).map(value => ({title: value}))); |
+ } |
+ |
+ /** |
+ * @param {number} lineNumber |
+ * @param {number} columnNumber |
+ * @return {?{startColumn: number, endColumn: number, type: string}} |
+ */ |
+ _backtrackPropertyToken(lineNumber, columnNumber) { |
+ var backtrackDepth = 10; |
+ var tokenPosition = columnNumber; |
+ var line = this._textEditor.line(lineNumber); |
+ var seenColon = false; |
+ |
+ for (var i = 0; i < backtrackDepth && tokenPosition >= 0; ++i) { |
+ var token = this._textEditor.tokenAtTextPosition(lineNumber, tokenPosition); |
+ if (!token) |
+ return null; |
+ if (token.type === 'css-property') |
+ return seenColon ? token : null; |
+ if (token.type && !(token.type.indexOf('whitespace') !== -1 || token.type.startsWith('css-comment'))) |
return null; |
- }, |
- __proto__: WebInspector.UISourceCodeFrame.prototype |
+ if (!token.type && line.substring(token.startColumn, token.endColumn) === ':') { |
+ if (!seenColon) |
+ seenColon = true; |
+ else |
+ return null; |
+ } |
+ tokenPosition = token.startColumn - 1; |
+ } |
+ return null; |
+ } |
}; |
+ |
+/** @type {number} */ |
+WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300; |
+/** @type {symbol} */ |
+WebInspector.CSSSourceFrame.SwatchBookmark = Symbol('swatch'); |