Devtools UI: Upgrade breadcrumbs to material design UI

Source/devtools/front_end/elements/ElementsBreadcrumbs.js

Index: Source/devtools/front_end/elements/ElementsBreadcrumbs.js
diff --git a/Source/devtools/front_end/elements/ElementsBreadcrumbs.js b/Source/devtools/front_end/elements/ElementsBreadcrumbs.js
index 0b1c4e4d737abc1beec7efaaf86a0025af4d49b3..423acf155f99e8c7603fede827418db723dbe173 100644
--- a/Source/devtools/front_end/elements/ElementsBreadcrumbs.js
+++ b/Source/devtools/front_end/elements/ElementsBreadcrumbs.js
@@ -222,10 +222,11 @@ WebInspector.ElementsBreadcrumbs.prototype = {
 
         // Layout 1: Measure total and normal crumb sizes
         var contentElementWidth = this.contentElement.offsetWidth;
+        var margin = parseInt(window.getComputedStyle(/** @type {!Element} */(crumbs.firstChild)).marginLeft, 10) * 2;

[pfeldman, 2015/09/17 17:46:00]

We should not use getComputedStyle.

         var normalSizes = [];
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];
-            normalSizes[i] = crumb.offsetWidth;
+            normalSizes[i] = crumb.offsetWidth + margin;
         }
 
         // Layout 2: Measure collapsed crumb sizes
@@ -236,12 +237,12 @@ WebInspector.ElementsBreadcrumbs.prototype = {
         }
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];
-            compactSizes[i] = crumb.offsetWidth;
+            compactSizes[i] = crumb.offsetWidth + margin;
         }
 
         // Layout 3: Measure collapsed crumb size
         crumbs.firstChild.classList.add("collapsed");
-        var collapsedSize = crumbs.firstChild.offsetWidth;
+        var collapsedSize = crumbs.firstChild.offsetWidth + margin;
 
         // Clean up.
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
@@ -262,7 +263,7 @@ WebInspector.ElementsBreadcrumbs.prototype = {
                 }
                 totalSize += crumb.classList.contains("compact") ? compactSizes[i] : normalSizes[i];
             }
-            const rightPadding = 10;
+            const rightPadding = 4;
             return totalSize + rightPadding < contentElementWidth;
         }