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

Source/devtools/front_end/elements/elementsPanel.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 147 matching lines @@
     display: inline-block;
 }
 
 .styles-section {
     padding: 2px 2px 4px 4px;
     min-height: 18px;
     white-space: nowrap;
     background-origin: padding;
     background-clip: padding;
     -webkit-user-select: text;
-    border-bottom: 1px solid rgb(191, 191, 191);
+    border-bottom: 1px solid #ccc;
     position: relative;
 }
 
+.styles-section:last-child {
+    border-bottom: none;
+}
+
 .styles-pane .sidebar-separator {
     border-top: 0 none;
 }
 
 .styles-sidebar-placeholder {
     height: 16px;
 }
 
 .styles-section.read-only {
     background-color: #eee;
@@ skipping 221 matching lines @@
 .styles-section .style-properties .inherited {
     opacity: 0.5;
 }
 
 .styles-section .style-properties .has-ignorable-error {
     color: gray;
 }
 
 .styles-element-state-pane {
     overflow: hidden;
-    padding-top: 18px;
-    height: 56px;
+    height: 60px;
     padding-left: 2px;
     border-bottom: 1px solid rgb(189, 189, 189);
 }
 
 @keyframes styles-element-state-pane-slidein {
     from {
-        margin-top: -56px;
+        margin-top: -60px;
     }
     to {
         margin-top: 0px;
     }
 }
 
 @keyframes styles-element-state-pane-slideout {
     from {
         margin-top: 0px;
     }
     to {
-        margin-top: -56px;
+        margin-top: -60px;
     }
 }
 
 .styles-sidebar-toolbar-pane {
     position: relative;
     animation-duration: 0.1s;
     animation-direction: normal;
 }
 
 .styles-sidebar-toolbar-pane-container {
     position: relative;
-    max-height: 56px;
+    max-height: 60px;
     overflow: hidden;
 }
 
-.styles-element-state-pane.visible {
+.styles-element-state-pane {
+    background-color: #eee;
     border-bottom: 1px solid rgb(189, 189, 189);
     margin-top: 0;
 }
 
+
+.styles-element-state-pane > div {
+    margin: 6px 4px 2px;
+}
+
 .styles-element-state-pane > table {
     width: 100%;
     border-spacing: 0;
 }
 
 .styles-element-state-pane td {
     padding: 0;
 }
 
 .styles-animations-controls-pane > * {
     margin: 6px 4px;
 }
 
 .styles-animations-controls-pane {
     border-bottom: 1px solid rgb(189, 189, 189);
-    height: 56px;
+    height: 60px;
     overflow: hidden;
+    background-color: #eee;
 }
 
 .animations-controls {
     width: 100%;
     max-width: 200px;
     display: flex;
     align-items: center;
 }
 
 .animations-controls > .toolbar {
@@ skipping 24 matching lines @@
     max-height: 100px;
     background-image: url(Images/checker.png);
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }
 
 .sidebar-pane.composite {
     position: absolute;
 }
 
-.sidebar-pane.composite > .body {
-    height: 100%;
+.metrics {
+    border-bottom: 1px solid #ccc;
+}
+
+.metrics-and-styles .metrics {
+    border-top: 1px solid #ccc;
+    border-bottom: none;
 }
 
 .sidebar-pane.composite .metrics {
-    border-bottom: 1px solid rgb(64%, 64%, 64%);
-    height: 206px;
+    height: 160px;
     display: flex;
     flex-direction: column;
     -webkit-align-items: center;
     -webkit-justify-content: center;
 }
 
 .sidebar-pane .metrics-and-styles,
 .sidebar-pane .metrics-and-computed {
     display: flex !important;
     flex-direction: column !important;
     position: relative;
 }
 
 .sidebar-pane .style-panes-wrapper {
     transform: translateZ(0);
     flex: 1;
     overflow-y: auto;
     position: relative;
 }
 
-.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar,
-.sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar {
-    position: absolute;
-}
-
 .sidebar-pane-filter-box {
     display: flex;
     border-top: 1px solid rgb(191, 191, 191);
     flex-basis: 19px;
     flex-shrink: 0;
 }
 
 .sidebar-pane-filter-box > input {
     outline: none !important;
     border: none;
     width: 100%;
     margin: 0 4px;
     background: transparent;
 }
 
 .styles-filter-engaged {
     background-color: rgba(255, 255, 0, 0.5);
 }
 
-.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
-    margin-top: 4px;
-    margin-bottom: -4px;
-    position: relative;
-}
-
-.sidebar-pane.composite .platform-fonts .body {
+.sidebar-pane.composite .platform-fonts {
     padding: 1ex;
     -webkit-user-select: text;
 }
 
 .sidebar-pane.composite .platform-fonts .sidebar-separator {
     border-top: none;
 }
 
 .sidebar-pane.composite .platform-fonts .stats-section {
     margin-bottom: 5px;
 }
 
 .sidebar-pane.composite .platform-fonts .font-stats-item {
     padding-left: 1em;
 }
 
 .sidebar-pane.composite .platform-fonts .font-stats-item .delimeter {
     margin: 0 1ex 0 1ex;
 }
 
 .sidebar-pane.composite .metrics-and-styles .metrics {
     border-bottom: none;
 }
 
-.sidebar-pane > .body > .split-widget {
+.sidebar-pane > .split-widget {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }
 
-.panel.elements .sidebar-pane-toolbar > select {
-    float: right;
-    width: 23px;
-    height: 17px;
-    color: transparent;
-    background-color: transparent;
-    border: none;
-    background-repeat: no-repeat;
-    margin: 1px 0 0 0;
-    padding: 0;
-    border-radius: 0;
-    -webkit-appearance: none;
-}
-
-.panel.elements .sidebar-pane-toolbar > select:hover {
-    background-position: -23px 0;
-}
-
-.panel.elements .sidebar-pane-toolbar > select:active {
-    background-position: -46px 0;
-}
-
-.panel.elements .sidebar-pane-toolbar > select.select-filter {
-    background-image: url(Images/paneFilterButtons.png);
-}
-.panel.elements .sidebar-pane-toolbar > select > option,
-.panel.elements .sidebar-pane-toolbar > select > hr {
-    color: black;
-}
-
 .styles-section:not(.read-only) .style-properties .webkit-css-property.styles-panel-hovered,
 .styles-section:not(.read-only) .style-properties .value .styles-panel-hovered,
 .styles-section:not(.read-only) .style-properties .value.styles-panel-hovered,
 .styles-section:not(.read-only) span.simple-selector.styles-panel-hovered {
     text-decoration: underline;
     cursor: default;
 }
 
 .styles-clipboard-only {
     display: inline-block;
@@ skipping 104 matching lines @@
     margin-left: 10px;
     text-overflow: clip;
 }
 
 .style-properties li.editing-sub-part {
     padding: 3px 6px 8px 18px;
     margin: -1px -6px -8px -6px;
     text-overflow: clip;
 }
 
-.styles-pane-toolbar {
-    float: right;
-    margin-top: -3px;
-    background-color: rgba(255, 255, 255, 0.8);
-}
-
 .properties-widget-section {
     padding: 2px 0px 2px 5px;
 }