| 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.ElementsPanel.BaseToolbarPaneWidget} | 7 * @extends {WebInspector.Widget} |
| 8 * @param {!WebInspector.ToolbarItem} toolbarItem | |
| 9 */ | 8 */ |
| 10 WebInspector.ClassesPaneWidget = function(toolbarItem) | 9 WebInspector.ClassesPaneWidget = function() |
| 11 { | 10 { |
| 12 WebInspector.ElementsPanel.BaseToolbarPaneWidget.call(this, toolbarItem); | 11 WebInspector.Widget.call(this); |
| 13 this.element.className = "styles-element-classes-pane"; | 12 this.element.className = "styles-element-classes-pane"; |
| 14 var container = this.element.createChild("div", "title-container"); | 13 var container = this.element.createChild("div", "title-container"); |
| 15 var input = container.createChild("input", "new-class-input monospace"); | 14 this._input = container.createChild("input", "new-class-input monospace"); |
| 16 input.placeholder = WebInspector.UIString("Add new class"); | 15 this._input.placeholder = WebInspector.UIString("Add new class"); |
| 17 input.addEventListener("keydown", this._onKeyDown.bind(this), false); | 16 this._input.addEventListener("keydown", this._onKeyDown.bind(this), false); |
| 18 this.setDefaultFocusedElement(input); | 17 this.setDefaultFocusedElement(this._input); |
| 19 this._classesContainer = this.element.createChild("div", "source-code"); | 18 this._classesContainer = this.element.createChild("div", "source-code"); |
| 20 this._classesContainer.classList.add("styles-element-classes-container"); | 19 this._classesContainer.classList.add("styles-element-classes-container"); |
| 21 | 20 |
| 22 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.DOMMutated, this._onDOMMutated, this); | 21 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.DOMMutated, this._onDOMMutated, this); |
| 23 /** @type {!Set<!WebInspector.DOMNode>} */ | 22 /** @type {!Set<!WebInspector.DOMNode>} */ |
| 24 this._mutatingNodes = new Set(); | 23 this._mutatingNodes = new Set(); |
| 24 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._upd
ate, this); |
| 25 } | 25 } |
| 26 | 26 |
| 27 WebInspector.ClassesPaneWidget._classesSymbol = Symbol("WebInspector.ClassesPane
Widget._classesSymbol"); | 27 WebInspector.ClassesPaneWidget._classesSymbol = Symbol("WebInspector.ClassesPane
Widget._classesSymbol"); |
| 28 | 28 |
| 29 WebInspector.ClassesPaneWidget.prototype = { | 29 WebInspector.ClassesPaneWidget.prototype = { |
| 30 /** | 30 /** |
| 31 * @param {!Event} event | 31 * @param {!Event} event |
| 32 */ | 32 */ |
| 33 _onKeyDown: function(event) | 33 _onKeyDown: function(event) |
| 34 { | 34 { |
| (...skipping 13 matching lines...) Expand all Loading... |
| 48 | 48 |
| 49 event.target.value = ""; | 49 event.target.value = ""; |
| 50 var classNames = text.split(/[.,\s]/); | 50 var classNames = text.split(/[.,\s]/); |
| 51 for (var className of classNames) { | 51 for (var className of classNames) { |
| 52 var className = className.trim(); | 52 var className = className.trim(); |
| 53 if (!className.length) | 53 if (!className.length) |
| 54 continue; | 54 continue; |
| 55 this._toggleClass(node, className, true); | 55 this._toggleClass(node, className, true); |
| 56 } | 56 } |
| 57 this._installNodeClasses(node); | 57 this._installNodeClasses(node); |
| 58 this.update(); | 58 this._update(); |
| 59 event.consume(true); | 59 event.consume(true); |
| 60 }, | 60 }, |
| 61 | 61 |
| 62 /** | 62 /** |
| 63 * @param {!WebInspector.Event} event | 63 * @param {!WebInspector.Event} event |
| 64 */ | 64 */ |
| 65 _onDOMMutated: function(event) | 65 _onDOMMutated: function(event) |
| 66 { | 66 { |
| 67 var node = /** @type {!WebInspector.DOMNode} */(event.data); | 67 var node = /** @type {!WebInspector.DOMNode} */(event.data); |
| 68 if (this._mutatingNodes.has(node)) | 68 if (this._mutatingNodes.has(node)) |
| 69 return; | 69 return; |
| 70 delete node[WebInspector.ClassesPaneWidget._classesSymbol]; | 70 delete node[WebInspector.ClassesPaneWidget._classesSymbol]; |
| 71 this.update(); | 71 this._update(); |
| 72 }, | 72 }, |
| 73 | 73 |
| 74 /** | 74 /** |
| 75 * @override | 75 * @override |
| 76 * @return {!Promise.<?>} | |
| 77 */ | 76 */ |
| 78 doUpdate: function() | 77 wasShown: function() |
| 79 { | 78 { |
| 79 this._update(); |
| 80 }, |
| 81 |
| 82 _update: function() |
| 83 { |
| 84 if (!this.isShowing()) |
| 85 return; |
| 86 |
| 87 var node = WebInspector.context.flavor(WebInspector.DOMNode); |
| 88 if (node) |
| 89 node = node.enclosingElementOrSelf(); |
| 90 |
| 80 this._classesContainer.removeChildren(); | 91 this._classesContainer.removeChildren(); |
| 81 var node = WebInspector.context.flavor(WebInspector.DOMNode); | 92 this._input.disabled = !node; |
| 93 |
| 82 if (!node) | 94 if (!node) |
| 83 return Promise.resolve(); | 95 return; |
| 84 | 96 |
| 85 var classes = this._nodeClasses(node); | 97 var classes = this._nodeClasses(node); |
| 86 var keys = classes.keysArray(); | 98 var keys = classes.keysArray(); |
| 87 keys.sort(String.caseInsensetiveComparator); | 99 keys.sort(String.caseInsensetiveComparator); |
| 88 for (var i = 0; i < keys.length; ++i) { | 100 for (var i = 0; i < keys.length; ++i) { |
| 89 var className = keys[i]; | 101 var className = keys[i]; |
| 90 var label = createCheckboxLabel(className, classes.get(className)); | 102 var label = createCheckboxLabel(className, classes.get(className)); |
| 91 label.classList.add("monospace"); | 103 label.classList.add("monospace"); |
| 92 label.checkboxElement.addEventListener("click", this._onClick.bind(t
his, className), false); | 104 label.checkboxElement.addEventListener("click", this._onClick.bind(t
his, className), false); |
| 93 this._classesContainer.appendChild(label); | 105 this._classesContainer.appendChild(label); |
| 94 } | 106 } |
| 95 return Promise.resolve(); | |
| 96 }, | 107 }, |
| 97 | 108 |
| 98 /** | 109 /** |
| 99 * @param {string} className | 110 * @param {string} className |
| 100 * @param {!Event} event | 111 * @param {!Event} event |
| 101 */ | 112 */ |
| 102 _onClick: function(className, event) | 113 _onClick: function(className, event) |
| 103 { | 114 { |
| 104 var node = WebInspector.context.flavor(WebInspector.DOMNode); | 115 var node = WebInspector.context.flavor(WebInspector.DOMNode); |
| 105 if (!node) | 116 if (!node) |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 161 | 172 |
| 162 /** | 173 /** |
| 163 * @this {WebInspector.ClassesPaneWidget} | 174 * @this {WebInspector.ClassesPaneWidget} |
| 164 */ | 175 */ |
| 165 function onClassNameUpdated() | 176 function onClassNameUpdated() |
| 166 { | 177 { |
| 167 this._mutatingNodes.delete(node); | 178 this._mutatingNodes.delete(node); |
| 168 } | 179 } |
| 169 }, | 180 }, |
| 170 | 181 |
| 171 /** | 182 __proto__: WebInspector.Widget.prototype |
| 172 * @override | |
| 173 * @param {?WebInspector.DOMNode} newNode | |
| 174 */ | |
| 175 onNodeChanged: function(newNode) | |
| 176 { | |
| 177 this.update(); | |
| 178 }, | |
| 179 | |
| 180 __proto__: WebInspector.ElementsPanel.BaseToolbarPaneWidget.prototype | |
| 181 } | 183 } |
| 182 | 184 |
| 183 /** | 185 /** |
| 184 * @constructor | 186 * @constructor |
| 185 * @implements {WebInspector.ToolbarItem.Provider} | 187 * @implements {WebInspector.ToolbarItem.Provider} |
| 186 */ | 188 */ |
| 187 WebInspector.ClassesPaneWidget.ButtonProvider = function() | 189 WebInspector.ClassesPaneWidget.ButtonProvider = function() |
| 188 { | 190 { |
| 189 this._button = new WebInspector.ToolbarToggle(WebInspector.UIString("Element
Classes"), ""); | 191 this._button = new WebInspector.ToolbarToggle(WebInspector.UIString("Element
Classes"), ""); |
| 190 this._button.setText(".cls"); | 192 this._button.setText(".cls"); |
| 191 this._button.element.classList.add("monospace"); | 193 this._button.element.classList.add("monospace"); |
| 192 this._button.addEventListener("click", this._clicked, this); | 194 this._button.addEventListener("click", this._clicked, this); |
| 193 this._view = new WebInspector.ClassesPaneWidget(this.item()); | 195 this._view = new WebInspector.ClassesPaneWidget(); |
| 194 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nod
eChanged, this); | |
| 195 this._nodeChanged(); | |
| 196 } | 196 } |
| 197 | 197 |
| 198 WebInspector.ClassesPaneWidget.ButtonProvider.prototype = { | 198 WebInspector.ClassesPaneWidget.ButtonProvider.prototype = { |
| 199 _clicked: function() | 199 _clicked: function() |
| 200 { | 200 { |
| 201 WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShow
ing() ? this._view : null); | 201 WebInspector.ElementsPanel.instance().showToolbarPane(!this._view.isShow
ing() ? this._view : null, this._button); |
| 202 }, | 202 }, |
| 203 | 203 |
| 204 /** | 204 /** |
| 205 * @override | 205 * @override |
| 206 * @return {!WebInspector.ToolbarItem} | 206 * @return {!WebInspector.ToolbarItem} |
| 207 */ | 207 */ |
| 208 item: function() | 208 item: function() |
| 209 { | 209 { |
| 210 return this._button; | 210 return this._button; |
| 211 }, | |
| 212 | |
| 213 _nodeChanged: function() | |
| 214 { | |
| 215 var node = WebInspector.context.flavor(WebInspector.DOMNode); | |
| 216 var enabled = !!node; | |
| 217 this._button.setEnabled(enabled); | |
| 218 if (!enabled && this._button.toggled()) | |
| 219 WebInspector.ElementsPanel.instance().showToolbarPane(null); | |
| 220 } | 211 } |
| 221 } | 212 } |
| OLD | NEW |