From 1736479e41e88d014b9545075072b316fa627338 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <aslushnikov@gmail.com>
Date: Tue, 20 Jun 2023 11:39:21 -0700
Subject: [PATCH] fix: fix locator picker in Trace (#23820)

- make sure links are not clickable with enabled locator picker
- make sure locator picker state is preserved when switching actions
---
 packages/trace-viewer/src/ui/snapshotTab.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
index 7d114f9f73..1a8365abfb 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -160,14 +160,16 @@ export const SnapshotTab: React.FunctionComponent<{
       testIdAttributeName={testIdAttributeName}
       highlightedLocator={highlightedLocator}
       setHighlightedLocator={setHighlightedLocator}
-      iframe={iframeRef0.current} />
+      iframe={iframeRef0.current}
+      iteration={loadingRef.current.iteration} />
     <InspectModeController
       isInspecting={isInspecting}
       sdkLanguage={sdkLanguage}
       testIdAttributeName={testIdAttributeName}
       highlightedLocator={highlightedLocator}
       setHighlightedLocator={setHighlightedLocator}
-      iframe={iframeRef1.current} />
+      iframe={iframeRef1.current}
+      iteration={loadingRef.current.iteration} />
     <Toolbar>
       <ToolbarButton title='Pick locator' disabled={!popoutUrl} toggled={pickerVisible} onClick={() => {
         setPickerVisible(!pickerVisible);
@@ -251,7 +253,8 @@ export const InspectModeController: React.FunctionComponent<{
   testIdAttributeName: string,
   highlightedLocator: string,
   setHighlightedLocator: (locator: string) => void,
-}> = ({ iframe, isInspecting, sdkLanguage, testIdAttributeName, highlightedLocator, setHighlightedLocator }) => {
+  iteration: number,
+}> = ({ iframe, isInspecting, sdkLanguage, testIdAttributeName, highlightedLocator, setHighlightedLocator, iteration }) => {
   React.useEffect(() => {
     const win = iframe?.contentWindow as any;
     let recorder: Recorder | undefined;
@@ -269,7 +272,6 @@ export const InspectModeController: React.FunctionComponent<{
       const injectedScript = new InjectedScript(win, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
       recorder = new Recorder(injectedScript, {
         async setSelector(selector: string) {
-          recorder!.setUIState({ mode: 'none', language: sdkLanguage, testIdAttributeName });
           setHighlightedLocator(asLocator('javascript', selector, false /* isFrameLocator */, true /* playSafe */));
         }
       });
@@ -282,7 +284,7 @@ export const InspectModeController: React.FunctionComponent<{
       language: sdkLanguage,
       testIdAttributeName,
     });
-  }, [iframe, isInspecting, highlightedLocator, setHighlightedLocator, sdkLanguage, testIdAttributeName]);
+  }, [iframe, isInspecting, highlightedLocator, setHighlightedLocator, sdkLanguage, testIdAttributeName, iteration]);
   return <></>;
 };