[DevTools] Migrate RequestHeadersView to TreeOutlineInShadow.

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

Index: third_party/WebKit/Source/devtools/front_end/network/requestHeadersView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/network/requestHeadersView.css b/third_party/WebKit/Source/devtools/front_end/network/requestHeadersView.css
index 468b02cfd2ef97c92a9d98a02e224c393f8257bd..d4065eb75b68e4cfef6cdbfb64182c1b3958fff3 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/requestHeadersView.css
+++ b/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;

[allada, 2016/09/09 01:40:40]

Do we need to explicitly set padding to 0 for non-left paddings, if not use
padding-left: 4px; instead?

[dgozman, 2016/09/09 02:27:50]

I'll follow up with removing default padding from treeoutline.css.

+    flex-grow: 1;
+    overflow-y: auto;
+    margin: 0;
+}