Revert of Devtools UI: Upgrade breadcrumbs to material design UI

Source/devtools/front_end/elements/breadcrumbs.css

Index: Source/devtools/front_end/elements/breadcrumbs.css
diff --git a/Source/devtools/front_end/elements/breadcrumbs.css b/Source/devtools/front_end/elements/breadcrumbs.css
index 2869ec0151f7cc09845b54622d125019b1414b46..1eb9159e59ba8e51956a4e95632ebabe7b0aa362 100644
--- a/Source/devtools/front_end/elements/breadcrumbs.css
+++ b/Source/devtools/front_end/elements/breadcrumbs.css
@@ -9,28 +9,37 @@
     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;
-    padding: 0px 4px;
-    border-radius: 2px;
+}
+
+:host-context(.material) .crumb {
+    padding: 0px 4px 0px 11px;
     cursor: pointer;
     line-height: 18px;
-    margin: 4px;
+    margin: 4px 0px;
     position: relative;
     color: hsl(0, 0%, 35%);
 }
 
-.crumb:not(.collapsed):not(:first-child):before {
-    content: "\276D";
+:host-context(.material) .crumb:not(.collapsed):first-child {
+    padding-left: 2px;
+}
+
+:host-context(.material) .crumb:not(.collapsed):not(:first-child):before {
+    content: "\27E9";
     position: absolute;
-    left: -7.5px;
-    font-size: 9px;
+    left: 0px;
+    color: hsl(0, 0%, 35%);
+    width: 7px;
     text-align: center;
-    color: hsl(0, 0%, 60%);
 }
 
 .crumbs .crumb.collapsed > * {
@@ -47,10 +56,25 @@
 }
 
 .crumbs .crumb.selected, .crumbs .crumb.selected:hover {
+    background-color: rgb(56, 121, 217);
     color: white;
-    background-color: hsl(217, 89%, 61%) !important;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;
+}
+
+:host-context(.material) .crumb.selected {
+    color: hsl(0, 0%, 35%);
+    background-color: transparent !important;
+}
+
+:host-context(.material) .crumb.selected:before {
+    color: hsl(217, 89%, 61%) !important;
 }
 
 .crumbs .crumb:hover {
-    background-color: hsl(211, 100%, 95%);
+    background-color: rgb(216, 216, 216);
 }
+
+:host-context(.material) .crumb:hover {
+    background-color: transparent;
+    color: hsl(0, 0%, 20%) !important;
+}