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

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

 // Copyright (c) 2014 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.
 
 /**
  * @constructor
  * @extends {WebInspector.SDKObject}
  * @param {!WebInspector.AccessibilityModel} accessibilityModel
  * @param {!AccessibilityAgent.AXNode} payload
  */
@@ skipping 10 matching lines @@
     if (this._ignored && "ignoredReasons" in payload)
         this._ignoredReasons = payload.ignoredReasons;
 
     this._role = payload.role || null;
     this._name = payload.name || null;
     this._description = payload.description || null;
     this._value = payload.value || null;
     this._properties = payload.properties || null;
     this._parentId = payload.parentId || null;
     this._childIds = payload.childIds || null;
-    this._domNodeId = payload.domNodeId || null;
+    this._backendDomNodeId = payload.backendDomNodeId || null;
 };
 
 WebInspector.AccessibilityNode.prototype = {
     /**
      * @return {boolean}
      */
     ignored: function()
     {
         return this._ignored;
     },
@@ skipping 66 matching lines @@
     /**
      * @return {?WebInspector.AccessibilityNode}
      */
     parentNode: function()
     {
         if (!this._parentId)
             return null;
         return this._accessibilityModel.axNodeForId(this._parentId);
     },
 
+    /**
+     * @return {boolean}
+     */
+    isDOMNode: function()
+    {
+        return !!this._backendDomNodeId;
+    },
+
+    /**
+     * @return {?WebInspector.DOMNode}
+     */
+    domNode: function()
+    {
+        return this._domNode || null;
+    },
+
+    /**
+     * @param {?WebInspector.DOMNode} domNode
+     */
+    _setDOMNode: function(domNode)
+    {
+        this._domNode = domNode;
+        if (domNode)
+            this._accessibilityModel.setAXNodeForDOMNode(domNode, this);
+    },
+
+    /**
+     * @return {!Promise<?WebInspector.DOMNode>}
+     */
+    resolveDOMNode: function()
+    {
+        if (this._domNode)
+            return Promise.resolve(this._domNode);
+        if (!this._backendDomNodeId)
+            return Promise.resolve(/** @type {?WebInspector.DOMNode} */ (null));
+
+        var deferredNode = new WebInspector.DeferredDOMNode(this.target(), this._backendDomNodeId);
+        return deferredNode.resolvePromise()
+            .then((domNode) => {
+                this._setDOMNode(domNode);
+                return domNode;
+            });
+    },
+
+    /**
+     * @return {!Array<!WebInspector.AccessibilityNode>}
+     */
+    children: function()
+    {
+        var children = [];
+        if (!this._childIds)
+            return children;
+
+        for (var childId of this._childIds) {
+            var child = this._accessibilityModel.axNodeForId(childId);
+            if (child)
+                children.push(child);
+        }
+
+        return children;
+    },
+
+    /**
+     * @return {number}
+     */
+    numChildren: function()
+    {
+        if (!this._childIds)
+            return 0;
+        return this._childIds.length;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasOnlyUnloadedChildren: function()
+    {
+        if (!this._childIds || !this._childIds.length)
+            return false;
+
+        return !this._childIds.some((id) => this._accessibilityModel.axNodeForId(id) !== undefined);
+    },
+
+    /**
+     * TODO(aboxhall): Remove once protocol is stable.
+     * @param {!WebInspector.AccessibilityNode} inspectedNode
+     * @param {string=} leadingSpace
+     * @return {string}
+     */
+    printSelfAndChildren: function(inspectedNode, leadingSpace)
+    {
+        var string = leadingSpace || "";
+        if (this._role)
+            string += this._role.value;
+        else
+            string += "<no role>";
+        string += (this._name ? " " + this._name.value : "");
+        string += " " + this._id;
+        if (this._domNode)
+            string += " (" + this._domNode.nodeName() + ")";
+        if (this === inspectedNode)
+            string += " *";
+        for (var child of this.children())
+            string += "\n" + child.printSelfAndChildren(inspectedNode, (leadingSpace || "") + "  ");
+        return string;
+    },
+
     __proto__: WebInspector.SDKObject.prototype
 };
 
 /**
  * @constructor
  * @extends {WebInspector.SDKModel}
  * @param {!WebInspector.Target} target
  */
 WebInspector.AccessibilityModel = function(target)
 {
     WebInspector.SDKModel.call(this, WebInspector.AccessibilityModel, target);
     this._agent = target.accessibilityAgent();
 
     /** @type {!Map<string, !WebInspector.AccessibilityNode>} */
     this._axIdToAXNode = new Map();
+    this._domNodeToAXNode = new Map();
 };
 
 WebInspector.AccessibilityModel.prototype = {
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {!Promise<?WebInspector.AccessibilityNode>}
+     */
+    setDOMNode: function(node)

[dgozman, 2016/10/31 21:36:30]

setDOMNode is a strange api for a model. It should be managed outside (e.g. by
the pane).

[aboxhall, 2016/10/31 22:45:15]

The reason is that the model is centered on the inspected DOM node and
invalidated when that changes.

+    {
+        this._axIdToAXNode.clear();
+        this._inspectedDOMNode = node;
 
-    /**
-     * @param {string} axId
-     * @return {?WebInspector.AccessibilityNode}
-     */
-    axNodeForId: function(axId)
-    {
-        return this._axIdToAXNode.get(axId);
-    },
-
-    /**
-     * @param {string} axId
-     * @param {!WebInspector.AccessibilityNode} axNode
-     */
-    _setAXNodeForAXId: function(axId, axNode)
-    {
-        this._axIdToAXNode.set(axId, axNode);
+        return this._requestPartialAXTree(node);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @return {!Promise<?Array<!WebInspector.AccessibilityNode>>}
+     * @return {!Promise}
      */
-    getAXNodeChain: function(node)
+    _requestPartialAXTree: function(node)
     {
-        this._axIdToAXNode.clear();
-
         /**
          * @this {WebInspector.AccessibilityModel}
          * @param {?string} error
          * @param {!Array<!AccessibilityAgent.AXNode>=} payloads
-         * @return {?Array<!WebInspector.AccessibilityNode>}
          */
         function parsePayload(error, payloads)
         {
             if (error) {
                 console.error("AccessibilityAgent.getAXNodeChain(): " + error);
                 return null;
             }
 
             if (!payloads)
-                return null;
+                return;
 
-            var nodes = [];
             for (var payload of payloads)
-                nodes.push(new WebInspector.AccessibilityNode(this, payload));
+                new WebInspector.AccessibilityNode(this, payload);
+        }
+        return this._agent.getPartialAXTree(node.id, true, parsePayload.bind(this));
+    },
 
-            return nodes;
-        }
-        return this._agent.getAXNodeChain(node.id, true, parsePayload.bind(this));
+    /**
+     * @return {?WebInspector.AccessibilityNode}
+     */
+    getInspectedAXNode: function()
+    {
+        return this._domNodeToAXNode.get(this._inspectedDOMNode);
+    },
+
+    /**
+     * @param {string} axId
+     * @return {?WebInspector.AccessibilityNode}
+     */
+    axNodeForId: function(axId)
+    {
+        return this._axIdToAXNode.get(axId);
+    },
+
+    /**
+     * @param {string} axId
+     * @param {!WebInspector.AccessibilityNode} axNode
+     */
+    _setAXNodeForAXId: function(axId, axNode)
+    {
+        this._axIdToAXNode.set(axId, axNode);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} domNode
+     * @return {?WebInspector.AccessibilityNode}
+     */
+    axNodeForDOMNode: function(domNode)
+    {
+        return this._domNodeToAXNode.get(domNode);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} domNode
+     * @param {!WebInspector.AccessibilityNode} axNode
+     */
+    setAXNodeForDOMNode: function(domNode, axNode)
+    {
+        this._domNodeToAXNode.set(domNode, axNode);
+    },
+
+    // TODO(aboxhall): Remove once protocol is stable.
+    logTree: function()
+    {
+        var inspectedNode = this._domNodeToAXNode.get(this._inspectedDOMNode);
+        if (!inspectedNode)
+            return;
+        var rootNode = inspectedNode;
+        while (rootNode.parentNode())
+            rootNode = rootNode.parentNode();
+        console.log(rootNode.printSelfAndChildren(inspectedNode));
+    },
+
+    /**
+     * @return {!Promise}
+     */
+    resolveAllDOMNodes: function()
+    {
+        var promises = [];
+        for (var axNode of this._axIdToAXNode.values())
+            promises.push(axNode.resolveDOMNode());
+        return Promise.all(promises);
     },
 
     __proto__: WebInspector.SDKModel.prototype
 };
 
 WebInspector.AccessibilityModel._symbol = Symbol("AccessibilityModel");
 /**
  * @param {!WebInspector.Target} target
  * @return {!WebInspector.AccessibilityModel}
  */
 WebInspector.AccessibilityModel.fromTarget = function(target)
 {
     if (!target[WebInspector.AccessibilityModel._symbol])
         target[WebInspector.AccessibilityModel._symbol] = new WebInspector.AccessibilityModel(target);
 
     return target[WebInspector.AccessibilityModel._symbol];
 };