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

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: Cap columns to speed up loading of minified style sheets 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} */
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
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
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 }
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