Devtools UX: Add elements toolbar with breadcrumbs

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 25 matching lines @@
 
 #elements-content:not(.elements-wrap) > div {
     display: inline-block;
     min-width: 100%;
 }
 
 #elements-content.elements-wrap {
     overflow-x: hidden;
 }
 
+.elements-topbar {
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
+    flex-shrink: 0;
+}
+
 #elements-crumbs {
     flex: 0 0 19px;
     background-color: white;
     border-top: 1px solid #ccc;
     overflow: hidden;
     height: 19px;
     width: 100%;
 }
 
+.material #elements-crumbs {
+    flex: 1 0 28px;
+    border: none;
+    height: 100%;
+}
+
 .metrics {
     padding: 8px;
     font-size: 10px;
     text-align: center;
     white-space: nowrap;
 }
 
 .metrics .label {
     position: absolute;
     font-size: 10px;
@@ skipping 654 matching lines @@
 .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;
 }