feat(inspector): allow selecting file (#5483)

Author: pavelfeldman

src/server/supplements/recorder/recorderActions.ts

@@ -94,7 +94,7 @@ export type Action = ClickAction | CheckAction | ClosesPageAction | OpenPageActi
 
 export type BaseSignal = {
   isAsync?: boolean,
-}
+};
 
 export type NavigationSignal = BaseSignal & {
   name: 'navigation',

src/server/supplements/recorder/recorderApp.ts

@@ -31,6 +31,7 @@ const readFileAsync = util.promisify(fs.readFile);
 
 declare global {
   interface Window {
+    playwrightSetFile: (file: string) => void;
     playwrightSetMode: (mode: Mode) => void;
     playwrightSetPaused: (paused: boolean) => void;
     playwrightSetSources: (sources: Source[]) => void;
@@ -123,6 +124,12 @@ export class RecorderApp extends EventEmitter {
     }).toString(), true, mode, 'main').catch(() => {});
   }
 
+  async setFile(file: string): Promise<void> {
+    await this._page.mainFrame()._evaluateExpression(((file: string) => {
+      window.playwrightSetFile(file);
+    }).toString(), true, file, 'main').catch(() => {});
+  }
+
   async setPaused(paused: boolean): Promise<void> {
     await this._page.mainFrame()._evaluateExpression(((paused: boolean) => {
       window.playwrightSetPaused(paused);

src/server/supplements/recorderSupplement.ts

@@ -49,7 +49,7 @@ export class RecorderSupplement {
   private _params: channels.BrowserContextRecorderSupplementEnableParams;
   private _currentCallsMetadata = new Map<CallMetadata, SdkObject>();
   private _pausedCallsMetadata = new Map<CallMetadata, () => void>();
-  private _pauseOnNextStatement = true;
+  private _pauseOnNextStatement = false;
   private _recorderSources: Source[];
   private _userSources = new Map<string, Source>();
 
@@ -104,6 +104,7 @@ export class RecorderSupplement {
           text = source.text;
       }
       this._pushAllSources();
+      this._recorderApp?.setFile(primaryLanguage.fileName);
     });
     if (params.outputFile) {
       context.on(BrowserContext.Events.BeforeClose, () => {
@@ -216,12 +217,12 @@ export class RecorderSupplement {
 
   private async _resume(step: boolean) {
     this._pauseOnNextStatement = step;
+    this._recorderApp?.setPaused(false);
 
     for (const callback of this._pausedCallsMetadata.values())
       callback();
     this._pausedCallsMetadata.clear();
 
-    this._recorderApp?.setPaused(false);
     this._updateUserSources();
     this.updateCallLog([...this._currentCallsMetadata.keys()]);
   }
@@ -369,6 +370,7 @@ export class RecorderSupplement {
     }
 
     // Apply new decorations.
+    let fileToSelect = undefined;
     for (const metadata of this._currentCallsMetadata.keys()) {
       if (!metadata.stack || !metadata.stack[0])
         continue;
@@ -381,11 +383,13 @@ export class RecorderSupplement {
       if (line) {
         const paused = this._pausedCallsMetadata.has(metadata);
         source.highlight.push({ line, type: metadata.error ? 'error' : (paused ? 'paused' : 'running') });
-        if (paused)
-          source.revealLine = line;
+        source.revealLine = line;
+        fileToSelect = source.file;
       }
     }
     this._pushAllSources();
+    if (fileToSelect)
+      this._recorderApp?.setFile(fileToSelect);
   }
 
   private _pushAllSources() {

src/web/components/source.css

@@ -51,12 +51,12 @@
 
 .source-line-paused {
   background-color: #b3dbff7f;
-  outline: 1px solid #009aff;
+  outline: 1px solid #008aff;
   z-index: 2;
 }
 
 .source-line-error {
   background-color: #fff0f0;
-  outline: 1px solid #ffd6d6;
+  outline: 1px solid #ff5656;
   z-index: 2;
 }

src/web/components/exampleText.ts renamed to src/web/components/source.example.ts

@@ -17,7 +17,7 @@
 import { Story, Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 import { Source, SourceProps } from './source';
-import { exampleText } from './exampleText';
+import { exampleText } from './source.example';
 
 export default {
   title: 'Components/Source',
@@ -37,9 +37,29 @@ Primary.args = {
   text: exampleText()
 };
 
-export const HighlightLine = Template.bind({});
-HighlightLine.args = {
+export const RunningOnLine = Template.bind({});
+RunningOnLine.args = {
   language: 'javascript',
   text: exampleText(),
-  highlightedLine: 11
+  highlight: [
+    { line: 15, type: 'running' },
+  ]
+};
+
+export const PausedOnLine = Template.bind({});
+PausedOnLine.args = {
+  language: 'javascript',
+  text: exampleText(),
+  highlight: [
+    { line: 15, type: 'paused' },
+  ]
+};
+
+export const ErrorOnLine = Template.bind({});
+ErrorOnLine.args = {
+  language: 'javascript',
+  text: exampleText(),
+  highlight: [
+    { line: 15, type: 'error' },
+  ]
 };

src/web/components/source.stories.tsx

@@ -0,0 +1,78 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.call-log {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  line-height: 20px;
+  white-space: pre;
+  background: white;
+  overflow: auto;
+}
+
+.call-log-message {
+  flex: none;
+  padding: 3px 0 3px 36px;
+  display: flex;
+  align-items: center;
+}
+
+.call-log-header {
+  color: var(--toolbar-color);
+  box-shadow: var(--box-shadow);
+  background-color: var(--toolbar-bg-color);
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0 9px;
+  z-index: 10;
+}
+
+.call-log-call {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  border-top: 1px solid #eee;
+}
+
+.call-log-call-header {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+  z-index: 2;
+}
+
+.call-log-call .codicon {
+  padding: 0 4px;
+}
+
+.call-log .codicon-check {
+  color: #21a945;
+  font-weight: bold;
+}
+
+.call-log-call.error {
+  background-color: #fff0f0;
+  border-top: 1px solid #ffd6d6;
+}
+
+.call-log-call.error .call-log-call-header,
+.call-log-message.error,
+.call-log .codicon-error {
+  color: red;
+}

src/web/recorder/callLog.css

@@ -0,0 +1,62 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the 'License');
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an 'AS IS' BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { CallLog } from '../../server/supplements/recorder/recorderTypes';
+
+export function exampleCallLog(): CallLog[] {
+  return [
+    {
+      'id': 3,
+      'messages': [],
+      'title': 'newPage',
+      'status': 'done'
+    },
+    {
+      'id': 4,
+      'messages': [
+        'navigating to "https://github.com/microsoft", waiting until "load"',
+      ],
+      'title': 'goto',
+      'status': 'done'
+    },
+    {
+      'id': 5,
+      'messages': [
+        'waiting for selector "input[aria-label="Find a repository…"]"',
+        '  selector resolved to visible <input name="q" value=" type="search" autocomplete="of…/>',
+        '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 (351.6,291)',
+        '  element does receive pointer events',
+        '  performing click action'
+      ],
+      'title': 'click',
+      'status': 'paused'
+    },
+    {
+      'id': 5,
+      'messages': [
+        'navigating to "https://github.com/microsoft", waiting until "load"',
+      ],
+      'error': 'Error occured',
+      'title': 'error',
+      'status': 'error'
+    },
+  ];
+}

src/web/recorder/callLog.example.ts

@@ -0,0 +1,37 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { Story, Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { CallLogProps, CallLogView } from './callLog';
+import { exampleCallLog } from './callLog.example';
+
+export default {
+  title: 'Recorder/CallLog',
+  component: CallLogView,
+  parameters: {
+    viewport: {
+      defaultViewport: 'recorder'
+    }
+  }
+} as Meta;
+
+const Template: Story<CallLogProps> = args => <CallLogView {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  log: exampleCallLog()
+};

src/web/recorder/callLog.stories.tsx

@@ -0,0 +1,63 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import './callLog.css';
+import * as React from 'react';
+import type { CallLog } from '../../server/supplements/recorder/recorderTypes';
+
+export interface CallLogProps {
+  log: CallLog[]
+}
+
+export const CallLogView: React.FC<CallLogProps> = ({
+  log
+}) => {
+  const messagesEndRef = React.createRef<HTMLDivElement>();
+  React.useLayoutEffect(() => {
+    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 => {
+        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 }
+          </div>
+          { 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> : undefined }
+        </div>
+      })}
+      <div ref={messagesEndRef}></div>
+    </div>
+  </div>;
+};
+
+function iconClass(callLog: CallLog): string {
+  switch (callLog.status) {
+    case 'done': return 'codicon-check';
+    case 'in-progress': return 'codicon-clock';
+    case 'paused': return 'codicon-debug-pause';
+    case 'error': return 'codicon-error';
+  }
+}