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

Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 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 {
     flex: none;
 }
 
 .toolbar-shadow {
     position: relative;
     white-space: nowrap;
     height: 24px;
     overflow: hidden;
     z-index: 12;
     display: flex;
     flex: none;
     align-items: center;
 }
 
+.toolbar-shadow.with-border {
+    border-bottom: 1px solid #ddd;
+}
+
 :host-context(.material) .toolbar-shadow {
     height: 28px;
 }
 
 .toolbar-shadow.vertical {
     flex-direction: column;
     height: auto;
     width: 32px;
 }
 
@@ skipping 84 matching lines @@
 }
 
 button.toolbar-item {
     width: 30px;
 }
 
 :host-context(.material) button.toolbar-item {
     width: 32px;
 }
 
-:host-context(.material) button.toolbar-item:hover {
-    background-color: #eee;
+.toolbar-item:hover {
+    background-color: rgba(110, 110, 110, 0.1);
 }
 
 button.toolbar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
 button.toolbar-item:hover .glyph {
     opacity: 1;
 }
 
@@ skipping 58 matching lines @@
     -webkit-appearance: none;
     border: 0;
     border-radius: 0;
     padding: 0 15px 0 5px;
     margin-right: -10px;
     position: relative;
     line-height: 22px;
 }
 
 .toolbar-item.checkbox {
-    margin: auto 6px auto 0;
-    height: auto;
-    display: flex;
+    padding-right: 5px;
 }
 
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 144px;
     background-color: rgba(0, 0, 0, 0.75);
     opacity: 0.8;
     z-index: 1;
     width: 32px;
     height: 24px;
@@ skipping 224 matching lines @@
 
 .filter-toolbar-item > .glyph {
     -webkit-mask-position: -32px -48px;
 }
 
 .filter-toolbar-item.toggled-shown .glyph {
     background-color: rgb(66, 129, 235);
 }
 
 .filter-toolbar-item.toggled-shown {
-    background-color: rgba(105, 105, 105, 0.1);
+    background-color: #eee;
 }
 
 .filter-toolbar-item.toggled-active .glyph {
     background-color: rgb(216, 0, 0);
 }
 
 .waterfall-toolbar-item .glyph {
     -webkit-mask-position: -128px -48px;
 }
 
 .pan-toolbar-item .glyph {
     -webkit-mask-position: -98px -120px;
 }
 
 .center-toolbar-item .glyph {
     -webkit-mask-position: -128px -120px;
 }
 
 .rotate-toolbar-item .glyph {
     -webkit-mask-position: -160px -120px;
 }
 
-.element-state-toolbar-item .glyph {
+.pin-toolbar-item .glyph {
     -webkit-mask-position: -256px -120px;
 }
 
+.pin-toolbar-item.toggled-on,
+.animation-toolbar-item.toggled-on {
+    background-color: #eee;
+}
+
 .animation-toolbar-item .glyph {
     -webkit-mask-position: -192px -120px;
 }
 
 .eyedropper-toolbar-item .glyph {
     -webkit-mask-position: -288px -120px;
 }
 
 .add-toolbar-item .glyph {
     -webkit-mask-position: -224px -120px;
@@ skipping 24 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }