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

Otherwise it sits there forever.
microsoft · Jan 22, 2025 · fe173b5 · fe173b5
1 parent cf90c0f
commit fe173b5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -354,14 +354,26 @@ 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)
       return;
     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>

diff --git a/packages/web/src/components/toolbarButton.tsx b/packages/web/src/components/toolbarButton.tsx
@@ -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>;
 });