DevTools: limit number of crumbs strip layouts during the update to 3.

Source/devtools/front_end/ElementsPanel.js

Index: Source/devtools/front_end/ElementsPanel.js
diff --git a/Source/devtools/front_end/ElementsPanel.js b/Source/devtools/front_end/ElementsPanel.js
index 995f5d32bc4a94fa8b14f3aef6b50f442ab4c482..fffc60d71d07bbde1e3d9ffdf74ee572a5794b54 100644
--- a/Source/devtools/front_end/ElementsPanel.js
+++ b/Source/devtools/front_end/ElementsPanel.js
@@ -127,8 +127,8 @@ WebInspector.ElementsPanel.prototype = {
         if (this._splitView.isVertical())
             width -= this._splitView.sidebarSize();
         this.treeOutline.setVisibleWidth(width);
-        this.updateBreadcrumbSizes();
         this.treeOutline.updateSelection();
+        this.updateBreadcrumbSizes();
     },
 
     /**
@@ -755,15 +755,9 @@ WebInspector.ElementsPanel.prototype = {
 
             if (current === this.selectedDOMNode())
                 crumb.classList.add("selected");
-            if (!crumbs.childNodes.length)
-                crumb.classList.add("end");
-
             crumbs.insertBefore(crumb, crumbs.firstChild);
         }
 
-        if (crumbs.hasChildNodes())
-            crumbs.lastChild.classList.add("start");
-
         this.updateBreadcrumbSizes();
     },
 
@@ -775,24 +769,17 @@ WebInspector.ElementsPanel.prototype = {
         if (!this.isShowing())
             return;
 
-        if (document.body.offsetWidth <= 0) {
-            // The stylesheet hasn't loaded yet or the window is closed,
-            // so we can't calculate what is need. Return early.
-            return;
-        }
-
         var crumbs = this.crumbsElement;
-        if (!crumbs.childNodes.length || crumbs.offsetWidth <= 0)
-            return; // No crumbs, do nothing.
+        if (!crumbs.firstChild)
+            return;
 
-        // A Zero index is the right most child crumb in the breadcrumb.
         var selectedIndex = 0;
         var focusedIndex = 0;
         var selectedCrumb;
 
-        var i = 0;
-        var crumb = crumbs.firstChild;
-        while (crumb) {
+        // Reset crumb styles.
+        for (var i = 0; i < crumbs.childNodes.length; ++i) {
+            var crumb = crumbs.childNodes[i];
             // Find the selected crumb and index.
             if (!selectedCrumb && crumb.classList.contains("selected")) {
                 selectedCrumb = crumb;
@@ -803,31 +790,53 @@ WebInspector.ElementsPanel.prototype = {
             if (crumb === focusedCrumb)
                 focusedIndex = i;
 
-            // Remove any styles that affect size before
-            // deciding to shorten any crumbs.
-            if (crumb !== crumbs.lastChild)
-                crumb.classList.remove("start");
-            if (crumb !== crumbs.firstChild)
-                crumb.classList.remove("end");
+            crumb.classList.remove("compact", "collapsed", "hidden");
+        }
 
-            crumb.classList.remove("compact");
-            crumb.classList.remove("collapsed");
-            crumb.classList.remove("hidden");
+        // Layout 1: Measure total and normal crumb sizes
+        var contentElementWidth = this.contentElement.offsetWidth;
+        var normalSizes = [];
+        for (var i = 0; i < crumbs.childNodes.length; ++i) {
+            var crumb = crumbs.childNodes[i];
+            normalSizes[i] = crumb.offsetWidth;
+        }
 
-            crumb = crumb.nextSibling;
-            ++i;
+        // 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;
         }
 
-        // Restore the start and end crumb classes in case they got removed in coalesceCollapsedCrumbs().
-        // The order of the crumbs in the document is opposite of the visual order.
-        crumbs.firstChild.classList.add("end");
-        crumbs.lastChild.classList.add("start");
+        // Layout 3: Measure collapsed crumb size
+        crumbs.firstChild.classList.add("collapsed");
+        var collapsedSize = crumbs.firstChild.offsetWidth;
+
+        // Clean up.
+        for (var i = 0; i < crumbs.childNodes.length; ++i) {
+            var crumb = crumbs.childNodes[i];
+            crumb.classList.remove("compact", "collapsed");
+        }
 
-        var contentElement = this.contentElement;
         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;
-            return crumbs.offsetWidth + rightPadding < contentElement.offsetWidth;
+            return totalSize + rightPadding < contentElementWidth;
         }
 
         if (crumbsAreSmallerThanContainer())
@@ -838,26 +847,13 @@ WebInspector.ElementsPanel.prototype = {
         var ChildSide = 1;
 
         /**
-         * @param {boolean=} significantCrumb
+         * @param {function(!Element)} shrinkingFunction
+         * @param {number} direction
          */
-        function makeCrumbsSmaller(shrinkingFunction, direction, significantCrumb)
+        function makeCrumbsSmaller(shrinkingFunction, direction)
         {
-            if (!significantCrumb)
-                significantCrumb = (focusedCrumb || selectedCrumb);
-
-            if (significantCrumb === selectedCrumb)
-                var significantIndex = selectedIndex;
-            else if (significantCrumb === focusedCrumb)
-                var significantIndex = focusedIndex;
-            else {
-                var significantIndex = 0;
-                for (var i = 0; i < crumbs.childNodes.length; ++i) {
-                    if (crumbs.childNodes[i] === significantCrumb) {
-                        significantIndex = i;
-                        break;
-                    }
-                }
-            }
+            var significantCrumb = focusedCrumb || selectedCrumb;
+            var significantIndex = significantCrumb === selectedCrumb ? selectedIndex : focusedIndex;
 
             function shrinkCrumbAtIndex(index)
             {
@@ -951,6 +947,9 @@ WebInspector.ElementsPanel.prototype = {
             }
         }
 
+        /**
+         * @param {!Element} crumb
+         */
         function compact(crumb)
         {
             if (crumb.classList.contains("hidden"))
@@ -958,6 +957,10 @@ WebInspector.ElementsPanel.prototype = {
             crumb.classList.add("compact");
         }
 
+        /**
+         * @param {!Element} crumb
+         * @param {boolean=} dontCoalesce
+         */
         function collapse(crumb, dontCoalesce)
         {
             if (crumb.classList.contains("hidden"))
@@ -982,11 +985,11 @@ WebInspector.ElementsPanel.prototype = {
         }
 
         // Compact ancestor crumbs, or from both sides if focused.
-        if (makeCrumbsSmaller(compact, (focusedCrumb ? BothSides : AncestorSide)))
+        if (makeCrumbsSmaller(compact, focusedCrumb ? BothSides : AncestorSide))
             return;
 
         // Collapse ancestor crumbs, or from both sides if focused.
-        if (makeCrumbsSmaller(collapse, (focusedCrumb ? BothSides : AncestorSide)))
+        if (makeCrumbsSmaller(collapse, focusedCrumb ? BothSides : AncestorSide))
             return;
 
         if (!selectedCrumb)