Avoid forced layout when measuring the Chat view title

src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatViewPane.ts

@@ -1124,7 +1124,8 @@ export class ChatViewPane extends ViewPane implements IViewWelcomeDelegate {
 			parent,
 			{
 				focusChat: () => this._widget.focusInput()
-			}
+			},
+			undefined
 		));
 
 		this._register(this.titleControl.onDidChangeHeight(() => {

src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatViewTitleControl.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import './media/chatViewTitleControl.css';
-import { addDisposableListener, EventType, h } from '../../../../../../base/browser/dom.js';
+import { addDisposableListener, DisposableResizeObserver, EventType, getWindow, h } from '../../../../../../base/browser/dom.js';
 import { renderAsPlaintext } from '../../../../../../base/browser/markdownRenderer.js';
 import { Gesture, EventType as TouchEventType } from '../../../../../../base/browser/touch.js';
 import { Emitter } from '../../../../../../base/common/event.js';
@@ -49,11 +49,25 @@ export class ChatViewTitleControl extends Disposable {
 	constructor(
 		private readonly container: HTMLElement,
 		private readonly delegate: IChatViewTitleDelegate,
+		resizeObserverCtor: typeof ResizeObserver | undefined,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 	) {
 		super();
 
 		this.render(this.container);
+		// Avoid forcing layout; ResizeObserver reports the final size before paint and triggers relayout.
+		const resizeObserver = this._register(new DisposableResizeObserver('ChatViewTitleControl.height', entries => {
+			const entry = entries.find(entry => entry.target === this.titleContainer);
+			if (!entry) {
+				return;
+			}
+			const height = entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height;
+			if (height !== this.lastKnownHeight) {
+				this.lastKnownHeight = height;
+				this._onDidChangeHeight.fire();
+			}
+		}, getWindow(this.titleContainer!), { resizeObserverCtor }));
+		this._register(resizeObserver.observe(this.titleContainer!, { box: 'border-box' }));
 
 		this.registerActions();
 	}
@@ -165,25 +179,14 @@ export class ChatViewTitleControl extends Disposable {
 
 		this.titleContainer.classList.toggle('visible', this.shouldRender());
 		this.titleLabel.value?.updateTitle(title);
-
-		const currentHeight = this.getHeight();
-		if (currentHeight !== this.lastKnownHeight) {
-			this.lastKnownHeight = currentHeight;
-
-			this._onDidChangeHeight.fire();
-		}
 	}
 
 	private shouldRender(): boolean {
 		return !!this.model?.title; // we need a chat showing and not being empty
 	}
 
 	getHeight(): number {
-		if (!this.titleContainer || this.titleContainer.style.display === 'none') {
-			return 0;
-		}
-
-		return this.titleContainer.offsetHeight;
+		return this.lastKnownHeight;
 	}
 }
 

src/vs/workbench/contrib/chat/test/browser/widgetHosts/viewPane/chatViewTitleControl.test.ts

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ensureNoDisposablesAreLeakedInTestSuite } from '../../../../../../../base/test/common/utils.js';
+import { TestInstantiationService } from '../../../../../../../platform/instantiation/test/common/instantiationServiceMock.js';
+import { MenuWorkbenchToolBar } from '../../../../../../../platform/actions/browser/toolbar.js';
+import { ChatViewTitleControl } from '../../../../browser/widgetHosts/viewPane/chatViewTitleControl.js';
+
+class TestResizeObserver implements ResizeObserver {
+	static instance: TestResizeObserver | undefined;
+	private observedTarget: Element | undefined;
+	observedBox: ResizeObserverBoxOptions | undefined;
+
+	constructor(private readonly callback: ResizeObserverCallback) {
+		TestResizeObserver.instance = this;
+	}
+
+	observe(target: Element, options?: ResizeObserverOptions): void {
+		this.observedTarget = target;
+		this.observedBox = options?.box;
+	}
+
+	unobserve(): void { }
+	disconnect(): void { }
+	takeRecords(): ResizeObserverEntry[] { return []; }
+
+	fire(height: number): void {
+		assert.ok(this.observedTarget);
+		const size: ResizeObserverSize = { inlineSize: 0, blockSize: height };
+		this.callback([{
+			target: this.observedTarget,
+			contentRect: DOMRectReadOnly.fromRect({ height }),
+			borderBoxSize: [size],
+			contentBoxSize: [size],
+			devicePixelContentBoxSize: [size],
+		}], this);
+	}
+}
+
+suite('ChatViewTitleControl', () => {
+	const disposables = ensureNoDisposablesAreLeakedInTestSuite();
+
+	test('tracks height changes from ResizeObserver', () => {
+		const container = document.createElement('div');
+		const instantiationService = disposables.add(new TestInstantiationService());
+		instantiationService.stubInstance(MenuWorkbenchToolBar, { dispose: () => { } });
+		const control = disposables.add(instantiationService.createInstance(
+			ChatViewTitleControl,
+			container,
+			{ focusChat: () => { } },
+			TestResizeObserver
+		));
+		const resizeObserver = TestResizeObserver.instance;
+		assert.ok(resizeObserver);
+		let heightChangeCount = 0;
+		disposables.add(control.onDidChangeHeight(() => heightChangeCount++));
+
+		resizeObserver.fire(22);
+		resizeObserver.fire(22);
+		resizeObserver.fire(0);
+
+		assert.deepStrictEqual({
+			height: control.getHeight(),
+			heightChangeCount,
+			observedBox: resizeObserver.observedBox
+		}, {
+			height: 0,
+			heightChangeCount: 2,
+			observedBox: 'border-box'
+		});
+	});
+});