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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js

Issue 2140753003: DevTools: remove BaseToolbarPaneWidget. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: lcean 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
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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 }
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698