testing: finish implementation of call stack view (microsoft#221305)

.vscode/extensions/vscode-selfhost-test-provider/src/testOutputScanner.ts

@@ -657,4 +657,4 @@ function findLastIndex<T>(arr: T[], predicate: (value: T) => boolean) {
 	}
 
 	return -1;
-}
+}

src/vs/platform/actions/common/actions.ts

@@ -143,6 +143,7 @@ export class MenuId {
 	static readonly TestMessageContent = new MenuId('TestMessageContent');
 	static readonly TestPeekElement = new MenuId('TestPeekElement');
 	static readonly TestPeekTitle = new MenuId('TestPeekTitle');
+	static readonly TestCallStackContext = new MenuId('TestCallStackContext');
 	static readonly TouchBarContext = new MenuId('TouchBarContext');
 	static readonly TitleBarContext = new MenuId('TitleBarContext');
 	static readonly TitleBarTitleContext = new MenuId('TitleBarTitleContext');

src/vs/workbench/contrib/testing/browser/media/testing.css

@@ -313,6 +313,48 @@
 	}
 }
 
+.test-output-call-stack {
+	height: 100%;
+
+	.monaco-list-row {
+		padding: 0 3px 0 8px;
+		display: flex;
+		gap: 3px;
+
+		.location, .label {
+			white-space: nowrap;
+		}
+
+		.label {
+			flex-grow: 1;
+		}
+
+		.location {
+			/*Use direction so the source shows elipses on the left*/
+			direction: rtl;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-size: 0.9em;
+		}
+
+		&.no-source .label {
+			opacity: 0.7;
+		}
+
+		&:hover {
+			.label {
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.location {
+				overflow: visible;
+				text-overflow: unset;
+			}
+		}
+	}
+}
+
 /** -- filter  */
 .monaco-action-bar.testing-filter-action-bar {
 	flex-shrink: 0;

src/vs/workbench/contrib/testing/browser/testResultsView/testMessageStack.ts

@@ -3,26 +3,36 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import * as dom from 'vs/base/browser/dom';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Emitter } from 'vs/base/common/event';
+import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
+import { Range } from 'vs/editor/common/core/range';
 import { localize } from 'vs/nls';
+import { MenuId } from 'vs/platform/actions/common/actions';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ILabelService } from 'vs/platform/label/common/label';
 import { WorkbenchList } from 'vs/platform/list/browser/listService';
-import { ITestMessageStackTrace } from 'vs/workbench/contrib/testing/common/testTypes';
+import { ITestMessageStackFrame } from 'vs/workbench/contrib/testing/common/testTypes';
+import { IEditorService, SIDE_GROUP } from 'vs/workbench/services/editor/common/editorService';
 
 const stackItemDelegate: IListVirtualDelegate<void> = {
 	getHeight: () => 22,
 	getTemplateId: () => 's',
 };
 
 export class TestResultStackWidget extends Disposable {
-	private readonly list: WorkbenchList<ITestMessageStackTrace>;
+	private readonly list: WorkbenchList<ITestMessageStackFrame>;
+	private readonly changeStackFrameEmitter = this._register(new Emitter<ITestMessageStackFrame>());
+
+	public readonly onDidChangeStackFrame = this.changeStackFrameEmitter.event;
 
 	constructor(
-		container: HTMLElement,
+		private readonly container: HTMLElement,
 		@IInstantiationService instantiationService: IInstantiationService,
 		@ILabelService labelService: ILabelService,
+		@IContextMenuService contextMenuService: IContextMenuService
 	) {
 		super();
 
@@ -33,43 +43,110 @@ export class TestResultStackWidget extends Disposable {
 			stackItemDelegate,
 			[instantiationService.createInstance(StackRenderer)],
 			{
+				multipleSelectionSupport: false,
 				accessibilityProvider: {
 					getWidgetAriaLabel: () => localize('testStackTrace', 'Test stack trace'),
-					getAriaLabel: (e: ITestMessageStackTrace) => e.position && e.uri ? localize({
+					getAriaLabel: (e: ITestMessageStackFrame) => e.position && e.uri ? localize({
 						comment: ['{0} is an extension-defined label, then line number and filename'],
 						key: 'stackTraceLabel',
-					}, '{0}, line {1} in {2}', e.label, e.position.lineNumber, labelService.getUriLabel(e.uri)) : e.label,
+					}, '{0}, line {1} in {2}', e.label, e.position.lineNumber, labelService.getUriLabel(e.uri, { relative: true })) : e.label,
 				}
 			}
-		) as WorkbenchList<ITestMessageStackTrace>);
+		) as WorkbenchList<ITestMessageStackFrame>);
+
+		this._register(this.list.onDidChangeSelection(e => {
+			if (e.elements.length) {
+				this.changeStackFrameEmitter.fire(e.elements[0]);
+			}
+		}));
+
+		this._register(dom.addDisposableListener(container, dom.EventType.CONTEXT_MENU, e => {
+			contextMenuService.showContextMenu({
+				getAnchor: () => ({ x: e.x, y: e.y }),
+				menuId: MenuId.TestCallStackContext
+			});
+		}));
 	}
 
