chore(trace-viewer): code review

packages/trace-viewer/src/embedded.tsx

@@ -20,7 +20,6 @@ import '@web/third_party/vscode/codicon.css';
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
-import { setPopoutFunction } from './ui/popout';
 
 (async () => {
   applyTheme();
@@ -45,8 +44,6 @@ import { setPopoutFunction } from './ui/popout';
   window.addEventListener('keyup', handleKeyEvent);
 
   if (window.location.protocol !== 'file:') {
-    if (window.location.href.includes('isUnderTest=true'))
-      await new Promise(f => setTimeout(f, 1000));
     if (!navigator.serviceWorker)
       throw new Error(`Service workers are not supported.\nMake sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);
     navigator.serviceWorker.register('sw.bundle.js');
@@ -60,10 +57,5 @@ import { setPopoutFunction } from './ui/popout';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  setPopoutFunction((url: string, target?: string) => {
-    if (url)
-      window.parent?.postMessage({ command: 'openExternal', params: { url, target } }, '*');
-  });
-
   ReactDOM.render(<EmbeddedWorkbenchLoader />, document.querySelector('#root'));
 })();

packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx

@@ -21,6 +21,11 @@ import './embeddedWorkbenchLoader.css';
 import { Workbench } from './workbench';
 import { currentTheme, toggleTheme } from '@web/theme';
 
+function openPage(url: string, target?: string) {
+  if (url)
+    window.parent!.postMessage({ command: 'openExternal', params: { url, target } }, '*');
+}
+
 export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => {
   const [traceURLs, setTraceURLs] = React.useState<string[]>([]);
   const [model, setModel] = React.useState<MultiTraceModel>(emptyModel);
@@ -38,7 +43,7 @@ export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => {
       }
     });
     // notify vscode that it is now listening to its messages
-    window.parent?.postMessage({ type: 'loaded' }, '*');
+    window.parent!.postMessage({ type: 'loaded' }, '*');
   }, []);
 
   React.useEffect(() => {
@@ -81,7 +86,7 @@ export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => {
     <div className='progress'>
       <div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>
     </div>
-    <Workbench model={model} />
+    <Workbench model={model} openPage={openPage} />
     {!traceURLs.length && <div className='empty-state'>
       <div className='title'>Select test to see the trace</div>
     </div>}

packages/trace-viewer/src/ui/popout.ts

@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-type PopoutFunction = (url: string, target?: string) => Window | any;
-
-let popoutFn: PopoutFunction = window.open;
-export function setPopoutFunction(fn: PopoutFunction) {
-  popoutFn = fn;
-}
-
-export function popout(url: string, target?: string): Window | undefined {
-  const win = popoutFn(url, target);
-  return win instanceof Window ? win : undefined;
-}

packages/trace-viewer/src/ui/snapshotTab.tsx

@@ -29,7 +29,6 @@ import type { Language } from '@isomorphic/locatorGenerators';
 import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser';
 import { TabbedPaneTab } from '@web/components/tabbedPane';
 import { BrowserFrame } from './browserFrame';
-import { popout } from './popout';
 
 export const SnapshotTab: React.FunctionComponent<{
   action: ActionTraceEvent | undefined,
@@ -39,7 +38,8 @@ export const SnapshotTab: React.FunctionComponent<{
   setIsInspecting: (isInspecting: boolean) => void,
   highlightedLocator: string,
   setHighlightedLocator: (locator: string) => void,
-}> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
+  openPage?: (url: string, target?: string) => Window | any,
+}> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
   const [measure, ref] = useMeasure<HTMLDivElement>();
   const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action');
 
@@ -191,7 +191,9 @@ export const SnapshotTab: React.FunctionComponent<{
       })}
       <div style={{ flex: 'auto' }}></div>
       <ToolbarButton icon='link-external' title='Open snapshot in a new tab' disabled={!popoutUrl} onClick={() => {
-        const win = popout(popoutUrl || '', '_blank');
+        if (!openPage)
+          openPage = window.open;
+        const win = openPage(popoutUrl || '', '_blank');
         win?.addEventListener('DOMContentLoaded', () => {
           const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
           new ConsoleAPI(injectedScript);

packages/trace-viewer/src/ui/workbench.tsx

@@ -51,7 +51,8 @@ export const Workbench: React.FunctionComponent<{
   isLive?: boolean,
   status?: UITestStatus,
   inert?: boolean,
-}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert }) => {
+  openPage?: (url: string, target?: string) => Window | any,
+}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert, openPage }) => {
   const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined);
   const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
   const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
@@ -234,7 +235,8 @@ export const Workbench: React.FunctionComponent<{
           isInspecting={isInspecting}
           setIsInspecting={setIsInspecting}
           highlightedLocator={highlightedLocator}
-          setHighlightedLocator={locatorPicked} />
+          setHighlightedLocator={locatorPicked}
+          openPage={openPage} />
         <TabbedPane
           tabs={[
             {