From 528da15df485adf75bf7c133755abf8301a1d639 Mon Sep 17 00:00:00 2001
From: Johannes Rieken <johannes.rieken@gmail.com>
Date: Wed, 3 Oct 2018 12:34:18 +0200
Subject: [PATCH] perf - avoid layout trashing in breadcrumbs

---
 src/vs/base/browser/dom.ts                      | 10 ++++++++++
 .../browser/ui/breadcrumbs/breadcrumbsWidget.ts | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
index 08c3ccc335f..231142522ba 100644
--- a/src/vs/base/browser/dom.ts
+++ b/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; } {
diff --git a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
index 6f8f375f8e0..b17fb43021a 100644
--- a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
+++ b/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`;
 		}
-		this._scrollable.setRevealOnScroll(false);
-		this._scrollable.scanDomNode();
-		this._scrollable.setRevealOnScroll(true);
+		dispose(this._pendingLayout);
+		this._pendingLayout = dom.scheduleAtNextAnimationFrame(() => {
+			this._scrollable.setRevealOnScroll(false);
+			this._scrollable.scanDomNode();
+			this._scrollable.setRevealOnScroll(true);
+		});
 	}
 
 	style(style: IBreadcrumbsWidgetStyles): void {
-- 
GitLab