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

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: Added tests Created 4 years, 5 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
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 = 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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698