Updated styles based on user testing and UX feedback.

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 6ecc15fdb35b7e275787a85f2c6d902fcd228851..6911c26eb4b9150e114dea9f209cff2df09d369b 100644
--- a/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
+++ b/Source/devtools/front_end/accessibility/AccessibilitySidebarView.js
@@ -210,8 +210,7 @@ WebInspector.AXComputedTextSubPane = function()
 
     this._computedTextElement = this.element.createChild("div", "ax-computed-text hidden");
 
-    this._noTextInfo = this.createInfo(WebInspector.UIString("No computed text"));
-    this._noNodeInfo = this.createInfo(WebInspector.UIString("No accessibility node"));
+    this._noTextInfo = this.createInfo(WebInspector.UIString("Node has no text alternative."));
     this._treeOutline = this.createTreeOutline();
 };
 
@@ -232,15 +231,12 @@ WebInspector.AXComputedTextSubPane.prototype = {
         var target = this.node().target();
 
         if (!axNode || axNode.ignored) {
-            this._noTextInfo.classList.add("hidden");
             this._computedTextElement.classList.add("hidden");
             treeOutline.element.classList.add("hidden");
 
-            this._noNodeInfo.classList.remove("hidden");
+            this._noTextInfo.classList.remove("hidden");
             return;
         }
-        this._noNodeInfo.classList.add("hidden");
-
         this._computedTextElement.removeChildren();
 
         // TODO(aboxhall): include contents where appropriate (requires protocol change)
@@ -258,13 +254,6 @@ WebInspector.AXComputedTextSubPane.prototype = {
             treeOutline.appendChild(new WebInspector.AXNodePropertyTreeElement(property, target));
         }
 
-        for (var propertyName of ["name", "description", "help"]) {
-            if (propertyName in axNode) {
-                var defaultProperty = /** @type {!AccessibilityAgent.AXProperty} */ ({name: propertyName, value: axNode[propertyName]});
-                addProperty(defaultProperty);
-            }
-        }
-
         if ("value" in axNode && axNode.value.type === "string")
             addProperty(/** @type {!AccessibilityAgent.AXProperty} */ ({name: "value", value: axNode.value}));
 
@@ -322,10 +311,13 @@ WebInspector.AXNodeSubPane.prototype = {
             ignoredReasons.element.classList.add("hidden");
 
             this._noNodeInfo.classList.remove("hidden");
+            this.element.classList.add("ax-ignored-node-pane");
+
             return;
         } else if (axNode.ignored) {
             this._noNodeInfo.classList.add("hidden");
             treeOutline.element.classList.add("hidden");
+            this.element.classList.add("ax-ignored-node-pane");
 
             this._ignoredInfo.classList.remove("hidden");
             ignoredReasons.element.classList.remove("hidden");
@@ -343,6 +335,8 @@ WebInspector.AXNodeSubPane.prototype = {
                 ignoredReasons.element.classList.add("hidden");
             return;
         }
+        this.element.classList.remove("ax-ignored-node-pane");
+
         this._ignoredInfo.classList.add("hidden");
         ignoredReasons.element.classList.add("hidden");
         this._noNodeInfo.classList.add("hidden");
@@ -357,16 +351,16 @@ WebInspector.AXNodeSubPane.prototype = {
             treeOutline.appendChild(new WebInspector.AXNodePropertyTreeElement(property, target));
         }
 
-        var roleProperty = /** @type {!AccessibilityAgent.AXProperty} */ ({name: "role", value: axNode.role});
-        addProperty(roleProperty);
-
-        for (var propertyName of ["description", "help", "value"]) {
+        for (var propertyName of ["name", "description", "help", "value"]) {
             if (propertyName in axNode) {
                 var defaultProperty = /** @type {!AccessibilityAgent.AXProperty} */ ({name: propertyName, value: axNode[propertyName]});
                 addProperty(defaultProperty);
             }
         }
 
+        var roleProperty = /** @type {!AccessibilityAgent.AXProperty} */ ({name: "role", value: axNode.role});
+        addProperty(roleProperty);
+
         var propertyMap = {};
         var propertiesArray = /** @type {!Array.<!AccessibilityAgent.AXProperty>} */ (axNode.properties);
         for (var property of propertiesArray)
@@ -430,6 +424,10 @@ WebInspector.AXNodePropertyTreeElement.prototype = {
                 this.appendChild(child);
             }
             this._valueElement = WebInspector.AXNodePropertyTreeElement.createValueElement(value, this.listItemElement);
+            if (relatedNodes.length <= 3)
+                this.expand();
+            else
+                this.collapse();
         } else {
             this._valueElement = WebInspector.AXNodePropertyTreeElement.createValueElement(value, this.listItemElement);
         }