Add contentWidth/onDidChangeContentWidth to ListView, adopt in debugHover (#183479)

* Add contentWidth/onDidChangeContentWidth to ListView, adopt in debugHover

For #173980

* cleanup

Author: roblourens

src/vs/base/browser/ui/list/listView.ts

@@ -219,7 +219,9 @@ export interface IListView<T> extends ISpliceable<T>, IDisposable {
 	readonly scrollableElementDomNode: HTMLElement;
 	readonly length: number;
 	readonly contentHeight: number;
+	readonly contentWidth: number;
 	readonly onDidChangeContentHeight: Event<number>;
+	readonly onDidChangeContentWidth: Event<number>;
 	readonly renderHeight: number;
 	readonly scrollHeight: number;
 	readonly firstVisibleIndex: number;
@@ -310,8 +312,11 @@ export class ListView<T> implements IListView<T> {
 	private readonly disposables: DisposableStore = new DisposableStore();
 
 	private readonly _onDidChangeContentHeight = new Emitter<number>();
+	private readonly _onDidChangeContentWidth = new Emitter<number>();
 	readonly onDidChangeContentHeight: Event<number> = Event.latch(this._onDidChangeContentHeight.event, undefined, this.disposables);
+	readonly onDidChangeContentWidth: Event<number> = Event.latch(this._onDidChangeContentWidth.event, undefined, this.disposables);
 	get contentHeight(): number { return this.rangeMap.size; }
+	get contentWidth(): number { return this.scrollWidth ?? 0; }
 
 	get onDidScroll(): Event<ScrollEvent> { return this.scrollableElement.onScroll; }
 	get onWillScroll(): Event<ScrollEvent> { return this.scrollableElement.onWillScroll; }
@@ -689,6 +694,7 @@ export class ListView<T> implements IListView<T> {
 
 		this.scrollWidth = scrollWidth;
 		this.scrollableElement.setScrollDimensions({ scrollWidth: scrollWidth === 0 ? 0 : (scrollWidth + 10) });
+		this._onDidChangeContentWidth.fire(this.scrollWidth);
 	}
 
 	updateWidth(index: number): void {
@@ -702,6 +708,7 @@ export class ListView<T> implements IListView<T> {
 		if (typeof item.width !== 'undefined' && item.width > this.scrollWidth) {
 			this.scrollWidth = item.width;
 			this.scrollableElement.setScrollDimensions({ scrollWidth: this.scrollWidth + 10 });
+			this._onDidChangeContentWidth.fire(this.scrollWidth);
 		}
 	}
 

src/vs/base/browser/ui/list/listWidget.ts

@@ -1506,10 +1506,18 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		return this.view.contentHeight;
 	}
 
+	get contentWidth(): number {
+		return this.view.contentWidth;
+	}
+
 	get onDidChangeContentHeight(): Event<number> {
 		return this.view.onDidChangeContentHeight;
 	}
 
+	get onDidChangeContentWidth(): Event<number> {
+		return this.view.onDidChangeContentWidth;
+	}
+
 	get scrollTop(): number {
 		return this.view.getScrollTop();
 	}

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -1706,10 +1706,18 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 		return this.view.contentHeight;
 	}
 
+	get contentWidth(): number {
+		return this.view.contentWidth;
+	}
+
 	get onDidChangeContentHeight(): Event<number> {
 		return this.view.onDidChangeContentHeight;
 	}
 
+	get onDidChangeContentWidth(): Event<number> {
+		return this.view.onDidChangeContentWidth;
+	}
+
 	get scrollTop(): number {
 		return this.view.scrollTop;
 	}

src/vs/base/browser/ui/tree/asyncDataTree.ts

@@ -438,10 +438,18 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
 		return this.tree.contentHeight;
 	}
 
+	get contentWidth(): number {
+		return this.tree.contentWidth;
+	}
+
 	get onDidChangeContentHeight(): Event<number> {
 		return this.tree.onDidChangeContentHeight;
 	}
 
+	get onDidChangeContentWidth(): Event<number> {
+		return this.tree.onDidChangeContentWidth;
+	}
+
 	get scrollTop(): number {
 		return this.tree.scrollTop;
 	}

src/vs/workbench/contrib/debug/browser/debugHover.ts

@@ -112,7 +112,6 @@ export class DebugHoverWidget implements IContentWidget {
 	private create(): void {
 		this.domNode = $('.debug-hover-widget');
 		this.complexValueContainer = dom.append(this.domNode, $('.complex-value'));
-		this.complexValueContainer.style.visibility = 'hidden';
 		this.complexValueTitle = dom.append(this.complexValueContainer, $('.title'));
 		this.treeContainer = dom.append(this.complexValueContainer, $('.debug-hover-tree'));
 		this.treeContainer.setAttribute('role', 'tree');
@@ -150,6 +149,12 @@ export class DebugHoverWidget implements IContentWidget {
 				this.layoutTreeAndContainer();
 			}
 		}));
+		this.toDispose.push(this.tree.onDidChangeContentWidth(() => {
+			if (!this.isUpdatingTree) {
+				// Don't do a layout in the middle of the async setInput
+				this.layoutTreeAndContainer();
+			}
+		}));
 
 		this.registerListeners();
 		this.editor.addContentWidget(this);
@@ -295,12 +300,7 @@ export class DebugHoverWidget implements IContentWidget {
 		const scrollBarHeight = 10;
 		const treeHeight = Math.min(Math.max(266, this.editor.getLayoutInfo().height * 0.55), this.tree.contentHeight + scrollBarHeight);
 
-		// Reset to a smaller width, if it was previously rendered wide
-		this.tree.layout(treeHeight, 400);
-
-		// const titleWidth = this.complexValueTitle.clientWidth;
-		const realTreeWidth = this.tree.getHTMLElement().offsetWidth;
-		// const contentWidth = Math.max(titleWidth, realTreeWidth);
+		const realTreeWidth = this.tree.contentWidth;
 		const treeWidth = clamp(realTreeWidth, 400, 550);
 		this.tree.layout(treeHeight, treeWidth);
 		this.treeContainer.style.height = `${treeHeight}px`;
@@ -315,14 +315,7 @@ export class DebugHoverWidget implements IContentWidget {
 
 			// Do this in beforeRender once the content widget is no longer display=none so that its elements' sizes will be measured correctly.
 			this.isUpdatingTree = true;
-			this.tree.setInput(expression).then(() => {
-				dom.scheduleAtNextAnimationFrame(() => {
-					// Wait for scrollWidth to update after a frame
-					this.layoutTree();
-					this.editor.layoutContentWidget(this);
-					this.complexValueContainer.style.visibility = '';
-				});
-			}).finally(() => {
+			this.tree.setInput(expression).finally(() => {
 				this.isUpdatingTree = false;
 			});
 		}
@@ -339,7 +332,6 @@ export class DebugHoverWidget implements IContentWidget {
 
 
 	hide(): void {
-		this.complexValueContainer.style.visibility = 'hidden';
 		if (this.showCancellationSource) {
 			this.showCancellationSource.cancel();
 			this.showCancellationSource = undefined;