| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 }; |
| OLD | NEW |