Devtools UX: Add elements toolbar with breadcrumbs

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..d6660c2e48f79f959b3c98bf0ba9ca458f8ec5df 100644
--- a/Source/devtools/front_end/elements/ElementsBreadcrumbs.js
+++ b/Source/devtools/front_end/elements/ElementsBreadcrumbs.js
@@ -223,9 +223,10 @@ WebInspector.ElementsBreadcrumbs.prototype = {
         // 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
@@ -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 + 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) {