We can do what Firefox does, and have the breadcrumbs scroll horizontally instead of using ... buttons.

Related: https://bugs.chromium.org/p/chromium/issues/detail?id=354503

@einbinder Do you mind if I take a whack at this? I can't tell if you were an owner from the beginning or you took it recently because you wanted it :)

Got the go ahead from @einbinder to take it over.

Issue 2551403002: https://codereview.chromium.org/2551403002/

Much of the perceived slowness seems to be from the styles panel though, not the breadcrumbs themselves. The CSS visualizations took upwards of 120ms to reconstruct with CPU throttling on (compared to breadcrumbs ~15ms) and are only throttled at a rate of 100ms. Without throttling, styles panel still takes ~40ms to breadcrumbs now ~3ms.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/bd86a87396a5ddb188b44744b5a46b111b7bf6aa

commit bd86a87396a5ddb188b44744b5a46b111b7bf6aa
Author: phulce <phulce@chromium.org>
Date: Sat Dec 10 03:46:31 2016

[DevTools] ElementsBreadcrumbs Perf Improvements & Cleanup

Reduces the number of layouts performed.
Moves update to be run in a requestAnimationFrame callback.
Cleans up the code a bit to move pieces of the massive update functions
into their own methods for a clearer breakdown of where time is spent.

BUG= 657141 
R=lushnikov,paulirish

Review-Url: https://codereview.chromium.org/2551403002
Cr-Commit-Position: refs/heads/master@{#437742}

[modify] https://crrev.com/bd86a87396a5ddb188b44744b5a46b111b7bf6aa/third_party/WebKit/LayoutTests/inspector/elements/breadcrumb-updates.html
[modify] https://crrev.com/bd86a87396a5ddb188b44744b5a46b111b7bf6aa/third_party/WebKit/LayoutTests/inspector/elements/shadow/breadcrumb-shadow-roots.html
[modify] https://crrev.com/bd86a87396a5ddb188b44744b5a46b111b7bf6aa/third_party/WebKit/Source/devtools/front_end/elements/ElementsBreadcrumbs.js