From 3248c2449cd8701ae15be95699ee5764fc14a808 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Wed, 17 Feb 2021 17:28:02 -0800 Subject: [PATCH] feat(inspector): collapse completed items (#5484) --- .../supplements/recorder/recorderTypes.ts | 1 + src/web/common.css | 4 --- src/web/components/toolbar.stories.tsx | 6 ++--- src/web/components/toolbarButton.css | 22 ++++----------- src/web/components/toolbarButton.tsx | 5 ++-- src/web/recorder/callLog.example.ts | 2 +- src/web/recorder/callLog.tsx | 22 ++++++++++----- src/web/recorder/main.tsx | 4 ++- src/web/recorder/recorder.css | 18 +++++++++++++ src/web/recorder/recorder.tsx | 11 ++++---- test/pause.spec.ts | 27 ------------------- 11 files changed, 55 insertions(+), 67 deletions(-) diff --git a/src/server/supplements/recorder/recorderTypes.ts b/src/server/supplements/recorder/recorderTypes.ts index 4c24af28df..48f91c5a10 100644 --- a/src/server/supplements/recorder/recorderTypes.ts +++ b/src/server/supplements/recorder/recorderTypes.ts @@ -35,6 +35,7 @@ export type CallLog = { messages: string[]; status: 'in-progress' | 'done' | 'error' | 'paused'; error?: string; + reveal?: boolean; }; export type SourceHighlight = { diff --git a/src/web/common.css b/src/web/common.css index 0144f67ac8..2f95cc4809 100644 --- a/src/web/common.css +++ b/src/web/common.css @@ -81,10 +81,6 @@ body { display: none !important; } -.codicon { - color: var(--toolbar-color); -} - svg { fill: currentColor; } diff --git a/src/web/components/toolbar.stories.tsx b/src/web/components/toolbar.stories.tsx index 20f58cb3ed..1e91d762d0 100644 --- a/src/web/components/toolbar.stories.tsx +++ b/src/web/components/toolbar.stories.tsx @@ -25,9 +25,9 @@ export default { } as Meta; const Template: Story = () => - {}}> - {}}> - {}}> + {}}>Record + {}}>Explore + {}}> ; export const Primary = Template.bind({}); diff --git a/src/web/components/toolbarButton.css b/src/web/components/toolbarButton.css index abe35a7ef1..39bf148a5b 100644 --- a/src/web/components/toolbarButton.css +++ b/src/web/components/toolbarButton.css @@ -22,6 +22,8 @@ padding: 0; margin-left: 10px; cursor: pointer; + display: flex; + align-items: center; } .toolbar-button:disabled { @@ -29,24 +31,10 @@ cursor: default; } -.toolbar-button:not(.disabled):hover { +.toolbar-button:not(.disabled):not(.toggled):hover { color: #555; } -.toolbar-button.toggled { - color: #1ea7fd; -} - -.toolbar-button.codicon-record.toggled { - color: #fd1e1e; -} - -.toolbar-button.codicon-debug-continue, -.toolbar-button.codicon-debug-step-over { - color: #01bb01; -} - -.toolbar-button.codicon-debug-continue:hover, -.toolbar-button.codicon-debug-step-over:hover { - color: #41ca1e; +.toolbar-button .codicon { + margin-right: 4px; } diff --git a/src/web/components/toolbarButton.tsx b/src/web/components/toolbarButton.tsx index b427e2875b..3f9a5e6861 100644 --- a/src/web/components/toolbarButton.tsx +++ b/src/web/components/toolbarButton.tsx @@ -27,14 +27,15 @@ export interface ToolbarButtonProps { } export const ToolbarButton: React.FC = ({ + children, title = '', icon = '', disabled = false, toggled = false, onClick = () => {}, }) => { - let className = `toolbar-button codicon codicon-${icon}`; + let className = `toolbar-button ${icon}`; if (toggled) className += ' toggled'; - return ; + return ; }; diff --git a/src/web/recorder/callLog.example.ts b/src/web/recorder/callLog.example.ts index 3f241d5f0f..6584595683 100644 --- a/src/web/recorder/callLog.example.ts +++ b/src/web/recorder/callLog.example.ts @@ -50,7 +50,7 @@ export function exampleCallLog(): CallLog[] { 'status': 'paused' }, { - 'id': 5, + 'id': 6, 'messages': [ 'navigating to "https://github.com/microsoft", waiting until "load"', ], diff --git a/src/web/recorder/callLog.tsx b/src/web/recorder/callLog.tsx index b454e704c2..031be1f300 100644 --- a/src/web/recorder/callLog.tsx +++ b/src/web/recorder/callLog.tsx @@ -23,27 +23,37 @@ export interface CallLogProps { } export const CallLogView: React.FC = ({ - log + log, }) => { const messagesEndRef = React.createRef(); + const [expandOverrides, setExpandOverrides] = React.useState>(new Map()); React.useLayoutEffect(() => { - messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); + if (log.find(callLog => callLog.reveal)) + messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); }, [messagesEndRef]); - + return
Log
{log.map(callLog => { + const expandOverride = expandOverrides.get(callLog.id); + const isExpanded = typeof expandOverride === 'boolean' ? expandOverride : callLog.status !== 'done'; return
- { callLog.title } + { + const newOverrides = new Map(expandOverrides); + newOverrides.set(callLog.id, !isExpanded); + setExpandOverrides(newOverrides); + }}> + { callLog.title } +
- { callLog.messages.map((message, i) => { + { (isExpanded ? callLog.messages : []).map((message, i) => { return
{ message.trim() }
; })} - { callLog.error ?
+ { callLog.error ? : undefined }
diff --git a/src/web/recorder/main.tsx b/src/web/recorder/main.tsx index de063c37b8..b0b631a8ce 100644 --- a/src/web/recorder/main.tsx +++ b/src/web/recorder/main.tsx @@ -42,8 +42,10 @@ export const Main: React.FC = ({ window.playwrightSetPaused = setPaused; window.playwrightUpdateLogs = callLogs => { const newLog = new Map(log); - for (const callLog of callLogs) + for (const callLog of callLogs) { + callLog.reveal = !log.has(callLog.id); newLog.set(callLog.id, callLog); + } setLog(newLog); }; diff --git a/src/web/recorder/recorder.css b/src/web/recorder/recorder.css index 1bf20b2ef1..bb26da5c38 100644 --- a/src/web/recorder/recorder.css +++ b/src/web/recorder/recorder.css @@ -37,3 +37,21 @@ color: var(--toolbar-color); margin-left: 16px; } + +.recorder .toolbar-button.toggled.question { + color: #12a3ff; +} + +.recorder .toolbar-button.toggled.record { + color: #fd1e1e; +} + +.recorder .toolbar-button:not([disabled]) .codicon-debug-continue, +.recorder .toolbar-button:not([disabled]) .codicon-debug-step-over { + color: #01bb01; +} + +.recorder .toolbar-button:not([disabled]):hover .codicon-debug-continue, +.recorder .toolbar-button:not([disabled]):hover .codicon-debug-step-over { + color: #41ca1e; +} diff --git a/src/web/recorder/recorder.tsx b/src/web/recorder/recorder.tsx index e1482fea90..21611a7bdd 100644 --- a/src/web/recorder/recorder.tsx +++ b/src/web/recorder/recorder.tsx @@ -57,15 +57,14 @@ export const Recorder: React.FC = ({ React.useLayoutEffect(() => { messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); }, [messagesEndRef]); - return
{ window.dispatch({ event: 'setMode', params: { mode: mode === 'recording' ? 'none' : 'recording' }}).catch(() => { }); - }}> - { + }}>Record + { window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' }}).catch(() => { }); - }}> + }}>Explore { copy(source.text); }}> @@ -78,12 +77,12 @@ export const Recorder: React.FC = ({ { window.dispatch({ event: 'step' }).catch(() => {}); }}> - { setFile(event.target.selectedOptions[0].value); }}>{ sources.map(s => { const title = s.file.replace(/.*[/\\]([^/\\]+)/, '$1'); - return ; + return ; }) } diff --git a/test/pause.spec.ts b/test/pause.spec.ts index 7683cc5264..44aca2bf17 100644 --- a/test/pause.spec.ts +++ b/test/pause.spec.ts @@ -148,19 +148,6 @@ describe('pause', (suite, { mode }) => { expect(await sanitizeLog(recorderPage)).toEqual([ 'pause', 'click', - 'waiting for selector "button"', - 'selector resolved to visible ', - 'attempting click action', - 'waiting for element to be visible, enabled and stable', - 'element is visible, enabled and stable', - 'scrolling into view if needed', - 'done scrolling', - 'checking that element receives pointer events at ()', - 'element does receive pointer events', - 'performing click action', - 'click action done', - 'waiting for scheduled navigations to finish', - 'navigations have finished', 'pause', ]); await recorderPage.click('[title="Resume"]'); @@ -183,21 +170,7 @@ describe('pause', (suite, { mode }) => { expect(await sanitizeLog(recorderPage)).toEqual([ 'pause', 'waitForEvent()', - 'waiting for event \"console\"', 'click', - 'waiting for selector "button"', - 'selector resolved to visible ', - 'attempting click action', - 'waiting for element to be visible, enabled and stable', - 'element is visible, enabled and stable', - 'scrolling into view if needed', - 'done scrolling', - 'checking that element receives pointer events at ()', - 'element does receive pointer events', - 'performing click action', - 'click action done', - 'waiting for scheduled navigations to finish', - 'navigations have finished', 'pause', ]); await recorderPage.click('[title="Resume"]');