Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Pavel Feldman 2023-09-11 19:01:00 -07:00
parent 5f78f27a7a
commit 9981f1418a
6 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/trace-viewer/src/ui/uiModeView.css
View file

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

29
packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -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>;
})}

2
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -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}

2
packages/web/src/common.css
View file

@ -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 {

3
packages/web/src/components/errorMessage.css
View file

@ -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;
}

4
packages/web/src/components/splitView.tsx
View file

@ -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>();