ui: introduce vmode for lwc light dom

frontend/app/components/Client/SessionsListingSettings.tsx

@@ -6,6 +6,7 @@ import DefaultPlaying from 'Shared/SessionSettings/components/DefaultPlaying';
 import DefaultTimezone from 'Shared/SessionSettings/components/DefaultTimezone';
 import ListingVisibility from 'Shared/SessionSettings/components/ListingVisibility';
 import MouseTrailSettings from 'Shared/SessionSettings/components/MouseTrailSettings';
+import VirtualModeSettings from '../shared/SessionSettings/components/VirtualMode';
 import DebugLog from './DebugLog';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +36,7 @@ function SessionsListingSettings() {
         <div className="flex flex-col gap-2">
           <MouseTrailSettings />
           <DebugLog />
+          <VirtualModeSettings />
         </div>
       </div>
     </div>

frontend/app/components/Session_/Subheader.tsx

@@ -38,6 +38,7 @@ function SubHeader(props) {
     projectsStore,
     userStore,
     issueReportingStore,
+    settingsStore
   } = useStore();
   const { t } = useTranslation();
   const { favorite } = sessionStore.current;
@@ -45,7 +46,7 @@ function SubHeader(props) {
   const currentSession = sessionStore.current;
   const projectId = projectsStore.siteId;
   const integrations = integrationsStore.issues.list;
-  const { store } = React.useContext(PlayerContext);
+  const { player, store } = React.useContext(PlayerContext);
   const { location: currentLocation = 'loading...' } = store.get();
   const hasIframe = localStorage.getItem(IFRAME) === 'true';
   const [hideTools, setHideTools] = React.useState(false);
@@ -127,6 +128,13 @@ function SubHeader(props) {
     });
   };
 
