Skip to content

Commit 3248c24

Browse files
pavelfeldmanpavelfeldman
authored
feat(inspector): collapse completed items (#5484)
1 parent dc51536 commit 3248c24

File tree

11 files changed

+55
-67
lines changed

11 files changed

+55
-67
lines changed

‎src/server/supplements/recorder/recorderTypes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export type CallLog = {
3535
messages: string[];
3636
status: 'in-progress' | 'done' | 'error' | 'paused';
3737
error?: string;
38+
reveal?: boolean;
3839
};
3940

4041
export type SourceHighlight = {

‎src/web/common.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,6 @@ body {
8181
display: none !important;
8282
}
8383

84-
.codicon {
85-
color: var(--toolbar-color);
86-
}
87-
8884
svg {
8985
fill: currentColor;
9086
}

‎src/web/components/toolbar.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export default {
2525
} as Meta;
2626

2727
const Template: Story<ToolbarProps> = () => <Toolbar>
28-
<ToolbarButton icon="clone" title="Copy" onClick={() => {}}></ToolbarButton>
29-
<ToolbarButton icon="trashcan" title="Erase" onClick={() => {}}></ToolbarButton>
30-
<ToolbarButton icon="close" title="Close" onClick={() => {}}></ToolbarButton>
28+
<ToolbarButton icon='record' title='Record' onClick={() => {}}>Record</ToolbarButton>
29+
<ToolbarButton icon='question' title='Inspect' onClick={() => {}}>Explore</ToolbarButton>
30+
<ToolbarButton icon='files' title='Copy' onClick={() => {}}></ToolbarButton>
3131
</Toolbar>;
3232

3333
export const Primary = Template.bind({});

‎src/web/components/toolbarButton.css

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,19 @@
2222
padding: 0;
2323
margin-left: 10px;
2424
cursor: pointer;
25+
display: flex;
26+
align-items: center;
2527
}
2628

2729
.toolbar-button:disabled {
2830
color: #bbb !important;
2931
cursor: default;
3032
}
3133

32-
.toolbar-button:not(.disabled):hover {
34+
.toolbar-button:not(.disabled):not(.toggled):hover {
3335
color: #555;
3436
}
3537

36-
.toolbar-button.toggled {
37-
color: #1ea7fd;
38-
}
39-
40-
.toolbar-button.codicon-record.toggled {
41-
color: #fd1e1e;
42-
}
43-
44-
.toolbar-button.codicon-debug-continue,
45-
.toolbar-button.codicon-debug-step-over {
46-
color: #01bb01;
47-
}
48-
49-
.toolbar-button.codicon-debug-continue:hover,
50-
.toolbar-button.codicon-debug-step-over:hover {
51-
color: #41ca1e;
38+
.toolbar-button .codicon {
39+
margin-right: 4px;
5240
}

‎src/web/components/toolbarButton.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,15 @@ export interface ToolbarButtonProps {
2727
}
2828

2929
export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
30+
children,
3031
title = '',
3132
icon = '',
3233
disabled = false,
3334
toggled = false,
3435
onClick = () => {},
3536
}) => {
36-
let className = `toolbar-button codicon codicon-${icon}`;
37+
let className = `toolbar-button ${icon}`;
3738
if (toggled)
3839
className += ' toggled';
39-
return <button className={className} onClick={onClick} title={title} disabled={!!disabled}></button>;
40+
return <button className={className} onClick={onClick} title={title} disabled={!!disabled}><span className={`codicon codicon-${icon}`}></span>{ children }</button>;
4041
};

‎src/web/recorder/callLog.example.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function exampleCallLog(): CallLog[] {
5050
'status': 'paused'
5151
},
5252
{
53-
'id': 5,
53+
'id': 6,
5454
'messages': [
5555
'navigating to "https://github.com/microsoft", waiting until "load"',
5656
],

‎src/web/recorder/callLog.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,37 @@ export interface CallLogProps {
2323
}
2424

2525
export const CallLogView: React.FC<CallLogProps> = ({
26-
log
26+
log,
2727
}) => {
2828
const messagesEndRef = React.createRef<HTMLDivElement>();
29+
const [expandOverrides, setExpandOverrides] = React.useState<Map<number, boolean>>(new Map());
2930
React.useLayoutEffect(() => {
30-
messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
31+
if (log.find(callLog => callLog.reveal))
32+
messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
3133
}, [messagesEndRef]);
32-
34+
3335
return <div className='vbox'>
3436
<div className='call-log-header' style={{flex: 'none'}}>Log</div>
3537
<div className='call-log' style={{flex: 'auto'}}>
3638
{log.map(callLog => {
39+
const expandOverride = expandOverrides.get(callLog.id);
40+
const isExpanded = typeof expandOverride === 'boolean' ? expandOverride : callLog.status !== 'done';
3741
return <div className={`call-log-call ${callLog.status}`} key={callLog.id}>
3842
<div className='call-log-call-header'>
39-
<span className={'codicon ' + iconClass(callLog)}></span>{ callLog.title }
43+
<span className={`codicon codicon-chevron-${isExpanded ? 'down' : 'right'}`} style={{ cursor: 'pointer' }}onClick={() => {
44+
const newOverrides = new Map(expandOverrides);
45+
newOverrides.set(callLog.id, !isExpanded);
46+
setExpandOverrides(newOverrides);
47+
}}></span>
48+
{ callLog.title }
49+
<span className={'codicon ' + iconClass(callLog)}></span>
4050
</div>
41-
{ callLog.messages.map((message, i) => {
51+
{ (isExpanded ? callLog.messages : []).map((message, i) => {
4252
return <div className='call-log-message' key={i}>
4353
{ message.trim() }
4454
</div>;
4555
})}
46-
{ callLog.error ? <div className='call-log-message error'>
56+
{ callLog.error ? <div className='call-log-message error' hidden={!isExpanded}>
4757
{ callLog.error }
4858
</div> : undefined }
4959
</div>

‎src/web/recorder/main.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,10 @@ export const Main: React.FC = ({
4242
window.playwrightSetPaused = setPaused;
4343
window.playwrightUpdateLogs = callLogs => {
4444
const newLog = new Map<number, CallLog>(log);
45-
for (const callLog of callLogs)
45+
for (const callLog of callLogs) {
46+
callLog.reveal = !log.has(callLog.id);
4647
newLog.set(callLog.id, callLog);
48+
}
4749
setLog(newLog);
4850
};
4951

‎src/web/recorder/recorder.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,21 @@
3737
color: var(--toolbar-color);
3838
margin-left: 16px;
3939
}
40+
41+
.recorder .toolbar-button.toggled.question {
42+
color: #12a3ff;
43+
}
44+
45+
.recorder .toolbar-button.toggled.record {
46+
color: #fd1e1e;
47+
}
48+
49+
.recorder .toolbar-button:not([disabled]) .codicon-debug-continue,
50+
.recorder .toolbar-button:not([disabled]) .codicon-debug-step-over {
51+
color: #01bb01;
52+
}
53+
54+
.recorder .toolbar-button:not([disabled]):hover .codicon-debug-continue,
55+
.recorder .toolbar-button:not([disabled]):hover .codicon-debug-step-over {
56+
color: #41ca1e;
57+
}

‎src/web/recorder/recorder.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,14 @@ export const Recorder: React.FC<RecorderProps> = ({
5757
React.useLayoutEffect(() => {
5858
messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
5959
}, [messagesEndRef]);
60-
6160
return <div className='recorder'>
6261
<Toolbar>
6362
<ToolbarButton icon='record' title='Record' toggled={mode == 'recording'} onClick={() => {
6463
window.dispatch({ event: 'setMode', params: { mode: mode === 'recording' ? 'none' : 'recording' }}).catch(() => { });
65-
}}></ToolbarButton>
66-
<ToolbarButton icon='question' title='Inspect' toggled={mode == 'inspecting'} onClick={() => {
64+
}}>Record</ToolbarButton>
65+
<ToolbarButton icon='question' title='Explore' toggled={mode == 'inspecting'} onClick={() => {
6766
window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' }}).catch(() => { });
68-
}}></ToolbarButton>
67+
}}>Explore</ToolbarButton>
6968
<ToolbarButton icon='files' title='Copy' disabled={!source || !source.text} onClick={() => {
7069
copy(source.text);
7170
}}></ToolbarButton>
@@ -78,12 +77,12 @@ export const Recorder: React.FC<RecorderProps> = ({
7877
<ToolbarButton icon='debug-step-over' title='Step over' disabled={!paused} onClick={() => {
7978
window.dispatch({ event: 'step' }).catch(() => {});
8079
}}></ToolbarButton>
81-
<select className='recorder-chooser' hidden={!sources.length} onChange={event => {
80+
<select className='recorder-chooser' hidden={!sources.length} value={file} onChange={event => {
8281
setFile(event.target.selectedOptions[0].value);
8382
}}>{
8483
sources.map(s => {
8584
const title = s.file.replace(/.*[/\\]([^/\\]+)/, '$1');
86-
return <option key={s.file} value={s.file} selected={s.file === file}>{title}</option>;
85+
return <option key={s.file} value={s.file}>{title}</option>;
8786
})
8887
}
8988
</select>

0 commit comments

Comments
 (0)