thinking content perf improvements (#307878)

* thinking content perf

* cleanup comments

* address comments

Author: justschen

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatThinkingContentPart.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { $, clearNode, getWindow, hide, scheduleAtNextAnimationFrame } from '../../../../../../base/browser/dom.js';
+import { $, clearNode, DisposableResizeObserver, getWindow, hide, scheduleAtNextAnimationFrame } from '../../../../../../base/browser/dom.js';
 import { alert } from '../../../../../../base/browser/ui/aria/aria.js';
 import { DomScrollableElement } from '../../../../../../base/browser/ui/scrollbar/scrollableElement.js';
 import { ScrollbarVisibility } from '../../../../../../base/common/scrollable.js';
@@ -242,10 +242,12 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 	private pendingRemovals: { toolCallId: string; toolLabel: string }[] = [];
 	private pendingRemovalFlushDisposable: IDisposable | undefined;
 	private pendingScrollDisposable: IDisposable | undefined;
-	private mutationObserverDisposable: IDisposable | undefined;
+	private wrapperResizeObserverDisposable: IDisposable | undefined;
+	private viewportResizeObserverDisposable: IDisposable | undefined;
 	private isUpdatingDimensions: boolean = false;
 	private lastKnownContentHeight: number = 0;
 	private lastKnownScrollTop: number = 0;
+	private _cachedViewportWidth: number = 0;
 	private titleShimmerSpan: HTMLElement | undefined;
 	private titleDetailContainer: HTMLElement | undefined;
 	private readonly _externalResourceWidget: ChatThinkingExternalResourceWidget;
@@ -476,19 +478,22 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 			}));
 			this._register(this.scrollableElement.onScroll(e => this.handleScroll(e.scrollTop)));
 
-			// check for content changes to update scroll dimensions
-			const mutationObserver = new MutationObserver(() => {
+			// Use a ResizeObserver on the wrapper to detect content growth and drive scrolling.
+			const wrapperResizeObserver = this._register(new DisposableResizeObserver(() => {
 				if (!this.streamingCompleted && this.domNode.classList.contains('chat-used-context-collapsed')) {
-					this.syncDimensionsAndScheduleScroll();
+					this.updateScrollDimensionsOnResize();
 				}
-			});
-			mutationObserver.observe(this.wrapper, {
-				childList: true,
-				subtree: true,
-				characterData: true
-			});
-			this.mutationObserverDisposable = { dispose: () => mutationObserver.disconnect() };
-			this._register(this.mutationObserverDisposable);
+			}));
+			this.wrapperResizeObserverDisposable = this._register(wrapperResizeObserver.observe(this.wrapper));
+
+			// Track viewport width changes (only changes on panel resize, not during streaming)
+			const viewportResizeObserver = this._register(new DisposableResizeObserver((entries) => {
+				const entry = entries[0];
+				if (entry) {
+					this._cachedViewportWidth = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
+				}
+			}));
+			this.viewportResizeObserverDisposable = this._register(viewportResizeObserver.observe(this.scrollableElement.getDomNode()));
 
 			this._register(this._onDidChangeHeight.event(() => {
 				this.syncDimensionsAndScheduleScroll();
@@ -533,10 +538,8 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 		this.domNode.classList.toggle('chat-thinking-fade-bottom', maxScrollTop > 0 && currentScrollTop < maxScrollTop - 5);
 	}
 
-	// Schedule a batched scroll dimension update for the next animation frame.
-	// All calls during a single frame (from updateThinking, MutationObserver, etc.)
-	// are coalesced into one layout read, avoiding forced synchronous layouts
-	// during tree splice operations.
+	// Fallback for non-ResizeObserver updates (onDidChangeHeight, initial setup).
+	// During streaming, ResizeObserver drives updates via updateScrollDimensionsFromCache().
 	private syncDimensionsAndScheduleScroll(): void {
 		if (this.pendingScrollDisposable) {
 			return;
@@ -555,11 +558,54 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 			} finally {
 				this.isUpdatingDimensions = false;
 			}
-			// Use the cached values from updateScrollDimensions to avoid extra layout reads
 			this.updateFadeClasses(this.lastKnownScrollTop, this.lastKnownContentHeight);
+			this.updateDropdownClickability();
 		});
 	}
 
