testing: improve area below filter (microsoft#189441)

With results, the area is both more compact and useful. Passed/Total
tests are shown on the left, with an icon summarizing the view. On the
right, the wall-clock duration of the tests and a button to rerun tests.
The alt action on the button reruns the tests with the debugger.
Previously the rerun action was not very discoverable--had a few issues
about it over the course of time.

![](https://memes.peet.io/img/23-08-8bb85d55-6304-4acb-bef3-9c1126da8c49.png)

There's also no awkward gap when there's no test results:

![](https://memes.peet.io/img/23-08-f5bcda56-60d7-4c8d-9822-e311b68079d7.png)

Fixes microsoft#188841

cc @eleanorjboyd

Author: connor4312

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

@@ -14,6 +14,7 @@ import { TestResultState } from 'vs/workbench/contrib/testing/common/testTypes';
 export const testingViewIcon = registerIcon('test-view-icon', Codicon.beaker, localize('testViewIcon', 'View icon of the test view.'));
 export const testingResultsIcon = registerIcon('test-results-icon', Codicon.checklist, localize('testingResultsIcon', 'Icons for test results.'));
 export const testingRunIcon = registerIcon('testing-run-icon', Codicon.run, localize('testingRunIcon', 'Icon of the "run test" action.'));
+export const testingRerunIcon = registerIcon('testing-rerun-icon', Codicon.refresh, localize('testingRerunIcon', 'Icon of the "rerun tests" action.'));
 export const testingRunAllIcon = registerIcon('testing-run-all-icon', Codicon.runAll, localize('testingRunAllIcon', 'Icon of the "run all tests" action.'));
 // todo: https://github.com/microsoft/vscode-codicons/issues/72
 export const testingDebugAllIcon = registerIcon('testing-debug-all-icon', Codicon.debugAltSmall, localize('testingDebugAllIcon', 'Icon of the "debug all tests" action.'));

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

@@ -128,9 +128,21 @@
 	opacity: 0.8;
 }
 
-.test-explorer .test-explorer-messages {
+.test-explorer .result-summary-container {
 	padding: 0 12px 8px;
 	font-variant-numeric: tabular-nums;
+	height: 27px;
+	box-sizing: border-box;
+}
+
+.test-explorer .result-summary {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.test-explorer .result-summary > span {
+	flex-grow: 1;
 }
 
 .monaco-workbench

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

@@ -24,7 +24,7 @@ import { testingResultsIcon, testingViewIcon } from 'vs/workbench/contrib/testin
 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 { ITestingProgressUiService, TestingProgressTrigger, TestingProgressUiService } from 'vs/workbench/contrib/testing/browser/testingProgressUiService';
+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';
 import { TestCommandId, Testing } from 'vs/workbench/contrib/testing/common/constants';
@@ -52,7 +52,6 @@ registerSingleton(ITestingContinuousRunService, TestingContinuousRunService, Ins
 registerSingleton(ITestResultService, TestResultService, InstantiationType.Delayed);
 registerSingleton(ITestExplorerFilterState, TestExplorerFilterState, InstantiationType.Delayed);
 registerSingleton(ITestingPeekOpener, TestingPeekOpener, InstantiationType.Delayed);
-registerSingleton(ITestingProgressUiService, TestingProgressUiService, InstantiationType.Delayed);
 registerSingleton(ITestingDecorationsService, TestingDecorationService, InstantiationType.Delayed);
 
 const viewContainer = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry).registerViewContainer({

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

@@ -12,12 +12,13 @@ import { IIdentityProvider, IKeyboardNavigationLabelProvider, IListVirtualDelega
 import { DefaultKeyboardNavigationDelegate, IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
 import { ITreeContextMenuEvent, ITreeFilter, ITreeNode, ITreeRenderer, ITreeSorter, TreeFilterResult, TreeVisibility } from 'vs/base/browser/ui/tree/tree';
 import { Action, ActionRunner, IAction, Separator } from 'vs/base/common/actions';
+import { mapFind } from 'vs/base/common/arrays';
 import { RunOnceScheduler, disposableTimeout } from 'vs/base/common/async';
 import { Color, RGBA } from 'vs/base/common/color';
 import { Emitter, Event } from 'vs/base/common/event';
 import { FuzzyScore } from 'vs/base/common/filters';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { Disposable, DisposableStore, IDisposable, MutableDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, DisposableStore, MutableDisposable } from 'vs/base/common/lifecycle';
 import { fuzzyContains } from 'vs/base/common/strings';
 import { ThemeIcon } from 'vs/base/common/themables';
 import { isDefined } from 'vs/base/common/types';
@@ -26,7 +27,7 @@ import 'vs/css!./media/testing';
 import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer';
 import { localize } from 'vs/nls';
 import { DropdownWithPrimaryActionViewItem } from 'vs/platform/actions/browser/dropdownWithPrimaryActionViewItem';
-import { MenuEntryActionViewItem, createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
+import { MenuEntryActionViewItem, createActionViewItem, createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
@@ -40,38 +41,40 @@ import { IStorageService, StorageScope, StorageTarget, WillSaveStateReason } fro
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { foreground } from 'vs/platform/theme/common/colorRegistry';
+import { spinningLoading } from 'vs/platform/theme/common/iconRegistry';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity';
+import { registerNavigableContainer } from 'vs/workbench/browser/actions/widgetNavigationCommands';
 import { ViewPane } from 'vs/workbench/browser/parts/views/viewPane';
 import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet';
 import { DiffEditorInput } from 'vs/workbench/common/editor/diffEditorInput';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
-import { TreeProjection } from 'vs/workbench/contrib/testing/browser/explorerProjections/treeProjection';
-import { ListProjection } from 'vs/workbench/contrib/testing/browser/explorerProjections/listProjection';
 import { ITestTreeProjection, TestExplorerTreeElement, TestItemTreeElement, TestTreeErrorMessage } from 'vs/workbench/contrib/testing/browser/explorerProjections/index';
+import { ListProjection } from 'vs/workbench/contrib/testing/browser/explorerProjections/listProjection';
 import { getTestItemContextOverlay } from 'vs/workbench/contrib/testing/browser/explorerProjections/testItemContextOverlay';
 import { TestingObjectTree } from 'vs/workbench/contrib/testing/browser/explorerProjections/testingObjectTree';
 import { ISerializedTestTreeCollapseState } from 'vs/workbench/contrib/testing/browser/explorerProjections/testingViewState';
+import { TreeProjection } from 'vs/workbench/contrib/testing/browser/explorerProjections/treeProjection';
 import * as icons from 'vs/workbench/contrib/testing/browser/icons';
+import { DebugLastRun, ReRunLastRun } from 'vs/workbench/contrib/testing/browser/testExplorerActions';
 import { TestingExplorerFilter } from 'vs/workbench/contrib/testing/browser/testingExplorerFilter';
-import { CountSummary, ITestingProgressUiService } from 'vs/workbench/contrib/testing/browser/testingProgressUiService';
+import { CountSummary, collectTestStateCounts, getTestProgressText } from 'vs/workbench/contrib/testing/browser/testingProgressUiService';
 import { TestingConfigKeys, TestingCountBadge, getTestingConfiguration } from 'vs/workbench/contrib/testing/common/configuration';
 import { TestCommandId, TestExplorerViewMode, TestExplorerViewSorting, Testing, labelForTestInState } from 'vs/workbench/contrib/testing/common/constants';
 import { StoredValue } from 'vs/workbench/contrib/testing/common/storedValue';
 import { ITestExplorerFilterState, TestExplorerFilterState, TestFilterTerm } from 'vs/workbench/contrib/testing/common/testExplorerFilterState';
 import { TestId } from 'vs/workbench/contrib/testing/common/testId';
 import { ITestProfileService, canUseProfileWithTest } from 'vs/workbench/contrib/testing/common/testProfileService';
-import { TestResultItemChangeReason } from 'vs/workbench/contrib/testing/common/testResult';
+import { LiveTestResult, TestResultItemChangeReason } from 'vs/workbench/contrib/testing/common/testResult';
 import { ITestResultService } from 'vs/workbench/contrib/testing/common/testResultService';
 import { IMainThreadTestCollection, ITestService, testCollectionIsEmpty } from 'vs/workbench/contrib/testing/common/testService';
 import { ITestRunProfile, InternalTestItem, TestItemExpandState, TestResultState, TestRunProfileBitset } from 'vs/workbench/contrib/testing/common/testTypes';
 import { TestingContextKeys } from 'vs/workbench/contrib/testing/common/testingContextKeys';
 import { ITestingContinuousRunService } from 'vs/workbench/contrib/testing/common/testingContinuousRunService';
 import { ITestingPeekOpener } from 'vs/workbench/contrib/testing/common/testingPeekOpener';
-import { cmpPriority, isFailedState, isStateWithResult } from 'vs/workbench/contrib/testing/common/testingStates';
+import { cmpPriority, isFailedState, isStateWithResult, statesInOrder } from 'vs/workbench/contrib/testing/common/testingStates';
 import { IActivityService, IconBadge, NumberBadge } from 'vs/workbench/services/activity/common/activity';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
-import { registerNavigableContainer } from 'vs/workbench/browser/actions/widgetNavigationCommands';
 
 const enum LastFocusState {
 	Input,
@@ -83,10 +86,8 @@ export class TestingExplorerView extends ViewPane {
 	private filterActionBar = this._register(new MutableDisposable());
 	private container!: HTMLElement;
 	private treeHeader!: HTMLElement;
-	private countSummary: CountSummary | undefined;
 	private discoveryProgress = this._register(new MutableDisposable<UnmanagedProgress>());
 	private readonly filter = this._register(new MutableDisposable<TestingExplorerFilter>());
-	private readonly badgeDisposable = this._register(new MutableDisposable<IDisposable>());
 	private readonly filterFocusListener = this._register(new MutableDisposable());
 	private readonly dimensions = { width: 0, height: 0 };
 	private lastFocusState = LastFocusState.Input;
@@ -97,7 +98,6 @@ export class TestingExplorerView extends ViewPane {
 
 	constructor(
 		options: IViewletViewOptions,
-		@IActivityService private readonly activityService: IActivityService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IKeybindingService keybindingService: IKeybindingService,
 		@IConfigurationService configurationService: IConfigurationService,
@@ -108,10 +108,8 @@ export class TestingExplorerView extends ViewPane {
 		@IThemeService themeService: IThemeService,
 		@ITestService private readonly testService: ITestService,
 		@ITelemetryService telemetryService: ITelemetryService,
-		@ITestingProgressUiService private readonly testProgressService: ITestingProgressUiService,
 		@ITestProfileService private readonly testProfileService: ITestProfileService,
 		@ICommandService private readonly commandService: ICommandService,
-		@ITestingContinuousRunService private readonly crService: ITestingContinuousRunService,
 	) {
 		super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);
 
@@ -127,9 +125,6 @@ export class TestingExplorerView extends ViewPane {
 		}));
 
 		this._register(testProfileService.onDidChange(() => this.updateActions()));
-		const onDidChangeTestingCountBadge = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('testing.countBadge'));
-		this._register(onDidChangeTestingCountBadge(this.renderActivityBadge, this));
-		this._register(crService.onDidChange(this.renderActivityBadge, this));
 	}
 
 	public override shouldShowWelcome() {
@@ -278,21 +273,8 @@ export class TestingExplorerView extends ViewPane {
 		this.treeHeader = dom.append(this.container, dom.$('.test-explorer-header'));
 		this.filterActionBar.value = this.createFilterActionBar();
 
-		const messagesContainer = dom.append(this.treeHeader, dom.$('.test-explorer-messages'));
-		this._register(this.testProgressService.onTextChange(text => {
-			const hadText = !!messagesContainer.innerText;
-			const hasText = !!text;
-			messagesContainer.innerText = text;
-
-			if (hadText !== hasText) {
-				this.layoutBody();
-			}
-		}));
-		this._register(this.testProgressService.onCountChange((text: CountSummary) => {
-			this.countSummary = text;
-			this.renderActivityBadge();
-		}));
-		this.testProgressService.update();
+		const messagesContainer = dom.append(this.treeHeader, dom.$('.result-summary-container'));
+		this._register(this.instantiationService.createInstance(ResultSummaryView, messagesContainer));
 
 		const listContainer = dom.append(this.container, dom.$('.test-explorer-tree'));
 		this.viewModel = this.instantiationService.createInstance(TestingExplorerViewModel, listContainer, this.onDidChangeBodyVisibility);
@@ -441,17 +423,130 @@ export class TestingExplorerView extends ViewPane {
 		}
 	}
 
-	private renderActivityBadge() {
-		const countBadgeType = this.configurationService.getValue<TestingCountBadge>(TestingConfigKeys.CountBadge);
-		if (this.countSummary && countBadgeType !== TestingCountBadge.Off && this.countSummary[countBadgeType] !== 0) {
-			const badge = new NumberBadge(this.countSummary[countBadgeType], num => this.getLocalizedBadgeString(countBadgeType, num));
-			this.badgeDisposable.value = this.activityService.showViewActivity(Testing.ExplorerViewId, { badge });
+	/**
+	 * @override
+	 */
+	protected override layoutBody(height = this.dimensions.height, width = this.dimensions.width): void {
+		super.layoutBody(height, width);
+		this.dimensions.height = height;
+		this.dimensions.width = width;
+		this.container.style.height = `${height}px`;
+		this.viewModel.layout(height - this.treeHeader.clientHeight, width);
+		this.filter.value?.layout(width);
+	}
+}
+
+const SUMMARY_RENDER_INTERVAL = 200;
+
+class ResultSummaryView extends Disposable {
+	private elementsWereAttached = false;
+	private badgeType: TestingCountBadge;
+	private lastBadge?: NumberBadge | IconBadge;
+	private readonly badgeDisposable = this._register(new MutableDisposable());
+	private readonly renderLoop = this._register(new RunOnceScheduler(() => this.render(), SUMMARY_RENDER_INTERVAL));
+	private readonly elements = dom.h('div.result-summary', [
+		dom.h('div@status'),
+		dom.h('div@count'),
+		dom.h('div@count'),
+		dom.h('span'),
+		dom.h('duration@duration'),
+		dom.h('a@rerun'),
+	]);
+
+	constructor(
+		private readonly container: HTMLElement,
+		@ITestResultService private readonly resultService: ITestResultService,
+		@IActivityService private readonly activityService: IActivityService,
+		@ITestingContinuousRunService private readonly crService: ITestingContinuousRunService,
+		@IConfigurationService configurationService: IConfigurationService,
+		@IInstantiationService instantiationService: IInstantiationService,
+	) {
+		super();
+
+		this.badgeType = configurationService.getValue<TestingCountBadge>(TestingConfigKeys.CountBadge);
+		this._register(resultService.onResultsChanged(this.render, this));
+		this._register(configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration(TestingConfigKeys.CountBadge)) {
+				this.badgeType = configurationService.getValue(TestingConfigKeys.CountBadge);
+				this.render();
+			}
+		}));
+
+		const ab = this._register(new ActionBar(this.elements.rerun, {
+			actionViewItemProvider: action => createActionViewItem(instantiationService, action),
+		}));
+		ab.push(instantiationService.createInstance(MenuItemAction,
+			{ ...new ReRunLastRun().desc, icon: icons.testingRerunIcon },
+			{ ...new DebugLastRun().desc, icon: icons.testingDebugIcon },
+			{},
+			undefined,
+		), { icon: true, label: false });
+
+		this.render();
+	}
+
+	private render() {
+		const { results } = this.resultService;
+		const { count, root, status, duration, rerun } = this.elements;
+		if (!results.length) {
+			this.container.removeChild(root);
+			this.container.innerText = localize('noResults', 'No test results yet.');
+			this.elementsWereAttached = false;
+			return;
+		}
+
+		const live = results.filter(r => !r.completedAt) as LiveTestResult[];
+		let counts: CountSummary;
+		if (live.length) {
+			status.className = ThemeIcon.asClassName(spinningLoading);
+			counts = collectTestStateCounts(true, live);
+			this.renderLoop.schedule();
+
+			const last = live[live.length - 1];
+			duration.textContent = formatDuration(Date.now() - last.startedAt);
+			rerun.style.display = 'none';
+		} else {
+			const last = results[0];
+			const dominantState = mapFind(statesInOrder, s => last.counts[s] > 0 ? s : undefined);
+			status.className = ThemeIcon.asClassName(icons.testingStatesToIcons.get(dominantState ?? TestResultState.Unset)!);
+			counts = collectTestStateCounts(true, [last]);
+			duration.textContent = last instanceof LiveTestResult ? formatDuration(last.completedAt! - last.startedAt) : '';
+			rerun.style.display = 'block';
+		}
+
+		count.textContent = `${counts.passed}/${counts.totalWillBeRun}`;
+		count.title = getTestProgressText(counts);
+		this.renderActivityBadge(counts);
+
+		if (!this.elementsWereAttached) {
+			dom.clearNode(this.container);
+			this.container.appendChild(root);
+			this.elementsWereAttached = true;
+		}
+	}
+
+	private renderActivityBadge(countSummary: CountSummary) {
+		if (countSummary && this.badgeType !== TestingCountBadge.Off && countSummary[this.badgeType] !== 0) {
+			if (this.lastBadge instanceof NumberBadge && this.lastBadge.number === countSummary[this.badgeType]) {
+				return;
+			}
+
+			this.lastBadge = new NumberBadge(countSummary[this.badgeType], num => this.getLocalizedBadgeString(this.badgeType, num));
 		} else if (this.crService.isEnabled()) {
-			const badge = new IconBadge(icons.testingContinuousIsOn, () => localize('testingContinuousBadge', 'Tests are being watched for changes'));
-			this.badgeDisposable.value = this.activityService.showViewActivity(Testing.ExplorerViewId, { badge });
+			if (this.lastBadge instanceof IconBadge && this.lastBadge.icon === icons.testingContinuousIsOn) {
+				return;
+			}
+
+			this.lastBadge = new IconBadge(icons.testingContinuousIsOn, () => localize('testingContinuousBadge', 'Tests are being watched for changes'));
 		} else {
-			this.badgeDisposable.value = undefined;
+			if (!this.lastBadge) {
+				return;
+			}
+
+			this.lastBadge = undefined;
 		}
+
+		this.badgeDisposable.value = this.lastBadge && this.activityService.showViewActivity(Testing.ExplorerViewId, { badge: this.lastBadge });
 	}
 
 	private getLocalizedBadgeString(countBadgeType: TestingCountBadge, count: number): string {
@@ -464,18 +559,6 @@ export class TestingExplorerView extends ViewPane {
 				return localize('testingCountBadgeFailed', '{0} failed tests', count);
 		}
 	}
-
-	/**
-	 * @override
-	 */
-	protected override layoutBody(height = this.dimensions.height, width = this.dimensions.width): void {
-		super.layoutBody(height, width);
-		this.dimensions.height = height;
-		this.dimensions.width = width;
-		this.container.style.height = `${height}px`;
-		this.viewModel.layout(height - this.treeHeader.clientHeight, width);
-		this.filter.value?.layout(width);
-	}
 }
 
 const enum WelcomeExperience {