[Devtools] Accessibility tree: Don't show siblings; always expand any node with children

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
  */
 Accessibility.AXTreePane = class extends Accessibility.AccessibilitySubPane {
   /**
    * @param {!Accessibility.AccessibilitySidebarView} axSidebarView
    */
   constructor(axSidebarView) {
     super(Common.UIString('Accessibility Tree'));
 
     this._axSidebarView = axSidebarView;
     this._treeOutline = this.createTreeOutline();
     this._treeOutline.setPaddingSize(12);
 
     this.element.classList.add('accessibility-computed');
-
-    this._expandedNodes = new Set();
   }
 
   /**
    * @param {?Accessibility.AccessibilityNode} axNode
    * @override
    */
   setAXNode(axNode) {
     this._axNode = axNode;
 
     var treeOutline = this._treeOutline;
     treeOutline.removeChildren();
 
     // TODO(aboxhall): show no node UI
     if (!axNode)
       return;
 
     treeOutline.element.classList.remove('hidden');
     var previousTreeElement = treeOutline.rootElement();
     var inspectedNodeTreeElement = new Accessibility.AXNodeTreeElement(axNode, this);
     inspectedNodeTreeElement.setInspected(true);
 
     var parent = axNode.parentNode();
     if (parent) {
-      this.setExpanded(parent.backendDOMNodeId(), false);
-
-      var chain = [];
-      var ancestor = parent.parentNode();
+      var ancestorChain = [];
+      var ancestor = parent;
       while (ancestor) {
-        chain.unshift(ancestor);
+        ancestorChain.unshift(ancestor);
         ancestor = ancestor.parentNode();
       }
-      for (var ancestorNode of chain) {
+      for (var ancestorNode of ancestorChain) {
         var ancestorTreeElement = new Accessibility.AXNodeTreeElement(ancestorNode, this);
         previousTreeElement.appendChild(ancestorTreeElement);
         previousTreeElement.expand();
         previousTreeElement = ancestorTreeElement;
       }
-      var parentTreeElement = new Accessibility.AXNodeTreeParentElement(parent, inspectedNodeTreeElement, this);
-      previousTreeElement.appendChild(parentTreeElement);
-      if (this.isExpanded(parent.backendDOMNodeId()))
-        parentTreeElement.appendSiblings();
-      else
-        parentTreeElement.appendChild(inspectedNodeTreeElement);
-      previousTreeElement.expand();
-      previousTreeElement = parentTreeElement;
-    } else {
-      previousTreeElement.appendChild(inspectedNodeTreeElement);
     }
 
+    previousTreeElement.appendChild(inspectedNodeTreeElement);
     previousTreeElement.expand();
 
-    for (var child of axNode.children()) {
-      var childTreeElement = new Accessibility.AXNodeTreeElement(child, this);
-      inspectedNodeTreeElement.appendChild(childTreeElement);
-    }
-
     inspectedNodeTreeElement.selectable = true;
     inspectedNodeTreeElement.select(!this._selectedByUser /* omitFocus */, false);
-    if (this.isExpanded(axNode.backendDOMNodeId()))
-      inspectedNodeTreeElement.expand();
+    inspectedNodeTreeElement.expand();
     this.clearSelectedByUser();
   }
 
   /**
    * @param {!Accessibility.AccessibilityNode} axNode
    */
   setSelectedNode(axNode) {
     if (axNode.parentNode()) {
       Common.Revealer.reveal(axNode.deferredDOMNode());
     } else {
@@ skipping 15 matching lines @@
   clearSelectedByUser() {
     delete this._selectedByUser;
   }
 
   /**
    * @return {!SDK.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);
-  }
 };
 
 Accessibility.InspectNodeButton = class {
   /**
    * @param {!Accessibility.AccessibilityNode} axNode
    * @param {!Accessibility.AXTreePane} treePane
    */
   constructor(axNode, treePane) {
     this._axNode = axNode;
     this._treePane = treePane;
@@ skipping 90 matching lines @@
   /**
    * @override
    * @param {!Event} event
    * @return {boolean}
    */
   ondblclick(event) {
     this.inspectDOMNode();
     return true;
   }
 
+  /**
+   * @override
+   */
+  onpopulate() {
+    for (var child of this._axNode.children()) {
+      var childTreeElement = new Accessibility.AXNodeTreeElement(child, this._treePane);
+      this.appendChild(childTreeElement);
+      if (childTreeElement.isExpandable() && !child.hasOnlyUnloadedChildren())
+        childTreeElement.expand();
+    }
+  }
+
   inspectDOMNode() {
     this._treePane.setSelectedByUser(true);
     this._treePane.setSelectedNode(this._axNode);
   }
 
   /**
    * @override
    */
   onattach() {
     this._update();
   }
 
   _update() {
     this.titleElement().removeChildren();
 
     if (this._axNode.ignored()) {
       this._appendIgnoredNodeElement();
     } else {
       this._appendRoleElement(this._axNode.role());
-      if (this._axNode.name().value) {
+      if (this._axNode.name() && this._axNode.name().value) {
         this.titleElement().createChild('span', 'separator').textContent = '\u00A0';
         this._appendNameElement(/** @type {string} */ (this._axNode.name().value));
       }
     }
 
     if (this._axNode.hasOnlyUnloadedChildren()) {
-      this.titleElement().classList.add('children-unloaded');
+      this.listItemElement.classList.add('children-unloaded');
       this.setExpandable(true);
     } else {
       this.setExpandable(!!this._axNode.numChildren());
     }
 
     if (!this._axNode.isDOMNode())
-      this.titleElement().classList.add('no-dom-node');
+      this.listItemElement.classList.add('no-dom-node');
     this.titleElement().appendChild(this._inspectNodeButton.element);
   }
 
   /**
    * @override
    */
   expand() {
     if (!this._axNode || this._axNode.hasOnlyUnloadedChildren())
       return;
-
-    this._treePane.setExpanded(this._axNode.backendDOMNodeId(), true);
     super.expand();
   }
 
   /**
    * @override
    */
   collapse() {
     if (!this._axNode || this._axNode.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');
@@ skipping 33 matching lines @@
     return super.select(omitFocus, selectedByUser);
   }
 };
 
 /** @type {!Object<string, string>} */
 Accessibility.AXNodeTreeElement.RoleStyles = {
   internalRole: 'ax-internal-role',
   role: 'ax-role',
 };
 
-/**
- * @unrestricted
- */
-Accessibility.ExpandSiblingsButton = class {
-  /**
-   * @param {!Accessibility.AXNodeTreeParentElement} treeElement
-   * @param {number} numSiblings
-   */
-  constructor(treeElement, numSiblings) {
-    this._treeElement = treeElement;
-
-    this.element = createElementWithClass('button', 'expand-siblings');
-    this.element.textContent = Common.UIString((numSiblings === 1 ? '+ %d node' : '+ %d nodes'), numSiblings);
-    this.element.addEventListener('mousedown', this._handleMouseDown.bind(this));
-  }
-
-  /**
-   * @param {!Event} event
-   */
-  _handleMouseDown(event) {
-    this._treeElement.expandSiblings();
-    event.consume();
-  }
-};
-
-/**
- * @unrestricted
- */
-Accessibility.AXNodeTreeParentElement = class extends Accessibility.AXNodeTreeElement {
-  /**
-   * @param {!Accessibility.AccessibilityNode} axNode
-   * @param {!Accessibility.AXNodeTreeElement} inspectedNodeTreeElement
-   * @param {!Accessibility.AXTreePane} treePane
-   */
-  constructor(axNode, inspectedNodeTreeElement, treePane) {
-    super(axNode, treePane);
-
-    this._inspectedNodeTreeElement = inspectedNodeTreeElement;
-    var numSiblings = axNode.children().length - 1;
-    this._expandSiblingsButton = new Accessibility.ExpandSiblingsButton(this, numSiblings);
-    this._partiallyExpanded = false;
-  }
-
-  /**
-   * @override
-   */
-  onattach() {
-    super.onattach();
-    if (this._treePane.isExpanded(this._axNode.backendDOMNodeId()))
-      this.listItemElement.classList.add('siblings-expanded');
-    if (this._axNode.numChildren() > 1)
-      this.titleElement().insertBefore(this._expandSiblingsButton.element, this._inspectNodeButton.element);
-  }
-
-  /**
-   * @param {boolean} altKey
-   * @return {boolean}
-   * @override
-   */
-  descendOrExpand(altKey) {
-    if (!this.expanded || !this._partiallyExpanded)
-      return super.descendOrExpand(altKey);
-
-    this.expandSiblings();
-    if (altKey)
-      this.expandRecursively();
-    return true;
-  }
-
-  /**
-   * @override
-   */
-  expand() {
-    super.expand();
-    this._partiallyExpanded = true;
-  }
-
-  expandSiblings() {
-    this.listItemElement.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 Accessibility.AXNodeTreeElement(sibling, this._treePane);
-      if (foundInspectedNode)
-        this.appendChild(siblingTreeElement);
-      else
-        this.insertChild(siblingTreeElement, nextIndex++);
-    }
-  }
-};