feat: animate notebook cell execution footer expand/collapse (#12946)

Partially addresses #11775

Hide the cell execution footer when a cell has never been run or was
only run in a previous session. The footer collapses with a CSS
transition (height, opacity, borders) and expands when the cell is
queued or executed.


### Demo

_The execution info smoothly slides in and out as the info is
available._


https://github.com/user-attachments/assets/e5876226-1d5d-4e10-817b-9ec864197b59



- Respects `prefers-reduced-motion` by disabling transitions
- ARIA labels suppressed on collapsed footers via `aria-hidden`
- Active states (running/pending) prioritized over static states in ARIA
label ordering
- Border radius adjusts when footer is collapsed and no outputs are
present

#### Performance
In theory this could be a performance issue with really large notebooks
because the animation triggers a reflow of lower cells. In practice,
it's not bad as if a cell has no output it's not _normally_ followed by
a bunch of cells with outputs. Also the animations are all done with CSS
so they're fairly optimized. I tested with a notebook with ~100 cells
and didnt notice any real performance issues but we can/should keep an
eye on it.

### Release Notes

#### New Features

- Notebook cell execution footer now hides when the cell has not been
run and smoothly animates in/out during execution

#### Bug Fixes

- N/A

### QA Notes

@:notebooks @:positron-notebooks

2. Verify cells that have never been run do NOT show the execution
footer
3. Run a cell -- footer should animate in and show timing info
4. Add a new cell without running it -- footer should not be visible
5. Queue multiple cells -- footer should appear immediately for pending
cells
6. Check with system reduced-motion enabled -- transitions should be
instant

Author: nstrayer

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/CodeCellStatusFooter.css

@@ -10,6 +10,7 @@
 	gap: 8px;
 	padding: 0px 1rem;
 	height: 24px;
+	overflow: hidden;
 
 	/* Visual separators from editor content above and outputs below */
 	border-top: 1px solid var(--vscode-widget-border);
@@ -25,6 +26,23 @@
 
 	/* Override inherited cursor from .positron-notebook class */
 	cursor: default;
+
+	/* Animate expand/collapse */
+	transition: height 150ms ease-out, opacity 150ms ease-out,
+		border-top-width 150ms ease-out, border-bottom-width 150ms ease-out;
+}
+
+.positron-notebook-code-cell-footer.collapsed {
+	height: 0;
+	opacity: 0;
+	border-top-width: 0;
+	border-bottom-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.positron-notebook-code-cell-footer {
+		transition: none;
+	}
 }
 
 /* Override inherited cursor from .positron-notebook class for children spans */

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/CodeCellStatusFooter.tsx

@@ -18,6 +18,7 @@ import { ExecutionStatus } from '../PositronNotebookCells/IPositronNotebookCell.
 import { formatCellDuration, formatTimestamp, getRelativeTime, isMoreThanOneHourAgo } from './cellExecutionUtils.js';
 import { Icon } from '../../../../../platform/positronActionBar/browser/components/icon.js';
 import { Codicon } from '../../../../../base/common/codicons.js';
