yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): highlight output toggle button if terminal contains error (#32392)

Browse Source 
Closes https://github.com/microsoft/playwright/issues/32368

<img width="412" alt="Screenshot 2024-08-30 at 13 22 39"
src="https://github.com/user-attachments/assets/76cadcd9-e92a-44d9-80fc-b4e04702e71e">
This commit is contained in:
Simon Knott 2024-09-12 19:40:40 +02:00 committed by GitHub
parent 470b1b4922
commit c9f3eb158e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/trace-viewer/src/ui/uiModeView.tsx
View File

@ -72,6 +72,7 @@ export const UIModeView: React.FC<{}> = ({
}) => { }) => {
const [filterText, setFilterText] = React.useState<string>(''); const [filterText, setFilterText] = React.useState<string>('');
const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false); const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false);
const [outputContainsError, setOutputContainsError] = React.useState(false);
const [statusFilters, setStatusFilters] = React.useState<Map<string, boolean>>(new Map([ const [statusFilters, setStatusFilters] = React.useState<Map<string, boolean>>(new Map([
['passed', false], ['passed', false],
['failed', false], ['failed', false],
@ -134,6 +135,9 @@ export const UIModeView: React.FC<{}> = ({
} else { } else {
xtermDataSource.write(params.text!); xtermDataSource.write(params.text!);
} }
if (params.type === 'stderr')
setOutputContainsError(true);
}), }),
testServerConnection.onClose(() => setIsDisconnected(true)) testServerConnection.onClose(() => setIsDisconnected(true))
]; ];
@ -168,6 +172,7 @@ export const UIModeView: React.FC<{}> = ({
}, },
onError: error => { onError: error => {
xtermDataSource.write((error.stack || error.value || '') + '\n'); xtermDataSource.write((error.stack || error.value || '') + '\n');
setOutputContainsError(true);
}, },
pathSeparator: queryParams.pathSeparator, pathSeparator: queryParams.pathSeparator,
}); });
@ -426,7 +431,7 @@ export const UIModeView: React.FC<{}> = ({
<div className={clsx('vbox', !isShowingOutput && 'hidden')}> <div className={clsx('vbox', !isShowingOutput && 'hidden')}>
<Toolbar> <Toolbar>
<div className='section-title' style={{ flex: 'none' }}>Output</div> <div className='section-title' style={{ flex: 'none' }}>Output</div>
<ToolbarButton icon='circle-slash' title='Clear output' onClick={() => xtermDataSource.clear()}></ToolbarButton> <ToolbarButton icon='circle-slash' title='Clear output' onClick={() => { xtermDataSource.clear(); setOutputContainsError(false); }}></ToolbarButton>
<div className='spacer'></div> <div className='spacer'></div>
<ToolbarButton icon='close' title='Close' onClick={() => setIsShowingOutput(false)}></ToolbarButton> <ToolbarButton icon='close' title='Close' onClick={() => setIsShowingOutput(false)}></ToolbarButton>
</Toolbar> </Toolbar>
@ -447,7 +452,10 @@ export const UIModeView: React.FC<{}> = ({
<img src='playwright-logo.svg' alt='Playwright logo' /> <img src='playwright-logo.svg' alt='Playwright logo' />
<div className='section-title'>Playwright</div> <div className='section-title'>Playwright</div>
<ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton> <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
<ToolbarButton icon='terminal' title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} /> <div style={{ position: 'relative' }}>
<ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />
{outputContainsError && <div title='Output contains error' style={{ position: 'absolute', top: 2, right: 2, width: 7, height: 7, borderRadius: '50%', backgroundColor: 'var(--vscode-notificationsErrorIcon-foreground)' }} />}
</div>
{!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />} {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />}
</Toolbar> </Toolbar>
<FiltersView <FiltersView