-	public update(stack: ITestMessageStackTrace[]) {
+	public update(stack: ITestMessageStackFrame[], selection?: ITestMessageStackFrame) {
 		this.list.splice(0, this.list.length, stack);
+		this.list.layout();
+
+		const i = selection && stack.indexOf(selection);
+		if (i && i !== -1) {
+			this.list.setSelection([i]);
+			this.list.setFocus([i]);
+			// selection is triggered actioning on the call stack from a different
+			// editor, ensure the stack item is still focused in this editor
+			this.list.domFocus();
+		}
 	}
 
 	public layout(height?: number, width?: number) {
-		this.list.layout(height, width);
+		this.list.layout(height ?? this.container.clientHeight, width);
 	}
 }
 
 interface ITemplateData {
 	container: HTMLElement;
+	label: HTMLElement;
+	location: HTMLElement;
+	current?: ITestMessageStackFrame;
+	disposable: IDisposable;
 }
 
-class StackRenderer implements IListRenderer<ITestMessageStackTrace, ITemplateData> {
+class StackRenderer implements IListRenderer<ITestMessageStackFrame, ITemplateData> {
 	public readonly templateId = 's';
 
+	constructor(
+		@ILabelService private readonly labelService: ILabelService,
+		@IEditorService private readonly openerService: IEditorService,
+	) { }
+
 	renderTemplate(container: HTMLElement): ITemplateData {
-		return { container };
+		const label = dom.$('.label');
+		const location = dom.$('.location');
+		container.appendChild(label);
+		container.appendChild(location);
+		const data: ITemplateData = {
+			container,
+			label,
+			location,
+			disposable: dom.addDisposableListener(container, dom.EventType.CLICK, e => {
+				if (e.ctrlKey || e.metaKey) {
+					if (data.current?.uri) {
+						this.openerService.openEditor({
+							resource: data.current.uri,
+							options: {
+								selection: data.current.position ? Range.fromPositions(data.current.position) : undefined,
+							}
+						}, SIDE_GROUP);
+						e.preventDefault();
+						e.stopPropagation();
+					}
+				}
+			}),
+		};
+
+		return data;
 	}
 
-	renderElement(element: ITestMessageStackTrace, index: number, templateData: ITemplateData, height: number | undefined): void {
-		templateData.container.innerText = element.label;
+	renderElement(element: ITestMessageStackFrame, index: number, templateData: ITemplateData, height: number | undefined): void {
+		templateData.label.innerText = element.label;
+		templateData.current = element;
+		templateData.container.classList.toggle('no-source', !element.uri);
+
+		if (element.uri) {
+			templateData.location.innerText = this.labelService.getUriBasenameLabel(element.uri);
+			templateData.location.title = this.labelService.getUriLabel(element.uri, { relative: true });
+			if (element.position) {
+				templateData.location.innerText += `:${element.position.lineNumber}:${element.position.column}`;
+			}
+		}
 	}
 
-	disposeTemplate(_templateData: ITemplateData): void {
-		// no-op
+	disposeTemplate(templateData: ITemplateData): void {
+		templateData.disposable.dispose();
 	}
 }
 

src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts

@@ -74,6 +74,7 @@ const commonEditorOptions: IEditorOptions = {
 	scrollBeyondLastLine: false,
 	links: true,
 	lineNumbers: 'off',
+	glyphMargin: false,
 	scrollbar: {
 		verticalScrollbarSize: 14,
 		horizontal: 'auto',

src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts

@@ -29,20 +29,28 @@ import { OutputPeekTree } from 'vs/workbench/contrib/testing/browser/testResults
 import { IObservableValue } from 'vs/workbench/contrib/testing/common/observableValue';
 import { LiveTestResult } from 'vs/workbench/contrib/testing/common/testResult';
 import { ITestFollowup, ITestService } from 'vs/workbench/contrib/testing/common/testService';
+import { ITestMessageStackFrame } from 'vs/workbench/contrib/testing/common/testTypes';
 import { TestingContextKeys } from 'vs/workbench/contrib/testing/common/testingContextKeys';
+import { ITestingPeekOpener } from 'vs/workbench/contrib/testing/common/testingPeekOpener';
 
 const enum SubView {
 	CallStack = 0,
 	Diff = 1,
 	History = 2,
 }
 
+/** UI state that can be saved/restored, used to give a nice experience when switching stack frames */
+export interface ITestResultsViewContentUiState {
+	splitViewWidths: number[];
+}
+
 export class TestResultsViewContent extends Disposable {
 	private static lastSplitWidth?: number;
 
 	private readonly didReveal = this._register(new Emitter<{ subject: InspectSubject; preserveFocus: boolean }>());
 	private readonly currentSubjectStore = this._register(new DisposableStore());
 	private readonly onCloseEmitter = this._register(new Relay<void>());
+	private readonly onDidChangeStackFrameEmitter = this._register(new Relay<ITestMessageStackFrame>());
 	private followupWidget!: FollowupActionWidget;
 	private messageContextKeyService!: IContextKeyService;
 	private contextKeyTestMessage!: IContextKey<string>;
@@ -62,6 +70,16 @@ export class TestResultsViewContent extends Disposable {
 	public onDidRequestReveal!: Event<InspectSubject>;
 
 	public readonly onClose = this.onCloseEmitter.event;
+	public readonly onDidChangeStackFrame = this.onDidChangeStackFrameEmitter.event;
+
+	public get uiState(): ITestResultsViewContentUiState {
+		return {
+			splitViewWidths: Array.from(
+				{ length: this.splitView.length },
+				(_, i) => this.splitView.getViewSize(i)
+			),
+		};
+	}
 
 	constructor(
 		private readonly editor: ICodeEditor | undefined,
@@ -73,6 +91,7 @@ export class TestResultsViewContent extends Disposable {
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
 		@ITextModelService protected readonly modelService: ITextModelService,
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
+		@ITestingPeekOpener private readonly peekOpener: ITestingPeekOpener,
 	) {
 		super();
 	}
@@ -95,6 +114,12 @@ export class TestResultsViewContent extends Disposable {
 			this._register(this.instantiationService.createInstance(PlainTextMessagePeek, this.editor, messageContainer)),
 		];
 
+		this._register(this.peekOpener.callStackVisible.onDidChange(() => {
+			if (this.current) {
+				this.updateVisiblityOfStackView(this.current);
+			}
+		}));
+
 		this.messageContextKeyService = this._register(this.contextKeyService.createScoped(containerElement));
 		this.contextKeyTestMessage = TestingContextKeys.testMessageContext.bindTo(this.messageContextKeyService);
 		this.contextKeyResultOutdated = TestingContextKeys.testResultOutdated.bindTo(this.messageContextKeyService);
@@ -151,7 +176,12 @@ export class TestResultsViewContent extends Disposable {
 	 * Shows a message in-place without showing or changing the peek location.
 	 * This is mostly used if peeking a message without a location.
 	 */
-	public reveal(opts: { subject: InspectSubject; preserveFocus: boolean }) {
+	public reveal(opts: {
+		subject: InspectSubject;
+		preserveFocus: boolean;
+		frame?: ITestMessageStackFrame;
+		uiState?: ITestResultsViewContentUiState;
+	}) {
 		this.didReveal.fire(opts);
 
 		if (this.current && equalsSubject(this.current, opts.subject)) {
@@ -163,14 +193,17 @@ export class TestResultsViewContent extends Disposable {
 			await Promise.all(this.contentProviders.map(p => p.update(opts.subject)));
 			this.followupWidget.show(opts.subject);
 			this.currentSubjectStore.clear();
-			// todo@connor4312: disabled for next Insiders, finish implementing this!
-			if (Date.now() < 0) { this.updateVisiblityOfStackView(opts.subject); }
+			this.updateVisiblityOfStackView(opts.subject, opts.frame);
 			this.populateFloatingClick(opts.subject);
+
+			if (opts.uiState) {
+				opts.uiState.splitViewWidths.forEach((width, i) => this.splitView.resizeView(i, width));
+			}
 		});
 	}
 
-	private updateVisiblityOfStackView(subject: InspectSubject) {
-		const stack = subject instanceof MessageSubject && subject.stack;
+	private updateVisiblityOfStackView(subject: InspectSubject, frame?: ITestMessageStackFrame) {
+		const stack = this.peekOpener.callStackVisible.value && subject instanceof MessageSubject && subject.stack;
 
 		if (stack) {
 			if (!this.callStackWidget.value) {
@@ -182,12 +215,14 @@ export class TestResultsViewContent extends Disposable {
 					maximumSize: Number.MAX_VALUE,
 					layout: width => widget.layout(undefined, width),
 				}, 150, 0);
+				this.onDidChangeStackFrameEmitter.input = widget.onDidChangeStackFrame;
 			}
 
-			this.callStackWidget.value.update(stack);
+			this.callStackWidget.value.update(stack, frame);
 		} else if (this.callStackWidget.value) {
 			this.splitView.removeView(0);
-			this.callStackWidget.dispose();
+			this.onDidChangeStackFrameEmitter.input = Event.None;
+			this.callStackWidget.clear();
 		}
 	}
 

src/vs/workbench/contrib/testing/browser/testing.contribution.ts

@@ -25,7 +25,7 @@ import { testingResultsIcon, testingViewIcon } from 'vs/workbench/contrib/testin
 import { TestCoverageView } from 'vs/workbench/contrib/testing/browser/testCoverageView';
 import { TestingDecorationService, TestingDecorations } from 'vs/workbench/contrib/testing/browser/testingDecorations';
 import { TestingExplorerView } from 'vs/workbench/contrib/testing/browser/testingExplorerView';
-import { CloseTestPeek, GoToNextMessageAction, GoToPreviousMessageAction, OpenMessageInEditorAction, TestResultsView, TestingOutputPeekController, TestingPeekOpener, ToggleTestingPeekHistory } from 'vs/workbench/contrib/testing/browser/testingOutputPeek';
+import { CloseTestPeek, GoToNextMessageAction, GoToPreviousMessageAction, OpenMessageInEditorAction, TestResultsView, TestingOutputPeekController, TestingPeekOpener, ToggleCallStackAction, ToggleTestingPeekHistory } from 'vs/workbench/contrib/testing/browser/testingOutputPeek';
 import { TestingProgressTrigger } from 'vs/workbench/contrib/testing/browser/testingProgressUiService';
 import { TestingViewPaneContainer } from 'vs/workbench/contrib/testing/browser/testingViewPaneContainer';
 import { testingConfiguration } from 'vs/workbench/contrib/testing/common/configuration';
@@ -136,6 +136,7 @@ registerAction2(GoToPreviousMessageAction);
 registerAction2(GoToNextMessageAction);
 registerAction2(CloseTestPeek);
 registerAction2(ToggleTestingPeekHistory);
+registerAction2(ToggleCallStackAction);
 
 Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench).registerWorkbenchContribution(TestingContentProvider, LifecyclePhase.Restored);
 Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench).registerWorkbenchContribution(TestingPeekOpener, LifecyclePhase.Eventually);