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} */ | 45 /** @type {number} */ |
47 WebInspector.CSSSourceFrame.UpdateTimeout = 200; | 46 WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300; |
48 | 47 |
49 WebInspector.CSSSourceFrame.prototype = { | 48 WebInspector.CSSSourceFrame.prototype = { |
50 _registerShortcuts: function() | 49 _registerShortcuts: function() |
51 { | 50 { |
52 var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; | 51 var shortcutKeys = WebInspector.ShortcutsScreen.SourcesPanelShortcuts; |
53 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) | 52 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i) |
54 this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._han
dleUnitModification.bind(this, 1)); | 53 this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._han
dleUnitModification.bind(this, 1)); |
55 for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) | 54 for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i) |
56 this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._han
dleUnitModification.bind(this, -1)); | 55 this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._han
dleUnitModification.bind(this, -1)); |
57 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) | 56 for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i) |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
96 var newUnitText = this._modifyUnit(cssUnitText, change); | 95 var newUnitText = this._modifyUnit(cssUnitText, change); |
97 if (!newUnitText) | 96 if (!newUnitText) |
98 return false; | 97 return false; |
99 this.textEditor.editRange(cssUnitRange, newUnitText); | 98 this.textEditor.editRange(cssUnitRange, newUnitText); |
100 selection.startColumn = token.startColumn; | 99 selection.startColumn = token.startColumn; |
101 selection.endColumn = selection.startColumn + newUnitText.length; | 100 selection.endColumn = selection.startColumn + newUnitText.length; |
102 this.textEditor.setSelection(selection); | 101 this.textEditor.setSelection(selection); |
103 return true; | 102 return true; |
104 }, | 103 }, |
105 | 104 |
106 _updateColorSwatches: function() | 105 /** |
| 106 * @param {number} startLine |
| 107 * @param {number} endLine |
| 108 */ |
| 109 _updateColorSwatches: function(startLine, endLine) |
107 { | 110 { |
108 if (this._updateTimeout) | 111 var colorPositions = []; |
109 clearTimeout(this._updateTimeout); | |
110 this._updateTimeout = null; | |
111 | 112 |
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; | 113 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++) { | 114 for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) { |
130 var line = text.lineAt(lineNumber) + "\n"; | 115 var line = this.textEditor.line(lineNumber).substring(0, WebInspecto
r.CSSSourceFrame.maxSwatchProcessingLength) + "\n"; |
131 var match; | 116 var match; |
132 while ((match = colorRegex.exec(line)) !== null) { | 117 while ((match = colorRegex.exec(line)) !== null) { |
133 if (match.length < 2) | 118 if (match.length < 2) |
134 continue; | 119 continue; |
135 | |
136 var colorText = match[1]; | 120 var colorText = match[1]; |
137 var color = WebInspector.Color.parse(colorText); | 121 var color = WebInspector.Color.parse(colorText); |
138 if (color) | 122 if (color) |
139 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos
ition(color, lineNumber, match.index + 1, colorText.length)); | 123 colorPositions.push(new WebInspector.CSSSourceFrame.ColorPos
ition(color, lineNumber, match.index + 1, colorText.length)); |
140 } | 124 } |
141 } | 125 } |
142 | 126 |
143 return colorPositions; | 127 this.textEditor.operation(putColorSwatchesInline.bind(this)); |
| 128 |
| 129 /** |
| 130 * @this {WebInspector.CSSSourceFrame} |
| 131 */ |
| 132 function putColorSwatchesInline() |
| 133 { |
| 134 this._clearBookmarks(startLine, endLine); |
| 135 |
| 136 for (var i = 0; i < colorPositions.length; i++) { |
| 137 var colorPosition = colorPositions[i]; |
| 138 var swatch = WebInspector.ColorSwatch.create(); |
| 139 swatch.setColorText(colorPosition.color.asString(WebInspector.Co
lor.Format.Original)); |
| 140 swatch.iconElement().title = WebInspector.UIString("Open color p
icker."); |
| 141 swatch.hideText(true); |
| 142 var bookmark = this.textEditor.addBookmark(colorPosition.textRan
ge.startLine, colorPosition.textRange.startColumn, swatch); |
| 143 swatch.iconElement().addEventListener("click", this._showSpectru
m.bind(this, swatch, bookmark), true); |
| 144 } |
| 145 } |
144 }, | 146 }, |
145 | 147 |
146 /** | 148 /** |
147 * @param {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} colorPosition
s | 149 * @param {number} startLine |
| 150 * @param {number} endLine |
148 */ | 151 */ |
149 _putColorSwatchesInline: function(colorPositions) | 152 _clearBookmarks: function(startLine, endLine) |
150 { | 153 { |
151 this._clearColorBookmarks(); | 154 var range = new WebInspector.TextRange(startLine, 0, endLine, this.textE
ditor.line(endLine).length); |
152 if (!colorPositions) | 155 var markers = this.textEditor.bookmarks(range); |
153 return; | 156 for (var i = 0; i < markers.length; i++) |
154 | 157 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 }, | 158 }, |
175 | 159 |
176 /** | 160 /** |
177 * @param {!WebInspector.ColorSwatch} swatch | 161 * @param {!WebInspector.ColorSwatch} swatch |
178 * @param {!WebInspector.CSSSourceFrame.ColorPosition} colorPosition | 162 * @param {!CodeMirror.TextMarker} bookmark |
179 * @param {!Event} event | 163 * @param {!Event} event |
180 */ | 164 */ |
181 _showSpectrum: function(swatch, colorPosition, event) | 165 _showSpectrum: function(swatch, bookmark, event) |
182 { | 166 { |
183 event.consume(true); | 167 event.consume(true); |
184 if (this._swatchPopoverHelper.isShowing()) { | 168 if (this._swatchPopoverHelper.isShowing()) { |
185 this._swatchPopoverHelper.hide(true); | 169 this._swatchPopoverHelper.hide(true); |
186 return; | 170 return; |
187 } | 171 } |
188 this._hadSpectrumChange = false; | 172 this._hadSpectrumChange = false; |
| 173 var position = bookmark.find(); |
| 174 var colorText = swatch.color().asString(WebInspector.Color.Format.Origin
al); |
| 175 this._currentColorTextRange = new WebInspector.TextRange(position.line,
position.ch, position.line, position.ch + colorText.length); |
189 this._currentSwatch = swatch; | 176 this._currentSwatch = swatch; |
190 this._currentColorPosition = colorPosition; | 177 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(); | 178 this._spectrum = new WebInspector.Spectrum(); |
193 this._spectrum.setColor(swatch.color(), swatch.format()); | 179 this._spectrum.setColor(swatch.color(), swatch.format()); |
194 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged
, this._spectrumResized, this); | 180 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged
, this._spectrumResized, this); |
195 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange
d, this._spectrumChanged, this); | 181 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange
d, this._spectrumChanged, this); |
196 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi
s._spectrumHidden.bind(this)); | 182 this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), thi
s._spectrumHidden.bind(this)); |
197 }, | 183 }, |
198 | 184 |
199 /** | 185 /** |
200 * @param {!WebInspector.Event} event | 186 * @param {!WebInspector.Event} event |
201 */ | 187 */ |
202 _spectrumResized: function(event) | 188 _spectrumResized: function(event) |
203 { | 189 { |
204 this._swatchPopoverHelper.reposition(); | 190 this._swatchPopoverHelper.reposition(); |
205 }, | 191 }, |
206 | 192 |
207 /** | 193 /** |
208 * @param {!WebInspector.Event} event | 194 * @param {!WebInspector.Event} event |
209 */ | 195 */ |
210 _spectrumChanged: function(event) | 196 _spectrumChanged: function(event) |
211 { | 197 { |
212 this._muteColorProcessing = true; | 198 this._muteColorProcessing = true; |
213 this._hadSpectrumChange = true; | 199 this._hadSpectrumChange = true; |
214 var colorString = /** @type {string} */ (event.data); | 200 var colorString = /** @type {string} */ (event.data); |
215 this._currentSwatch.setColorText(colorString); | 201 this._currentSwatch.setColorText(colorString); |
216 this.textEditor.editRange(this._currentColorPosition.textRange, colorStr
ing, "*color-text-changed"); | 202 this._textEditor.editRange(this._currentColorTextRange, colorString, "*c
olor-text-changed"); |
217 this._currentColorPosition.color = WebInspector.Color.parse(colorString)
; | 203 this._currentColorTextRange.endColumn = this._currentColorTextRange.star
tColumn + colorString.length; |
218 this._currentColorPosition.textRange.endColumn = this._currentColorPosit
ion.textRange.startColumn + colorString.length; | |
219 }, | 204 }, |
220 | 205 |
221 /** | 206 /** |
222 * @param {boolean} commitEdit | 207 * @param {boolean} commitEdit |
223 */ | 208 */ |
224 _spectrumHidden: function(commitEdit) | 209 _spectrumHidden: function(commitEdit) |
225 { | 210 { |
226 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan
ged, this._spectrumResized, this); | 211 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChan
ged, this._spectrumResized, this); |
227 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha
nged, this._spectrumChanged, this); | 212 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha
nged, this._spectrumChanged, this); |
228 if (!commitEdit && this._hadSpectrumChange) | 213 if (!commitEdit && this._hadSpectrumChange) |
229 this.textEditor.undo(); | 214 this.textEditor.undo(); |
230 delete this._spectrum; | 215 delete this._spectrum; |
231 delete this._currentSwatch; | 216 delete this._currentSwatch; |
232 delete this._currentColorPosition; | 217 delete this._currentColorTextRange; |
233 this._muteColorProcessing = false; | 218 this._muteColorProcessing = false; |
234 this._updateColorSwatches(); | |
235 }, | 219 }, |
236 | 220 |
237 /** | 221 /** |
238 * @override | 222 * @override |
239 */ | 223 */ |
240 onTextEditorContentSet: function() | 224 onTextEditorContentSet: function() |
241 { | 225 { |
242 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi
s); | 226 WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(thi
s); |
243 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC
olorPicker")) | 227 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC
olorPicker")) |
244 this._updateColorSwatches(); | 228 this._updateColorSwatches(0, this.textEditor.linesCount - 1); |
245 }, | 229 }, |
246 | 230 |
247 /** | 231 /** |
248 * @override | 232 * @override |
249 * @param {!WebInspector.TextRange} oldRange | 233 * @param {!WebInspector.TextRange} oldRange |
250 * @param {!WebInspector.TextRange} newRange | 234 * @param {!WebInspector.TextRange} newRange |
251 */ | 235 */ |
252 onTextChanged: function(oldRange, newRange) | 236 onTextChanged: function(oldRange, newRange) |
253 { | 237 { |
254 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan
ge, newRange); | 238 WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRan
ge, newRange); |
255 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC
olorPicker")) { | 239 if (!this._muteColorProcessing && Runtime.experiments.isEnabled("sourceC
olorPicker")) |
256 if (this._updateTimeout) | 240 this._updateColorSwatches(newRange.startLine, newRange.endLine); |
257 clearTimeout(this._updateTimeout); | |
258 this._updateTimeout = setTimeout(this._updateColorSwatches.bind(this
), WebInspector.CSSSourceFrame.UpdateTimeout); | |
259 } | |
260 }, | 241 }, |
261 | 242 |
262 /** | 243 /** |
263 * @override | 244 * @override |
264 * @param {number} lineNumber | 245 * @param {number} lineNumber |
265 */ | 246 */ |
266 scrollChanged: function(lineNumber) | 247 scrollChanged: function(lineNumber) |
267 { | 248 { |
268 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu
mber); | 249 WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNu
mber); |
269 if (this._swatchPopoverHelper.isShowing()) | 250 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); | 355 var propertyToken = this._backtrackPropertyToken(editor, prefixRange.sta
rtLine, prefixRange.startColumn - 1); |
375 if (!propertyToken) | 356 if (!propertyToken) |
376 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub
stituteRange); | 357 return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, sub
stituteRange); |
377 | 358 |
378 var line = editor.line(prefixRange.startLine); | 359 var line = editor.line(prefixRange.startLine); |
379 var tokenContent = line.substring(propertyToken.startColumn, propertyTok
en.endColumn); | 360 var tokenContent = line.substring(propertyToken.startColumn, propertyTok
en.endColumn); |
380 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent
); | 361 var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent
); |
381 return keywords.startsWith(prefix); | 362 return keywords.startsWith(prefix); |
382 }, | 363 }, |
383 } | 364 } |
OLD | NEW |