+  const showVModeBadge = store.get().vModeBadge;
+  const onVMode = () => {
+    settingsStore.sessionSettings.updateKey('virtualMode', true);
+    player.enableVMode?.();
+    location.reload();
+  }
+
   return (
     <>
       <div
@@ -143,6 +151,8 @@ function SubHeader(props) {
           siteId={projectId!}
           currentLocation={currentLocation}
           version={currentSession?.trackerVersion ?? ''}
+          virtualElsFailed={showVModeBadge}
+          onVMode={onVMode}
         />
 
         <SessionTabs />

frontend/app/components/Session_/WarnBadge.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Alert } from 'antd';
 import { Icon } from 'UI';
 import { useTranslation } from 'react-i18next';
+import { VIRTUAL_MODE_KEY } from '@/player/web/MessageManager';
 
 const localhostWarn = (project: string) => `${project}_localhost_warn`;
 
@@ -34,10 +35,14 @@ const WarnBadge = React.memo(
     currentLocation,
     version,
     siteId,
+    virtualElsFailed,
+    onVMode,
   }: {
     currentLocation: string;
     version: string;
     siteId: string;
+    virtualElsFailed: boolean;
+    onVMode: () => void;
   }) => {
     const { t } = useTranslation();
     const localhostWarnSiteKey = localhostWarn(siteId);
@@ -51,21 +56,28 @@ const WarnBadge = React.memo(
     const trackerVerDiff = compareVersions(version, trackerVersion);
     const trackerWarnActive = trackerVerDiff !== VersionComparison.Same;
 
-    const [showLocalhostWarn, setLocalhostWarn] =
+    const [warnings, setWarnings] = React.useState([localhostWarnActive, trackerWarnActive, virtualElsFailed])
-      React.useState(localhostWarnActive);
-    const [showTrackerWarn, setTrackerWarn] = React.useState(trackerWarnActive);
 
-    const closeWarning = (type: 1 | 2) => {
+    React.useEffect(() => {
+      setWarnings([localhostWarnActive, trackerWarnActive, virtualElsFailed])
+    }, [localhostWarnActive, trackerWarnActive, virtualElsFailed])
+    const closeWarning = (type: 0 | 1 | 2) => {
       if (type === 1) {
         localStorage.setItem(localhostWarnSiteKey, '1');
-        setLocalhostWarn(false);
-      }
-      if (type === 2) {
-        setTrackerWarn(false);
       }
+      setWarnings((prev) => {
+        const newWarnings = [...prev];
+        newWarnings[type] = false;
+        return newWarnings;
+      });
     };
 
-    if (!showLocalhostWarn && !showTrackerWarn) return null;
+    const switchVirtualMode = () => {
+
+    }
+
+    console.log(warnings)
+    if (!warnings.some(el => el === true)) return null;
 
     return (
       <div
@@ -79,7 +91,7 @@ const WarnBadge = React.memo(
           fontWeight: 500,
         }}
       >
-        {showLocalhostWarn ? (
+        {warnings[0] ? (
           <div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
             <div>
               <span>{t('Some assets may load incorrectly on localhost.')}</span>
@@ -101,7 +113,7 @@ const WarnBadge = React.memo(
             </div>
           </div>
         ) : null}
-        {showTrackerWarn ? (
+        {warnings[1] ? (
           <div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
             <div>
               <div>
@@ -133,6 +145,21 @@ const WarnBadge = React.memo(
             </div>
           </div>
         ) : null}
+        {warnings[2] ? (
+          <div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
+            <div className="flex flex-col">
+              <div>{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}</div>
+              <div className='link' onClick={onVMode}>{t('Enable')}</div>
+            </div>
+
+            <div
+              className="py-1 ml-3 cursor-pointer"
+              onClick={switchVirtualMode}
+            >
+              <Icon name="close" size={16} color="black" />
+            </div>
+          </div>
+        ) : null}
       </div>
     );
   },

frontend/app/components/shared/SessionSettings/SessionSettings.tsx

@@ -5,6 +5,7 @@ import ListingVisibility from './components/ListingVisibility';
 import DefaultPlaying from './components/DefaultPlaying';
 import DefaultTimezone from './components/DefaultTimezone';
 import CaptureRate from './components/CaptureRate';
+
 import { useTranslation } from 'react-i18next';
 
 function SessionSettings() {

frontend/app/components/shared/SessionSettings/components/VirtualMode.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { Switch } from 'UI';
+import { useTranslation } from 'react-i18next';
+
+function VirtualModeSettings() {
+  const { settingsStore } = useStore();
+  const { sessionSettings } = settingsStore;
+  const { virtualMode } = sessionSettings;
+  const { t } = useTranslation();
+
+  const updateSettings = (checked: boolean) => {
+    settingsStore.sessionSettings.updateKey('virtualMode', !virtualMode);
+  };
+
+  return (
+    <div>
+      <h3 className="text-lg">{t('Virtual Mode')}</h3>
+      <div className="my-1">
+        {t('Change this setting if you have issues with recordings containing Lightning Web Components (or similar custom HTML Element libraries).')}
+      </div>
+      <div className="mt-2">
+        <Switch onChange={updateSettings} checked={virtualMode} />
+      </div>
+    </div>
+  );
+}
+
+export default observer(VirtualModeSettings);

frontend/app/constants/storageKeys.ts

@@ -9,6 +9,7 @@ export const GLOBAL_HAS_NO_RECORDINGS = '__$global-hasNoRecordings$__';
 export const SITE_ID_STORAGE_KEY = '__$user-siteId$__';
 export const GETTING_STARTED = '__$user-gettingStarted$__';
 export const MOUSE_TRAIL = '__$session-mouseTrail$__';
+export const VIRTUAL_MODE_KEY = '__$session-virtualMode$__'
 export const IFRAME = '__$session-iframe$__';
 export const JWT_PARAM = '__$session-jwt-param$__';
 export const MENU_COLLAPSED = '__$global-menuCollapsed$__';

frontend/app/mstore/types/sessionSettings.ts

@@ -6,6 +6,7 @@ import {
   SHOWN_TIMEZONE,
   DURATION_FILTER,
   MOUSE_TRAIL,
+  VIRTUAL_MODE_KEY,
 } from 'App/constants/storageKeys';
 import { DateTime, Settings } from 'luxon';
 
@@ -71,27 +72,19 @@ export const generateGMTZones = (): Timezone[] => {
 
 export default class SessionSettings {
   defaultTimezones = [...generateGMTZones()];
-
   skipToIssue: boolean = localStorage.getItem(SKIP_TO_ISSUE) === 'true';
-
   timezone: Timezone;
-
   durationFilter: any = JSON.parse(
     localStorage.getItem(DURATION_FILTER) ||
       JSON.stringify(defaultDurationFilter),
   );
-
   captureRate: string = '0';
-
   conditionalCapture: boolean = false;
-
   captureConditions: { name: string; captureRate: number; filters: any[] }[] =
     [];
-
   mouseTrail: boolean = localStorage.getItem(MOUSE_TRAIL) !== 'false';
-
   shownTimezone: 'user' | 'local';
-
+  virtualMode: boolean = localStorage.getItem(VIRTUAL_MODE_KEY) === 'true';
   usingLocal: boolean = false;
 
   constructor() {

frontend/app/player/web/MessageLoader.ts

@@ -80,26 +80,7 @@ export default class MessageLoader {
 
         let artificialStartTime = Infinity;
         let startTimeSet = false;
-        const customElIds = new Set();
-        const connectedCustomRoots = new Set();
         msgs.forEach((msg, i) => {
-          if (msg.tp === MType.CreateElementNode) {
-            if (msg.tag.includes('-')) {
-              customElIds.add(msg.id);
-            }
-          }
-          if (msg.tp === MType.CreateIFrameDocument) {
-            if (customElIds.has(msg.frameID)) {
-              connectedCustomRoots.add(msg.id);
-            }
-          }
-          if (msg.tp === MType.AdoptedSsAddOwner) {
-            if (connectedCustomRoots.has(msg.id)) {
-              // custom els with styles connected to elements
-              // @ts-ignore
-              // this.messageManager.setVirtualMode(true)
-            }
-          }
           if (msg.tp === MType.Redux || msg.tp === MType.ReduxDeprecated) {
             if ('actionTime' in msg && msg.actionTime) {
               msg.time = msg.actionTime - this.session.startedAt;

frontend/app/player/web/MessageManager.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { Decoder } from 'syncod';
 import logger from 'App/logger';
-
+import { VIRTUAL_MODE_KEY } from '@/constants/storageKeys';
 import type { Store, ILog, SessionFilesInfo } from 'Player';
 import TabSessionManager, { TabState } from 'Player/web/TabManager';
 import ActiveTabManager from 'Player/web/managers/ActiveTabManager';
@@ -69,6 +69,7 @@ export interface State extends ScreenState {
   tabChangeEvents: TabChangeEvent[];
   closedTabs: string[];
   sessionStart: number;
+  vModeBadge: boolean;
 }
 
 export const visualChanges = [
@@ -99,6 +100,7 @@ export default class MessageManager {
     closedTabs: [],
     sessionStart: 0,
     tabNames: {},
+    vModeBadge: false,
   };
 
   private clickManager: ListWalker<MouseClick> = new ListWalker();
@@ -141,6 +143,11 @@ export default class MessageManager {
     this.activityManager = new ActivityManager(
       this.session.duration.milliseconds,
     ); // only if not-live
+
+    const vMode = localStorage.getItem(VIRTUAL_MODE_KEY);
+    if (vMode === 'true') {
+      this.setVirtualMode(true);
+    }
   }
 
   private virtualMode = false;

frontend/app/player/web/TabManager.ts

@@ -99,6 +99,7 @@ export default class TabSessionManager {
       tabStates: { [tabId: string]: TabState };
       tabNames: { [tabId: string]: string };
       location?: string;
+      vModeBadge?: boolean;
     }>,
     private readonly screen: Screen,
     private readonly id: string,
@@ -116,6 +117,11 @@ export default class TabSessionManager {
       screen,
       this.session.isMobile,
       this.setCSSLoading,
+      () => {
+        this.state.update({
+          vModeBadge: true,
+        })
+      }
     );
     this.lists = new Lists(initialLists);
     initialLists?.event?.forEach((e: Record<string, string>) => {

frontend/app/player/web/WebPlayer.ts

@@ -21,15 +21,10 @@ export default class WebPlayer extends Player {
     inspectorMode: false,
     mobsFetched: false,
   };
-
   private inspectorController: InspectorController;
-
   protected screen: Screen;
-
   protected readonly messageManager: MessageManager;
-
   protected readonly messageLoader: MessageLoader;
-
   private targetMarker: TargetMarker;
 
   constructor(
@@ -124,6 +119,10 @@ export default class WebPlayer extends Player {
     })
   }
 
+  enableVMode = () => {
+    this.messageManager.setVirtualMode(true);
+  }
+
   preloadFirstFile(data: Uint8Array, fileKey?: string) {
     void this.messageLoader.preloadFirstFile(data, fileKey);
   }

frontend/app/player/web/managers/DOM/DOMManager.ts

@@ -44,48 +44,34 @@ const ATTR_NAME_REGEXP = /([^\t\n\f \/>"'=]+)/;
 
 export default class DOMManager extends ListWalker<Message> {
   private readonly vTexts: Map<number, VText> = new Map(); // map vs object here?
-
   private readonly vElements: Map<number, VElement> = new Map();
-
   private readonly olVRoots: Map<number, OnloadVRoot> = new Map();
-
   /** required to keep track of iframes, frameId : vnodeId */
   private readonly iframeRoots: Record<number, number> = {};
-
   private shadowRootParentMap: Map<number, number> = new Map();
-
   /** Constructed StyleSheets https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
    * as well as <style> tag owned StyleSheets
    */
   private olStyleSheets: Map<number, OnloadStyleSheet> = new Map();
-
   /** @depreacted since tracker 4.0.2 Mapping by nodeID */
   private olStyleSheetsDeprecated: Map<number, OnloadStyleSheet> = new Map();
-
   private upperBodyId: number = -1;
-
   private nodeScrollManagers: Map<number, ListWalker<SetNodeScroll>> =
     new Map();
-
   private stylesManager: StylesManager;
-
   private focusManager: FocusManager = new FocusManager(this.vElements);
-
   private selectionManager: SelectionManager;
-
   private readonly screen: Screen;
-
   private readonly isMobile: boolean;
-
   private readonly stringDict: Record<number, string>;
-
   private readonly globalDict: {
     get: (key: string) => string | undefined;
     all: () => Record<string, string>;
   };
-
   public readonly time: number;
   private virtualMode: boolean = false;
+  private hasCustomElements = false;
+  private showVModeBadge?: () => void;
 
   constructor(params: {
     screen: Screen;
@@ -98,6 +84,7 @@ export default class DOMManager extends ListWalker<Message> {
       all: () => Record<string, string>;
     };
     virtualMode?: boolean;
+    showVModeBadge?: () => void;
   }) {
     super();
     this.screen = params.screen;
@@ -108,6 +95,7 @@ export default class DOMManager extends ListWalker<Message> {
     this.selectionManager = new SelectionManager(this.vElements, params.screen);
     this.stylesManager = new StylesManager(params.screen, params.setCssLoading);
     this.virtualMode = params.virtualMode || false;
+    this.showVModeBadge = params.showVModeBadge;
     setupWindowLogging(this.vTexts, this.vElements, this.olVRoots);
   }
 
@@ -453,12 +441,17 @@ export default class DOMManager extends ListWalker<Message> {
           return;
         }
         // shadow DOM for a custom element + SALESFORCE (<slot>)
-        const isCustomElement = vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
+        const isCustomElement =
-        const isLikelyShadowRoot = isCustomElement;
+          vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
 
-        if (isLikelyShadowRoot && !this.virtualMode) {
+        if (isCustomElement) {
-          // Store the mapping but don't create the actual shadow root
+          this.hasCustomElements = true;
-          this.shadowRootParentMap.set(msg.id, msg.frameID);
+          if (this.virtualMode) {
+            // Store the mapping but don't create the actual shadow root
+            this.shadowRootParentMap.set(msg.id, msg.frameID);
+          } else {
+            this.showVModeBadge?.();
+          }
           return;
         }
 
@@ -475,7 +468,11 @@ export default class DOMManager extends ListWalker<Message> {
       case MType.AdoptedSsInsertRule: {
         const styleSheet = this.olStyleSheets.get(msg.sheetID);
         if (!styleSheet) {
-          logger.warn('No stylesheet was created for ', msg, this.olStyleSheets);
+          logger.warn(
+            'No stylesheet was created for ',
+            msg,
+            this.olStyleSheets,
+          );
           return;
         }
         insertRule(styleSheet, msg);

frontend/app/player/web/managers/PagesManager.ts

@@ -22,6 +22,7 @@ export default class PagesManager extends ListWalker<DOMManager> {
     private screen: Screen,
     private isMobile: boolean,
     private setCssLoading: (flag: boolean) => void,
+    private showVModeBadge: () => void,
   ) {
     super();
   }
@@ -67,6 +68,7 @@ export default class PagesManager extends ListWalker<DOMManager> {
             all: () => Object.fromEntries(this.globalDictionary),
           },
           virtualMode: this.virtualMode,
+          showVModeBadge: this.showVModeBadge,
         }),
       );
       this.falseOrder = false;