feat(inspector): collapse completed items

microsoft · Feb 17, 2021 · b7c894f · b7c894f
1 parent cf71fbf
commit b7c894f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git 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/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
@@ -23,27 +23,37 @@ export interface CallLogProps {
 }
 
 export const CallLogView: React.FC<CallLogProps> = ({
-  log
+  log,
 }) => {
   const messagesEndRef = React.createRef<HTMLDivElement>();
+  const [expandOverrides, setExpandOverrides] = React.useState<Map<number, boolean>>(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 <div className='vbox'>
     <div className='call-log-header' style={{flex: 'none'}}>Log</div>
     <div className='call-log' style={{flex: 'auto'}}>
       {log.map(callLog => {
+        const expandOverride = expandOverrides.get(callLog.id);
+        const isExpanded = typeof expandOverride === 'boolean' ? expandOverride : callLog.status !== 'done';
         return <div className={`call-log-call ${callLog.status}`} key={callLog.id}>
           <div className='call-log-call-header'>
-            <span className={'codicon ' + iconClass(callLog)}></span>{ callLog.title }
+            <span className={`codicon codicon-chevron-${isExpanded ? 'down' : 'right'}`} style={{ cursor: 'pointer' }}onClick={() => {
+              const newOverrides = new Map(expandOverrides);
+              newOverrides.set(callLog.id, !isExpanded);
+              setExpandOverrides(newOverrides);
+            }}></span>
+            { callLog.title }
+            <span className={'codicon ' + iconClass(callLog)}></span>
           </div>
-          { callLog.messages.map((message, i) => {
+          { (isExpanded ? callLog.messages : []).map((message, i) => {
             return <div className='call-log-message' key={i}>
               { message.trim() }
             </div>;
           })}
-          { callLog.error ? <div className='call-log-message error'>
+          { callLog.error ? <div className='call-log-message error' hidden={!isExpanded}>
             { callLog.error }
           </div> : undefined }
         </div>

diff --git 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<number, CallLog>(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.tsx b/src/web/recorder/recorder.tsx
@@ -78,12 +78,12 @@ export const Recorder: React.FC<RecorderProps> = ({
       <ToolbarButton icon='debug-step-over' title='Step over' disabled={!paused} onClick={() => {
         window.dispatch({ event: 'step' }).catch(() => {});
       }}></ToolbarButton>
-      <select className='recorder-chooser' hidden={!sources.length} onChange={event => {
+      <select className='recorder-chooser' hidden={!sources.length} value={file} onChange={event => {
           setFile(event.target.selectedOptions[0].value);
         }}>{
           sources.map(s => {
             const title = s.file.replace(/.*[/\\]([^/\\]+)/, '$1');
-            return <option key={s.file} value={s.file} selected={s.file === file}>{title}</option>;
+            return <option key={s.file} value={s.file}>{title}</option>;
           })
         }
       </select>