[DevTools] Migrate RequestHeadersView to TreeOutlineInShadow.

This is a step towards turning all tree outlines into independent web components,
removing global styles related to it and allowing more components to encapsulate their inner details.

BUG=none

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

third_party/WebKit/Source/devtools/BUILD.gn

@@ -507,6 +507,7 @@ devtools_network_js_files = [
   "front_end/network/networkManageCustomHeadersView.css",
   "front_end/network/networkPanel.css",
   "front_end/network/requestCookiesView.css",
+  "front_end/network/requestHeadersTree.css",
   "front_end/network/requestHeadersView.css",
   "front_end/network/webSocketFrameView.css",
   "front_end/network/xmlTree.css",

third_party/WebKit/Source/devtools/front_end/network/RequestHeadersView.js

@@ -44,8 +44,11 @@ WebInspector.RequestHeadersView = function(request)
     this._showRequestHeadersText = false;
     this._showResponseHeadersText = false;
 
-    var root = new TreeOutline(true);
-    root.element.classList.add("outline-disclosure");
+    var root = new TreeOutlineInShadow();
+    root.registerRequiredCSS("network/requestHeadersTree.css");
+    root.element.classList.add("request-headers-tree");
+    root.setFocusable(false);
+    root.makeDense();
     root.expandTreeElementsWhenArrowing = true;
     this.element.appendChild(root.element);
 

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

@@ -118,6 +118,7 @@
         "networkManageCustomHeadersView.css",
         "networkPanel.css",
         "requestCookiesView.css",
+        "requestHeadersTree.css",
         "requestHeadersView.css",
         "webSocketFrameView.css",
         "xmlTree.css",

third_party/WebKit/Source/devtools/front_end/network/requestHeadersTree.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 > ol {
+    padding-bottom: 5px;
+}
+
+.tree-outline > .parent {
+    -webkit-user-select: none;
+    font-weight: bold;
+    color: #616161;
+    margin-top: -1px;
+    height: 20px;
+    border-top: solid 1px #e0e0e0;
+    display: flex;
+    align-items: center;
+}
+
+.tree-outline li {
+    display: block;
+}
+
+.tree-outline li:not(.parent) {
+    margin-left: 10px;
+}
+
+.tree-outline li:not(.parent)::before {
+    display: none;
+}
+
+.tree-outline .caution {
+    margin-left: 4px;
+    display: inline-block;
+    font-weight: bold;
+}
+
+.tree-outline li.expanded .header-count {
+    display: none;
+}
+
+.tree-outline li .header-toggle {
+    display: none;
+}
+
+.tree-outline li .status-from-cache {
+    color: gray;
+}
+
+.tree-outline li.expanded .header-toggle {
+    display: inline;
+    margin-left: 30px;
+    font-weight: normal;
+    color: rgb(45%, 45%, 45%);
+}
+
+.tree-outline li .header-toggle:hover {
+    color: rgb(20%, 20%, 45%);
+    cursor: pointer;
+}
+
+.tree-outline .header-name {
+    color: rgb(33%, 33%, 33%);
+    display: inline-block;
+    margin-right: 0.5em;
+    font-weight: bold;
+    vertical-align: top;
+    white-space: pre-wrap;
+}
+
+.tree-outline .header-value {
+    display: inline;
+    margin-right: 1em;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 1px;
+}
+
+.tree-outline .empty-request-header {
+    color: rgba(33%, 33%, 33%, 0.5);
+}

third_party/WebKit/Source/devtools/front_end/network/requestHeadersView.css

@@ -9,104 +9,6 @@
     overflow: auto;
 }
 
-.request-headers-view .outline-disclosure {
-    -webkit-padding-start: 4px;
-    flex-grow: 1;
-    overflow-y: auto;
-}
-
-.request-headers-view .outline-disclosure > ol {
-    padding-bottom: 5px;
-}
-
-.request-headers-view .outline-disclosure > .parent {
-    -webkit-user-select: none;
-    font-weight: bold;
-    color: #616161;
-    margin-top: -1px;
-    height: 20px;
-    border-top: solid 1px #e0e0e0;
-    display: flex;
-    align-items: center;
-}
-
-.request-headers-view .outline-disclosure li.parent::before {
-    position: static;
-    width: 13px;
-    height: 9px;
-    -webkit-mask-position: -4px -98px;
-    background-image: none;
-    opacity: 1;
-}
-
-.request-headers-view .outline-disclosure li.parent.expanded::before {
-    -webkit-mask-position: -20px -98px;
-}
-
-.request-headers-view .properties-tree li.parent {
-    margin-left: 10px;
-}
-
-.request-headers-view .outline-disclosure .children li {
-    white-space: nowrap;
-    margin-left: 10px;
-}
-
-.request-headers-view .outline-disclosure .children li::before {
-    display: none;
-}
-
-.request-headers-view .outline-disclosure .caution {
-    margin-left: 4px;
-    display: inline-block;
-    font-weight: bold;
-}
-
-.request-headers-view .outline-disclosure li.expanded .header-count {
-    display: none;
-}
-
-.request-headers-view .outline-disclosure li .header-toggle {
-    display: none;
-}
-
-.request-headers-view .outline-disclosure li .status-from-cache {
-    color: gray;
-}
-
-.request-headers-view .outline-disclosure li.expanded .header-toggle {
-    display: inline;
-    margin-left: 30px;
-    font-weight: normal;
-    color: rgb(45%, 45%, 45%);
-}
-
-.request-headers-view .outline-disclosure li .header-toggle:hover {
-    color: rgb(20%, 20%, 45%);
-    cursor: pointer;
-}
-
-.request-headers-view .outline-disclosure .header-name {
-    color: rgb(33%, 33%, 33%);
-    display: inline-block;
-    margin-right: 0.5em;
-    font-weight: bold;
-    vertical-align: top;
-    white-space: pre-wrap;
-}
-
-.request-headers-view .outline-disclosure .header-value {
-    display: inline;
-    margin-right: 1em;
-    white-space: pre-wrap;
-    word-break: break-all;
-    margin-top: 1px;
-}
-
-.request-headers-view .outline-disclosure .empty-request-header {
-    color: rgba(33%, 33%, 33%, 0.5);
-}
-
 .resource-status-image {
     margin-top: -2px;
     margin-right: 3px;
@@ -119,3 +21,10 @@
     flex: 0 0 19px;
     padding: 0 4px;
 }
+
+.request-headers-tree {
+    padding: 0 0 0 4px;
+    flex-grow: 1;
+    overflow-y: auto;
+    margin: 0;
+}

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css

@@ -125,3 +125,20 @@ ol.tree-outline:focus li.selected * {
 .tree-outline ol.children.expanded {
     display: block;
 }
+
+.tree-outline.tree-outline-dense li {
+    margin-top: 1px;
+    min-height: 12px;
+}
+
+.tree-outline.tree-outline-dense li.parent {
+    margin-top: 0;
+}
+
+.tree-outline.tree-outline-dense li.parent::before {
+    top: 0;
+}
+
+.tree-outline.tree-outline-dense ol {
+    padding-left: 10px;
+}

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

@@ -342,6 +342,11 @@ TreeOutlineInShadow.prototype = {
         this._disclosureElement.classList.add("tree-outline-disclosure-hide-overflow");
     },
 
+    makeDense: function()
+    {
+        this.contentElement.classList.add("tree-outline-dense");
+    },
+
     __proto__: TreeOutline.prototype
 }