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

Source/devtools/front_end/ui/toolbar.css

Index: Source/devtools/front_end/ui/toolbar.css
diff --git a/Source/devtools/front_end/ui/toolbar.css b/Source/devtools/front_end/ui/toolbar.css
index 829d9f3615c2a6e043384abbcdf43473bdb48ff2..ca4f0eaee61c6d8bc46301814f25362121418521 100644
--- a/Source/devtools/front_end/ui/toolbar.css
+++ b/Source/devtools/front_end/ui/toolbar.css
@@ -19,6 +19,10 @@
     align-items: center;
 }
 
+.toolbar-shadow.with-border {
+    border-bottom: 1px solid #ddd;
+}
+
 :host-context(.material) .toolbar-shadow {
     height: 28px;
 }
@@ -123,8 +127,8 @@ 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 {
@@ -203,9 +207,7 @@ select.toolbar-item {
 }
 
 .toolbar-item.checkbox {
-    margin: auto 6px auto 0;
-    height: auto;
-    display: flex;
+    padding-right: 5px;
 }
 
 .toolbar-item > .glyph {
@@ -450,7 +452,7 @@ button.record-toolbar-item.toggled-on .glyph {
 }
 
 .filter-toolbar-item.toggled-shown {
-    background-color: rgba(105, 105, 105, 0.1);
+    background-color: #eee;
 }
 
 .filter-toolbar-item.toggled-active .glyph {
@@ -473,10 +475,15 @@ button.record-toolbar-item.toggled-on .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;
 }