chore: add install browsers dialog (#26940)

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

@@ -168,6 +168,26 @@ export const UIModeView: React.FC<{}> = ({
   }, [projectFilters, runningState, testModel]);
 
   const isRunningTest = !!runningState;
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  const openInstallDialog = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dialogRef.current?.showModal();
+  }, []);
+  const closeInstallDialog = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dialogRef.current?.close();
+  }, []);
+  const installBrowsers = React.useCallback((e: React.MouseEvent) => {
+    closeInstallDialog(e);
+    setIsShowingOutput(true);
+    sendMessage('installBrowsers').then(async () => {
+      setIsShowingOutput(false);
+      const { hasBrowsers } = await sendMessage('checkBrowsers');
+      setHasBrowsers(hasBrowsers);
+    });
+  }, [closeInstallDialog]);
 
   return <div className='vbox ui-mode'>
     {isDisconnected && <div className='drop-target'>
@@ -196,14 +216,19 @@ 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);
-            });
-          }} />}
+          {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' toggled={isShowingOutput} onClick={openInstallDialog}>
+            <dialog ref={dialogRef}>
+              <div className='title'><span className='codicon codicon-lightbulb'></span>Install browsers</div>
+              <div className='body'>
+                Playwright did not find installed browsers.
+                <br></br>
+                Would you like to run `playwright install`?
+                <br></br>
+                <button className='button' onClick={installBrowsers}>Yes</button>
+                <button className='button secondary' onClick={closeInstallDialog}>No</button>
+              </div>
+            </dialog>
+          </ToolbarButton>}
         </Toolbar>
         <FiltersView
           filterText={filterText}

packages/web/src/common.css

@@ -42,7 +42,7 @@ html, body {
   display: flex;
 }
 
-body {
+body, dialog {
   background-color: var(--vscode-panel-background);
   color: var(--vscode-foreground);
   font-family: var(--vscode-font-family);
@@ -55,6 +55,59 @@ a {
   color: var(--vscode-textLink-foreground);
 }
 
+dialog {
+  border: none;
+  padding: 0;
+  box-shadow: var(--box-shadow);
+  line-height: 28px;
+  max-width: 400px;
+}
+
+dialog .title {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 5px;
+  height: 32px;
+  background-color: var(--vscode-sideBar-background);
+  max-width: 400px;
+}
+
+dialog .title .codicon {
+  margin-right: 3px;
+}
+
+dialog .body {
+  padding: 10px;
+}
+
+.button {
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+  margin: 10px;
+  border: none;
+  height: 28px;
+  min-width: 40px;
+  cursor: pointer;
+}
+
+.button:focus {
+  outline: 1px solid var(--vscode-focusBorder);
+}
+
+.button:hover {
+  background: var(--vscode-button-hoverBackground);
+}
+
+.button.secondary {
+  color: var(--vscode-button-secondaryForeground);
+  background: var(--vscode-button-secondaryBackground);
+}
+
+.button.secondary:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+
 * {
   box-sizing: border-box;
   min-width: 0;

packages/web/src/components/toolbarButton.tsx

@@ -23,7 +23,7 @@ export interface ToolbarButtonProps {
   icon?: string,
   disabled?: boolean,
   toggled?: boolean,
-  onClick: () => void,
+  onClick: (e: React.MouseEvent) => void,
   style?: React.CSSProperties
 }