Show human-readable names for accessibility properties

Source/devtools/front_end/accessibility/AccessibilitySidebarView.js

-// Copyright (c) 2015 The Chromium Authors. All rights reserved.
+// 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.ThrottledElementsSidebarView}
  */
 WebInspector.AccessibilitySidebarView = function()
 {
     WebInspector.ThrottledElementsSidebarView.call(this);
@@ skipping 185 matching lines @@
  * @extends {WebInspector.AccessibilitySubPane}
  */
 WebInspector.AXComputedTextSubPane = function()
 {
     WebInspector.AccessibilitySubPane.call(this, WebInspector.UIString("Computed Text"));
 
     this._computedTextElement = this.bodyElement.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._treeOutline = this.createTreeOutline("monospace");
+    this._treeOutline = this.createTreeOutline();
 };
 
 
 WebInspector.AXComputedTextSubPane.prototype = {
     /**
      * @param {?AccessibilityAgent.AXNode} axNode
      * @override
      */
     setAXNode: function(axNode)
     {
@@ skipping 13 matching lines @@
             this._noNodeInfo.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.textContent = 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));
         }
@@ skipping 27 matching lines @@
  * @constructor
  * @extends {WebInspector.AccessibilitySubPane}
  */
 WebInspector.AXNodeSubPane = function()
 {
     WebInspector.AccessibilitySubPane.call(this, WebInspector.UIString("Accessibility Node"));
 
     this._noNodeInfo = this.createInfo(WebInspector.UIString("No accessibility node"));
     this._ignoredInfo = this.createInfo(WebInspector.UIString("Accessibility node not exposed"), "ax-ignored-info hidden");
 
-    this._treeOutline = this.createTreeOutline('monospace');
+    this._treeOutline = this.createTreeOutline();
     this._ignoredReasonsTree = this.createTreeOutline();
 };
 
 
 WebInspector.AXNodeSubPane.prototype = {
     /**
      * @param {?AccessibilityAgent.AXNode} axNode
      * @override
      */
     setAXNode: function(axNode)
@@ skipping 144 matching lines @@
 WebInspector.AXNodePropertyTreeElement.populateWithNode = function(treeNode, axNode, target)
 {
 }
 
 /**
  * @param {?string} name
  * @return {!Element}
  */
 WebInspector.AXNodePropertyTreeElement.createNameElement = function(name)
 {
-    var nameElement = createElementWithClass("span", "ax-name");
-    if (/^\s|\s$|^$|\n/.test(name))
-        nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
-    else
+    var nameElement = createElement("span");
+    var AXAttributes = WebInspector.AccessibilityStrings.AXAttributes;
+    if (name in AXAttributes) {
+        nameElement.textContent = WebInspector.UIString(AXAttributes[name].name);
+        nameElement.title = WebInspector.UIString(AXAttributes[name].description);
+        nameElement.classList.add("ax-readable-name");
+    } else {
         nameElement.textContent = name;
+        nameElement.classList.add("ax-name");
+    }
     return nameElement;
 }
 
 /**
  * @param {!AccessibilityAgent.AXValue} value
  * @param {!WebInspector.Target} target
  * @return {?Element}
  */
 WebInspector.AXNodePropertyTreeElement.createRelationshipValueElement = function(value, target)
 {
@@ skipping 12 matching lines @@
     return valueElement;
 }
 
 /**
  * @param {!AccessibilityAgent.AXValue} value
  * @param {!Element} parentElement
  * @return {!Element}
  */
 WebInspector.AXNodePropertyTreeElement.createValueElement = function(value, parentElement)
 {
-    var valueElement = createElementWithClass("span", "object-value");
+    var valueElement = createElementWithClass("span", "monospace");
     var type = value.type;
     var prefix;
     var valueText;
     var suffix;
     if (type === "string") {
         // Render \n as a nice unicode cr symbol.
         prefix = "\"";
         valueText = value.value.replace(/\n/g, "\u21B5");
         suffix = "\"";
         valueElement._originalTextContent = "\"" + value.value + "\"";
@@ skipping 166 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;
 }