From b2ccfc3d01f8c1e228ec7af683115696fbf806fa Mon Sep 17 00:00:00 2001
From: Rui Figueira <rui.figueira@gmail.com>
Date: Thu, 15 Aug 2024 22:13:11 +0100
Subject: [PATCH] chore(trace-viewer): support opening a source location in
 embedded trace viewer (#32175)

Related: https://github.com/microsoft/playwright-vscode/pull/513
---
 packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx b/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx
index 587f930a70..1f1b5327da 100644
--- a/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx
+++ b/packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx
@@ -20,10 +20,15 @@ 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({ command: 'openExternal', params: { url, target } }, '*');
+    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 = () => {
@@ -86,7 +91,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} openPage={openPage} showSettings />
+    <Workbench model={model} openPage={openPage} onOpenExternally={openSourceLocation} showSettings />
     {!traceURLs.length && <div className='empty-state'>
       <div className='title'>Select test to see the trace</div>
     </div>}