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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/accessibility/AXTreePane.js

Issue 2493373002: DevTools: rename WebInspector into modules. (Closed)
Patch Set: for bots Created 4 years, 1 month 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 // Copyright 2016 The Chromium Authors. All rights reserved. 1 // Copyright 2016 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 * @unrestricted 5 * @unrestricted
6 */ 6 */
7 WebInspector.AXTreePane = class extends WebInspector.AccessibilitySubPane { 7 Accessibility.AXTreePane = class extends Accessibility.AccessibilitySubPane {
8 constructor() { 8 constructor() {
9 super(WebInspector.UIString('Accessibility Tree')); 9 super(Common.UIString('Accessibility Tree'));
10 10
11 this._treeOutline = this.createTreeOutline(); 11 this._treeOutline = this.createTreeOutline();
12 12
13 this.element.classList.add('accessibility-computed'); 13 this.element.classList.add('accessibility-computed');
14 14
15 this._expandedNodes = new Set(); 15 this._expandedNodes = new Set();
16 } 16 }
17 17
18 /** 18 /**
19 * @param {?WebInspector.AccessibilityNode} axNode 19 * @param {?Accessibility.AccessibilityNode} axNode
20 * @override 20 * @override
21 */ 21 */
22 setAXNode(axNode) { 22 setAXNode(axNode) {
23 this._axNode = axNode; 23 this._axNode = axNode;
24 24
25 var treeOutline = this._treeOutline; 25 var treeOutline = this._treeOutline;
26 treeOutline.removeChildren(); 26 treeOutline.removeChildren();
27 27
28 // TODO(aboxhall): show no node UI 28 // TODO(aboxhall): show no node UI
29 if (!axNode) 29 if (!axNode)
30 return; 30 return;
31 31
32 treeOutline.element.classList.remove('hidden'); 32 treeOutline.element.classList.remove('hidden');
33 var previousTreeElement = treeOutline.rootElement(); 33 var previousTreeElement = treeOutline.rootElement();
34 var inspectedNodeTreeElement = new WebInspector.AXNodeTreeElement(axNode, th is); 34 var inspectedNodeTreeElement = new Accessibility.AXNodeTreeElement(axNode, t his);
35 inspectedNodeTreeElement.setInspected(true); 35 inspectedNodeTreeElement.setInspected(true);
36 36
37 var parent = axNode.parentNode(); 37 var parent = axNode.parentNode();
38 if (parent) { 38 if (parent) {
39 this.setExpanded(parent.backendDOMNodeId(), false); 39 this.setExpanded(parent.backendDOMNodeId(), false);
40 40
41 var chain = []; 41 var chain = [];
42 var ancestor = parent.parentNode(); 42 var ancestor = parent.parentNode();
43 while (ancestor) { 43 while (ancestor) {
44 chain.unshift(ancestor); 44 chain.unshift(ancestor);
45 ancestor = ancestor.parentNode(); 45 ancestor = ancestor.parentNode();
46 } 46 }
47 for (var ancestorNode of chain) { 47 for (var ancestorNode of chain) {
48 var ancestorTreeElement = new WebInspector.AXNodeTreeElement(ancestorNod e, this); 48 var ancestorTreeElement = new Accessibility.AXNodeTreeElement(ancestorNo de, this);
49 previousTreeElement.appendChild(ancestorTreeElement); 49 previousTreeElement.appendChild(ancestorTreeElement);
50 previousTreeElement.expand(); 50 previousTreeElement.expand();
51 previousTreeElement = ancestorTreeElement; 51 previousTreeElement = ancestorTreeElement;
52 } 52 }
53 var parentTreeElement = new WebInspector.AXNodeTreeParentElement(parent, i nspectedNodeTreeElement, this); 53 var parentTreeElement = new Accessibility.AXNodeTreeParentElement(parent, inspectedNodeTreeElement, this);
54 previousTreeElement.appendChild(parentTreeElement); 54 previousTreeElement.appendChild(parentTreeElement);
55 if (this.isExpanded(parent.backendDOMNodeId())) 55 if (this.isExpanded(parent.backendDOMNodeId()))
56 parentTreeElement.appendSiblings(); 56 parentTreeElement.appendSiblings();
57 else 57 else
58 parentTreeElement.appendChild(inspectedNodeTreeElement); 58 parentTreeElement.appendChild(inspectedNodeTreeElement);
59 previousTreeElement.expand(); 59 previousTreeElement.expand();
60 previousTreeElement = parentTreeElement; 60 previousTreeElement = parentTreeElement;
61 } else { 61 } else {
62 previousTreeElement.appendChild(inspectedNodeTreeElement); 62 previousTreeElement.appendChild(inspectedNodeTreeElement);
63 } 63 }
64 64
65 previousTreeElement.expand(); 65 previousTreeElement.expand();
66 66
67 for (var child of axNode.children()) { 67 for (var child of axNode.children()) {
68 var childTreeElement = new WebInspector.AXNodeTreeElement(child, this); 68 var childTreeElement = new Accessibility.AXNodeTreeElement(child, this);
69 inspectedNodeTreeElement.appendChild(childTreeElement); 69 inspectedNodeTreeElement.appendChild(childTreeElement);
70 } 70 }
71 71
72 inspectedNodeTreeElement.selectable = true; 72 inspectedNodeTreeElement.selectable = true;
73 inspectedNodeTreeElement.select(!this._selectedByUser /* omitFocus */, false ); 73 inspectedNodeTreeElement.select(!this._selectedByUser /* omitFocus */, false );
74 if (this.isExpanded(axNode.backendDOMNodeId())) 74 if (this.isExpanded(axNode.backendDOMNodeId()))
75 inspectedNodeTreeElement.expand(); 75 inspectedNodeTreeElement.expand();
76 this.clearSelectedByUser(); 76 this.clearSelectedByUser();
77 } 77 }
78 78
79 /** 79 /**
80 * @param {boolean} selectedByUser 80 * @param {boolean} selectedByUser
81 */ 81 */
82 setSelectedByUser(selectedByUser) { 82 setSelectedByUser(selectedByUser) {
83 this._selectedByUser = true; 83 this._selectedByUser = true;
84 } 84 }
85 85
86 clearSelectedByUser() { 86 clearSelectedByUser() {
87 delete this._selectedByUser; 87 delete this._selectedByUser;
88 } 88 }
89 89
90 /** 90 /**
91 * @return {!WebInspector.Target} 91 * @return {!SDK.Target}
92 */ 92 */
93 target() { 93 target() {
94 return this.node().target(); 94 return this.node().target();
95 } 95 }
96 96
97 /** 97 /**
98 * @param {?number} backendDOMNodeId 98 * @param {?number} backendDOMNodeId
99 * @param {boolean} expanded 99 * @param {boolean} expanded
100 */ 100 */
101 setExpanded(backendDOMNodeId, expanded) { 101 setExpanded(backendDOMNodeId, expanded) {
(...skipping 10 matching lines...) Expand all
112 * @return {boolean} 112 * @return {boolean}
113 */ 113 */
114 isExpanded(backendDOMNodeId) { 114 isExpanded(backendDOMNodeId) {
115 if (!backendDOMNodeId) 115 if (!backendDOMNodeId)
116 return false; 116 return false;
117 117
118 return this._expandedNodes.has(backendDOMNodeId); 118 return this._expandedNodes.has(backendDOMNodeId);
119 } 119 }
120 }; 120 };
121 121
122 WebInspector.InspectNodeButton = class { 122 Accessibility.InspectNodeButton = class {
123 /** 123 /**
124 * @param {!WebInspector.AccessibilityNode} axNode 124 * @param {!Accessibility.AccessibilityNode} axNode
125 * @param {!WebInspector.AXTreePane} treePane 125 * @param {!Accessibility.AXTreePane} treePane
126 */ 126 */
127 constructor(axNode, treePane) { 127 constructor(axNode, treePane) {
128 this._axNode = axNode; 128 this._axNode = axNode;
129 this._treePane = treePane; 129 this._treePane = treePane;
130 130
131 this.element = createElementWithClass('button', 'inspect-dom-node'); 131 this.element = createElementWithClass('button', 'inspect-dom-node');
132 this.element.addEventListener('mousedown', this._handleMouseDown.bind(this)) ; 132 this.element.addEventListener('mousedown', this._handleMouseDown.bind(this)) ;
133 } 133 }
134 134
135 /** 135 /**
136 * @param {!Event} event 136 * @param {!Event} event
137 */ 137 */
138 _handleMouseDown(event) { 138 _handleMouseDown(event) {
139 this._treePane.setSelectedByUser(true); 139 this._treePane.setSelectedByUser(true);
140 WebInspector.Revealer.reveal(this._axNode.deferredDOMNode()); 140 Common.Revealer.reveal(this._axNode.deferredDOMNode());
141 } 141 }
142 }; 142 };
143 143
144 /** 144 /**
145 * @unrestricted 145 * @unrestricted
146 */ 146 */
147 WebInspector.AXNodeTreeElement = class extends TreeElement { 147 Accessibility.AXNodeTreeElement = class extends TreeElement {
148 /** 148 /**
149 * @param {!WebInspector.AccessibilityNode} axNode 149 * @param {!Accessibility.AccessibilityNode} axNode
150 * @param {!WebInspector.AXTreePane} treePane 150 * @param {!Accessibility.AXTreePane} treePane
151 */ 151 */
152 constructor(axNode, treePane) { 152 constructor(axNode, treePane) {
153 // Pass an empty title, the title gets made later in onattach. 153 // Pass an empty title, the title gets made later in onattach.
154 super(''); 154 super('');
155 155
156 /** @type {!WebInspector.AccessibilityNode} */ 156 /** @type {!Accessibility.AccessibilityNode} */
157 this._axNode = axNode; 157 this._axNode = axNode;
158 158
159 /** @type {!WebInspector.AXTreePane} */ 159 /** @type {!Accessibility.AXTreePane} */
160 this._treePane = treePane; 160 this._treePane = treePane;
161 161
162 this.selectable = true; 162 this.selectable = true;
163 163
164 this._inspectNodeButton = 164 this._inspectNodeButton =
165 new WebInspector.InspectNodeButton(axNode, treePane); 165 new Accessibility.InspectNodeButton(axNode, treePane);
166 } 166 }
167 167
168 /** 168 /**
169 * @return {!WebInspector.AccessibilityNode} 169 * @return {!Accessibility.AccessibilityNode}
170 */ 170 */
171 axNode() { 171 axNode() {
172 return this._axNode; 172 return this._axNode;
173 } 173 }
174 174
175 /** 175 /**
176 * @param {boolean} inspected 176 * @param {boolean} inspected
177 */ 177 */
178 setInspected(inspected) { 178 setInspected(inspected) {
179 this._inspected = inspected; 179 this._inspected = inspected;
(...skipping 14 matching lines...) Expand all
194 * @param {!Event} event 194 * @param {!Event} event
195 * @return {boolean} 195 * @return {boolean}
196 */ 196 */
197 ondblclick(event) { 197 ondblclick(event) {
198 this.inspectDOMNode(); 198 this.inspectDOMNode();
199 return true; 199 return true;
200 } 200 }
201 201
202 inspectDOMNode() { 202 inspectDOMNode() {
203 this._treePane.setSelectedByUser(true); 203 this._treePane.setSelectedByUser(true);
204 WebInspector.Revealer.reveal(this._axNode.deferredDOMNode()); 204 Common.Revealer.reveal(this._axNode.deferredDOMNode());
205 } 205 }
206 206
207 /** 207 /**
208 * @override 208 * @override
209 */ 209 */
210 onattach() { 210 onattach() {
211 this._update(); 211 this._update();
212 } 212 }
213 213
214 _update() { 214 _update() {
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
270 } 270 }
271 271
272 /** 272 /**
273 * @param {?Protocol.Accessibility.AXValue} role 273 * @param {?Protocol.Accessibility.AXValue} role
274 */ 274 */
275 _appendRoleElement(role) { 275 _appendRoleElement(role) {
276 if (!role) 276 if (!role)
277 return; 277 return;
278 278
279 var roleElement = createElementWithClass('span', 'monospace'); 279 var roleElement = createElementWithClass('span', 'monospace');
280 roleElement.classList.add(WebInspector.AXNodeTreeElement.RoleStyles[role.typ e]); 280 roleElement.classList.add(Accessibility.AXNodeTreeElement.RoleStyles[role.ty pe]);
281 roleElement.setTextContentTruncatedIfNeeded(role.value || ''); 281 roleElement.setTextContentTruncatedIfNeeded(role.value || '');
282 282
283 this.listItemElement.appendChild(roleElement); 283 this.listItemElement.appendChild(roleElement);
284 } 284 }
285 285
286 _appendIgnoredNodeElement() { 286 _appendIgnoredNodeElement() {
287 var ignoredNodeElement = createElementWithClass('span', 'monospace'); 287 var ignoredNodeElement = createElementWithClass('span', 'monospace');
288 ignoredNodeElement.textContent = WebInspector.UIString('Ignored'); 288 ignoredNodeElement.textContent = Common.UIString('Ignored');
289 ignoredNodeElement.classList.add('ax-tree-ignored-node'); 289 ignoredNodeElement.classList.add('ax-tree-ignored-node');
290 this.listItemElement.appendChild(ignoredNodeElement); 290 this.listItemElement.appendChild(ignoredNodeElement);
291 } 291 }
292 292
293 /** 293 /**
294 * @param {boolean=} omitFocus 294 * @param {boolean=} omitFocus
295 * @param {boolean=} selectedByUser 295 * @param {boolean=} selectedByUser
296 * @return {boolean} 296 * @return {boolean}
297 * @override 297 * @override
298 */ 298 */
299 select(omitFocus, selectedByUser) { 299 select(omitFocus, selectedByUser) {
300 this._treePane.setSelectedByUser(!!selectedByUser); 300 this._treePane.setSelectedByUser(!!selectedByUser);
301 301
302 return super.select(omitFocus, selectedByUser); 302 return super.select(omitFocus, selectedByUser);
303 } 303 }
304 }; 304 };
305 305
306 /** @type {!Object<string, string>} */ 306 /** @type {!Object<string, string>} */
307 WebInspector.AXNodeTreeElement.RoleStyles = { 307 Accessibility.AXNodeTreeElement.RoleStyles = {
308 internalRole: 'ax-internal-role', 308 internalRole: 'ax-internal-role',
309 role: 'ax-role', 309 role: 'ax-role',
310 }; 310 };
311 311
312 /** 312 /**
313 * @unrestricted 313 * @unrestricted
314 */ 314 */
315 WebInspector.ExpandSiblingsButton = class { 315 Accessibility.ExpandSiblingsButton = class {
316 /** 316 /**
317 * @param {!WebInspector.AXNodeTreeParentElement} treeElement 317 * @param {!Accessibility.AXNodeTreeParentElement} treeElement
318 * @param {number} numSiblings 318 * @param {number} numSiblings
319 */ 319 */
320 constructor(treeElement, numSiblings) { 320 constructor(treeElement, numSiblings) {
321 this._treeElement = treeElement; 321 this._treeElement = treeElement;
322 322
323 this.element = createElementWithClass('button', 'expand-siblings'); 323 this.element = createElementWithClass('button', 'expand-siblings');
324 this.element.textContent = WebInspector.UIString( 324 this.element.textContent = Common.UIString(
325 (numSiblings === 1 ? '+ %d node' : '+ %d nodes'), numSiblings); 325 (numSiblings === 1 ? '+ %d node' : '+ %d nodes'), numSiblings);
326 this.element.addEventListener('mousedown', this._handleMouseDown.bind(this)) ; 326 this.element.addEventListener('mousedown', this._handleMouseDown.bind(this)) ;
327 } 327 }
328 328
329 /** 329 /**
330 * @param {!Event} event 330 * @param {!Event} event
331 */ 331 */
332 _handleMouseDown(event) { 332 _handleMouseDown(event) {
333 this._treeElement.expandSiblings(); 333 this._treeElement.expandSiblings();
334 event.consume(); 334 event.consume();
335 } 335 }
336 }; 336 };
337 337
338 /** 338 /**
339 * @unrestricted 339 * @unrestricted
340 */ 340 */
341 WebInspector.AXNodeTreeParentElement = class extends WebInspector.AXNodeTreeElem ent { 341 Accessibility.AXNodeTreeParentElement = class extends Accessibility.AXNodeTreeEl ement {
342 /** 342 /**
343 * @param {!WebInspector.AccessibilityNode} axNode 343 * @param {!Accessibility.AccessibilityNode} axNode
344 * @param {!WebInspector.AXNodeTreeElement} inspectedNodeTreeElement 344 * @param {!Accessibility.AXNodeTreeElement} inspectedNodeTreeElement
345 * @param {!WebInspector.AXTreePane} treePane 345 * @param {!Accessibility.AXTreePane} treePane
346 */ 346 */
347 constructor(axNode, inspectedNodeTreeElement, treePane) { 347 constructor(axNode, inspectedNodeTreeElement, treePane) {
348 super(axNode, treePane); 348 super(axNode, treePane);
349 349
350 this._inspectedNodeTreeElement = inspectedNodeTreeElement; 350 this._inspectedNodeTreeElement = inspectedNodeTreeElement;
351 var numSiblings = axNode.children().length - 1; 351 var numSiblings = axNode.children().length - 1;
352 this._expandSiblingsButton = new WebInspector.ExpandSiblingsButton(this, num Siblings); 352 this._expandSiblingsButton = new Accessibility.ExpandSiblingsButton(this, nu mSiblings);
353 this._partiallyExpanded = false; 353 this._partiallyExpanded = false;
354 } 354 }
355 355
356 /** 356 /**
357 * @override 357 * @override
358 */ 358 */
359 onattach() { 359 onattach() {
360 super.onattach(); 360 super.onattach();
361 if (this._treePane.isExpanded(this._axNode.backendDOMNodeId())) 361 if (this._treePane.isExpanded(this._axNode.backendDOMNodeId()))
362 this._listItemNode.classList.add('siblings-expanded'); 362 this._listItemNode.classList.add('siblings-expanded');
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
400 appendSiblings() { 400 appendSiblings() {
401 var inspectedAXNode = this._inspectedNodeTreeElement.axNode(); 401 var inspectedAXNode = this._inspectedNodeTreeElement.axNode();
402 var nextIndex = 0; 402 var nextIndex = 0;
403 var foundInspectedNode = false; 403 var foundInspectedNode = false;
404 for (var sibling of this._axNode.children()) { 404 for (var sibling of this._axNode.children()) {
405 var siblingTreeElement = null; 405 var siblingTreeElement = null;
406 if (sibling === inspectedAXNode) { 406 if (sibling === inspectedAXNode) {
407 foundInspectedNode = true; 407 foundInspectedNode = true;
408 continue; 408 continue;
409 } 409 }
410 siblingTreeElement = new WebInspector.AXNodeTreeElement(sibling, this._tre ePane); 410 siblingTreeElement = new Accessibility.AXNodeTreeElement(sibling, this._tr eePane);
411 if (foundInspectedNode) 411 if (foundInspectedNode)
412 this.appendChild(siblingTreeElement); 412 this.appendChild(siblingTreeElement);
413 else 413 else
414 this.insertChild(siblingTreeElement, nextIndex++); 414 this.insertChild(siblingTreeElement, nextIndex++);
415 } 415 }
416 } 416 }
417 }; 417 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698