Show duration in the tab title

packages/html-reporter/src/testCaseView.css

@@ -50,6 +50,11 @@
   line-height: 24px;
 }
 
+.test-case-run-duration {
+  color: var(--color-fg-subtle);
+  padding-left: 8px;
+}
+
 .test-case-path {
   flex: none;
   align-items: center;

packages/html-reporter/src/testCaseView.spec.tsx

@@ -212,7 +212,7 @@ test('should correctly render prev and next', async ({ mount }) => {
     - text: group
     - link "« previous"
     - link "next »"
-    - text: "My test test.spec.ts:42 100ms"
+    - text: "My test test.spec.ts:42 10ms"
   `);
 });
 
@@ -237,10 +237,15 @@ const testCaseWithTwoAttempts: TestCase = {
 test('total duration is selected run duration', async ({ mount, page }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCaseWithTwoAttempts} prev={undefined} next={undefined} run={0}></TestCaseView>);
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 50ms"
+    - text: "My test test.spec.ts:42 200ms"
+    - text: "Run 50ms Retry #1 150ms"
   `);
-  await page.getByText('Retry #1').click();
+  await page.locator('.tabbed-pane-tab-label', { hasText: 'Run50ms' }).click();
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 150ms"
+    - text: "My test test.spec.ts:42 200ms"
+  `);
+  await page.locator('.tabbed-pane-tab-label', { hasText: 'Retry #1150ms' }).click();
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 200ms"
   `);
 });

packages/html-reporter/src/testCaseView.tsx

@@ -65,7 +65,7 @@ export const TestCaseView: React.FC<{
         </CopyToClipboardContainer>
       </div>
       <div style={{ flex: 'auto' }}></div>
-      <div className='test-case-duration'>{msToString(test.results[selectedResultIndex]?.duration ?? test.duration)}</div>
+      <div className='test-case-duration'>{msToString(test.duration)}</div>
     </div>}
     {test && (!!test.projectName || labels) && <div className='test-case-project-labels-row'>
       {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
@@ -77,7 +77,10 @@ export const TestCaseView: React.FC<{
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({
         id: String(index),
-        title: <div style={{ display: 'flex', alignItems: 'center' }}>{statusIcon(result.status)} {retryLabel(index)}</div>,
+        title: <div style={{ display: 'flex', alignItems: 'center' }}>
+          {statusIcon(result.status)} {retryLabel(index)}
+          {(test.results.length > 1) && <span className='test-case-run-duration'>{msToString(result.duration)}</span>}
+        </div>,
         render: () => <TestResultView test={test!} result={result} />
       })) || []} selectedTab={String(selectedResultIndex)} setSelectedTab={id => setSelectedResultIndex(+id)} />}
   </div>;