fix(ui): show stack frames in ui mode (#29560)

#29558, #29500

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -26,11 +26,11 @@ import type { StackFrame } from '@protocol/channels';
 
 export const SourceTab: React.FunctionComponent<{
   stack: StackFrame[] | undefined,
+  stackFrameLocation: 'bottom' | 'right',
   sources: Map<string, SourceModel>,
-  hideStackFrames?: boolean,
   rootDir?: string,
   fallbackLocation?: SourceLocation,
-}> = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation }) => {
+}> = ({ stack, sources, rootDir, fallbackLocation, stackFrameLocation }) => {
   const [lastStack, setLastStack] = React.useState<StackFrame[] | undefined>();
   const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
 
@@ -78,7 +78,9 @@ export const SourceTab: React.FunctionComponent<{
     return { source, highlight, targetLine, fileName };
   }, [stack, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, highlight: [] });
 
-  return <SplitView sidebarSize={200} orientation='horizontal' sidebarHidden={hideStackFrames}>
+  const showStackFrames = (stack?.length ?? 0) > 1;
+
+  return <SplitView sidebarSize={200} orientation={stackFrameLocation === 'bottom' ? 'vertical' : 'horizontal'} sidebarHidden={!showStackFrames}>
     <div className='vbox' data-testid='source-code'>
       {fileName && <div className='source-tab-file-name'>{fileName}</div>}
       <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -589,7 +589,6 @@ const TraceView: React.FC<{
   return <Workbench
     key='workbench'
     model={model?.model}
-    hideStackFrames={true}
     showSourcesFirst={true}
     rootDir={rootDir}
     initialSelection={initialSelection}

packages/trace-viewer/src/ui/workbench.tsx

@@ -43,7 +43,6 @@ import type { UITestStatus } from './testUtils';
 
 export const Workbench: React.FunctionComponent<{
   model?: MultiTraceModel,
-  hideStackFrames?: boolean,
   showSourcesFirst?: boolean,
   rootDir?: string,
   fallbackLocation?: modelUtil.SourceLocation,
@@ -51,7 +50,7 @@ export const Workbench: React.FunctionComponent<{
   onSelectionChanged?: (action: ActionTraceEventInContext) => void,
   isLive?: boolean,
   status?: UITestStatus,
-}> = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => {
+}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => {
   const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined);
   const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
   const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
@@ -158,8 +157,8 @@ export const Workbench: React.FunctionComponent<{
     render: () => <SourceTab
       stack={revealedStack}
       sources={sources}
-      hideStackFrames={hideStackFrames}
       rootDir={rootDir}
+      stackFrameLocation={sidebarLocation === 'bottom' ? 'right' : 'bottom'}
       fallbackLocation={fallbackLocation} />
   };
   const consoleTab: TabbedPaneTabModel = {

tests/playwright-test/reporter-html.spec.ts

@@ -442,8 +442,11 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         `,
         'a.test.js': `
           import { test, expect } from '@playwright/test';
+          async function evaluateWrapper(page, expression) {
+            await page.evaluate(expression);
+          }
           test('passes', async ({ page }) => {
-            await page.evaluate('2 + 2');
+            await evaluateWrapper(page, '2 + 2');
           });
         `,
       }, { reporter: 'dot,html' }, { PW_TEST_HTML_REPORT_OPEN: 'never' });
@@ -468,6 +471,36 @@ for (const useIntermediateMergeReport of [false, true] as const) {
       await expect(page.getByTestId('stack-trace-list').locator('.list-view-entry.selected')).toContainText('a.test.js');
     });
 
+    test('should not show stack trace', async ({ runInlineTest, page, showReport }) => {
+      const result = await runInlineTest({
+        'playwright.config.js': `
+          module.exports = { use: { trace: 'on' } };
+        `,
+        'a.test.js': `
+          import { test, expect } from '@playwright/test';
+          test('passes', async ({ page }) => {
+            await page.evaluate('2 + 2');
+          });
+        `,
+      }, { reporter: 'dot,html' }, { PW_TEST_HTML_REPORT_OPEN: 'never' });
+      expect(result.exitCode).toBe(0);
+      expect(result.passed).toBe(1);
+
+      await showReport();
+      await page.click('text=passes');
+      await page.click('img');
+      await page.click('.action-title >> text=page.evaluate');
+      await page.click('text=Source');
+
+      await expect(page.locator('.CodeMirror-line')).toContainText([
+        /import.*test/,
+        /page\.evaluate/
+      ]);
+      await expect(page.locator('.source-line-running')).toContainText('page.evaluate');
+
+      await expect(page.getByTestId('stack-trace-list')).toHaveCount(0);
+    });
+
     test('should show trace title', async ({ runInlineTest, page, showReport }) => {
       const result = await runInlineTest({
         'playwright.config.js': `