Defer breadcrumbs reveal layout measurement

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dmitrivMS

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

@@ -10,7 +10,7 @@ import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { commonPrefixLength } from '../../../common/arrays.js';
 import { ThemeIcon } from '../../../common/themables.js';
 import { Emitter, Event } from '../../../common/event.js';
-import { DisposableStore, dispose, IDisposable } from '../../../common/lifecycle.js';
+import { DisposableStore, dispose, IDisposable, MutableDisposable } from '../../../common/lifecycle.js';
 import { ScrollbarVisibility } from '../../../common/scrollable.js';
 import './breadcrumbsWidget.css';
 
@@ -60,14 +60,16 @@ export class BreadcrumbsWidget {
 
 	private _pendingDimLayout: IDisposable | undefined;
 	private _pendingLayout: IDisposable | undefined;
+	private readonly _pendingReveal = this._disposables.add(new MutableDisposable<IDisposable>());
 	private _dimension: dom.Dimension | undefined;
 
 	constructor(
 		container: HTMLElement,
 		horizontalScrollbarSize: number,
 		horizontalScrollbarVisibility: ScrollbarVisibility = ScrollbarVisibility.Auto,
 		separatorIcon: ThemeIcon,
-		styles: IBreadcrumbsWidgetStyles
+		styles: IBreadcrumbsWidgetStyles,
+		private readonly _measure: typeof dom.measure = dom.measure,
 	) {
 		this._domNode = document.createElement('div');
 		this._domNode.className = 'monaco-breadcrumbs';
@@ -241,18 +243,33 @@ export class BreadcrumbsWidget {
 	}
 
 	private _reveal(nth: number, minimal: boolean): void {
+		this._pendingReveal.clear();
 		if (nth < 0 || nth >= this._nodes.length) {
 			return;
 		}
 		const node = this._nodes[nth];
 		if (!node) {
 			return;
 		}
+		if (!minimal) {
+			this._pendingReveal.value = this._measure(dom.getWindow(this._domNode), () => {
+				if (this._nodes[nth] === node) {
+					this._revealNode(node, false);
+				}
+			});
+			return;
+		}
+
+		this._revealNode(node, true);
+	}
+
+	private _revealNode(node: HTMLElement, minimal: boolean): void {
 		const { width } = this._scrollable.getScrollDimensions();
 		const { scrollLeft } = this._scrollable.getScrollPosition();
-		if (!minimal || node.offsetLeft > scrollLeft + width || node.offsetLeft < scrollLeft) {
+		const nodeOffsetLeft = node.offsetLeft;
+		if (!minimal || nodeOffsetLeft > scrollLeft + width || nodeOffsetLeft < scrollLeft) {
 			this._scrollable.setRevealOnScroll(false);
-			this._scrollable.setScrollPosition({ scrollLeft: node.offsetLeft });
+			this._scrollable.setScrollPosition({ scrollLeft: nodeOffsetLeft });
 			this._scrollable.setRevealOnScroll(true);
 		}
 	}

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

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import assert from 'assert';
+import { BreadcrumbsItem, BreadcrumbsWidget, IBreadcrumbsWidgetStyles } from '../../../../browser/ui/breadcrumbs/breadcrumbsWidget.js';
+import { Codicon } from '../../../../common/codicons.js';
+import { IDisposable, toDisposable } from '../../../../common/lifecycle.js';
+import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../common/utils.js';
+
+class TestBreadcrumbsItem extends BreadcrumbsItem {
+
+	constructor(private readonly label: string) {
+		super();
+	}
+
+	override dispose(): void { }
+
+	override equals(other: BreadcrumbsItem): boolean {
+		return other instanceof TestBreadcrumbsItem && other.label === this.label;
+	}
+
+	override render(container: HTMLElement): void {
+		container.textContent = this.label;
+	}
+}
+
+const styles: IBreadcrumbsWidgetStyles = {
+	breadcrumbsBackground: undefined,
+	breadcrumbsForeground: undefined,
+	breadcrumbsFocusForeground: undefined,
+	breadcrumbsFocusAndSelectionForeground: undefined,
+	breadcrumbsHoverForeground: undefined,
+};
+
+suite('BreadcrumbsWidget', () => {
+	const store = ensureNoDisposablesAreLeakedInTestSuite();
+
+	test('defers non-focus reveals and cancels them when focus changes', () => {
+		const operations: string[] = [];
+		const measure = (_targetWindow: Window, _callback: () => void): IDisposable => {
+			operations.push('schedule');
+			return toDisposable(() => operations.push('cancel'));
+		};
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		store.add(toDisposable(() => container.remove()));
+		const widget = store.add(new BreadcrumbsWidget(container, 3, undefined, Codicon.chevronRight, styles, measure));
+		const first = new TestBreadcrumbsItem('first');
+		const last = new TestBreadcrumbsItem('last');
+		widget.setItems([first, last]);
+
+		widget.revealLast();
+		widget.reveal(first);
+		widget.domFocus();
+
+		assert.deepStrictEqual(operations, ['schedule', 'cancel', 'schedule', 'cancel']);
+	});
+});