[DevTools] Migrate ProfilesPanel to TreeOutlineInShadow.

third_party/WebKit/Source/devtools/front_end/profiler/profilesSidebarTree.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.
+ */
+
+:host {

[pfeldman, 2016/09/13 17:32:51]

We should not have patches this big. Styling tree outline in shadow should be at
most 100 lines / 10 selectors.

[dgozman, 2016/09/13 20:06:50]

Lines after 48 style the contents, not tree outline itself. We can go as far as
attaching a separate stylesheet to every single TreeElement, but let's not do
that for now.

+    padding: 0;
+}
+
+ol.tree-outline {
+    overflow: auto;
+    flex: auto;
+    padding: 0;
+    margin: 0;
+}
+
+.tree-outline li {
+    height: 36px;
+    padding-right: 5px;
+    margin-top: 1px;
+    line-height: 34px;
+    border-top: 1px solid transparent;
+}
+
+.tree-outline li:not(.parent)::before {
+    display: none;
+}
+
+:host-context(.some-expandable) .tree-outline li:not(.parent) {
+    margin-left: 10px;
+}
+
+.tree-outline li.profiles-tree-section {
+    height: 18px;
+    padding: 0 10px;
+    white-space: nowrap;
+    margin-top: 1px;
+    color: rgb(92, 110, 129);
+    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+    line-height: 18px;
+}
+
+.tree-outline li.profiles-tree-section::before {
+    display: none;
+}
+
+.title-container > .save-link {
+    text-decoration: underline;
+    margin-left: auto;
+    display: none;
+}
+
+li.selected .title-container > .save-link {
+    display: block;
+}
+
+.tree-outline > .icon {
+    margin-left: 16px;
+}
+
+li .icon {
+    width: 32px;
+    height: 32px;
+    margin-top: 1px;
+    margin-right: 3px;
+    flex: none;
+}
+
+li.wait .icon {
+    content: none;
+}
+
+li.wait .icon::before {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: 4px;
+    border: 3px solid grey;
+    border-radius: 12px;
+    clip: rect(0, 15px, 15px, 0);
+    content: "";
+    position: absolute;
+    -webkit-animation: spinner-animation 1s linear infinite;
+    box-sizing: border-box;
+}
+
+li.wait.small .icon::before {
+    width: 14px;
+    height: 14px;
+    margin: 1px;
+    clip: rect(0, 9px, 9px, 0);
+    border-width: 2px;
+}
+
+li.wait.selected .icon::before {
+    border-color: white;
+}
+
+@-webkit-keyframes spinner-animation {
+    from { transform: rotate(0); }
+    to { transform: rotate(360deg); }
+}
+
+
+li.small {
+    height: 20px;
+}
+
+li.small .icon {
+    width: 16px;
+    height: 16px;
+}
+
+li .titles {
+    display: flex;
+    flex-direction: column;
+    top: 5px;
+    line-height: 12px;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex: auto;
+}
+
+li .titles > .title-container {
+    display: flex;
+}
+
+li.small .titles {
+    top: 2px;
+    line-height: normal;
+}
+
+li:not(.small) .title::after {
+    content: "\A";
+    white-space: pre;
+}
+
+li .subtitle {
+    font-size: 80%;
+}
+
+li.small .subtitle {
+    display: none;
+}
+
+/* Heap profiles */
+
+.heap-snapshot-sidebar-tree-item .icon {
+    content: url(Images/profileIcon.png);
+}
+
+.heap-snapshot-sidebar-tree-item.small .icon {
+    content: url(Images/profileSmallIcon.png);
+}
+
+/* Launcher */
+
+.profile-launcher-view-tree-item {
+    margin-left: 0 !important;
+}
+
+.profile-launcher-view-tree-item > .icon {
+    width: 8px !important;
+    visibility: hidden;
+}
+
+/* CPU profiles */
+
+.profile-sidebar-tree-item .icon {
+    content: url(Images/profileIcon.png);
+}
+
+.profile-sidebar-tree-item.small .icon {
+    content: url(Images/profileSmallIcon.png);
+}
+
+.profile-group-sidebar-tree-item .icon {
+    content: url(Images/profileGroupIcon.png);
+}