Show reasons why nodes are ignored in accessibility sidebar

Source/devtools/front_end/accessibility/AccessibilitySidebarView.js

Index: Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
diff --git a/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js b/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
index a2d5bfc7cc15f8922ea2133d380e15eb6d954dc8..19756607cc410ebd46fc945b29246584bbf2bf22 100644
--- a/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
+++ b/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
@@ -57,16 +57,27 @@ WebInspector.AXNodeSubPane = function()
 
     this.registerRequiredCSS("accessibility/accessibilityNode.css");
 
-    this._computedNameElement = this.bodyElement.createChild("div", "ax-computed-name");
+    this._computedNameElement = this.bodyElement.createChild("div", "ax-computed-name hidden");
 
-    this._infoElement = createElementWithClass("div", "info hidden");
-    this._infoElement.textContent = WebInspector.UIString("No Accessibility Node");
-    this.bodyElement.appendChild(this._infoElement);
+    this._noNodeInfo = createElementWithClass("div", "info");
+    this._noNodeInfo.textContent = WebInspector.UIString("No accessibility node");
+    this.bodyElement.appendChild(this._noNodeInfo);
+
+    this._ignoredInfo = createElementWithClass("div", "ax-ignored-info hidden");
+    this._ignoredInfo.textContent = WebInspector.UIString("Accessibility node not exposed");
+    this.bodyElement.appendChild(this._ignoredInfo);
 
     this._treeOutline = new TreeOutlineInShadow('monospace');
     this._treeOutline.registerRequiredCSS("accessibility/accessibilityNode.css");
     this._treeOutline.registerRequiredCSS("components/objectValue.css");
+    this._treeOutline.element.classList.add("hidden");
     this.bodyElement.appendChild(this._treeOutline.element);
+
+    this._ignoredReasonsTree = new TreeOutlineInShadow();
+    this._ignoredReasonsTree.element.classList.add("hidden");
+    this._ignoredReasonsTree.registerRequiredCSS("accessibility/accessibilityNode.css");
+    this._ignoredReasonsTree.registerRequiredCSS("components/objectValue.css");
+    this.bodyElement.appendChild(this._ignoredReasonsTree.element);
 };
 
 
