feat(dashboard): add a debugger actions panel#41711
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
@microsoft-github-policy-service rerun |
Add a private Debugger._enable() API that starts streaming a
Debugger.on('apiCallsUpdated') event, reporting each api call's
title, location, incremental log entries, action point and status
(running/success/error). The server debugger always tracks ongoing
calls, so enabling late replays whatever is currently in flight.
Use it to add a toggle-able actions panel to the dashboard next to the
screencast: a live list of api calls, the current action's source, an
action-point marker on the screencast, and pause/resume/step controls.
- Move the panel below the screencast and split actions vs source. - Give the panel toggle a list icon and a "Paused" status label. - Group resume/pause/step next to "Actions"; color run controls green. - Scale the action-point marker's position and size with the screencast.
dgozman
force-pushed
the
dashboard-debugger-panel
branch
from
f684e5e to
459d0fe
Compare
Test results for "tests 1"2 flaky49603 passed, 1168 skipped Merge workflow run. |
Test results for "MCP"1 failed 7759 passed, 1249 skipped Merge workflow run. |
Skn0tt
left a comment
Skn0tt
left a comment
There was a problem hiding this comment.
Haven't looked into the code yet, but sharing a first impression of the UI after running npx playwright cli --session=debugger-demo run-code \ "async page => { await page.goto('https://playwright.dev'); await page.locator('body').click(); }:
- all the green checkmarks are visual noise. can we remove them, or maybe only show them briefly after the spinner goes away?
- all of them are expandable, but many of them don't show content after expanding
- clicking the "pause" button doesn't change anything visually, but it engages the debugger and makes the next action paused. This is not very obvious to me, I think the UI here could be improved by changing a background colour tint or something.
Do you want to polish the UI a little more? I can also take that over in a follow-up.
Skn0tt
left a comment
Skn0tt
left a comment
There was a problem hiding this comment.
Code looks good, left some more UI thoughts.
| React.useLayoutEffect(() => { | ||
| messagesEndRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' }); | ||
| }, [apiCalls]); |
There was a problem hiding this comment.
Let's only auto-scroll when we're already near the bottom, otherwise this will steal focus.
| })} | ||
| <div ref={messagesEndRef}></div> | ||
| </div>} | ||
| sidebar={<SourceView source={debuggerSource} />} |
There was a problem hiding this comment.
This sidebar is confusing for CLI sessions where there's no source. Maybe we can show it conditionally only when there's source, or make it collapsible.
2 participants
Summary
Debugger._enable()API that streams aDebugger.on('apiCallsUpdated')event — each api call reports title, location, incremental log entries, action point, and status (running/success/error). The server debugger always tracks ongoing calls, so enabling late replays whatever is currently in flight.