feat(ui-mode): enhance status-line to show passed, failed, and skipped test counts #35859

pengooseDev · 2025-05-06T11:45:46Z

Closes #34444 (assignee @agg23)

Show passed, failed, and skipped test counts on status line
Update regression tests

Implemented prior discussion and feedback

Looking forward to the team’s feedback. Thank you :)

Running	Stopped

agg23

Thank you for the PR. Some general comments:

If you press the run button on a group of tests, the loading spinner will immediately appear on the left, but the current completed test count will still show the old value for a moment.
The baseline on the stats is incorrect relative to the icons. This is probably an existing issue, but it becomes more obvious with this change.

* The start alignment of the stats text is misaligned with the rest of the header

* I would add `text-overflow: ellipsis` to the entire stats line to indicate there is additional content offscreen

I think this is good improvement and appreciate you looking into this.

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

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

agg23 · 2025-05-12T17:42:31Z

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

@@ -461,11 +462,18 @@ export const UIModeView: React.FC<{}> = ({
          runTests={() => runTests('bounce-if-busy', visibleTestIds)} />
        <Toolbar noMinHeight={true}>
          {!isRunningTest && !progress && <div className='section-title'>Tests</div>}
-          {!isRunningTest && progress && <div data-testid='status-line' className='status-line'>
-            <div>{progress.passed}/{progress.total} passed ({(progress.passed / progress.total) * 100 | 0}%)</div>
+          {!isRunningTest && progress && <div data-testid='status-line' className='status-line' title={`${progress.passed} passed, ${progress.failed} failed, ${progress.skipped} skipped`}>


I would probably set cursor: pointer on this whole block, as selecting individual numbers in between the icons is never going to be good experience.

Changed

.status-line { cursor: pointer; } .status-line > span:not(:first-child) { user-select: none; }

.status-line provides a title for the overall test status on hover.
To prevent text selection, user-select: none; has been added to the individual test status elements.
Please let me know if this should be removed.

Image

hover title

I'm sorry, I have no idea why I said cursor: pointer. I meant cursor: default.

agg23 · 2025-05-12T17:44:04Z

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

-          {!isRunningTest && progress && <div data-testid='status-line' className='status-line'>
-            <div>{progress.passed}/{progress.total} passed ({(progress.passed / progress.total) * 100 | 0}%)</div>
+          {!isRunningTest && progress && <div data-testid='status-line' className='status-line' title={`${progress.passed} passed, ${progress.failed} failed, ${progress.skipped} skipped`}>
+            <span data-testid='test-count'>{progress.passed + progress.failed + progress.skipped}/{progress.total}</span>


We don't want this section to bounce in-between running and steady states. Classically we would display a green checkmark here, but I don't think that fits very well.

In absence of a better icon I propose codicon-circle-outline.

<i className={clsx('codicon', isRunning ? testStatusIcon('running') : testStatusIcon('none'))} />

The changes have been applied. Thanks for the helpful review :)

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

agg23 · 2025-05-12T18:07:32Z

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

@@ -461,11 +462,18 @@ export const UIModeView: React.FC<{}> = ({
          runTests={() => runTests('bounce-if-busy', visibleTestIds)} />
        <Toolbar noMinHeight={true}>
          {!isRunningTest && !progress && <div className='section-title'>Tests</div>}


This only gets displayed before you run any tests or on reload. Get rid of it and show an empty set of stats, with 0/n on the left (where n is your total active test count).

Applied, thank you :)

Image

Default display

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

pengooseDev · 2025-05-14T08:08:13Z

1.

If you press the run button on a group of tests, the loading spinner will immediately appear on the left, but the current completed test count will still show the old value for a moment.

It seems that the current TestTree calculation logic is blocking the render phase and delaying the StatusLine update.
I’ve tried separating the TestTree calculation from rendering and experimented with a few approaches, but the UX still falls short. I’d suggest splitting this into a separate issue to decouple UI rendering from the logic rather than including it in this PR. I would appreciate your thoughts. :)

2.

The baseline on the stats is incorrect relative to the icons. This is probably an existing issue, but it becomes more obvious with this change.

If you still see any issues, I’d appreciate your feedback.

Preview

3.

The start alignment of the stats text is misaligned with the rest of the header

I checked the input and related CSS in FiltersView and confirmed that the alignment uses margin-left: 5px;. it has been adjusted accordingly.

Preview

4.

I would add text-overflow: ellipsis to the entire stats line to indicate there is additional content offscreen

Ellipsis is applied at the chunk level for each icon and text.

Preview

agg23

Thank you for the thorough responses and images. Alignment looks good except for the ellipsis issue.

I agree that the blocked render fix should go in a future PR. Please open an issue to that effect once this merges.

agg23 · 2025-05-14T19:06:59Z

packages/trace-viewer/src/ui/statusLine.css

+ */
+
+.status-line {
+  display: block;


This should be display: flex with align-items: center. You'll have to fix some other things, but as it is the ellipsis is misaligned from the text baseline as it's not currently vertically centered.

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

pengooseDev · 2025-05-16T01:02:32Z

@agg23

I’d like to discuss the alignment of the ellipsis.

1.

display: flex;

I wasn’t able to apply display: flex; at the top level because, to my understanding, one of the requirements for text-overflow: ellipsis is that the element be a block container (e.g. display: block;).

2.

Icon & Text	Only text

The ellipsis(...) is rendered too low because the icon’s height (16px) exceeds the font size (12px). Since the icon is center-aligned within an inline-flex container, the ellipsis ends up 2px below the text baseline.

3.

vertical-align: text-bottom;

I tried several fixes, and the most effective was using vertical-align: text-bottom & line-height: 1; on each component. However, this caused the right-hand toolbar buttons (Run all, Stop, Watch all) to shift by 0.5px in height, breaking CSS consistency. (e.g. padding-top: 0.5px;).

If you have any suggestions for resolving this, I’d appreciate your feedback. :)

github-actions · 2025-05-16T01:37:01Z

Test results for "tests 1"

6 flaky

⚠️ [firefox-library] › library/inspector/cli-codegen-1.spec.ts:986:7 › cli codegen › should not throw csp directive violation errors @firefox-ubuntu-22.04-node18
⚠️ [firefox-page] › page/page-wait-for-function.spec.ts:104:3 › should work with strict CSP policy @firefox-ubuntu-22.04-node18
⚠️ [webkit-library] › library/ignorehttpserrors.spec.ts:30:3 › should isolate contexts @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › library/video.spec.ts:475:5 › screencast › should scale frames down to the requested size @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › page/page-screenshot.spec.ts:345:5 › page screenshot › should work while navigating @webkit-ubuntu-22.04-node18
⚠️ [playwright-test] › ui-mode-test-watch.spec.ts:148:5 › should watch all @windows-latest-node18-1

39212 passed, 803 skipped
✔️✔️✔️

Merge workflow run.

pengooseDev changed the title ~~Feat skipped test report~~ feat(ui-mode): enhance status-line to show passed, failed, and skipped test counts May 6, 2025