Updated styles based on user testing and UX feedback.

Source/devtools/front_end/accessibility/AccessibilitySidebarView.js

 // Copyright 2015 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.ThrottledWidget}
  */
 WebInspector.AccessibilitySidebarView = function()
 {
@@ skipping 192 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.AccessibilitySubPane}
  */
 WebInspector.AXComputedTextSubPane = function()
 {
     WebInspector.AccessibilitySubPane.call(this, WebInspector.UIString("Computed Text"));
 
     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();
 };
 
 
 WebInspector.AXComputedTextSubPane.prototype = {
     /**
      * @param {?AccessibilityAgent.AXNode} axNode
      * @override
      */
     setAXNode: function(axNode)
     {
         if (this._axNode === axNode)
             return;
         this._axNode = axNode;
 
         var treeOutline = this._treeOutline;
         treeOutline.removeChildren();
         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)
         this._computedTextElement.classList.toggle("hidden", !axNode.name || !axNode.name.value);
         if (axNode.name && axNode.name.value)
             this._computedTextElement.createChild("div").textContent = axNode.name.value;
 
         var foundProperty = false;
         /**
          * @param {!AccessibilityAgent.AXProperty} property
          */
         function addProperty(property)
         {
             foundProperty = true;
             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}));
 
         var propertiesArray = /** @type {!Array.<!AccessibilityAgent.AXProperty> } */ (axNode.properties);
         for (var property of propertiesArray) {
             if (property.name == AccessibilityAgent.AXWidgetAttributes.Valuetext) {
                 addProperty(property);
                 break;
             }
         }
@@ skipping 37 matching lines @@
         var ignoredReasons = this._ignoredReasonsTree;
         ignoredReasons.removeChildren();
         var target = this.node().target();
 
         if (!axNode) {
             treeOutline.element.classList.add("hidden");
             this._ignoredInfo.classList.add("hidden");
             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");
             /**
              * @param {!AccessibilityAgent.AXProperty} property
              */
             function addIgnoredReason(property)
             {
                 ignoredReasons.appendChild(new WebInspector.AXNodeIgnoredReasonTreeElement(property, axNode, target));
             }
             var ignoredReasonsArray = /** @type {!Array.<!Object>} */(axNode.ignoredReasons);
             for (var reason of ignoredReasonsArray)
                 addIgnoredReason(reason);
             if (!ignoredReasons.firstChild())
                 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");
 
         treeOutline.element.classList.remove("hidden");
 
         /**
          * @param {!AccessibilityAgent.AXProperty} property
          */
         function addProperty(property)
         {
             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)
             propertyMap[property.name] = property;
 
         for (var propertySet of [AccessibilityAgent.AXWidgetAttributes, AccessibilityAgent.AXWidgetStates, AccessibilityAgent.AXGlobalStates, AccessibilityAgent.AXLiveRegionAttributes, AccessibilityAgent.AXRelationshipAttributes]) {
             for (var propertyKey in propertySet) {
                 var property = propertySet[propertyKey];
                 if (property in propertyMap)
                     addProperty(propertyMap[property]);
@@ skipping 43 matching lines @@
             var numNodes = relatedNodes.length;
             var description = "(" + numNodes + (numNodes == 1 ? " node" : " nodes") + ")";
             value.value = description;
             for (var i = 0; i < relatedNodes.length; i++) {
                 var backendId = relatedNodes[i].backendNodeId;
                 var deferredNode = new WebInspector.DeferredDOMNode(this._target, relatedNodes[i].backendNodeId);
                 var child = new WebInspector.AXRelatedNodeTreeElement(deferredNode);
                 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);
         }
 
         var separatorElement = createElementWithClass("span", "separator");
         separatorElement.textContent = ": ";
 
         this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this._nameElement, separatorElement, this._valueElement);
     },
@@ skipping 238 matching lines @@
         reasonElement = WebInspector.formatLocalized("Static text node is used as name for ", [], "");
         break;
     case "uninteresting":
         reasonElement = WebInspector.formatLocalized("Element not interesting for accessibility.", [], "")
         break;
     }
     if (reasonElement)
         reasonElement.classList.add("ax-reason");
     return reasonElement;
 }