DevTools: migrate sidebar pane's titleElement to use Toolbar.

Source/devtools/front_end/sidebarPane.css

Index: Source/devtools/front_end/sidebarPane.css
diff --git a/Source/devtools/front_end/sidebarPane.css b/Source/devtools/front_end/sidebarPane.css
index 6cae0acd8bf3b36305e03327f1e41a95a9771937..531fd28c893461d6ed62b91b14b1718f20c3b48e 100644
--- a/Source/devtools/front_end/sidebarPane.css
+++ b/Source/devtools/front_end/sidebarPane.css
@@ -29,25 +29,17 @@
 
 .sidebar-pane {
     position: relative;
-}
-
-.sidebar-pane > .body {
-    position: relative;
-    display: none;
     flex-direction: column;
+    display: flex;
 }
 
-.sidebar-pane > .body .info {
+.sidebar-pane .info {
     text-align: center;
     font-style: italic;
     padding: 6px;
     color: #888;
 }
 
-.sidebar-pane.visible > .body {
-    display: flex;
-}
-
 .sidebar-pane .section .properties-tree {
     padding-left: 16px;
 }
@@ -57,27 +49,25 @@
     background-color: #eee;
 }
 
-.sidebar-pane-stack > .sidebar-pane.visible:nth-last-of-type(1) {
-    border-bottom: 1px solid rgb(189, 189, 189);
-}
-
 .sidebar-pane-title {
-    position: relative;
+    display: flex;
+    align-items: center;
     background-color: #eee;
     height: 20px;
     padding: 0 5px;
-    border-top: 1px solid rgb(189, 189, 189);
-    border-bottom: 1px solid rgb(189, 189, 189);
-    line-height: 18px;
-    margin-top: -1px;
+    border-top: 1px solid #bbb;
     white-space: nowrap;
     overflow: hidden;
+    position: relative;
 }
 
-.sidebar-pane-title:active {
-    background-color: rgb(204, 204, 204);
-    border-top: 1px solid rgb(178, 178, 178);
-    border-bottom: 1px solid rgb(178, 178, 178);
+.sidebar-pane-title.expanded,
+.sidebar-pane-title:last-child {
+    border-bottom: 1px solid #ddd;
+}
+
+.sidebar-pane-title:first-child {
+    border-top: none;
 }
 
 .sidebar-pane-title::before {
@@ -90,8 +80,6 @@
     margin-right: 2px;
     content: "a";
     color: transparent;
-    position: relative;
-    top: 3px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
@@ -108,59 +96,16 @@
     background-position: -20px -96px;
 }
 
-.sidebar-pane-toolbar {
-    left: 0;
-    right: 4px;
-    top: 0;
+.sidebar-pane-title .sidebar-pane-toolbar {
     position: absolute;
-    pointer-events: none;
+    right: 0;
+    top: -3px;
 }
 
 .sidebar-pane-toolbar > * {
     pointer-events: auto;
 }
 
-.sidebar-pane-toolbar > .pane-title-button,
-.sidebar-pane-toolbar > label {
-    float: right;
-    height: 16px;
-    background-color: transparent;
-    border: none;
-    background-repeat: no-repeat;
-    margin: 1px 0 0 0;
-    padding: 0;
-    border-radius: 0;
-    -webkit-appearance: none;
-}
-
-.sidebar-pane-toolbar > .pane-title-button {
-    width: 23px;
-    color: transparent;
-}
-
-.sidebar-pane-toolbar > .pane-title-button:hover {
-    background-position: -23px 0;
-}
-
-.sidebar-pane-toolbar > .pane-title-button:active,
-.sidebar-pane-toolbar > .pane-title-button.toggled {
-    background-position: -46px 0;
-}
-
-.sidebar-pane-toolbar > .pane-title-button.add {
-     background-image: url(Images/paneAddButtons.png);

[dgozman, 2015/06/09 13:27:02]

Remove the image?

[pfeldman, 2015/06/09 13:40:59]

Can't do yet. 

-     position: relative;
- }
-
-.sidebar-pane-toolbar > .pane-title-button.refresh {
-    background-image: url(Images/paneRefreshButtons.png);

[dgozman, 2015/06/09 13:27:02]

ditto

-}
-
-.sidebar-pane-toolbar > label.scripts-callstack-async {
-    margin-right: 5px;
-    line-height: 16px;
-}
-
 .section > .header input[type=checkbox] {
     height: 1em;
     width: 1em;
@@ -184,8 +129,8 @@
     position: absolute;
     height: 16px;
     width: 23px;
-    right: 10px;
-    bottom: 1px;
+    right: 2px;
+    bottom: 3px;
     visibility: hidden;
 }