| 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 | |
| 5 /** | 4 /** |
| 6 * @constructor | 5 * @unrestricted |
| 7 * @extends {WebInspector.AccessibilitySubPane} | |
| 8 */ | 6 */ |
| 9 WebInspector.AXTreePane = function() | 7 WebInspector.AXTreePane = class extends WebInspector.AccessibilitySubPane { |
| 10 { | 8 constructor() { |
| 11 WebInspector.AccessibilitySubPane.call(this, WebInspector.UIString("Accessib
ility Tree")); | 9 super(WebInspector.UIString('Accessibility Tree')); |
| 12 | 10 |
| 13 this._treeOutline = this.createTreeOutline(); | 11 this._treeOutline = this.createTreeOutline(); |
| 14 | 12 |
| 15 this.element.classList.add("accessibility-computed"); | 13 this.element.classList.add('accessibility-computed'); |
| 16 }; | 14 } |
| 17 | 15 |
| 16 /** |
| 17 * @param {!Array<!WebInspector.AccessibilityNode>} nodes |
| 18 */ |
| 19 setAXNodeAndAncestors(nodes) { |
| 20 this._nodes = nodes; |
| 18 | 21 |
| 19 WebInspector.AXTreePane.prototype = { | 22 var target = this.node().target(); |
| 20 /** | 23 var treeOutline = this._treeOutline; |
| 21 * @param {!Array<!WebInspector.AccessibilityNode>} nodes | 24 treeOutline.removeChildren(); |
| 22 */ | 25 treeOutline.element.classList.remove('hidden'); |
| 23 setAXNodeAndAncestors: function(nodes) | 26 var previous = treeOutline.rootElement(); |
| 24 { | 27 while (nodes.length) { |
| 25 this._nodes = nodes; | 28 var ancestor = nodes.pop(); |
| 26 | 29 var ancestorTreeElement = new WebInspector.AXNodeTreeElement(ancestor, tar
get); |
| 27 var target = this.node().target(); | 30 previous.appendChild(ancestorTreeElement); |
| 28 var treeOutline = this._treeOutline; | 31 previous.expand(); |
| 29 treeOutline.removeChildren(); | 32 previous = ancestorTreeElement; |
| 30 treeOutline.element.classList.remove("hidden"); | 33 } |
| 31 var previous = treeOutline.rootElement(); | 34 previous.selectable = true; |
| 32 while (nodes.length) { | 35 previous.select(true /* omitFocus */); |
| 33 var ancestor = nodes.pop(); | 36 } |
| 34 var ancestorTreeElement = new WebInspector.AXNodeTreeElement(ancesto
r, target); | |
| 35 previous.appendChild(ancestorTreeElement); | |
| 36 previous.expand(); | |
| 37 previous = ancestorTreeElement; | |
| 38 } | |
| 39 previous.selectable = true; | |
| 40 previous.select(true /* omitFocus */); | |
| 41 }, | |
| 42 | |
| 43 __proto__: WebInspector.AccessibilitySubPane.prototype | |
| 44 }; | 37 }; |
| 45 | 38 |
| 46 /** | 39 /** |
| 47 * @constructor | 40 * @unrestricted |
| 48 * @extends {TreeElement} | |
| 49 * @param {!WebInspector.AccessibilityNode} axNode | |
| 50 * @param {!WebInspector.Target} target | |
| 51 */ | 41 */ |
| 52 WebInspector.AXNodeTreeElement = function(axNode, target) | 42 WebInspector.AXNodeTreeElement = class extends TreeElement { |
| 53 { | 43 /** |
| 44 * @param {!WebInspector.AccessibilityNode} axNode |
| 45 * @param {!WebInspector.Target} target |
| 46 */ |
| 47 constructor(axNode, target) { |
| 54 // Pass an empty title, the title gets made later in onattach. | 48 // Pass an empty title, the title gets made later in onattach. |
| 55 TreeElement.call(this, ""); | 49 super(''); |
| 56 | 50 |
| 57 /** @type {!WebInspector.AccessibilityNode} */ | 51 /** @type {!WebInspector.AccessibilityNode} */ |
| 58 this._axNode = axNode; | 52 this._axNode = axNode; |
| 59 | 53 |
| 60 /** @type {!WebInspector.Target} */ | 54 /** @type {!WebInspector.Target} */ |
| 61 this._target = target; | 55 this._target = target; |
| 62 | 56 |
| 63 this.selectable = false; | 57 this.selectable = false; |
| 58 } |
| 59 |
| 60 /** |
| 61 * @override |
| 62 */ |
| 63 onattach() { |
| 64 this._update(); |
| 65 } |
| 66 |
| 67 _update() { |
| 68 this.listItemElement.removeChildren(); |
| 69 |
| 70 if (this._axNode.ignored()) { |
| 71 this._appendIgnoredNodeElement(); |
| 72 } else { |
| 73 this._appendRoleElement(this._axNode.role()); |
| 74 if ('name' in this._axNode && this._axNode.name().value) { |
| 75 this.listItemElement.createChild('span', 'separator').textContent = '\u0
0A0'; |
| 76 this._appendNameElement(/** @type {string} */ (this._axNode.name().value
)); |
| 77 } |
| 78 } |
| 79 } |
| 80 |
| 81 /** |
| 82 * @param {string} name |
| 83 */ |
| 84 _appendNameElement(name) { |
| 85 var nameElement = createElement('span'); |
| 86 nameElement.textContent = '"' + name + '"'; |
| 87 nameElement.classList.add('ax-readable-string'); |
| 88 this.listItemElement.appendChild(nameElement); |
| 89 } |
| 90 |
| 91 /** |
| 92 * @param {?AccessibilityAgent.AXValue} role |
| 93 */ |
| 94 _appendRoleElement(role) { |
| 95 if (!role) |
| 96 return; |
| 97 |
| 98 var roleElement = createElementWithClass('span', 'monospace'); |
| 99 roleElement.classList.add(WebInspector.AXNodeTreeElement.RoleStyles[role.typ
e]); |
| 100 roleElement.setTextContentTruncatedIfNeeded(role.value || ''); |
| 101 |
| 102 this.listItemElement.appendChild(roleElement); |
| 103 } |
| 104 |
| 105 _appendIgnoredNodeElement() { |
| 106 var ignoredNodeElement = createElementWithClass('span', 'monospace'); |
| 107 ignoredNodeElement.textContent = WebInspector.UIString('Ignored'); |
| 108 ignoredNodeElement.classList.add('ax-tree-ignored-node'); |
| 109 this.listItemElement.appendChild(ignoredNodeElement); |
| 110 } |
| 64 }; | 111 }; |
| 65 | 112 |
| 66 /** @type {!Object<string, string>} */ | 113 /** @type {!Object<string, string>} */ |
| 67 WebInspector.AXNodeTreeElement.RoleStyles = { | 114 WebInspector.AXNodeTreeElement.RoleStyles = { |
| 68 internalRole: "ax-internal-role", | 115 internalRole: 'ax-internal-role', |
| 69 role: "ax-role", | 116 role: 'ax-role', |
| 70 }; | 117 }; |
| 71 | |
| 72 WebInspector.AXNodeTreeElement.prototype = { | |
| 73 /** | |
| 74 * @override | |
| 75 */ | |
| 76 onattach: function() | |
| 77 { | |
| 78 this._update(); | |
| 79 }, | |
| 80 | |
| 81 _update: function() | |
| 82 { | |
| 83 this.listItemElement.removeChildren(); | |
| 84 | |
| 85 if (this._axNode.ignored()) { | |
| 86 this._appendIgnoredNodeElement(); | |
| 87 } else { | |
| 88 this._appendRoleElement(this._axNode.role()); | |
| 89 if ("name" in this._axNode && this._axNode.name().value) { | |
| 90 this.listItemElement.createChild("span", "separator").textConten
t = "\u00A0"; | |
| 91 this._appendNameElement(/** @type {string} */ (this._axNode.name
().value)); | |
| 92 } | |
| 93 } | |
| 94 }, | |
| 95 | |
| 96 /** | |
| 97 * @param {string} name | |
| 98 */ | |
| 99 _appendNameElement: function(name) | |
| 100 { | |
| 101 var nameElement = createElement("span"); | |
| 102 nameElement.textContent = '"' + name + '"'; | |
| 103 nameElement.classList.add("ax-readable-string"); | |
| 104 this.listItemElement.appendChild(nameElement); | |
| 105 }, | |
| 106 | |
| 107 /** | |
| 108 * @param {?AccessibilityAgent.AXValue} role | |
| 109 */ | |
| 110 _appendRoleElement: function(role) | |
| 111 { | |
| 112 if (!role) | |
| 113 return; | |
| 114 | |
| 115 var roleElement = createElementWithClass("span", "monospace"); | |
| 116 roleElement.classList.add(WebInspector.AXNodeTreeElement.RoleStyles[role
.type]); | |
| 117 roleElement.setTextContentTruncatedIfNeeded(role.value || ""); | |
| 118 | |
| 119 this.listItemElement.appendChild(roleElement); | |
| 120 }, | |
| 121 | |
| 122 _appendIgnoredNodeElement: function() | |
| 123 { | |
| 124 var ignoredNodeElement = createElementWithClass("span", "monospace"); | |
| 125 ignoredNodeElement.textContent = WebInspector.UIString("Ignored"); | |
| 126 ignoredNodeElement.classList.add("ax-tree-ignored-node"); | |
| 127 this.listItemElement.appendChild(ignoredNodeElement); | |
| 128 }, | |
| 129 | |
| 130 __proto__: TreeElement.prototype | |
| 131 }; | |
| OLD | NEW |