From 9981f1418ad25dae5345bed96d19f16c8a663f81 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 11 Sep 2023 19:01:00 -0700
Subject: [PATCH] cherry-pick(#27008): chore: polish ui mode for better mac
 appearance

---
 packages/trace-viewer/src/ui/uiModeView.css  |  1 +
 packages/trace-viewer/src/ui/uiModeView.tsx  | 29 ++++++++++----------
 packages/trace-viewer/src/ui/workbench.tsx   |  2 +-
 packages/web/src/common.css                  |  2 ++
 packages/web/src/components/errorMessage.css |  3 +-
 packages/web/src/components/splitView.tsx    |  4 +--
 6 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/trace-viewer/src/ui/uiModeView.css b/packages/trace-viewer/src/ui/uiModeView.css
index e635654428102..80cf5c6341bfc 100644
--- a/packages/trace-viewer/src/ui/uiModeView.css
+++ b/packages/trace-viewer/src/ui/uiModeView.css
@@ -123,6 +123,7 @@
 
 .filter-list {
   padding: 0 10px 10px 10px;
+  user-select: none;
 }
 
 .filter-title,
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 42a62c6cc62fe..bcde089ea4a48 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/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}>
-            <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>}
+          {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />}
         </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>;
         })}
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 31598e0f61baf..ce32b9a7caba3 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/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}
diff --git a/packages/web/src/common.css b/packages/web/src/common.css
index 78f8c184860b1..591968cccbf6d 100644
--- a/packages/web/src/common.css
+++ b/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 {
diff --git a/packages/web/src/components/errorMessage.css b/packages/web/src/components/errorMessage.css
index a482ee0f147e3..29a6a64e6dbbf 100644
--- a/packages/web/src/components/errorMessage.css
+++ b/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;
 }
diff --git a/packages/web/src/components/splitView.tsx b/packages/web/src/components/splitView.tsx
index 1bcdc030ea338..67f9f1c78cfe8 100644
--- a/packages/web/src/components/splitView.tsx
+++ b/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 [vSize, setVSize] = 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) * window.devicePixelRatio);
   const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
   const [measure, ref] = useMeasure<HTMLDivElement>();