Devtools UX: Add elements toolbar with breadcrumbs

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 205 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 normalSizes = [];
+        const leftMargin = Runtime.experiments.isEnabled("materialDesign") ? 7 : 0;

[pfeldman, 2015/06/01 16:20:33]

Can we do this using css?

[samli, 2015/06/02 05:00:24]

No. I don't want to impact the actual width of the element due to background
changes on selection/hover. I can getComputedStyle and get the marginLeft, but
that seems redundant.

[pfeldman, 2015/06/02 10:54:52]

Please don't use getComputedStyle and I don't understand why you can't achieve
this via changes to CSS / DOM.

[samli, 2015/06/03 03:31:52]

Done.

         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];
-            normalSizes[i] = crumb.offsetWidth;
+            normalSizes[i] = crumb.offsetWidth + leftMargin;
         }
 
         // 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 + leftMargin;
         }
 
         // Layout 3: Measure collapsed crumb size
         crumbs.firstChild.classList.add("collapsed");
-        var collapsedSize = crumbs.firstChild.offsetWidth;
+        var collapsedSize = crumbs.firstChild.offsetWidth + leftMargin;
 
         // 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;
@@ skipping 172 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
 }