feat: allow installing browsers from ui (#26628)

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -28,7 +28,7 @@ import type { BrowserType } from '../../browserType';
 
 export type Transport = {
   sendEvent?: (method: string, params: any) => void;
-  dispatch: (method: string, params: any) => Promise<void>;
+  dispatch: (method: string, params: any) => Promise<any>;
   close?: () => void;
   onclose: () => void;
 };

packages/playwright-test/src/runner/uiMode.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { openTraceViewerApp, openTraceInBrowser } from 'playwright-core/lib/server';
+import { openTraceViewerApp, openTraceInBrowser, registry } from 'playwright-core/lib/server';
 import { isUnderTest, ManualPromise } from 'playwright-core/lib/utils';
 import type { FullResult } from '../../reporter';
 import { clearCompilationCache, collectAffectedTestFiles, dependenciesForTestFile } from '../transform/compilationCache';
@@ -107,6 +107,13 @@ class UIMode {
           void this._stopTests();
           return;
         }
+        if (method === 'checkBrowsers')
+          return { hasBrowsers: hasSomeBrowsers() };
+        if (method === 'installBrowsers') {
+          await installBrowsers();
+          return;
+        }
+
         queue = queue.then(() => this._queueListOrRun(method, params));
         await queue;
       },
@@ -297,3 +304,19 @@ class Watcher {
     this._collector.length = 0;
   }
 }
+
+function hasSomeBrowsers(): boolean {
+  for (const browserName of ['chromium', 'webkit', 'firefox']) {
+    try {
+      registry.findExecutable(browserName)!.executablePathOrDie('javascript');
+      return true;
+    } catch {
+    }
+  }
+  return false;
+}
+
+async function installBrowsers() {
+  const executables = registry.defaultExecutables();
+  await registry.install(executables, false);
+}

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

@@ -84,6 +84,7 @@ export const UIModeView: React.FC<{}> = ({
   const runTestBacklog = React.useRef<Set<string>>(new Set());
   const [collapseAllCount, setCollapseAllCount] = React.useState(0);
   const [isDisconnected, setIsDisconnected] = React.useState(false);
+  const [hasBrowsers, setHasBrowsers] = React.useState(true);
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -91,8 +92,10 @@ export const UIModeView: React.FC<{}> = ({
     setIsLoading(true);
     setWatchedTreeIds({ value: new Set() });
     updateRootSuite(baseFullConfig, new TeleSuite('', 'root'), [], undefined);
-    refreshRootSuite(true).then(() => {
+    refreshRootSuite(true).then(async () => {
       setIsLoading(false);
+      const { hasBrowsers } = await sendMessage('checkBrowsers');
+      setHasBrowsers(hasBrowsers);
     });
   }, []);
 
@@ -193,6 +196,14 @@ export const UIModeView: React.FC<{}> = ({
           <ToolbarButton icon='color-mode' title='Toggle color mode' onClick={() => toggleTheme()} />
           <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
           <ToolbarButton icon='terminal' title='Toggle output' toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />
+          {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-errorForeground)' }}title='Install browsers' toggled={isShowingOutput} onClick={() => {
+            setIsShowingOutput(true);
+            sendMessage('installBrowsers').then(async () => {
+              setIsShowingOutput(false);
+              const { hasBrowsers } = await sendMessage('checkBrowsers');
+              setHasBrowsers(hasBrowsers);
+            });
+          }} />}
         </Toolbar>
         <FiltersView
           filterText={filterText}

packages/web/src/components/treeView.tsx

@@ -63,10 +63,7 @@ export function TreeView<T extends TreeItem>({
   autoExpandDepth,
 }: TreeViewProps<T>) {
   const treeItems = React.useMemo(() => {
-    // Expand all ancestors of the selected item.
-    for (let item: TreeItem | undefined = selectedItem?.parent; item; item = item.parent)
-      treeState.expandedItems.set(item.id, true);
-    return flattenTree<T>(rootItem, treeState.expandedItems, autoExpandDepth || 0);
+    return flattenTree<T>(rootItem, selectedItem, treeState.expandedItems, autoExpandDepth || 0);
   }, [rootItem, selectedItem, treeState, autoExpandDepth]);
 
   // Filter visible items.
@@ -160,11 +157,15 @@ type TreeItemData = {
   parent: TreeItem | null,
 };
 
-function flattenTree<T extends TreeItem>(rootItem: T, expandedItems: Map<string, boolean | undefined>, autoExpandDepth: number): Map<T, TreeItemData> {
+function flattenTree<T extends TreeItem>(rootItem: T, selectedItem: T | undefined, expandedItems: Map<string, boolean | undefined>, autoExpandDepth: number): Map<T, TreeItemData> {
   const result = new Map<T, TreeItemData>();
+  const temporaryExpanded = new Map<string, boolean | undefined>();
+  for (let item: TreeItem | undefined = selectedItem?.parent; item; item = item.parent)
+    temporaryExpanded.set(item.id, true);
+
   const appendChildren = (parent: T, depth: number) => {
     for (const item of parent.children as T[]) {
-      const expandState = expandedItems.get(item.id);
+      const expandState = expandedItems.get(item.id) ?? temporaryExpanded.get(item.id);
       const autoExpandMatches = autoExpandDepth > depth && result.size < 25 && expandState !== false;
       const expanded = item.children.length ? expandState || autoExpandMatches : undefined;
       result.set(item, { depth, expanded, parent: rootItem === parent ? null : parent });