[DevTools] Migrate AuditsPanel away from SidebarTree.

third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js

Index: third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js b/third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js
index dbacdd497036813de0ad3e5c14ab6edee3528749..6e32b4a8a93bbc966389896820f0ad4348f6cd5b 100644
--- a/third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/audits/AuditsPanel.js
@@ -38,21 +38,19 @@ WebInspector.AuditsPanel = function()
     this.registerRequiredCSS("ui/panelEnablerView.css");
     this.registerRequiredCSS("audits/auditsPanel.css");
 
-    var sidebarTree = new TreeOutline();
-    sidebarTree.element.classList.add("sidebar-tree");
+    var sidebarTree = new TreeOutlineInShadow();
+    sidebarTree.registerRequiredCSS("audits/auditsSidebarTree.css");
     this.panelSidebarElement().appendChild(sidebarTree.element);
     this.setDefaultFocusedElement(sidebarTree.element);
 
-    this.auditsTreeElement = new WebInspector.SidebarSectionTreeElement("");
-    sidebarTree.appendChild(this.auditsTreeElement);
-    this.auditsTreeElement.listItemElement.classList.add("hidden");
+    this._auditsItemTreeElement = new WebInspector.AuditsSidebarTreeElement(this);
+    sidebarTree.appendChild(this._auditsItemTreeElement);
 
-    this.auditsItemTreeElement = new WebInspector.AuditsSidebarTreeElement(this);
-    this.auditsTreeElement.appendChild(this.auditsItemTreeElement);
-
-    this.auditResultsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RESULTS"));
-    sidebarTree.appendChild(this.auditResultsTreeElement);
-    this.auditResultsTreeElement.expand();
+    this._auditResultsTreeElement = new TreeElement(WebInspector.UIString("RESULTS"), true);
+    this._auditResultsTreeElement.selectable = false;
+    this._auditResultsTreeElement.listItemElement.classList.add("audits-sidebar-results");
+    this._auditResultsTreeElement.expand();
+    sidebarTree.appendChild(this._auditResultsTreeElement);
 
     this._constructCategories();
 
@@ -114,13 +112,13 @@ WebInspector.AuditsPanel.prototype = {
     auditFinishedCallback: function(mainResourceURL, results)
     {
         var ordinal = 1;
-        for (var child of this.auditResultsTreeElement.children()) {
+        for (var child of this._auditResultsTreeElement.children()) {
             if (child.mainResourceURL === mainResourceURL)
                 ordinal++;
         }
 
         var resultTreeElement = new WebInspector.AuditResultSidebarTreeElement(this, results, mainResourceURL, ordinal);
-        this.auditResultsTreeElement.appendChild(resultTreeElement);
+        this._auditResultsTreeElement.appendChild(resultTreeElement);
         resultTreeElement.revealAndSelect();
     },
 
@@ -167,13 +165,13 @@ WebInspector.AuditsPanel.prototype = {
     {
         WebInspector.Panel.prototype.wasShown.call(this);
         if (!this._visibleView)
-            this.auditsItemTreeElement.select();
+            this._auditsItemTreeElement.select();
     },
 
     clearResults: function()
     {
-        this.auditsItemTreeElement.revealAndSelect();
-        this.auditResultsTreeElement.removeChildren();
+        this._auditsItemTreeElement.revealAndSelect();
+        this._auditResultsTreeElement.removeChildren();
     },
 
     /**
@@ -466,22 +464,19 @@ WebInspector.AuditRuleResult.prototype = {
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.AuditsPanel} panel
  */
 WebInspector.AuditsSidebarTreeElement = function(panel)
 {
+    TreeElement.call(this, WebInspector.UIString("Audits"), false);
+    this.selectable = true;
     this._panel = panel;
-    this.small = false;
-    WebInspector.SidebarTreeElement.call(this, "audits-sidebar-tree-item", WebInspector.UIString("Audits"));
+    this.listItemElement.classList.add("audits-sidebar-header");
+    this.listItemElement.insertBefore(createElementWithClass("div", "icon"), this.listItemElement.firstChild);
 }
 
 WebInspector.AuditsSidebarTreeElement.prototype = {
-    onattach: function()
-    {
-        WebInspector.SidebarTreeElement.prototype.onattach.call(this);
-    },
-
     /**
      * @override
      * @return {boolean}
@@ -492,22 +487,12 @@ WebInspector.AuditsSidebarTreeElement.prototype = {
         return true;
     },
 
-    get selectable()
-    {
-        return true;
-    },
-
-    refresh: function()
-    {
-        this.refreshTitles();
-    },
-
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    __proto__: TreeElement.prototype
 }
 
 /**
  * @constructor
- * @extends {WebInspector.SidebarTreeElement}
+ * @extends {TreeElement}
  * @param {!WebInspector.AuditsPanel} panel
  * @param {!Array.<!WebInspector.AuditCategoryResult>} results
  * @param {string} mainResourceURL
@@ -515,10 +500,13 @@ WebInspector.AuditsSidebarTreeElement.prototype = {
  */
 WebInspector.AuditResultSidebarTreeElement = function(panel, results, mainResourceURL, ordinal)
 {
+    TreeElement.call(this, String.sprintf("%s (%d)", mainResourceURL, ordinal), false);
+    this.selectable = true;
     this._panel = panel;
     this.results = results;
     this.mainResourceURL = mainResourceURL;
-    WebInspector.SidebarTreeElement.call(this, "audit-result-sidebar-tree-item", String.sprintf("%s (%d)", mainResourceURL, ordinal));
+    this.listItemElement.classList.add("audit-result-sidebar-tree-item");
+    this.listItemElement.insertBefore(createElementWithClass("div", "icon"), this.listItemElement.firstChild);
 }
 
 WebInspector.AuditResultSidebarTreeElement.prototype = {
@@ -532,12 +520,7 @@ WebInspector.AuditResultSidebarTreeElement.prototype = {
         return true;
     },
 
-    get selectable()
-    {
-        return true;
-    },
-
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    __proto__: TreeElement.prototype
 }
 
 WebInspector.AuditsPanel.show = function()