[DevTools] Migrate AuditsPanel away from SidebarTree.

This is a step towards removing SidebarTree and moving all
tree outlines into shadow.

BUG=none

Review-Url: https://codereview.chromium.org/2342193002
Cr-Commit-Position: refs/heads/master@{#419077}

third_party/WebKit/LayoutTests/inspector/audits/audits-test.js

@@ -5,7 +5,7 @@ InspectorTest.preloadPanel("audits");
 
 InspectorTest.collectAuditResults = function(callback)
 {
-    WebInspector.panels.audits.showResults(WebInspector.panels.audits.auditResultsTreeElement.firstChild().results);
+    WebInspector.panels.audits.showResults(WebInspector.panels.audits._auditResultsTreeElement.firstChild().results);
     var trees = WebInspector.panels.audits.visibleView.element.querySelectorAll(".audit-result-tree");
     for (var i = 0; i < trees.length; ++i) {
         var liElements = trees[i].shadowRoot.querySelectorAll("li");

third_party/WebKit/Source/devtools/BUILD.gn

@@ -359,6 +359,7 @@ devtools_animation_js_files = [
 devtools_audits_js_files = [
   "front_end/audits/auditResultTree.css",
   "front_end/audits/auditsPanel.css",
+  "front_end/audits/auditsSidebarTree.css",
   "front_end/audits/AuditCategories.js",
   "front_end/audits/AuditCategory.js",
   "front_end/audits/AuditController.js",

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()

third_party/WebKit/Source/devtools/front_end/audits/auditsPanel.css

@@ -29,14 +29,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.audits-sidebar-tree-item .icon {
-    content: url(Images/resourcesTimeGraphIcon.png);
-}
-
-.audit-result-sidebar-tree-item .icon {
-    content: url(Images/resourceDocumentIcon.png);
-}
-
 .audit-launcher-view .audit-launcher-view-content {
     padding: 0 0 0 16px;
     white-space: nowrap;

third_party/WebKit/Source/devtools/front_end/audits/auditsSidebarTree.css

+/*
+ * Copyright 2016 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.
+ */
+
+.tree-outline {
+    padding: 0;
+}
+
+.tree-outline li::before {
+    display: none;
+}
+
+.tree-outline ol {
+    padding-left: 0;
+}
+
+.tree-outline li .tree-element-title {
+    margin-left: 4px;
+}
+
+li.audits-sidebar-header {
+    padding-left: 10px;
+    height: 36px;
+}
+
+.audits-sidebar-header .icon {
+    content: url(Images/resourcesTimeGraphIcon.png);
+}
+
+li.audits-sidebar-results {
+    height: 18px;
+    padding: 1px 10px;
+    margin-top: 1px;
+    color: rgb(92, 110, 129);
+    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+}
+
+li.audit-result-sidebar-tree-item {
+    padding-left: 10px;
+    height: 36px;
+    margin-top: 1px;
+    line-height: 34px;
+    border-top: 1px solid transparent;
+}
+
+.audit-result-sidebar-tree-item .icon {
+    content: url(Images/resourceDocumentIcon.png);
+}

third_party/WebKit/Source/devtools/front_end/audits/module.json

@@ -25,6 +25,7 @@
     ],
     "resources": [
         "auditsPanel.css",
+        "auditsSidebarTree.css",
         "auditResultTree.css"
     ]
 }