| 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 |