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

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

Issue 2173913002: DevTools: Optimize source color picker to analyze changed lines (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@escSpectrum
Patch Set: Address last comment 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 unified diff | Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/source_frame/CodeMirrorTextEditor.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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 }
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/source_frame/CodeMirrorTextEditor.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698