Devtools UI: Upgrade breadcrumbs to material design UI

Source/devtools/front_end/elements/ElementsBreadcrumbs.js

 // 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.
 
 /**
  * @constructor
  * @extends {WebInspector.HBox}
  */
 WebInspector.ElementsBreadcrumbs = function()
 {
@@ skipping 204 matching lines @@
 
             // Find the focused crumb index.
             if (crumb === focusedCrumb)
                 focusedIndex = i;
 
             crumb.classList.remove("compact", "collapsed", "hidden");
         }
 
         // 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
         var compactSizes = [];
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];
             crumb.classList.add("compact");
         }
         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) {
             var crumb = crumbs.childNodes[i];
             crumb.classList.remove("compact", "collapsed");
         }
 
         function crumbsAreSmallerThanContainer()
         {
             var totalSize = 0;
             for (var i = 0; i < crumbs.childNodes.length; ++i) {
                 var crumb = crumbs.childNodes[i];
                 if (crumb.classList.contains("hidden"))
                     continue;
                 if (crumb.classList.contains("collapsed")) {
                     totalSize += collapsedSize;
                     continue;
                 }
                 totalSize += crumb.classList.contains("compact") ? compactSizes[i] : normalSizes[i];
             }
-            const rightPadding = 10;
+            const rightPadding = 4;
             return totalSize + rightPadding < contentElementWidth;
         }
 
         if (crumbsAreSmallerThanContainer())
             return; // No need to compact the crumbs, they all fit at full size.
 
         var BothSides = 0;
         var AncestorSide = -1;
         var ChildSide = 1;
 
@@ skipping 151 matching lines @@
         compact(selectedCrumb);
         if (crumbsAreSmallerThanContainer())
             return;
 
         // Collapse the selected crumb as a last resort. Pass true to prevent coalescing.
         collapse(selectedCrumb, true);
     },
 
     __proto__: WebInspector.HBox.prototype
 }