OLD | NEW |
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.Widget} | 7 * @extends {WebInspector.Widget} |
8 */ | 8 */ |
9 WebInspector.ClassesPaneWidget = function() | 9 WebInspector.ClassesPaneWidget = function() |
10 { | 10 { |
11 WebInspector.Widget.call(this); | 11 WebInspector.Widget.call(this); |
12 this.element.className = "styles-element-classes-pane"; | 12 this.element.className = "styles-element-classes-pane"; |
13 var container = this.element.createChild("div", "title-container"); | 13 var container = this.element.createChild("div", "title-container"); |
14 this._input = container.createChild("div", "new-class-input monospace"); | 14 this._input = container.createChild("div", "new-class-input monospace"); |
15 this._input.setAttribute("placeholder", WebInspector.UIString("Add new class
")); | 15 this._input.setAttribute("placeholder", WebInspector.UIString("Add new class
")); |
16 this.setDefaultFocusedElement(this._input); | 16 this.setDefaultFocusedElement(this._input); |
17 this._classesContainer = this.element.createChild("div", "source-code"); | 17 this._classesContainer = this.element.createChild("div", "source-code"); |
18 this._classesContainer.classList.add("styles-element-classes-container"); | 18 this._classesContainer.classList.add("styles-element-classes-container"); |
19 this._prompt = new WebInspector.ClassesPaneWidget.ClassNamePrompt(); | 19 this._prompt = new WebInspector.ClassesPaneWidget.ClassNamePrompt(); |
20 this._prompt.setAutocompletionTimeout(0); | 20 this._prompt.setAutocompletionTimeout(0); |
21 this._prompt.renderAsBlock(); | 21 this._prompt.renderAsBlock(); |
22 | 22 |
23 var proxyElement = this._prompt.attach(this._input); | 23 var proxyElement = this._prompt.attach(this._input); |
24 proxyElement.addEventListener("keydown", this._onKeyDown.bind(this), false); | 24 proxyElement.addEventListener("keydown", this._onKeyDown.bind(this), false); |
25 | 25 |
26 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.DOMMutated, this._onDOMMutated, this); | 26 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.DOMMutated, this._onDOMMutated, this); |
27 /** @type {!Set<!WebInspector.DOMNode>} */ | 27 /** @type {!Set<!WebInspector.DOMNode>} */ |
28 this._mutatingNodes = new Set(); | 28 this._mutatingNodes = new Set(); |
29 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._upd
ate, this); | 29 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._upd
ate, this); |
30 } | 30 }; |
31 | 31 |
32 WebInspector.ClassesPaneWidget._classesSymbol = Symbol("WebInspector.ClassesPane
Widget._classesSymbol"); | 32 WebInspector.ClassesPaneWidget._classesSymbol = Symbol("WebInspector.ClassesPane
Widget._classesSymbol"); |
33 | 33 |
34 WebInspector.ClassesPaneWidget.prototype = { | 34 WebInspector.ClassesPaneWidget.prototype = { |
35 /** | 35 /** |
36 * @param {!Event} event | 36 * @param {!Event} event |
37 */ | 37 */ |
38 _onKeyDown: function(event) | 38 _onKeyDown: function(event) |
39 { | 39 { |
40 var text = event.target.textContent; | 40 var text = event.target.textContent; |
(...skipping 139 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
180 /** | 180 /** |
181 * @this {WebInspector.ClassesPaneWidget} | 181 * @this {WebInspector.ClassesPaneWidget} |
182 */ | 182 */ |
183 function onClassNameUpdated() | 183 function onClassNameUpdated() |
184 { | 184 { |
185 this._mutatingNodes.delete(node); | 185 this._mutatingNodes.delete(node); |
186 } | 186 } |
187 }, | 187 }, |
188 | 188 |
189 __proto__: WebInspector.Widget.prototype | 189 __proto__: WebInspector.Widget.prototype |
190 } | 190 }; |
191 | 191 |
192 /** | 192 /** |
193 * @constructor | 193 * @constructor |
194 * @implements {WebInspector.ToolbarItem.Provider} | 194 * @implements {WebInspector.ToolbarItem.Provider} |
195 */ | 195 */ |
196 WebInspector.ClassesPaneWidget.ButtonProvider = function() | 196 WebInspector.ClassesPaneWidget.ButtonProvider = function() |
197 { | 197 { |
198 this._button = new WebInspector.ToolbarToggle(WebInspector.UIString("Element
Classes"), ""); | 198 this._button = new WebInspector.ToolbarToggle(WebInspector.UIString("Element
Classes"), ""); |
199 this._button.setText(".cls"); | 199 this._button.setText(".cls"); |
200 this._button.element.classList.add("monospace"); | 200 this._button.element.classList.add("monospace"); |
201 this._button.addEventListener("click", this._clicked, this); | 201 this._button.addEventListener("click", this._clicked, this); |
202 this._view = new WebInspector.ClassesPaneWidget(); | 202 this._view = new WebInspector.ClassesPaneWidget(); |
203 } | 203 }; |
204 | 204 |
205 WebInspector.ClassesPaneWidget.ButtonProvider.prototype = { | 205 WebInspector.ClassesPaneWidget.ButtonProvider.prototype = { |
206 _clicked: function() | 206 _clicked: function() |
207 { | 207 { |
208 WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShow
ing() ? this._view : null, this._button); | 208 WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShow
ing() ? this._view : null, this._button); |
209 }, | 209 }, |
210 | 210 |
211 /** | 211 /** |
212 * @override | 212 * @override |
213 * @return {!WebInspector.ToolbarItem} | 213 * @return {!WebInspector.ToolbarItem} |
214 */ | 214 */ |
215 item: function() | 215 item: function() |
216 { | 216 { |
217 return this._button; | 217 return this._button; |
218 } | 218 } |
219 } | 219 }; |
220 | 220 |
221 /** | 221 /** |
222 * @constructor | 222 * @constructor |
223 * @extends {WebInspector.TextPrompt} | 223 * @extends {WebInspector.TextPrompt} |
224 */ | 224 */ |
225 WebInspector.ClassesPaneWidget.ClassNamePrompt = function() | 225 WebInspector.ClassesPaneWidget.ClassNamePrompt = function() |
226 { | 226 { |
227 WebInspector.TextPrompt.call(this, this._buildClassNameCompletions.bind(this
), " "); | 227 WebInspector.TextPrompt.call(this, this._buildClassNameCompletions.bind(this
), " "); |
228 this.setSuggestBoxEnabled(true); | 228 this.setSuggestBoxEnabled(true); |
229 this.disableDefaultSuggestionForEmptyInput(); | 229 this.disableDefaultSuggestionForEmptyInput(); |
230 this._selectedFrameId = ""; | 230 this._selectedFrameId = ""; |
231 this._classNamesPromise = null; | 231 this._classNamesPromise = null; |
232 } | 232 }; |
233 | 233 |
234 WebInspector.ClassesPaneWidget.ClassNamePrompt.prototype = { | 234 WebInspector.ClassesPaneWidget.ClassNamePrompt.prototype = { |
235 /** | 235 /** |
236 * @param {!WebInspector.DOMNode} selectedNode | 236 * @param {!WebInspector.DOMNode} selectedNode |
237 * @return {!Promise.<!Array.<string>>} | 237 * @return {!Promise.<!Array.<string>>} |
238 */ | 238 */ |
239 _getClassNames: function(selectedNode) | 239 _getClassNames: function(selectedNode) |
240 { | 240 { |
241 var promises = []; | 241 var promises = []; |
242 var completions = new Set(); | 242 var completions = new Set(); |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
279 | 279 |
280 this._classNamesPromise.then(completions => { | 280 this._classNamesPromise.then(completions => { |
281 if (prefix[0] === ".") | 281 if (prefix[0] === ".") |
282 completions = completions.map(value => "." + value); | 282 completions = completions.map(value => "." + value); |
283 var results = completions.filter(value => value.startsWith(prefix)); | 283 var results = completions.filter(value => value.startsWith(prefix)); |
284 completionsReadyCallback(results, 0); | 284 completionsReadyCallback(results, 0); |
285 }); | 285 }); |
286 }, | 286 }, |
287 | 287 |
288 __proto__: WebInspector.TextPrompt.prototype | 288 __proto__: WebInspector.TextPrompt.prototype |
289 } | 289 }; |
OLD | NEW |