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

Source/devtools/front_end/components/breakpointsList.css

Index: Source/devtools/front_end/components/breakpointsList.css
diff --git a/Source/devtools/front_end/components/breakpointsList.css b/Source/devtools/front_end/components/breakpointsList.css
index 16e52de84a15d7968938806fde99a93e9e961bbf..133f64af2bdd2d71d5625e368e20e67bb13afe3b 100644
--- a/Source/devtools/front_end/components/breakpointsList.css
+++ b/Source/devtools/front_end/components/breakpointsList.css
@@ -27,7 +27,7 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar-pane > .body .breakpoint-condition {
+.sidebar-pane .breakpoint-condition {
     display: block;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -68,15 +68,7 @@ ol.breakpoint-list {
 }
 
 .breakpoint-list li:hover {
-    background-color: rgba(56, 121, 217, 0.2);
-}
-
-.breakpoint-list .checkbox-elem {
-    margin: 0 4px;
-    vertical-align: top;
-    position: relative;
-    z-index: 1;
-    top: 3px;
+    background-color: #eee;
 }
 
 .breakpoint-list .source-text {
@@ -120,13 +112,9 @@ li.breakpoint-hit .breakpoint-hit-marker {
 
 .event-listener-breakpoints li {
     margin-left: 12px;
-    white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;
     -webkit-user-select: text;
     cursor: default;
-    padding-top: 2px;
-    line-height: 12px;
 }
 
 .event-listener-breakpoints li.parent {
@@ -141,7 +129,7 @@ li.breakpoint-hit .breakpoint-hit-marker {
     content: "a";
     width: 8px;
     float: left;
-    margin-right: 4px;
+    margin: 2px 2px 0 -2px;
     color: transparent;
     text-shadow: none;
 }
@@ -162,11 +150,6 @@ li.breakpoint-hit .breakpoint-hit-marker {
 
 .event-listener-breakpoints .children li {
     margin-left: 12px;
-    height: 16px;
-}
-
-.event-listener-breakpoints .checkbox-elem {
-    font-size: 10px;
 }
 
 .async-operations li > label {