Devtools UX: Add elements toolbar with breadcrumbs

Source/devtools/front_end/elements/breadcrumbs.css

 /*
  * Copyright 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.
  */
 
 .crumbs {
     display: inline-block;
     pointer-events: auto;
     cursor: default;
     font-size: 11px;
     line-height: 17px;
+    white-space: nowrap;
 }
 
 .crumbs .crumb {
     display: inline-block;
     padding: 0 7px;
     height: 18px;
     white-space: nowrap;
 }
 
+:host-context(.material) .crumb {
+    padding: 0px 4px;
+    cursor: pointer;
+    border-radius: 2px;
+    line-height: 18px;
+    margin: 5px 0px 5px 7px;
+    position: relative;
+    color: hsl(0, 0%, 39%);
+}
+
+:host-context(.material) .crumb:not(.collapsed):not(:first-child):before {
+    content: '⟩';
+    position: absolute;
+    left: -7px;
+    color: hsl(0, 0%, 39%);
+    width: 7px;
+    text-align: center;
+}
+
 .crumbs .crumb.collapsed > * {
     display: none;
 }
 
 .crumbs .crumb.collapsed::before {
     content: "\2026";
     font-weight: bold;
 }
 
 .crumbs .crumb.compact .extra {
     display: none;
 }
 
 .crumbs .crumb.selected, .crumbs .crumb.selected:hover {
     background-color: rgb(56, 121, 217);
     color: white;
     text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;
 }
 
+:host-context(.material) .crumb.selected {
+    background-color: hsl(216, 68%, 53%) !important;
+}
+
 .crumbs .crumb:hover {
     background-color: rgb(216, 216, 216);
 }
+
+:host-context(.material) .crumb:hover {
+    background-color: hsla(216, 68%, 53%, 0.2);
+}