[DevTools] Accessibility: Show siblings and children of selected node

third_party/WebKit/Source/devtools/front_end/accessibility/AXTreePane.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 WebInspector.AXTreePane = class extends WebInspector.AccessibilitySubPane {
   constructor() {
     super(WebInspector.UIString('Accessibility Tree'));
 
     this._treeOutline = this.createTreeOutline();
 
     this.element.classList.add('accessibility-computed');
+
+    this._expandedNodes = new Set();
   }
 
   /**
-   * @param {!Array<!WebInspector.AccessibilityNode>} nodes
+   * @param {?WebInspector.AccessibilityNode} axNode
+   * @override
    */
-  setAXNodeAndAncestors(nodes) {
-    this._nodes = nodes;
+  setAXNode(axNode) {
+    this._axNode = axNode;
 
-    var target = this.node().target();
     var treeOutline = this._treeOutline;
     treeOutline.removeChildren();
+
+    // TODO(aboxhall): show no node UI
+    if (!axNode)
+      return;
+
     treeOutline.element.classList.remove('hidden');
-    var previous = treeOutline.rootElement();
-    while (nodes.length) {
-      var ancestor = nodes.pop();
-      var ancestorTreeElement = new WebInspector.AXNodeTreeElement(ancestor, target);
-      previous.appendChild(ancestorTreeElement);
-      previous.expand();
-      previous = ancestorTreeElement;
+    var previousTreeElement = treeOutline.rootElement();
+    var inspectedNodeTreeElement = new WebInspector.AXNodeTreeElement(axNode, this);
+    inspectedNodeTreeElement.setInspected(true);
+
+    var parent = axNode.parentNode();
+    if (parent) {
+      this.setExpanded(parent.backendDOMNodeId(), false);
+
+      var chain = [];
+      var ancestor = parent.parentNode();
+      while (ancestor) {
+        chain.unshift(ancestor);
+        ancestor = ancestor.parentNode();
+      }
+      for (var ancestorNode of chain) {
+        var ancestorTreeElement = new WebInspector.AXNodeTreeElement(ancestorNode, this);
+        previousTreeElement.appendChild(ancestorTreeElement);
+        previousTreeElement.expand();
+        previousTreeElement = ancestorTreeElement;
+      }
+      var parentTreeElement = new WebInspector.AXNodeTreeParentElement(parent, inspectedNodeTreeElement, this);
+      if (this.isExpanded(parent.backendDOMNodeId()))
+        parentTreeElement.appendSiblings();
+      else
+        parentTreeElement.appendChild(inspectedNodeTreeElement);
+      previousTreeElement.appendChild(parentTreeElement);
+      previousTreeElement.expand();
+      previousTreeElement = parentTreeElement;
+    } else {
+      previousTreeElement.appendChild(inspectedNodeTreeElement);
     }
-    previous.selectable = true;
-    previous.select(true /* omitFocus */);
+
+    previousTreeElement.expand();
+
+    for (var child of axNode.children()) {
+      var childTreeElement = new WebInspector.AXNodeTreeElement(child, this);
+      inspectedNodeTreeElement.appendChild(childTreeElement);
+    }
+
+    inspectedNodeTreeElement.selectable = true;
+    inspectedNodeTreeElement.select(!this._selectedByUser /* omitFocus */, false);
+    if (this.isExpanded(axNode.backendDOMNodeId()))
+      inspectedNodeTreeElement.expand();
+    this.clearSelectedByUser();
+  }
+
+  /**
+   * @param {boolean} selectedByUser
+   */
+  setSelectedByUser(selectedByUser) {
+    this._selectedByUser = true;
+  }
+
+  clearSelectedByUser() {
+    delete this._selectedByUser;
+  }
+
+  /**
+   * @return {!WebInspector.Target}
+   */
+  target() {
+    return this.node().target();
+  }
+
+  /**
+   * @param {?number} backendDOMNodeId
+   * @param {boolean} expanded
+   */
+  setExpanded(backendDOMNodeId, expanded) {
+    if (!backendDOMNodeId)
+      return;
+    if (expanded)
+      this._expandedNodes.add(backendDOMNodeId);
+    else
+      this._expandedNodes.delete(backendDOMNodeId);
+  }
+
+  /**
+   * @param {?number} backendDOMNodeId
+   * @return {boolean}
+   */
+  isExpanded(backendDOMNodeId) {
+    if (!backendDOMNodeId)
+      return false;
+
+    return this._expandedNodes.has(backendDOMNodeId);
   }
 };
 
+WebInspector.InspectNodeButton = class {
+  /**
+   * @param {!WebInspector.AccessibilityNode} axNode
+   * @param {!WebInspector.AXTreePane} treePane
+   */
+  constructor(axNode, treePane) {
+    this._axNode = axNode;
+    this._treePane = treePane;
+
+    this.element = createElementWithClass('button', 'inspect-dom-node');
+    this.element.addEventListener('mousedown', this._handleMouseDown.bind(this));
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _handleMouseDown(event) {
+    this._treePane.setSelectedByUser(true);
+    WebInspector.Revealer.reveal(this._axNode.deferredDOMNode());
+  }
+};
+
 /**
  * @unrestricted
  */
 WebInspector.AXNodeTreeElement = class extends TreeElement {
   /**
    * @param {!WebInspector.AccessibilityNode} axNode
-   * @param {!WebInspector.Target} target
+   * @param {!WebInspector.AXTreePane} treePane
    */
-  constructor(axNode, target) {
+  constructor(axNode, treePane) {
     // Pass an empty title, the title gets made later in onattach.
     super('');
 
     /** @type {!WebInspector.AccessibilityNode} */
     this._axNode = axNode;
 
-    /** @type {!WebInspector.Target} */
-    this._target = target;
+    /** @type {!WebInspector.AXTreePane} */
+    this._treePane = treePane;
 
-    this.selectable = false;
+    this.selectable = true;
+
+    this._inspectNodeButton =
+        new WebInspector.InspectNodeButton(axNode, treePane);
   }
 
   /**
+   * @return {!WebInspector.AccessibilityNode}
+   */
+  axNode() {
+    return this._axNode;
+  }
+
+  /**
+   * @param {boolean} inspected
+   */
+  setInspected(inspected) {
+    this._inspected = inspected;
+    this.listItemElement.classList.toggle('inspected', this._inspected);
+  }
+
+  /**
+   * @override
+   * @return {boolean}
+   */
+  onenter() {
+    this.inspectDOMNode();
+    return true;
+  }
+
+  /**
+   * @override
+   * @param {!Event} event
+   * @return {boolean}
+   */
+  ondblclick(event) {
+    this.inspectDOMNode();
+    return true;
+  }
+
+  inspectDOMNode() {
+    this._treePane.setSelectedByUser(true);
+    WebInspector.Revealer.reveal(this._axNode.deferredDOMNode());
+  }
+
+  /**
    * @override
    */
   onattach() {
     this._update();
   }
 
   _update() {
     this.listItemElement.removeChildren();
 
     if (this._axNode.ignored()) {
       this._appendIgnoredNodeElement();
     } else {
       this._appendRoleElement(this._axNode.role());
-      if ('name' in this._axNode && this._axNode.name().value) {
+      if (this._axNode && this._axNode.name().value) {

[dgozman, 2016/11/04 23:22:45]

this._axNode is always there.

[aboxhall, 2016/11/07 19:54:43]

Done.

         this.listItemElement.createChild('span', 'separator').textContent = '\u00A0';
         this._appendNameElement(/** @type {string} */ (this._axNode.name().value));
       }
     }
+
+    if (this._axNode.hasOnlyUnloadedChildren()) {
+      this._hasOnlyUnloadedChildren = true;

[dgozman, 2016/11/04 23:22:45]

Why not call this._axNode.hasOnlyUnloadedChildren() everywhere instead?

[aboxhall, 2016/11/07 19:54:43]

Done.

+      this.listItemElement.classList.add('children-unloaded');
+      this.setExpandable(true);
+    } else {
+      this.setExpandable(!!this._axNode.numChildren());
+    }
+
+    if (!this._axNode.isDOMNode())
+      this.listItemElement.classList.add('no-dom-node');
+    this.listItemElement.appendChild(this._inspectNodeButton.element);
   }
 
   /**
+   * @override
+   */
+  expand() {
+    if (this._hasOnlyUnloadedChildren)
+      return;
+
+    this._treePane.setExpanded(this._axNode.backendDOMNodeId(), true);
+    super.expand();
+  }
+
+  /**
+   * @override
+   */
+  collapse() {
+    if (this._hasOnlyUnloadedChildren)
+      return;
+
+    if (this._treePane)
+      this._treePane.setExpanded(this._axNode.backendDOMNodeId(), false);
+    super.collapse();
+  }
+
+  /**
    * @param {string} name
    */
   _appendNameElement(name) {
     var nameElement = createElement('span');
     nameElement.textContent = '"' + name + '"';
     nameElement.classList.add('ax-readable-string');
     this.listItemElement.appendChild(nameElement);
   }
 
   /**
    * @param {?Protocol.Accessibility.AXValue} role
    */
   _appendRoleElement(role) {
     if (!role)
       return;
 
     var roleElement = createElementWithClass('span', 'monospace');
     roleElement.classList.add(WebInspector.AXNodeTreeElement.RoleStyles[role.type]);
     roleElement.setTextContentTruncatedIfNeeded(role.value || '');
 
     this.listItemElement.appendChild(roleElement);
   }
 
   _appendIgnoredNodeElement() {
     var ignoredNodeElement = createElementWithClass('span', 'monospace');
     ignoredNodeElement.textContent = WebInspector.UIString('Ignored');
     ignoredNodeElement.classList.add('ax-tree-ignored-node');
     this.listItemElement.appendChild(ignoredNodeElement);
   }
+
+  /**
+   * @param {boolean=} omitFocus
+   * @param {boolean=} selectedByUser
+   * @return {boolean}
+   * @override
+   */
+  select(omitFocus, selectedByUser) {
+    this._ensureSelection();

[dgozman, 2016/11/04 23:22:45]

Isn't this a private method of superclass? Isn't it called by super.select()
anyway?

[aboxhall, 2016/11/07 19:54:43]

Nope, not called by select():
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

Should I make it a public method? If I don't call it, the blue selection bar
doesn't appear.

[dgozman, 2016/11/08 16:38:41]

Actually, it's called right after onattach, so it should be fine unless you
removeChildren after that.
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

[aboxhall, 2016/11/08 18:02:18]

Ok, the issue is that it was being called earlier but early-outing. Fixed by
attaching parent element to tree sooner on line 54.

+
+    this._treePane.setSelectedByUser(!!selectedByUser);
+
+    return super.select(omitFocus, selectedByUser);
+  }
 };
 
 /** @type {!Object<string, string>} */
 WebInspector.AXNodeTreeElement.RoleStyles = {
   internalRole: 'ax-internal-role',
   role: 'ax-role',
 };
+
+/**
+ * @unrestricted
+ */
+WebInspector.ExpandSiblingsButton = class {
+  /**
+   * @param {!WebInspector.AXNodeTreeParentElement} treeElement
+   * @param {number} numSiblings
+   */
+  constructor(treeElement, numSiblings) {
+    this._treeElement = treeElement;
+
+    this.element = createElementWithClass('button', 'expand-siblings');
+    this.element.textContent = WebInspector.UIString(
+        '+ %d %s', numSiblings, numSiblings === 1 ? 'node' : 'nodes');

[dgozman, 2016/11/04 23:22:45]

We should only substitute user data, not the parts of ui string. This code
should be:
UIString(numSiblings === 1 ? '+ %s node' : '+ %s nodes', numSiblings)

[aboxhall, 2016/11/07 19:54:43]

Done.

+    this.element.addEventListener('mousedown', this._handleMouseDown.bind(this));
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _handleMouseDown(event) {
+    this._treeElement.expandSiblings();
+    event.consume();
+  }
+};
+
+/**
+ * @unrestricted
+ */
+WebInspector.AXNodeTreeParentElement = class extends WebInspector.AXNodeTreeElement {
+  /**
+   * @param {!WebInspector.AccessibilityNode} axNode
+   * @param {!WebInspector.AXNodeTreeElement} inspectedNodeTreeElement
+   * @param {!WebInspector.AXTreePane} treePane
+   */
+  constructor(axNode, inspectedNodeTreeElement, treePane) {
+    super(axNode, treePane);
+
+    this._inspectedNodeTreeElement = inspectedNodeTreeElement;
+    var numSiblings = axNode.children().length - 1;
+    this._expandSiblingsButton = new WebInspector.ExpandSiblingsButton(this, numSiblings);
+    this._partiallyExpanded = false;
+  }
+
+  /**
+   * @override
+   */
+  onattach() {
+    super.onattach();
+    if (this._treePane.isExpanded(this._axNode.backendDOMNodeId()))
+      this._listItemNode.classList.add('siblings-expanded');
+    if (this._axNode.numChildren() > 1) {
+      this._listItemNode.insertBefore(this._expandSiblingsButton.element,
+                                      this._inspectNodeButton.element);
+    }
+  }
+
+  /**
+   * @param {boolean} altKey
+   * @return {boolean}
+   * @override
+   */
+  descendOrExpand(altKey) {
+    if (!this.expanded || !this._partiallyExpanded)
+      return TreeElement.prototype.descendOrExpand.call(this, altKey);
+
+    this.expandSiblings();
+    if (altKey)
+      this.expandRecursively();
+    return true;
+  }
+
+  /**
+   * @override
+   */
+  expand() {
+    TreeElement.prototype.expand.call(this);

[dgozman, 2016/11/04 23:22:45]

super.expand();

[aboxhall, 2016/11/07 19:54:43]

Done.

+    this._partiallyExpanded = true;
+  }
+
+  expandSiblings() {
+    this._listItemNode.classList.add('siblings-expanded');
+    this.appendSiblings();
+    this.expanded = true;
+    this._partiallyExpanded = false;
+    this._treePane.setExpanded(this._axNode.backendDOMNodeId(), true);
+  }
+
+  appendSiblings() {
+    var inspectedAXNode = this._inspectedNodeTreeElement.axNode();
+    var nextIndex = 0;
+    var foundInspectedNode = false;
+    for (var sibling of this._axNode.children()) {
+      var siblingTreeElement = null;
+      if (sibling === inspectedAXNode) {
+        foundInspectedNode = true;
+        continue;
+      }
+      siblingTreeElement = new WebInspector.AXNodeTreeElement(sibling, this._treePane);
+      if (foundInspectedNode)
+        this.appendChild(siblingTreeElement);
+      else
+        this.insertChild(siblingTreeElement, nextIndex++);
+    }
+  }
+};