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

Source/devtools/front_end/sidebarPane.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 11 matching lines @@
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 .sidebar-pane {
     position: relative;
+    flex-direction: column;
+    display: flex;
 }
 
-.sidebar-pane > .body {
-    position: relative;
-    display: none;
-    flex-direction: column;
-}
-
-.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;
 }
 
 .sidebar-tabbed-pane .tabbed-pane-header {
     border-bottom: 1px solid rgb(202, 202, 202);
     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 {
     background-image: url(Images/toolbarButtonGlyphs.png);
     background-size: 352px 144px;
     opacity: 0.5;
     float: left;
     width: 11px;
     height: 11px;
     margin-right: 2px;
     content: "a";
     color: transparent;
-    position: relative;
-    top: 3px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .sidebar-pane-title::before {
     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 .sidebar-pane-title::before {
     background-position: -4px -96px;
 }
 
 .sidebar-pane-title.expanded::before {
     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;
     margin-left: 0;
     margin-top: 0;
     margin-bottom: 0.25em;
     vertical-align: bottom;
 }
 
 .hidden-callframes-message {
     text-align: center;
     font-style: italic;
     padding: 4px;
     color: #888;
     background-color: #FFFFC2;
 }
 
 .sidebar-pane-button-new-rule {
     background-image: url(Images/paneAddButtons.png);
     background-position: 0 0;
     position: absolute;
     height: 16px;
     width: 23px;
-    right: 10px;
-    bottom: 1px;
+    right: 2px;
+    bottom: 3px;
     visibility: hidden;
 }
 
 .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-button-new-rule {
     visibility: visible;
 }
 
 .sidebar-pane-button-new-rule:hover {
     background-position: -23px 0;
 }