+import { positronClassNames } from '../../../../../base/common/positronUtilities.js';
 
 interface CodeCellStatusFooterProps {
 	cell: PositronNotebookCodeCell;
@@ -77,13 +78,18 @@ export function CodeCellStatusFooter({ cell, hasError }: CodeCellStatusFooterPro
 	const hasCurrentSessionContent = hasExecutionResult || isCurrentlyRunning || hasTimingInfo;
 
 	// Check if cell has never been run (no execution order and no current session data)
-	const hasNeverBeenRun = !hasExecutionOrder && !hasExecutionResult && !isCurrentlyRunning;
+	const hasNeverBeenRun = !hasExecutionOrder && !hasCurrentSessionContent;
 
 	// Check if we only have execution order from previous session (no current session data)
 	const wasRunInPreviousSession = hasExecutionOrder && !hasCurrentSessionContent;
 
 	const isPending = executionStatus === 'pending';
 
+	// Collapse the footer when there's no execution info to display.
+	// This covers cells that have never been run and cells only run in a previous session.
+	// isPending guard keeps the clock icon visible for queued cells.
+	const isCollapsed = !isPending && !hasCurrentSessionContent;
+
 	const dataExecutionStatus = executionStatus || 'idle';
 
 	const renderIcon = () => {
@@ -147,16 +153,10 @@ export function CodeCellStatusFooter({ cell, hasError }: CodeCellStatusFooterPro
 		return null;
 	};
 
-	// Build ARIA label for accessibility
+	// Build ARIA label for accessibility.
+	// Active states (running/pending) take priority over static states so a
+	// queued cell that has never been run is announced as "queued", not "not yet run".
 	const getAriaLabel = () => {
-		if (hasNeverBeenRun) {
-			return localize('cellExecution.notYetRun', 'Cell not yet run');
-		}
-
-		if (wasRunInPreviousSession) {
-			return localize('cellExecution.notRunThisSession', 'Not run this session');
-		}
-
 		if (isCurrentlyRunning) {
 			return localize('cellExecution.running', 'Cell is executing');
 		}
@@ -165,6 +165,14 @@ export function CodeCellStatusFooter({ cell, hasError }: CodeCellStatusFooterPro
 			return localize('cellExecution.pending', 'Cell is queued for execution');
 		}
 
+		if (hasNeverBeenRun) {
+			return localize('cellExecution.notYetRun', 'Cell not yet run');
+		}
+
+		if (wasRunInPreviousSession) {
+			return localize('cellExecution.notRunThisSession', 'Not run this session');
+		}
+
 		if (hasTimingInfo && duration !== undefined && lastRunEndTime !== undefined) {
 			const status = hasError || lastRunSuccess === false
 				? localize('cellExecution.failed', 'Cell execution failed')
@@ -181,9 +189,10 @@ export function CodeCellStatusFooter({ cell, hasError }: CodeCellStatusFooterPro
 	return (
 		<div
 			ref={containerRef}
-			aria-label={getAriaLabel()}
+			aria-hidden={isCollapsed || undefined}
+			aria-label={isCollapsed ? undefined : getAriaLabel()}
 			aria-live={isCurrentlyRunning ? 'polite' : 'off'}
-			className='positron-notebook-code-cell-footer'
+			className={positronClassNames('positron-notebook-code-cell-footer', { 'collapsed': isCollapsed })}
 			data-execution-status={dataExecutionStatus}
 			role='status'
 		>

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/NotebookCellSelection.css

@@ -76,6 +76,13 @@
 	border-bottom-color: transparent;
 }
 
+/* When footer is collapsed (cell hasn't been run) and no outputs, editor container needs bottom radius */
+.positron-notebook-code-cell:has(.positron-notebook-outputs-section.no-outputs) .positron-notebook-editor-section:has(.positron-notebook-code-cell-footer.collapsed) .positron-notebook-editor-container {
+	border-bottom-left-radius: var(--vscode-positronNotebook-cell-radius);
+	border-bottom-right-radius: var(--vscode-positronNotebook-cell-radius);
+	transition: border-bottom-left-radius 150ms ease-out, border-bottom-right-radius 150ms ease-out;
+}
+
 /* Update the border color for code cells with no outputs based on the selection state */
 .positron-notebook-cell.selected:has(.positron-notebook-outputs-section.no-outputs) .positron-notebook-editor-section,
 .positron-notebook-cell.editing:has(.positron-notebook-outputs-section.no-outputs) .positron-notebook-editor-section {
@@ -201,4 +208,8 @@
 		animation: none;
 		opacity: 0;
 	}
+
+	.positron-notebook-code-cell:has(.positron-notebook-outputs-section.no-outputs) .positron-notebook-editor-section:has(.positron-notebook-code-cell-footer.collapsed) .positron-notebook-editor-container {
+		transition: none;
+	}
 }

test/e2e/pages/notebooksPositron.ts

@@ -1145,6 +1145,18 @@ export class PositronNotebooks extends Notebooks {
 		});
 	}
 
+	/**
+	 * Verify: Cell footer is collapsed (hidden via CSS animation).
+	 * @param cellIndex - The index of the cell whose footer to check.
+	 */
+	async expectFooterNotVisible(cellIndex: number): Promise<void> {
+		await test.step(`Expect cell footer to be collapsed`, async () => {
+			const footer = this.cellFooterAtIndex(cellIndex);
+			await expect(footer).toHaveClass(/\bcollapsed\b/);
+			await expect(footer).not.toBeVisible();
+		});
+	}
+
 	/**
 	 * Verify: Cell execution status matches expected status.
 	 * @param cellIndex - The index of the cell to check.

test/e2e/tests/notebooks-positron/notebook-cell-execution-info.test.ts

@@ -86,12 +86,12 @@ test.describe('Positron Notebooks: Cell Execution Footer', {
 		// ========================================
 		// Cell 4: Footer visibility based on cell state
 		// ========================================
-		await test.step('Cell 4 - Footer visibility for never-run cell', async () => {
+		await test.step('Cell 4 - Footer hidden for never-run cell', async () => {
 			// Add a new cell but don't run it
 			await notebooksPositron.addCodeToCell(4, 'print("never run")', { run: false });
 
-			// Footer should show "Not run this session" in aria-label
-			await notebooksPositron.expectFooterAriaLabel(4, 'Cell not yet run');
+			// Footer should not be rendered for cells that have never been run
+			await notebooksPositron.expectFooterNotVisible(4);
 		});
 	});
 });