[DevTools] Migrate AuditsPanel away from SidebarTree.

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.PanelWithSidebar}
  */
 WebInspector.AuditsPanel = function()
 {
     WebInspector.PanelWithSidebar.call(this, "audits");
     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();
 
     this._auditController = new WebInspector.AuditController(this);
     this._launcherView = new WebInspector.AuditLauncherView(this._auditController);
     for (var id in this.categoriesById)
         this._launcherView.addCategory(this.categoriesById[id]);
 
     var extensionCategories = WebInspector.extensionServer.auditCategories();
     for (var i = 0; i < extensionCategories.length; ++i) {
@@ skipping 41 matching lines @@
         }
     },
 
     /**
      * @param {string} mainResourceURL
      * @param {!Array.<!WebInspector.AuditCategoryResult>} results
      */
     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();
     },
 
     /**
      * @param {!Array.<!WebInspector.AuditCategoryResult>} categoryResults
      */
     showResults: function(categoryResults)
     {
         if (!categoryResults._resultLocation) {
             categoryResults.sort((a, b) => (a.title || "").localeCompare(b.title || ""));
@@ skipping 26 matching lines @@
         this._visibleView = x;
 
         if (x)
             this.splitWidget().setMainWidget(x);
     },
 
     wasShown: function()
     {
         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();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _extensionAuditCategoryAdded: function(event)
     {
         var category = /** @type {!WebInspector.ExtensionAuditCategory} */ (event.data);
         this.addCategory(new WebInspector.AuditExtensionCategory(category.extensionOrigin, category.id, category.displayName, category.ruleCount));
     },
@@ skipping 272 matching lines @@
 
         var formattedResult = String.format(format, substitutions, this._formatters, fragment, append).formattedResult;
         if (formattedResult instanceof Node)
             formattedResult.normalize();
         return this.addChild(formattedResult);
     }
 }
 
 /**
  * @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}
      */
     onselect: function()
     {
         this._panel.showLauncherView();
         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
  * @param {number} ordinal
  */
 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 = {
     /**
      * @override
      * @return {boolean}
      */
     onselect: function()
     {
         this._panel.showResults(this.results);
         return true;
     },
 
-    get selectable()
-    {
-        return true;
-    },
-
-    __proto__: WebInspector.SidebarTreeElement.prototype
+    __proto__: TreeElement.prototype
 }
 
 WebInspector.AuditsPanel.show = function()
 {
     WebInspector.inspectorView.setCurrentPanel(WebInspector.AuditsPanel.instance());
 }
 
 /**
  * @return {!WebInspector.AuditsPanel}
  */
 WebInspector.AuditsPanel.instance = function()
 {
     return /** @type {!WebInspector.AuditsPanel} */ (self.runtime.sharedInstance(WebInspector.AuditsPanel));
 }
 
 // Contributed audit rules should go into this namespace.
 WebInspector.AuditRules = {};
 
 /**
  * Contributed audit categories should go into this namespace.
  * @type {!Object.<string, function(new:WebInspector.AuditCategory)>}
  */
 WebInspector.AuditCategories = {};