@@ -124,18 +135,45 @@ WebInspector.AXNodeSubPane.prototype = {
 
         var treeOutline = this._treeOutline;
         treeOutline.removeChildren();
+        var ignoredReasons = this._ignoredReasonsTree;
+        ignoredReasons.removeChildren();
+
+        var target = this.parentView().parentView().node().target();
 
         if (!axNode) {
             this._computedNameElement.classList.add("hidden");
             treeOutline.element.classList.add("hidden");
-            this._infoElement.classList.remove("hidden");
+            this._ignoredInfo.classList.add("hidden");
+            ignoredReasons.element.classList.add("hidden");
+
+            this._noNodeInfo.classList.remove("hidden");
+            return;
+        } else if (axNode.ignored) {
+            console.log('ignored node:', axNode);
+            this._computedNameElement.classList.add("hidden");
+            this._noNodeInfo.classList.add("hidden");
+            treeOutline.element.classList.add("hidden");
+
+            this._ignoredInfo.classList.remove("hidden");
+            ignoredReasons.element.classList.remove("hidden");
+            function addIgnoredReason(property) {
+                ignoredReasons.appendChild(new WebInspector.AXNodeIgnoredReasonTreeElement(property, target));
+            }
+            var ignoredReasonsArray = /** @type {!Array.<!Object>} */(axNode.ignoredReasons);
+            for (var reason of ignoredReasonsArray) {
+                console.log("ignoredReason: ", reason);
+                addIgnoredReason(reason);
+            }
+            if (!ignoredReasons.firstChild())
+                ignoredReasons.element.classList.add("hidden");
             return;
         }
+        this._ignoredInfo.classList.add("hidden");
+        ignoredReasons.element.classList.add("hidden");
+        this._noNodeInfo.classList.add("hidden");
+
         this._computedNameElement.classList.remove("hidden");
         treeOutline.element.classList.remove("hidden");
-        this._infoElement.classList.add("hidden");
-
-        var target = this.parentView().parentView().node().target();
 
         this._computedNameElement.removeChildren();
         if (axNode.name && axNode.name.value)
@@ -154,7 +192,8 @@ WebInspector.AXNodeSubPane.prototype = {
         }
 
         var propertyMap = {};
-        for (var property of axNode.properties)
+        var propertiesArray = /** @type {!Array.<!Object>} */ (axNode.properties);
+        for (var property of propertiesArray)
             propertyMap[property.name] = property;
 
         for (var propertySet of [AccessibilityAgent.AXWidgetAttributes, AccessibilityAgent.AXWidgetStates, AccessibilityAgent.AXGlobalStates, AccessibilityAgent.AXLiveRegionAttributes, AccessibilityAgent.AXRelationshipAttributes]) {
@@ -367,3 +406,109 @@ WebInspector.AXNodePropertyTreeElement.TypeStyles = {
     role: "ax-role",
     internalRole: "ax-internal-role"
 };
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {!AccessibilityAgent.AXProperty} property
+ * @param {!WebInspector.Target} target
+ */
+WebInspector.AXNodeIgnoredReasonTreeElement = function(property, target)
+{
+    this._property = property;
+    this._target = target;
+
+    // Pass an empty title, the title gets made later in onattach.
+    TreeElement.call(this, "");
+    this.toggleOnClick = true;
+    this.selectable = false;
+}
+
+WebInspector.AXNodeIgnoredReasonTreeElement.prototype = {
+    /**
+     * @override
+     */
+    onattach: function()
+    {
+        this._update();
+    },
+
+
+    _update: function()
+    {
+        this.listItemElement.removeChildren();
+
+        this._reasonElement = WebInspector.AXNodeIgnoredReasonTreeElement.createReasonElement(this._property.name);
+        this.listItemElement.appendChild(this._reasonElement);
+
+        var value = this._property.value;
+        if (value.type === "idref") {
+            this._valueElement = WebInspector.AXNodePropertyTreeElement.createRelationshipValueElement(value, this._target);
+            this.listItemElement.appendChild(this._valueElement);
+        }
+    },
+
+    __proto__: TreeElement.prototype
+};
+
+/**
+ * @param {?string} reason
+ * @return {!Element}
+ */
+WebInspector.AXNodeIgnoredReasonTreeElement.createReasonElement = function(reason)
+{
+    var reasonElement = createElementWithClass("span", "ax-reason");
+    switch(reason) {
+    case "activeModalDialog":
+        reasonElement.innerHTML = "Element is hidden by active modal dialog: ";
+        break;
+    case "ancestorDisallowsChild":
+        reasonElement.innerHTML = "Element is not permitted as child of ";
+        break;
+    // http://www.w3.org/TR/wai-aria/roles#childrenArePresentational
+    case "ancestorIsLeafNode":
+        reasonElement.innerHTML = "Ancestor's children are all presentational: "
+        break;
+    case "ariaHidden":
+        reasonElement.innerHTML = "Element is <span class='source-code'>aria-hidden</span>."
+        break;
+    case "ariaHiddenRoot":
+        reasonElement.innerHTML = "<span class='source-code'>aria-hidden</span> is <span class='source-code'>true</span> on ancestor: "
+        break;
+    case "emptyAlt":
+        reasonElement.innerHTML = "Element has empty alt text."
+        break;
+    case "emptyText":
+        reasonElement.innerHTML = "No text content.";
+        break;
+    case "inert":
+        reasonElement.innerHTML = "Element is inert.";
+        break;
+    case "inheritsPresentation":
+        reasonElement.innerHTML = "Element inherits presentational role from ";
+        break;
+    case "labelContainer":
+        reasonElement.innerHTML = "Part of label element: ";
+        break;
+    case "labelFor":
+        reasonElement.innerHTML = "Label for ";
+        break;
+    case "notRendered":
+        reasonElement.innerHTML = "Element is not rendered.";
+        break;
+    case "notVisible":
+        reasonElement.innerHTML = "Element is not visible.";
+        break;
+    case "probablyPresentational":
+        reasonElement.innerHTML = "Element is presentational.";
+        break;
+    case "staticTextUsedAsNameFor":
+        reasonElement.innerHTML = "Static text node is used as name for ";
+        break;
+    case "uninteresting":
+        reasonElement.innerHTML = "Element not interesting for accessibility."
+        break;
+    }
+
+    return reasonElement;
+}