diff --git a/packages/trace-viewer/embedded.html b/packages/trace-viewer/embedded.html deleted file mode 100644 index 7d0fd2f175..0000000000 --- a/packages/trace-viewer/embedded.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - Playwright Trace Viewer for VS Code - - -
- - - diff --git a/packages/trace-viewer/src/embedded.tsx b/packages/trace-viewer/src/embedded.tsx deleted file mode 100644 index 4f1503dcf2..0000000000 --- a/packages/trace-viewer/src/embedded.tsx +++ /dev/null @@ -1,60 +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. - */ - -import '@web/common.css'; -import { applyTheme } from '@web/theme'; -import '@web/third_party/vscode/codicon.css'; -import * as ReactDOM from 'react-dom/client'; -import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader'; - -(async () => { - applyTheme(); - - // workaround to send keystrokes back to vscode webview to keep triggering key bindings there - const handleKeyEvent = (e: KeyboardEvent) => { - if (!e.isTrusted) - return; - window.parent?.postMessage({ - type: e.type, - key: e.key, - keyCode: e.keyCode, - code: e.code, - shiftKey: e.shiftKey, - altKey: e.altKey, - ctrlKey: e.ctrlKey, - metaKey: e.metaKey, - repeat: e.repeat, - }, '*'); - }; - window.addEventListener('keydown', handleKeyEvent); - window.addEventListener('keyup', handleKeyEvent); - - if (window.location.protocol !== 'file:') { - 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'); - if (!navigator.serviceWorker.controller) { - await new Promise(f => { - navigator.serviceWorker.oncontrollerchange = () => f(); - }); - } - - // Keep SW running. - setInterval(function() { fetch('ping'); }, 10000); - } - - ReactDOM.createRoot(document.querySelector('#root')!).render(); -})(); diff --git a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.css b/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.css deleted file mode 100644 index 2274355322..0000000000 --- a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.css +++ /dev/null @@ -1,68 +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. -*/ - -.empty-state { - display: flex; - align-items: center; - justify-content: center; - flex: auto; - flex-direction: column; - background-color: var(--vscode-editor-background); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 100; - line-height: 24px; -} - -body .empty-state { - background: rgba(255, 255, 255, 0.8); -} - -body.dark-mode .empty-state { - background: rgba(0, 0, 0, 0.8); -} - -.empty-state .title { - font-size: 24px; - font-weight: bold; - margin-bottom: 30px; -} - -.progress { - flex: none; - width: 100%; - height: 3px; - z-index: 10; -} - -.inner-progress { - background-color: var(--vscode-progressBar-background); - height: 100%; -} - -.workbench-loader { - contain: size; -} - -/* Limit to a reasonable minimum viewport */ -html, body { - min-width: 550px; - min-height: 450px; - overflow: auto; -} diff --git a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx b/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx deleted file mode 100644 index c8b8aa216c..0000000000 --- a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx +++ /dev/null @@ -1,102 +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. -*/ - -import * as React from 'react'; -import type { ContextEntry } from '../types/entries'; -import { MultiTraceModel } from './modelUtil'; -import './embeddedWorkbenchLoader.css'; -import { Workbench } from './workbench'; -import { currentTheme, toggleTheme } from '@web/theme'; -import type { SourceLocation } from './modelUtil'; - -function openPage(url: string, target?: string) { - if (url) - window.parent!.postMessage({ method: 'openExternal', params: { url, target } }, '*'); -} - -function openSourceLocation({ file, line, column }: SourceLocation) { - window.parent!.postMessage({ method: 'openSourceLocation', params: { file, line, column } }, '*'); -} - -export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => { - const [traceURLs, setTraceURLs] = React.useState([]); - const [model, setModel] = React.useState(emptyModel); - const [progress, setProgress] = React.useState<{ done: number, total: number }>({ done: 0, total: 0 }); - const [processingErrorMessage, setProcessingErrorMessage] = React.useState(null); - - React.useEffect(() => { - window.addEventListener('message', async ({ data: { method, params } }) => { - if (method === 'loadTraceRequested') { - setTraceURLs(params.traceUrl ? [params.traceUrl] : []); - setProcessingErrorMessage(null); - } else if (method === 'applyTheme') { - if (currentTheme() !== params.theme) - toggleTheme(); - } - }); - // notify vscode that it is now listening to its messages - window.parent!.postMessage({ type: 'loaded' }, '*'); - }, []); - - React.useEffect(() => { - (async () => { - if (traceURLs.length) { - const swListener = (event: any) => { - if (event.data.method === 'progress') - setProgress(event.data.params); - }; - navigator.serviceWorker.addEventListener('message', swListener); - setProgress({ done: 0, total: 1 }); - const contextEntries: ContextEntry[] = []; - for (let i = 0; i < traceURLs.length; i++) { - const url = traceURLs[i]; - const params = new URLSearchParams(); - params.set('trace', url); - params.set('limit', String(traceURLs.length)); - const response = await fetch(`contexts?${params.toString()}`); - if (!response.ok) { - setProcessingErrorMessage((await response.json()).error); - return; - } - contextEntries.push(...(await response.json())); - } - navigator.serviceWorker.removeEventListener('message', swListener); - const model = new MultiTraceModel(contextEntries); - setProgress({ done: 0, total: 0 }); - setModel(model); - } else { - setModel(emptyModel); - } - })(); - }, [traceURLs]); - - React.useEffect(() => { - if (processingErrorMessage) - window.parent?.postMessage({ method: 'showErrorMessage', params: { message: processingErrorMessage } }, '*'); - }, [processingErrorMessage]); - - return
-
-
-
- - {!traceURLs.length &&
-
Select test to see the trace
-
} -
; -}; - -export const emptyModel = new MultiTraceModel([]); diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx index 2e8bf483ba..8383890a2e 100644 --- a/packages/trace-viewer/src/ui/snapshotTab.tsx +++ b/packages/trace-viewer/src/ui/snapshotTab.tsx @@ -40,8 +40,7 @@ export const SnapshotTabsView: React.FunctionComponent<{ setIsInspecting: (isInspecting: boolean) => void, highlightedLocator: string, setHighlightedLocator: (locator: string) => void, - openPage?: (url: string, target?: string) => Window | any, -}> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => { +}> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator }) => { const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action'); const snapshots = React.useMemo(() => { @@ -66,9 +65,7 @@ export const SnapshotTabsView: React.FunctionComponent<{ })}
{ - if (!openPage) - openPage = window.open; - const win = openPage(snapshotUrls?.popoutUrl || '', '_blank'); + const win = window.open(snapshotUrls?.popoutUrl || '', '_blank'); win?.addEventListener('DOMContentLoaded', () => { const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []); new ConsoleAPI(injectedScript); diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx index a2e2220e26..6d397bf411 100644 --- a/packages/trace-viewer/src/ui/workbench.tsx +++ b/packages/trace-viewer/src/ui/workbench.tsx @@ -53,10 +53,9 @@ export const Workbench: React.FunctionComponent<{ status?: UITestStatus, annotations?: { type: string; description?: string; }[]; inert?: boolean, - openPage?: (url: string, target?: string) => Window | any, onOpenExternally?: (location: modelUtil.SourceLocation) => void, revealSource?: boolean, -}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, openPage, onOpenExternally, revealSource }) => { +}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, onOpenExternally, revealSource }) => { const [selectedCallId, setSelectedCallId] = React.useState(undefined); const [revealedError, setRevealedError] = React.useState(undefined); const [revealedAttachment, setRevealedAttachment] = React.useState(undefined); @@ -344,8 +343,7 @@ export const Workbench: React.FunctionComponent<{ isInspecting={isInspecting} setIsInspecting={setIsInspecting} highlightedLocator={highlightedLocator} - setHighlightedLocator={locatorPicked} - openPage={openPage} />} + setHighlightedLocator={locatorPicked} />} sidebar={