feat(ui): collapsible sidebar

packages/trace-viewer/src/ui/uiModeView.css

@@ -108,3 +108,18 @@
   color: var(--vscode-input-foreground);
   background-color: var(--vscode-input-background);
 }
+
+.ui-mode-sidebar.collapsed {
+  flex: 0;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  gap: 8px;
+  border-right: 1px solid var(--vscode-panel-border);
+  padding: 3px 18px;
+}
+
+.ui-mode-sidebar.collapsed img {
+  margin-left: unset;
+}

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -71,6 +71,7 @@
 
 export const UIModeView: React.FC<{}> = ({
 }) => {
+  const [expanded, setExpanded] = React.useState(true);
   const [filterText, setFilterText] = React.useState<string>('');
   const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false);
   const [outputContainsError, setOutputContainsError] = React.useState(false);
@@ -370,14 +371,14 @@
         testServerConnection?.stopTestsNoReply({});
       } else if (e.code === 'F5') {
         e.preventDefault();
-        runTests('bounce-if-busy', visibleTestIds);
+        runTests('bounce-if-busy', expanded ? visibleTestIds : testTree.collectTestIds(selectedItem.treeItem));
       }
     };
     addEventListener('keydown', onShortcutEvent);
     return () => {
       removeEventListener('keydown', onShortcutEvent);
     };
   }, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]);
 
   const dialogRef = React.useRef<HTMLDialogElement>(null);
   const openInstallDialog = React.useCallback((e: React.MouseEvent) => {
@@ -400,7 +401,7 @@
     });
   }, [closeInstallDialog, testServerConnection]);
 
-  return <LLMProvider><div className='vbox ui-mode'>
+  return <LLMProvider><div className='hbox ui-mode'>
     {!hasBrowsers && <dialog ref={dialogRef}>
       <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
       <div className='body'>
@@ -416,6 +417,21 @@
       <div className='title'>UI Mode disconnected</div>
       <div><a href='#' onClick={() => window.location.href = '/'}>Reload the page</a> to reconnect</div>
     </div>}
+
+    {!expanded && (
+      <div className='vbox ui-mode-sidebar collapsed'>
+        <img src='playwright-logo.svg' alt='Playwright logo' />
+        <ToolbarButton icon='chevron-right' title='Expand sidebar' onClick={() => setExpanded(true)} />
+        {(!isRunningTest || isLoading)
+          ? <ToolbarButton
+            icon='play'
+            title='Run test — F5'
+            onClick={() => runTests('bounce-if-busy', testTree.collectTestIds(selectedItem.treeItem))}
+            disabled={isLoading}
+          />
+          : <ToolbarButton icon='debug-stop' title={'Stop — ' + (isMac ? '⇧F5' : 'Shift + F5')} onClick={() => testServerConnection?.stopTests({})}/>}
+      </div>
+    )}
     <SplitView
       sidebarSize={250}
       minSidebarSize={150}
@@ -444,6 +460,7 @@
           </CommitInfoProvider>
         </div>
       </div>}
+      sidebarHidden={!expanded}
       sidebar={<div className='vbox ui-mode-sidebar'>
         <Toolbar noShadow={true} noMinHeight={true}>
           <img src='playwright-logo.svg' alt='Playwright logo' />
@@ -454,6 +471,7 @@
             {outputContainsError && <div title='Output contains error' style={{ position: 'absolute', top: 2, right: 2, width: 7, height: 7, borderRadius: '50%', backgroundColor: 'var(--vscode-notificationsErrorIcon-foreground)' }} />}
           </div>
           {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />}
+          <ToolbarButton icon='chevron-left' title='Collapse sidebar' onClick={() => setExpanded(false)} />
         </Toolbar>
         <FiltersView
           filterText={filterText}

packages/web/src/components/splitView.tsx

@@ -61,7 +61,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
   }
 
   document.body.style.userSelect = resizing ? 'none' : 'inherit';
-  let resizerStyle: any = {};
+  let resizerStyle: any = { display: sidebarHidden ? 'none' : undefined };
   if (orientation === 'vertical') {
     if (sidebarIsFirst)
       resizerStyle = { top: resizing ? 0 : size - 4, bottom: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 };
@@ -76,8 +76,8 @@ export const SplitView: React.FC<SplitViewProps> = ({
 
   return <div className={clsx('split-view', orientation, sidebarIsFirst && 'sidebar-first')} ref={ref}>
     <div className='split-view-main'>{main}</div>
-    {!sidebarHidden && <div style={{ flexBasis: size }} className='split-view-sidebar'>{sidebar}</div>}
-    {!sidebarHidden && <div
+    <div style={{ flexBasis: size, display: sidebarHidden ? 'none' : undefined }} className='split-view-sidebar'>{sidebar}</div>
+    <div
       style={resizerStyle}
       className='split-view-resizer'
       onMouseDown={event => setResizing({ offset: orientation === 'vertical' ? event.clientY : event.clientX, size })}
@@ -99,6 +99,6 @@ export const SplitView: React.FC<SplitViewProps> = ({
             setHSize(size * window.devicePixelRatio);
         }
       }}
-    ></div>}
+    ></div>
   </div>;
 };

tests/playwright-test/ui-mode-test-run.spec.ts

@@ -798,3 +798,30 @@ test('should not leak websocket connections', {
 
   await expect.poll(() => ws1.isClosed()).toBe(true);
 });
+
+test('should run selected from collapsed sidebar', async ({ runUITest }) => {
+  const { page } = await runUITest(basicTestTree);
+  await expect.poll(dumpTestTree(page)).toContain(`
+    ▼ ◯ a.test.ts
+  `);
+
+  await page.getByTitle('Run all').click();
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ❌ a.test.ts
+        ✅ passes
+        ❌ fails <=
+      ► ❌ suite
+    ▼ ❌ b.test.ts
+        ✅ passes
+        ❌ fails
+    ▼ ✅ c.test.ts
+        ✅ passes
+        ⊘ skipped
+  `);
+
+  await page.getByTitle('Collapse sidebar').click();
+  await page.getByTitle('Run test').click();
+  await expect(page.locator('.workbench-run-status')).toHaveText(/Pending/);
+  await expect(page.locator('.workbench-run-status')).toHaveText(/Failed/);
+});