ui: fixes for litjs capture

frontend/app/player/web/MessageLoader.ts

@@ -80,8 +80,26 @@ 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

@@ -126,7 +126,6 @@ export default class MessageManager {
   private tabsAmount = 0;
 
   private tabChangeEvents: TabChangeEvent[] = [];
-
   private activeTab = '';
 
   constructor(
@@ -144,6 +143,12 @@ export default class MessageManager {
     ); // only if not-live
   }
 
+  private virtualMode = false;
+  public setVirtualMode = (virtualMode: boolean) => {
+    this.virtualMode = virtualMode;
+    Object.values(this.tabs).forEach((tab) => tab.setVirtualMode(virtualMode));
+  };
+
   public getListsFullState = () => {
     const fullState: Record<string, any> = {};
     for (const tab in Object.keys(this.tabs)) {
@@ -394,6 +399,9 @@ export default class MessageManager {
         this.sessionStart,
         this.initialLists,
       );
+      if (this.virtualMode) {
+        this.tabs[msg.tabId].setVirtualMode(this.virtualMode);
+      }
     }
 
     const lastMessageTime = Math.max(msg.time, this.lastMessageTime);

frontend/app/player/web/TabManager.ts

@@ -126,6 +126,12 @@ export default class TabSessionManager {
     });
   }
 
+  private virtualMode = false;
+  public setVirtualMode = (virtualMode: boolean) => {
+    this.virtualMode = virtualMode;
+    this.pagesManager.setVirtualMode(virtualMode);
+  };
+
   setSession = (session: any) => {
     this.session = session;
   };

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

@@ -1,5 +1,4 @@
 import logger from 'App/logger';
-import { resolveCSS } from '../../messages/rewriter/urlResolve';
 
 import type Screen from '../../Screen/Screen';
 import type { Message, SetNodeScroll } from '../../messages';
@@ -86,6 +85,7 @@ export default class DOMManager extends ListWalker<Message> {
   };
 
   public readonly time: number;
+  private virtualMode: boolean = false;
 
   constructor(params: {
     screen: Screen;
@@ -97,6 +97,7 @@ export default class DOMManager extends ListWalker<Message> {
       get: (key: string) => string | undefined;
       all: () => Record<string, string>;
     };
+    virtualMode?: boolean;
   }) {
     super();
     this.screen = params.screen;
@@ -106,6 +107,7 @@ export default class DOMManager extends ListWalker<Message> {
     this.globalDict = params.globalDict;
     this.selectionManager = new SelectionManager(this.vElements, params.screen);
     this.stylesManager = new StylesManager(params.screen, params.setCssLoading);
+    this.virtualMode = params.virtualMode || false;
     setupWindowLogging(this.vTexts, this.vElements, this.olVRoots);
   }
 
@@ -452,10 +454,9 @@ export default class DOMManager extends ListWalker<Message> {
         }
         // shadow DOM for a custom element + SALESFORCE (<slot>)
         const isCustomElement = vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
-        const isNotActualIframe = !["IFRAME", "FRAME"].includes(vElem.tagName.toUpperCase());
-        const isLikelyShadowRoot = isCustomElement && isNotActualIframe;
+        const isLikelyShadowRoot = isCustomElement;
 
-        if (isLikelyShadowRoot) {
+        if (isLikelyShadowRoot && !this.virtualMode) {
           // Store the mapping but don't create the actual shadow root
           this.shadowRootParentMap.set(msg.id, msg.frameID);
           return;
@@ -495,9 +496,8 @@ export default class DOMManager extends ListWalker<Message> {
           logger.warn('No stylesheet was created for ', msg);
           return;
         }
-
-        // styleSheet.replaceRule(msg.text);
-        // styleSheet.whenReady((sheet) => sheet.replaceSync(msg.text))
+        // @ts-ignore (configure ts with recent WebaAPI)
+        styleSheet.replaceSync(msg.text);
         return;
       }
       case MType.AdoptedSsAddOwner: {

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

@@ -30,6 +30,10 @@ export default class PagesManager extends ListWalker<DOMManager> {
 		Assumed that messages added in a correct time sequence.
 	*/
   falseOrder = false;
+  virtualMode = false;
+  setVirtualMode = (virtualMode: boolean) => {
+    this.virtualMode = virtualMode;
+  };
 
   appendMessage(m: Message): void {
     if ([MType.StringDict, MType.StringDictGlobal].includes(m.tp)) {
@@ -62,6 +66,7 @@ export default class PagesManager extends ListWalker<DOMManager> {
             get: (key: string) => this.globalDictionary.get(key),
             all: () => Object.fromEntries(this.globalDictionary),
           },
+          virtualMode: this.virtualMode,
         }),
       );
       this.falseOrder = false;