From 4d02aa1e52f9f171c52c87869599f500b586e19b Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Fri, 16 Jun 2023 17:56:11 +0200
Subject: [PATCH] chore: render locator in trace viewer timeline label (#23754)

---
 packages/trace-viewer/src/ui/timeline.tsx  | 10 +++++++---
 packages/trace-viewer/src/ui/workbench.tsx |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/trace-viewer/src/ui/timeline.tsx b/packages/trace-viewer/src/ui/timeline.tsx
index 4886aac38b..4c3fb42364 100644
--- a/packages/trace-viewer/src/ui/timeline.tsx
+++ b/packages/trace-viewer/src/ui/timeline.tsx
@@ -22,6 +22,8 @@ import type { Boundaries } from '../geometry';
 import { FilmStrip } from './filmStrip';
 import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
 import './timeline.css';
+import { asLocator } from '@isomorphic/locatorGenerators';
+import type { Language } from '@isomorphic/locatorGenerators';
 
 type TimelineBar = {
   action?: ActionTraceEventInContext;
@@ -41,7 +43,8 @@ export const Timeline: React.FunctionComponent<{
   selectedAction: ActionTraceEventInContext | undefined,
   onSelected: (action: ActionTraceEventInContext) => void,
   hideTimelineBars?: boolean,
-}> = ({ model, selectedAction, onSelected, hideTimelineBars }) => {
+  sdkLanguage: Language,
+}> = ({ model, selectedAction, onSelected, hideTimelineBars, sdkLanguage }) => {
   const [measure, ref] = useMeasure<HTMLDivElement>();
   const barsRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -62,7 +65,8 @@ export const Timeline: React.FunctionComponent<{
   const bars = React.useMemo(() => {
     const bars: TimelineBar[] = [];
     for (const entry of model?.actions || []) {
-      let detail = trimRight(entry.params.selector || '', 50);
+      const locator = asLocator(sdkLanguage || 'javascript', entry.params.selector, false /* isFrameLocator */, true /* playSafe */);
+      let detail = trimRight(locator || '', 50);
       if (entry.method === 'goto')
         detail = trimRight(entry.params.url || '', 50);
       bars.push({
@@ -93,7 +97,7 @@ export const Timeline: React.FunctionComponent<{
       });
     }
     return bars;
-  }, [model, boundaries, measure.width]);
+  }, [model, boundaries, measure.width, sdkLanguage]);
 
   const hoveredBar = hoveredBarIndex !== undefined ? bars[hoveredBarIndex] : undefined;
   let targetBar: TimelineBar | undefined = bars.find(bar => bar.action === selectedAction);
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 1064e14ab1..be206ca558 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -126,6 +126,7 @@ export const Workbench: React.FunctionComponent<{
       selectedAction={activeAction}
       onSelected={onActionSelected}
       hideTimelineBars={hideTimelineBars}
+      sdkLanguage={sdkLanguage}
     />
     <SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
       <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>