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 = this._extractColorPositions(startLine, endLine); |
109 clearTimeout(this._updateTimeout); | 109 this.textEditor.operation(this._putColorSwatchesInline.bind(this, startL ine, endLine, colorPositions)); |
110 this._updateTimeout = null; | |
111 | |
112 var colorPositions = this._extractColorPositions(this.textEditor.text()) ; | |
113 this.textEditor.operation(this._putColorSwatchesInline.bind(this, colorP ositions)); | |
114 }, | 110 }, |
115 | 111 |
116 /** | 112 /** |
117 * @param {string} content | 113 * @param {number} startLine |
118 * @return {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} | 114 * @param {number} endLine |
115 * @return {!Array<!WebInspector.CSSSourceFrame.ColorPosition>} | |
119 */ | 116 */ |
120 _extractColorPositions: function(content) | 117 _extractColorPositions: function(startLine, endLine) |
lushnikov
2016/07/25 23:15:36
Now we have _updateColorSwatches, _extractColorPos
flandy
2016/07/26 01:16:46
I've combined these three functions into _updateCo
| |
121 { | 118 { |
122 if (!content) | |
123 return null; | |
124 | |
125 var colorPositions = []; | 119 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; | 120 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++) { | 121 for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) { |
130 var line = text.lineAt(lineNumber) + "\n"; | 122 var line = this.textEditor.line(lineNumber) + "\n"; |
131 var match; | 123 var match; |
132 while ((match = colorRegex.exec(line)) !== null) { | 124 while ((match = colorRegex.exec(line)) !== null) { |
133 if (match.length < 2) | 125 if (match.length < 2) |
134 continue; | 126 continue; |
135 | |
136 var colorText = match[1]; | 127 var colorText = match[1]; |
137 var color = WebInspector.Color.parse(colorText); | 128 var color = WebInspector.Color.parse(colorText); |
138 if (color) | 129 if (color) |
139 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos ition(color, lineNumber, match.index + 1, colorText.length)); | 130 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos ition(color, lineNumber, match.index + 1, colorText.length)); |
140 } | 131 } |
141 } | 132 } |
142 | |
143 return colorPositions; | 133 return colorPositions; |
144 }, | 134 }, |
145 | 135 |
146 /** | 136 /** |
147 * @param {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} colorPosition s | 137 * @param {number} startLine |
138 * @param {number} endLine | |
139 * @param {!Array<!WebInspector.CSSSourceFrame.ColorPosition>} colorPosition s | |
148 */ | 140 */ |
149 _putColorSwatchesInline: function(colorPositions) | 141 _putColorSwatchesInline: function(startLine, endLine, colorPositions) |
lushnikov
2016/07/25 23:15:36
let's not pass colorPositions from the outside
flandy
2016/07/26 01:16:46
Done.
| |
150 { | 142 { |
151 this._clearColorBookmarks(); | 143 this._clearBookmarks(startLine, endLine); |
152 if (!colorPositions) | |
153 return; | |
154 | 144 |
155 for (var i = 0; i < colorPositions.length; i++) { | 145 for (var i = 0; i < colorPositions.length; i++) { |
156 var colorPosition = colorPositions[i]; | 146 var colorPosition = colorPositions[i]; |
157 | |
158 var swatch = WebInspector.ColorSwatch.create(); | 147 var swatch = WebInspector.ColorSwatch.create(); |
159 swatch.setColorText(colorPosition.color.asString(WebInspector.Color. Format.Original)); | 148 swatch.setColorText(colorPosition.color.asString(WebInspector.Color. Format.Original)); |
160 swatch.iconElement().title = WebInspector.UIString("Open color picke r."); | 149 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); | 150 swatch.hideText(true); |
163 | |
164 var bookmark = this.textEditor.addBookmark(colorPosition.textRange.s tartLine, colorPosition.textRange.startColumn, swatch); | 151 var bookmark = this.textEditor.addBookmark(colorPosition.textRange.s tartLine, colorPosition.textRange.startColumn, swatch); |
165 this._colorBookmarks.push(bookmark); | 152 swatch.iconElement().addEventListener("click", this._showSpectrum.bi nd(this, swatch, bookmark), true); |
166 } | 153 } |
167 }, | 154 }, |
168 | 155 |
169 _clearColorBookmarks: function() | 156 /** |
157 * @param {number} startLine | |
158 * @param {number} endLine | |
159 */ | |
160 _clearBookmarks: function(startLine, endLine) | |
170 { | 161 { |
171 for (var i = 0; i < this._colorBookmarks.length; i++) | 162 var range = new WebInspector.TextRange(startLine, 0, endLine, this.textE ditor.line(endLine).length); |
172 this._colorBookmarks[i].clear(); | 163 var markers = this.textEditor.bookmarks(range); |
173 this._colorBookmarks = []; | 164 for (var i = 0; i < markers.length; i++) { |
165 var marker = markers[i]; | |
166 if (marker.type === "bookmark") | |
lushnikov
2016/07/25 23:15:36
what other type could there be? Shouldn't we hide
flandy
2016/07/26 01:16:46
Another type is "range", for example added with do
| |
167 marker.clear(); | |
168 } | |
174 }, | 169 }, |
175 | 170 |
176 /** | 171 /** |
177 * @param {!WebInspector.ColorSwatch} swatch | 172 * @param {!WebInspector.ColorSwatch} swatch |
178 * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition | 173 * @param {!CodeMirror.TextMarker} bookmark |
179 * @param {!Event} event | 174 * @param {!Event} event |
180 */ | 175 */ |
181 _showSpectrum: function(swatch, colorPosition, event) | 176 _showSpectrum: function(swatch, bookmark, event) |
182 { | 177 { |
183 event.consume(true); | 178 event.consume(true); |
184 if (this._swatchPopoverHelper.isShowing()) { | 179 if (this._swatchPopoverHelper.isShowing()) { |
185 this._swatchPopoverHelper.hide(true); | 180 this._swatchPopoverHelper.hide(true); |
186 return; | 181 return; |
187 } | 182 } |
188 this._hadSpectrumChange = false; | 183 this._hadSpectrumChange = false; |
184 var position = bookmark.find(); | |
185 var colorText = swatch.color().asString(WebInspector.Color.Format.Origin al); | |
186 this._currentTextRange = new WebInspector.TextRange(position.line, posit ion.ch, position.line, position.ch + colorText.length); | |
lushnikov
2016/07/25 23:15:36
this._currentTextRange is not descriptive enough (
flandy
2016/07/26 01:16:46
How about _currentColorTextRange
| |
189 this._currentSwatch = swatch; | 187 this._currentSwatch = swatch; |
190 this._currentColorPosition = colorPosition; | 188 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(); | 189 this._spectrum = new WebInspector.Spectrum(); |
193 this._spectrum.setColor(swatch.color(), swatch.format()); | 190 this._spectrum.setColor(swatch.color(), swatch.format()); |
194 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this); | 191 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this); |
195 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._spectrumChanged, this); | 192 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._spectrumChanged, this); |
196 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi s._spectrumHidden.bind(this)); | 193 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi s._spectrumHidden.bind(this)); |
197 }, | 194 }, |
198 | 195 |
199 /** | 196 /** |
200 * @param {!WebInspector.Event} event | 197 * @param {!WebInspector.Event} event |
201 */ | 198 */ |
202 _spectrumResized: function(event) | 199 _spectrumResized: function(event) |
203 { | 200 { |
204 this._swatchPopoverHelper.reposition(); | 201 this._swatchPopoverHelper.reposition(); |
205 }, | 202 }, |
206 | 203 |
207 /** | 204 /** |
208 * @param {!WebInspector.Event} event | 205 * @param {!WebInspector.Event} event |
209 */ | 206 */ |
210 _spectrumChanged: function(event) | 207 _spectrumChanged: function(event) |
211 { | 208 { |
212 this._muteColorProcessing = true; | 209 this._muteColorProcessing = true; |
213 this._hadSpectrumChange = true; | 210 this._hadSpectrumChange = true; |
214 var colorString = /** @type {string} */ (event.data); | 211 var colorString = /** @type {string} */ (event.data); |
215 this._currentSwatch.setColorText(colorString); | 212 this._currentSwatch.setColorText(colorString); |
216 this.textEditor.editRange(this._currentColorPosition.textRange, colorStr ing, "*color-text-changed"); | 213 this._textEditor.editRange(this._currentTextRange, colorString, "*color- text-changed"); |
217 this._currentColorPosition.color = WebInspector.Color.parse(colorString) ; | 214 this._currentTextRange.endColumn = this._currentTextRange.startColumn + colorString.length; |
218 this._currentColorPosition.textRange.endColumn = this._currentColorPosit ion.textRange.startColumn + colorString.length; | |
219 }, | 215 }, |
220 | 216 |
221 /** | 217 /** |
222 * @param {boolean} commitEdit | 218 * @param {boolean} commitEdit |
223 */ | 219 */ |
224 _spectrumHidden: function(commitEdit) | 220 _spectrumHidden: function(commitEdit) |
225 { | 221 { |
226 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan ged, this._spectrumResized, this); | 222 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan ged, this._spectrumResized, this); |
227 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._spectrumChanged, this); | 223 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._spectrumChanged, this); |
228 if (!commitEdit && this._hadSpectrumChange) | 224 if (!commitEdit && this._hadSpectrumChange) |
229 this.textEditor.undo(); | 225 this.textEditor.undo(); |
230 delete this._spectrum; | 226 delete this._spectrum; |
231 delete this._currentSwatch; | 227 delete this._currentSwatch; |
lushnikov
2016/07/25 23:15:36
for some reason you don't delete this._currentText
flandy
2016/07/26 01:16:46
We can delete them all or leave them all. It shoul
| |
232 delete this._currentColorPosition; | |
233 this._muteColorProcessing = false; | 228 this._muteColorProcessing = false; |
234 this._updateColorSwatches(); | |
235 }, | 229 }, |
236 | 230 |
237 /** | 231 /** |
238 * @override | 232 * @override |
239 */ | 233 */ |
240 onTextEditorContentSet: function() | 234 onTextEditorContentSet: function() |
241 { | 235 { |
242 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi s); | 236 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi s); |
243 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) | 237 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) |
244 this._updateColorSwatches(); | 238 this._updateColorSwatches(0, this.textEditor.linesCount - 1); |
245 }, | 239 }, |
246 | 240 |
247 /** | 241 /** |
248 * @override | 242 * @override |
249 * @param {!WebInspector.TextRange} oldRange | 243 * @param {!WebInspector.TextRange} oldRange |
250 * @param {!WebInspector.TextRange} newRange | 244 * @param {!WebInspector.TextRange} newRange |
251 */ | 245 */ |
252 onTextChanged: function(oldRange, newRange) | 246 onTextChanged: function(oldRange, newRange) |
253 { | 247 { |
254 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan ge, newRange); | 248 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan ge, newRange); |
255 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) { | 249 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC olorPicker")) |
256 if (this._updateTimeout) | 250 this._updateColorSwatches(newRange.startLine, newRange.endLine); |
257 clearTimeout(this._updateTimeout); | |
258 this._updateTimeout = setTimeout(this._updateColorSwatches.bind(this ), WebInspector.CSSSourceFrame.UpdateTimeout); | |
259 } | |
260 }, | 251 }, |
261 | 252 |
262 /** | 253 /** |
263 * @override | 254 * @override |
264 * @param {number} lineNumber | 255 * @param {number} lineNumber |
265 */ | 256 */ |
266 scrollChanged: function(lineNumber) | 257 scrollChanged: function(lineNumber) |
267 { | 258 { |
268 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu mber); | 259 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu mber); |
269 if (this._swatchPopoverHelper.isShowing()) | 260 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); | 365 var propertyToken = this._backtrackPropertyToken(editor, prefixRange.sta rtLine, prefixRange.startColumn - 1); |
375 if (!propertyToken) | 366 if (!propertyToken) |
376 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub stituteRange); | 367 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub stituteRange); |
377 | 368 |
378 var line = editor.line(prefixRange.startLine); | 369 var line = editor.line(prefixRange.startLine); |
379 var tokenContent = line.substring(propertyToken.startColumn, propertyTok en.endColumn); | 370 var tokenContent = line.substring(propertyToken.startColumn, propertyTok en.endColumn); |
380 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent ); | 371 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent ); |
381 return keywords.startsWith(prefix); | 372 return keywords.startsWith(prefix); |
382 }, | 373 }, |
383 } | 374 } |
OLD | NEW |