From 5304dbf8c185d9cac9d2086ca69f03746349f500 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 12 May 2025 16:01:39 +0200
Subject: [PATCH] ui: change <slot> check

---
 frontend/app/player/web/TabManager.ts              | 3 +--
 frontend/app/player/web/managers/DOM/DOMManager.ts | 9 ++++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts
index 71dd9ed53..9ea042b20 100644
--- a/frontend/app/player/web/TabManager.ts
+++ b/frontend/app/player/web/TabManager.ts
@@ -122,8 +122,7 @@ export default class TabSessionManager {
           this.state.update({
             vModeBadge: true,
           })
-          // easier to spot the warning appearing plus more time to go over all messages
-        }, 1000)
+        }, 0)
       }
     );
     this.lists = new Lists(initialLists);
diff --git a/frontend/app/player/web/managers/DOM/DOMManager.ts b/frontend/app/player/web/managers/DOM/DOMManager.ts
index b518395b0..06776064c 100644
--- a/frontend/app/player/web/managers/DOM/DOMManager.ts
+++ b/frontend/app/player/web/managers/DOM/DOMManager.ts
@@ -69,7 +69,8 @@ export default class DOMManager extends ListWalker<Message> {
     all: () => Record<string, string>;
   };
   public readonly time: number;
-  private virtualMode: boolean = false;
+  private virtualMode = false;
+  private hasSlots = false
   private showVModeBadge?: () => void;
 
   constructor(params: {
@@ -297,6 +298,9 @@ export default class DOMManager extends ListWalker<Message> {
         this.insertNode(msg);
         this.removeBodyScroll(msg.id, vElem);
         this.removeAutocomplete(vElem);
+        if (msg.tag === 'SLOT') {
+          this.hasSlots = true;
+        }
         return;
       }
       case MType.MoveNode: {
@@ -442,14 +446,13 @@ export default class DOMManager extends ListWalker<Message> {
         // shadow DOM for a custom element + SALESFORCE (<slot>)
         const isCustomElement =
           vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
-        const hasSlots = vElem.tagName === 'SLOT';
 
         if (isCustomElement) {
           if (this.virtualMode) {
             // Store the mapping but don't create the actual shadow root
             this.shadowRootParentMap.set(msg.id, msg.frameID);
             return;
-          } else if (hasSlots) {
+          } else if (this.hasSlots) {
             this.showVModeBadge?.();
           }
         }