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

chore(ui mode): remove output error highlight upon opening

Browse source 
Otherwise it sits there forever.
This commit is contained in:
Dmitry Gozman 2025-01-22 09:27:25 +00:00
parent cf90c0f122
commit fe173b5814
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -354,6 +354,18 @@ export const UIModeView: React.FC<{}> = ({
return () => disposable.dispose();
}, [runTests, testServerConnection, watchAll, watchedTreeIds, teleSuiteUpdater, projectFilters]);
const hideOutput = React.useCallback(() => setIsShowingOutput(false), [setIsShowingOutput]);
const showOutput = React.useCallback(() => {
setIsShowingOutput(true);
setOutputContainsError(false);
}, [setIsShowingOutput, setOutputContainsError]);
const toggleOutput = React.useCallback(() => {
if (isShowingOutput)
hideOutput();
else
showOutput();
}, [isShowingOutput, showOutput, hideOutput]);
// Shortcuts.
React.useEffect(() => {
if (!testServerConnection)
@ -361,7 +373,7 @@ export const UIModeView: React.FC<{}> = ({
const onShortcutEvent = (e: KeyboardEvent) => {
if (e.code === 'Backquote' && e.ctrlKey) {
e.preventDefault();
setIsShowingOutput(!isShowingOutput);
toggleOutput();
} else if (e.code === 'F5' && e.shiftKey) {
e.preventDefault();
testServerConnection?.stopTestsNoReply({});
@ -374,7 +386,7 @@ export const UIModeView: React.FC<{}> = ({
return () => {
removeEventListener('keydown', onShortcutEvent);
};
}, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]);
}, [runTests, reloadTests, testServerConnection, visibleTestIds, toggleOutput]);
const dialogRef = React.useRef<HTMLDialogElement>(null);
const openInstallDialog = React.useCallback((e: React.MouseEvent) => {
@ -389,13 +401,13 @@ export const UIModeView: React.FC<{}> = ({
}, []);
const installBrowsers = React.useCallback((e: React.MouseEvent) => {
closeInstallDialog(e);
setIsShowingOutput(true);
showOutput();
testServerConnection?.installBrowsers({}).then(async () => {
setIsShowingOutput(false);
hideOutput();
const { hasBrowsers } = await testServerConnection?.checkBrowsers({});
setHasBrowsers(hasBrowsers);
});
}, [closeInstallDialog, testServerConnection]);
}, [closeInstallDialog, testServerConnection, showOutput, hideOutput]);
return <div className='vbox ui-mode'>
{!hasBrowsers && <dialog ref={dialogRef}>
@ -425,7 +437,7 @@ export const UIModeView: React.FC<{}> = ({
<div className='section-title' style={{ flex: 'none' }}>Output</div>
<ToolbarButton icon='circle-slash' title='Clear output' onClick={() => { xtermDataSource.clear(); setOutputContainsError(false); }}></ToolbarButton>
<div className='spacer'></div>
<ToolbarButton icon='close' title='Close' onClick={() => setIsShowingOutput(false)}></ToolbarButton>
<ToolbarButton icon='close' title='Close' onClick={hideOutput}></ToolbarButton>
</Toolbar>
<XtermWrapper source={xtermDataSource}></XtermWrapper>
</div>
@ -445,8 +457,9 @@ export const UIModeView: React.FC<{}> = ({
<div className='section-title'>Playwright</div>
<ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
<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)' }} />}
<ToolbarButton icon={'terminal'} title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={toggleOutput} noChildMargin={true}>
{outputContainsError && <div title='Output contains error' style={{ position: 'absolute', top: 2, right: 2, width: 7, height: 7, borderRadius: '50%', backgroundColor: 'var(--vscode-notificationsErrorIcon-foreground)' }} />}
</ToolbarButton>
</div>
{!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />}
</Toolbar>

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

@ -29,6 +29,7 @@ export interface ToolbarButtonProps {
testId?: string,
className?: string,
ariaLabel?: string,
noChildMargin?: boolean,
}
export const ToolbarButton = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<ToolbarButtonProps>>(function ToolbarButton({
@ -42,6 +43,7 @@ export const ToolbarButton = React.forwardRef<HTMLButtonElement, React.PropsWith
testId,
className,
ariaLabel,
noChildMargin,
}, ref) {
return <button
ref={ref}
@ -55,7 +57,7 @@ export const ToolbarButton = React.forwardRef<HTMLButtonElement, React.PropsWith
data-testid={testId}
aria-label={ariaLabel || title}
>
{icon && <span className={`codicon codicon-${icon}`} style={children ? { marginRight: 5 } : {}}></span>}
{icon && <span className={`codicon codicon-${icon}`} style={children && !noChildMargin ? { marginRight: 5 } : {}}></span>}
{children}
</button>;
});