cherry-pick(#27008): chore: polish ui mode for better mac appearance

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

@@ -123,6 +123,7 @@
 
 .filter-list {
   padding: 0 10px 10px 10px;
+  user-select: none;
 }
 
 .filter-title,

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

@@ -190,11 +190,22 @@ export const UIModeView: React.FC<{}> = ({
   }, [closeInstallDialog]);
 
   return <div className='vbox ui-mode'>
+    {!hasBrowsers && <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}>Install</button>
+        <button className='button secondary' onClick={closeInstallDialog}>Dismiss</button>
+      </div>
+    </dialog>}
     {isDisconnected && <div className='drop-target'>
       <div className='title'>UI Mode disconnected</div>
       <div><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div>
     </div>}
-    <SplitView sidebarSize={250} minSidebarSize={125} orientation='horizontal' sidebarIsFirst={true}>
+    <SplitView sidebarSize={250} minSidebarSize={150} orientation='horizontal' sidebarIsFirst={true} settingName='testListSidebar'>
       <div className='vbox'>
         <div className={'vbox' + (isShowingOutput ? '' : ' hidden')}>
           <Toolbar>
@@ -216,19 +227,7 @@ 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-list-warningForeground)' }} title='Playwright browsers are missing' toggled={isShowingOutput} onClick={openInstallDialog}>
+          {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' 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}
@@ -335,7 +334,7 @@ const FiltersView: React.FC<{
                 if (configFile)
                   settings.setObject(configFile + ':projects', [...copy.entries()].filter(([_, v]) => v).map(([k]) => k));
               }}/>
-              <div>{projectName}</div>
+              <div>{projectName || 'untitled'}</div>
             </label>
           </div>;
         })}

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

@@ -193,7 +193,7 @@ export const Workbench: React.FunctionComponent<{
       selectedTime={selectedTime}
       setSelectedTime={setSelectedTime}
     />
-    <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
+    <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
       <SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'>
         <SnapshotTab
           action={activeAction}

packages/web/src/common.css

@@ -79,6 +79,7 @@ dialog .title .codicon {
 
 dialog .body {
   padding: 10px;
+  text-align: center;
 }
 
 .button {
@@ -89,6 +90,7 @@ dialog .body {
   height: 28px;
   min-width: 40px;
   cursor: pointer;
+  user-select: none;
 }
 
 .button:focus {

packages/web/src/components/errorMessage.css

@@ -19,6 +19,7 @@
   font-weight: var(--vscode-editor-font-weight);
   font-size: var(--vscode-editor-font-size);
   background-color: var(--vscode-inputValidation-errorBackground);
-  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-word;
   padding: 10px;
 }

packages/web/src/components/splitView.tsx

@@ -39,8 +39,8 @@ export const SplitView: React.FC<SplitViewProps> = ({
   settingName,
   children
 }) => {
-  const [hSize, setHSize] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize));
+  const [hSize, setHSize] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio);
-  const [vSize, setVSize] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize));
+  const [vSize, setVSize] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio);
   const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
   const [measure, ref] = useMeasure<HTMLDivElement>();