OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 20 matching lines...) Expand all Loading... | |
31 /** | 31 /** |
32 * @constructor | 32 * @constructor |
33 * @extends {WebInspector.UISourceCodeFrame} | 33 * @extends {WebInspector.UISourceCodeFrame} |
34 * @param {!WebInspector.UISourceCode} uiSourceCode | 34 * @param {!WebInspector.UISourceCode} uiSourceCode |
35 */ | 35 */ |
36 WebInspector.CSSSourceFrame = function(uiSourceCode) | 36 WebInspector.CSSSourceFrame = function(uiSourceCode) |
37 { | 37 { |
38 WebInspector.UISourceCodeFrame.call(this, uiSourceCode); | 38 WebInspector.UISourceCodeFrame.call(this, uiSourceCode); |
39 this.textEditor.setAutocompleteDelegate(new WebInspector.CSSSourceFrame.Auto completeDelegate()); | 39 this.textEditor.setAutocompleteDelegate(new WebInspector.CSSSourceFrame.Auto completeDelegate()); |
40 this._registerShortcuts(); | 40 this._registerShortcuts(); |
41 this._colorBookmarks = []; | |
42 this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper(); | 41 this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper(); |
43 this._muteColorProcessing = false; | 42 this._muteColorProcessing = false; |
44 } | 43 } |
45 | 44 |
46 /** @type {number} */ | |
47 WebInspector.CSSSourceFrame.UpdateTimeout = 200; | |
48 | |
49 WebInspector.CSSSourceFrame.prototype = { | 45 WebInspector.CSSSourceFrame.prototype = { |
50 _registerShortcuts: function() | 46 _registerShortcuts: function() |
51 { | 47 { |
52 var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; | 48 var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; |
53 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) | 49 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) |
54 this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._han dleUnitModification.bind(this, 1)); | 50 this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._han dleUnitModification.bind(this, 1)); |
55 for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) | 51 for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) |
56 this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._han dleUnitModification.bind(this, -1)); | 52 this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._han dleUnitModification.bind(this, -1)); |
57 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) | 53 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) |
58 this.addShortcut(shortcutKeys.IncreaseCSSUnitByTen[i].key, this._han dleUnitModification.bind(this, 10)); | 54 this.addShortcut(shortcutKeys.IncreaseCSSUnitByTen[i].key, this._han dleUnitModification.bind(this, 10)); |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
96 var newUnitText = this._modifyUnit(cssUnitText, change); | 92 var newUnitText = this._modifyUnit(cssUnitText, change); |
97 if (!newUnitText) | 93 if (!newUnitText) |
98 return false; | 94 return false; |
99 this.textEditor.editRange(cssUnitRange, newUnitText); | 95 this.textEditor.editRange(cssUnitRange, newUnitText); |
100 selection.startColumn = token.startColumn; | 96 selection.startColumn = token.startColumn; |
101 selection.endColumn = selection.startColumn + newUnitText.length; | 97 selection.endColumn = selection.startColumn + newUnitText.length; |
102 this.textEditor.setSelection(selection); | 98 this.textEditor.setSelection(selection); |
103 return true; | 99 return true; |
104 }, | 100 }, |
105 | 101 |
106 _updateColorSwatches: function() | 102 /** |
103 * @param {number} startLine | |
104 * @param {number} endLine | |
105 */ | |
106 _updateColorSwatches: function(startLine, endLine) | |
107 { | 107 { |
108 if (this._updateTimeout) | 108 var colorPositions = []; |
109 clearTimeout(this._updateTimeout); | |
110 this._updateTimeout = null; | |
111 | 109 |
112 var colorPositions = this._extractColorPositions(this.textEditor.text()) ; | |
113 this.textEditor.operation(this._putColorSwatchesInline.bind(this, colorP ositions)); | |
114 }, | |
115 | |
116 /** | |
117 * @param {string} content | |
118 * @return {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} | |
119 */ | |
120 _extractColorPositions: function(content) | |
121 { | |
122 if (!content) | |
123 return null; | |
124 | |
125 var colorPositions = []; | |
126 var text = new WebInspector.Text(content); | |
127 var numberOfLines = text.lineCount(); | |
128 var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a -f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi; | 110 var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a -f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi; |
129 for (var lineNumber = 0; lineNumber < numberOfLines; lineNumber++) { | 111 var maxColumnsSupported = 300; |
lushnikov
2016/07/26 22:41:25
let's extract this
WebInspector.CSSSourceFrame.max
flandy
2016/07/26 23:24:15
Done.
| |
130 var line = text.lineAt(lineNumber) + "\n"; | 112 for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) { |
113 var line = this.textEditor.line(lineNumber).substring(0, maxColumnsS upported) + "\n"; | |
131 var match; | 114 var match; |
132 while ((match = colorRegex.exec(line)) !== null) { | 115 while ((match = colorRegex.exec(line)) !== null) { |
133 if (match.length < 2) | 116 if (match.length < 2) |
134 continue; | 117 continue; |
135 | |
136 var colorText = match[1]; | 118 var colorText = match[1]; |
137 var color = WebInspector.Color.parse(colorText); | 119 var color = WebInspector.Color.parse(colorText); |
138 if (color) | 120 if (color) |
139 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos ition(color, lineNumber, match.index + 1, colorText.length)); | 121 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos ition(color, lineNumber, match.index + 1, colorText.length)); |
140 } | 122 } |
141 } | 123 } |
142 | 124 |
143 return colorPositions; | 125 this.textEditor.operation(putColorSwatchesInline.bind(this)); |
126 | |
127 /** | |
128 * @this {WebInspector.CSSSourceFrame} | |
129 */ | |
130 function putColorSwatchesInline() | |
131 { | |
132 this._clearBookmarks(startLine, endLine); | |
133 | |
134 for (var i = 0; i < colorPositions.length; i++) { | |
135 var colorPosition = colorPositions[i]; | |
136 var swatch = WebInspector.ColorSwatch.create(); | |
137 swatch.setColorText(colorPosition.color.asString(WebInspector.Co lor.Format.Original)); | |
138 swatch.iconElement().title = WebInspector.UIString("Open color p icker."); | |
139 swatch.hideText(true); | |
140 var bookmark = this.textEditor.addBookmark(colorPosition.textRan ge.startLine, colorPosition.textRange.startColumn, swatch); | |
141 swatch.iconElement().addEventListener("click", this._showSpectru m.bind(this, swatch, bookmark), true); | |
142 } | |
143 } | |
144 }, | 144 }, |
145 | 145 |
146 /** | 146 /** |
147 * @param {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} colorPosition s | 147 * @param {number} startLine |
148 * @param {number} endLine | |
148 */ | 149 */ |
149 _putColorSwatchesInline: function(colorPositions) | 150 _clearBookmarks: function(startLine, endLine) |
150 { | 151 { |
151 this._clearColorBookmarks(); | 152 var range = new WebInspector.TextRange(startLine, 0, endLine, this.textE ditor.line(endLine).length); |
152 if (!colorPositions) | 153 var markers = this.textEditor.bookmarks(range); |
153 return; | 154 for (var i = 0; i < markers.length; i++) |
154 | 155 markers[i].clear(); |
155 for (var i = 0; i < colorPositions.length; i++) { | |
156 var colorPosition = colorPositions[i]; | |
157 | |
158 var swatch = WebInspector.ColorSwatch.create(); | |
159 swatch.setColorText(colorPosition.color.asString(WebInspector.Color. Format.Original)); | |
160 swatch.iconElement().title = WebInspector.UIString("Open color picke r."); | |
161 swatch.iconElement().addEventListener("click", this._showSpectrum.bi nd(this, swatch, colorPosition), true); | |
162 swatch.hideText(true); | |
163 | |
164 var bookmark = this.textEditor.addBookmark(colorPosition.textRange.s tartLine, colorPosition.textRange.startColumn, swatch); | |
165 this._colorBookmarks.push(bookmark); | |
166 } | |
167 }, | |
168 | |
169 _clearColorBookmarks: function() | |
170 { | |
171 for (var i = 0; i < this._colorBookmarks.length; i++) | |
172 this._colorBookmarks[i].clear(); | |
173 this._colorBookmarks = []; | |
174 }, | 156 }, |
175 | 157 |
176 /** | 158 /** |
177 * @param {!WebInspector.ColorSwatch} swatch | 159 * @param {!WebInspector.ColorSwatch} swatch |
178 * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition | 160 * @param {!CodeMirror.TextMarker} bookmark |
179 * @param {!Event} event | 161 * @param {!Event} event |
180 */ | 162 */ |
181 _showSpectrum: function(swatch, colorPosition, event) | 163 _showSpectrum: function(swatch, bookmark, event) |
182 { | 164 { |
183 event.consume(true); | 165 event.consume(true); |
184 if (this._swatchPopoverHelper.isShowing()) { | 166 if (this._swatchPopoverHelper.isShowing()) { |
185 this._swatchPopoverHelper.hide(true); | 167 this._swatchPopoverHelper.hide(true); |
186 return; | 168 return; |
187 } | 169 } |
188 this._hadSpectrumChange = false; | 170 this._hadSpectrumChange = false; |
171 var position = bookmark.find(); | |
172 var colorText = swatch.color().asString(WebInspector.Color.Format.Origin al); | |
173 this._currentColorTextRange = new WebInspector.TextRange(position.line, position.ch, position.line, position.ch + colorText.length); | |
189 this._currentSwatch = swatch; | 174 this._currentSwatch = swatch; |
190 this._currentColorPosition = colorPosition; | 175 this.textEditor.setSelection(WebInspector.TextRange.createFromLocation(p osition.line, position.ch)); |
191 this.textEditor.setSelection(WebInspector.TextRange.createFromLocation(c olorPosition.textRange.startLine, colorPosition.textRange.startColumn)); | |
192 this._spectrum = new WebInspector.Spectrum(); | 176 this._spectrum = new WebInspector.Spectrum(); |
193 this._spectrum.setColor(swatch.color(), swatch.format()); | 177 this._spectrum.setColor(swatch.color(), swatch.format()); |
194 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this); | 178 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this); |
195 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._spectrumChanged, this); | 179 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._spectrumChanged, this); |
196 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi s._spectrumHidden.bind(this)); | 180 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi s._spectrumHidden.bind(this)); |
197 }, | 181 }, |
198 | 182 |
199 /** | 183 /** |
200 * @param {!WebInspector.Event} event | 184 * @param {!WebInspector.Event} event |
201 */ | 185 */ |
202 _spectrumResized: function(event) | 186 _spectrumResized: function(event) |
203 { | 187 { |
204 this._swatchPopoverHelper.reposition(); | 188 this._swatchPopoverHelper.reposition(); |
205 }, | 189 }, |
206 | 190 |
207 /** | 191 /** |
208 * @param {!WebInspector.Event} event | 192 * @param {!WebInspector.Event} event |
209 */ | 193 */ |
210 _spectrumChanged: function(event) | 194 _spectrumChanged: function(event) |
211 { | 195 { |
212 this._muteColorProcessing = true; | 196 this._muteColorProcessing = true; |
213 this._hadSpectrumChange = true; | 197 this._hadSpectrumChange = true; |
214 var colorString = /** @type {string} */ (event.data); | 198 var colorString = /** @type {string} */ (event.data); |
215 this._currentSwatch.setColorText(colorString); | 199 this._currentSwatch.setColorText(colorString); |
216 this.textEditor.editRange(this._currentColorPosition.textRange, colorStr ing, "*color-text-changed"); | 200 this._textEditor.editRange(this._currentColorTextRange, colorString, "*c olor-text-changed"); |
217 this._currentColorPosition.color = WebInspector.Color.parse(colorString) ; | 201 this._currentColorTextRange.endColumn = this._currentColorTextRange.star tColumn + colorString.length; |
218 this._currentColorPosition.textRange.endColumn = this._currentColorPosit ion.textRange.startColumn + colorString.length; | |
219 }, | 202 }, |
220 | 203 |
221 /** | 204 /** |
222 * @param {boolean} commitEdit | 205 * @param {boolean} commitEdit |
223 */ | 206 */ |
224 _spectrumHidden: function(commitEdit) | 207 _spectrumHidden: function(commitEdit) |
225 { | 208 { |
226 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan ged, this._spectrumResized, this); | 209 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan ged, this._spectrumResized, this); |
227 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._spectrumChanged, this); | 210 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._spectrumChanged, this); |
228 if (!commitEdit && this._hadSpectrumChange) | 211 if (!commitEdit && this._hadSpectrumChange) |
229 this.textEditor.undo(); | 212 this.textEditor.undo(); |
230 delete this._spectrum; | 213 delete this._spectrum; |
231 delete this._currentSwatch; | 214 delete this._currentSwatch; |
232 delete this._currentColorPosition; | 215 delete this._currentColorTextRange; |
233 this._muteColorProcessing = false; | 216 this._muteColorProcessing = false; |
234 this._updateColorSwatches(); | |
235 }, | 217 }, |
236 | 218 |
237 /** | 219 /** |
238 * @override | 220 * @override |
239 */ | 221 */ |
240 onTextEditorContentSet: function() | 222 onTextEditorContentSet: function() |
241 { | 223 { |
242 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi s); | 224 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi s); |
243 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) | 225 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) |
244 this._updateColorSwatches(); | 226 this._updateColorSwatches(0, this.textEditor.linesCount - 1); |
245 }, | 227 }, |
246 | 228 |
247 /** | 229 /** |
248 * @override | 230 * @override |
249 * @param {!WebInspector.TextRange} oldRange | 231 * @param {!WebInspector.TextRange} oldRange |
250 * @param {!WebInspector.TextRange} newRange | 232 * @param {!WebInspector.TextRange} newRange |
251 */ | 233 */ |
252 onTextChanged: function(oldRange, newRange) | 234 onTextChanged: function(oldRange, newRange) |
253 { | 235 { |
254 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan ge, newRange); | 236 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan ge, newRange); |
255 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) { | 237 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) |
256 if (this._updateTimeout) | 238 this._updateColorSwatches(newRange.startLine, newRange.endLine); |
257 clearTimeout(this._updateTimeout); | |
258 this._updateTimeout = setTimeout(this._updateColorSwatches.bind(this ), WebInspector.CSSSourceFrame.UpdateTimeout); | |
259 } | |
260 }, | 239 }, |
261 | 240 |
262 /** | 241 /** |
263 * @override | 242 * @override |
264 * @param {number} lineNumber | 243 * @param {number} lineNumber |
265 */ | 244 */ |
266 scrollChanged: function(lineNumber) | 245 scrollChanged: function(lineNumber) |
267 { | 246 { |
268 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu mber); | 247 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu mber); |
269 if (this._swatchPopoverHelper.isShowing()) | 248 if (this._swatchPopoverHelper.isShowing()) |
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
374 var propertyToken = this._backtrackPropertyToken(editor, prefixRange.sta rtLine, prefixRange.startColumn - 1); | 353 var propertyToken = this._backtrackPropertyToken(editor, prefixRange.sta rtLine, prefixRange.startColumn - 1); |
375 if (!propertyToken) | 354 if (!propertyToken) |
376 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub stituteRange); | 355 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub stituteRange); |
377 | 356 |
378 var line = editor.line(prefixRange.startLine); | 357 var line = editor.line(prefixRange.startLine); |
379 var tokenContent = line.substring(propertyToken.startColumn, propertyTok en.endColumn); | 358 var tokenContent = line.substring(propertyToken.startColumn, propertyTok en.endColumn); |
380 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent ); | 359 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent ); |
381 return keywords.startsWith(prefix); | 360 return keywords.startsWith(prefix); |
382 }, | 361 }, |
383 } | 362 } |
OLD | NEW |