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
+ {!hasBrowsers && +
Install browsers
+
+ Playwright did not find installed browsers. +

+ Would you like to run `playwright install`? +

+ + +
+
} {isDisconnected &&
UI Mode disconnected
window.location.reload()}>Reload the page to reconnect
} - +
@@ -216,19 +227,7 @@ export const UIModeView: React.FC<{}> = ({ toggleTheme()} /> reloadTests()} disabled={isRunningTest || isLoading}> { setIsShowingOutput(!isShowingOutput); }} /> - {!hasBrowsers && - -
Install browsers
-
- Playwright did not find installed browsers. -

- Would you like to run `playwright install`? -

- - -
-
-
} + {!hasBrowsers && }
v).map(([k]) => k)); }}/> -
{projectName}
+
{projectName || 'untitled'}
; })} 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} /> - + = ({ settingName, children }) => { - const [hSize, setHSize] = useSetting(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize)); - const [vSize, setVSize] = useSetting(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize)); + const [hSize, setHSize] = useSetting(settingName ? settingName + '.' + orientation + ':size' : undefined, Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio); + const [vSize, setVSize] = useSetting(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();