perf - avoid layout trashing in breadcrumbs

src/vs/base/browser/dom.ts

@@ -551,6 +551,16 @@ export class Dimension {
 		this.width = width;
 		this.height = height;
 	}
+
+	static equals(a: Dimension, b: Dimension): boolean {
+		if (a === b) {
+			return true;
+		}
+		if (!a || !b) {
+			return false;
+		}
+		return a.width === b.width && a.height === b.height;
+	}
 }
 
 export function getTopLeftOffset(element: HTMLElement): { left: number; top: number; } {

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts

@@ -77,6 +77,9 @@ export class BreadcrumbsWidget {
 	private _focusedItemIdx: number = -1;
 	private _selectedItemIdx: number = -1;
 
+	private _pendingLayout: IDisposable;
+	private _dimension: dom.Dimension;
+
 	constructor(
 		container: HTMLElement
 	) {
@@ -105,6 +108,7 @@ export class BreadcrumbsWidget {
 
 	dispose(): void {
 		dispose(this._disposables);
+		dispose(this._pendingLayout);
 		this._onDidSelectItem.dispose();
 		this._onDidFocusItem.dispose();
 		this._onDidChangeFocus.dispose();
@@ -115,13 +119,20 @@ export class BreadcrumbsWidget {
 	}
 
 	layout(dim: dom.Dimension): void {
+		if (dom.Dimension.equals(dim, this._dimension)) {
+			return;
+		}
+		this._dimension = dim;
 		if (dim) {
 			this._domNode.style.width = `${dim.width}px`;
 			this._domNode.style.height = `${dim.height}px`;
 		}
+		dispose(this._pendingLayout);
+		this._pendingLayout = dom.scheduleAtNextAnimationFrame(() => {
 			this._scrollable.setRevealOnScroll(false);
 			this._scrollable.scanDomNode();
 			this._scrollable.setRevealOnScroll(true);
+		});
 	}
 
 	style(style: IBreadcrumbsWidgetStyles): void {