+	/**
+	 * Update scroll dimensions from ResizeObserver callback (post-layout, so reads are cheap).
+	 */
+	private updateScrollDimensionsOnResize(): void {
+		if (!this.scrollableElement || this._store.isDisposed) {
+			return;
+		}
+
+		const isCollapsed = this.domNode.classList.contains('chat-used-context-collapsed');
+		if (!isCollapsed) {
+			return;
+		}
+
+		const contentHeight = this.wrapper.scrollHeight;
+		if (!contentHeight) {
+			return;
+		}
+
+		this.lastKnownContentHeight = contentHeight;
+		const viewportHeight = Math.min(contentHeight, THINKING_SCROLL_MAX_HEIGHT);
+
+		this.isUpdatingDimensions = true;
+		try {
+			this.scrollableElement.setScrollDimensions({
+				width: this._cachedViewportWidth || this.scrollableElement.getDomNode().clientWidth,
+				scrollWidth: this.wrapper.scrollWidth,
+				height: viewportHeight,
+				scrollHeight: contentHeight
+			});
+
+			this.lastKnownScrollTop = this.scrollableElement.getScrollPosition().scrollTop;
+
+			if (this.autoScrollEnabled) {
+				this.scrollToBottom(contentHeight);
+			}
+		} finally {
+			this.isUpdatingDimensions = false;
+		}
+
+		this.updateFadeClasses(this.lastKnownScrollTop, this.lastKnownContentHeight);
+		this.updateDropdownClickability(contentHeight);
+	}
+
 	private updateScrollDimensions(): number | undefined {
 		if (!this.scrollableElement) {
 			return undefined;
@@ -575,7 +621,7 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 		const viewportHeight = Math.min(contentHeight, THINKING_SCROLL_MAX_HEIGHT);
 
 		this.scrollableElement.setScrollDimensions({
-			width: this.scrollableElement.getDomNode().clientWidth,
+			width: this._cachedViewportWidth || this.scrollableElement.getDomNode().clientWidth,
 			scrollWidth: this.wrapper.scrollWidth,
 			height: viewportHeight,
 			scrollHeight: contentHeight
@@ -617,7 +663,7 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 		const viewportHeight = Math.min(contentHeight, THINKING_SCROLL_MAX_HEIGHT);
 
 		this.scrollableElement.setScrollDimensions({
-			width: this.scrollableElement.getDomNode().clientWidth,
+			width: this._cachedViewportWidth || this.scrollableElement.getDomNode().clientWidth,
 			scrollWidth: this.wrapper.scrollWidth,
 			height: viewportHeight,
 			scrollHeight: contentHeight
@@ -882,9 +928,14 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 		this.domNode.classList.remove('chat-thinking-fade-top', 'chat-thinking-fade-bottom');
 		this.streamingCompleted = true;
 
-		if (this.mutationObserverDisposable) {
-			this.mutationObserverDisposable.dispose();
-			this.mutationObserverDisposable = undefined;
+		if (this.wrapperResizeObserverDisposable) {
+			this.wrapperResizeObserverDisposable.dispose();
+			this.wrapperResizeObserverDisposable = undefined;
+		}
+
+		if (this.viewportResizeObserverDisposable) {
+			this.viewportResizeObserverDisposable.dispose();
+			this.viewportResizeObserverDisposable = undefined;
 		}
 
 		if (this.workingSpinnerElement) {

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css

@@ -448,6 +448,8 @@
 }
 
 .chat-tool-invocation-part {
+	contain: layout style;
+
 	.chat-confirmation-widget {
 		border: none;
 		font-size: var(--vscode-chat-font-size-body-s);
@@ -521,6 +523,7 @@
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		animation: chat-thinking-shimmer 2s linear infinite;
+		will-change: background-position;
 	}
 
 }

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatThinkingContent.css

@@ -13,6 +13,8 @@
 	position: relative;
 	color: var(--vscode-descriptionForeground);
 
+	contain: layout style;
+
 	.chat-thinking-external-resources {
 		margin-top: 4px;
 		margin-left: 5px;
@@ -90,6 +92,7 @@
 			-webkit-background-clip: text;
 			-webkit-text-fill-color: transparent;
 			animation: chat-thinking-shimmer 2s linear infinite;
+			will-change: background-position;
 		}
 	}
 
@@ -106,6 +109,7 @@
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		animation: chat-thinking-shimmer 2s linear infinite;
+		will-change: background-position;
 	}
 
 	&:not(.chat-used-context-collapsed) .chat-used-context-list.chat-thinking-collapsible {

src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts

@@ -335,6 +335,9 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		}
 
 		const normalizedHeight = Math.ceil(height);
+		if (normalizedHeight === template.currentElement.currentRenderedHeight) {
+			return;
+		}
 		template.currentElement.currentRenderedHeight = normalizedHeight;
 		if (template.currentElement !== this._elementBeingRendered) {
 			this._onDidChangeItemHeight.fire({ element: template.currentElement, height: normalizedHeight });

src/vs/workbench/contrib/chat/browser/widget/media/chat.css

@@ -44,6 +44,8 @@
 	cursor: default;
 	user-select: text;
 	-webkit-user-select: text;
+
+	contain: layout style;
 }
 
 .interactive-item-container:not(:has(.chat-extensions-content-part)) .header {
@@ -2570,6 +2572,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	margin: 0 0 14px 0;
 	font-size: 13px;
 
+	contain: layout style;
+
 	/* Tool calls transition from a progress to a collapsible list part, which needs to have this top padding.
 	The working progress also can be replaced by a tool progress part. So align this padding so the text doesn't appear to shift. */
 	padding-top: 2px;
@@ -2633,6 +2637,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		animation: chat-thinking-shimmer 2s linear infinite;
+		will-change: background-position;
 	}
 }