diff --git a/frontend/app/player/web/MessageLoader.ts b/frontend/app/player/web/MessageLoader.ts index cf9e2a6f6..6cdafdc52 100644 --- a/frontend/app/player/web/MessageLoader.ts +++ b/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; diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index 785b1d21e..aed9ea204 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/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 = {}; 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); diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts index 574f7490e..191391699 100644 --- a/frontend/app/player/web/TabManager.ts +++ b/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; }; diff --git a/frontend/app/player/web/managers/DOM/DOMManager.ts b/frontend/app/player/web/managers/DOM/DOMManager.ts index 6e2a10582..fdebd7cb8 100644 --- a/frontend/app/player/web/managers/DOM/DOMManager.ts +++ b/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 { }; public readonly time: number; + private virtualMode: boolean = false; constructor(params: { screen: Screen; @@ -97,6 +97,7 @@ export default class DOMManager extends ListWalker { get: (key: string) => string | undefined; all: () => Record; }; + virtualMode?: boolean; }) { super(); this.screen = params.screen; @@ -106,6 +107,7 @@ export default class DOMManager extends ListWalker { 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 { } // shadow DOM for a custom element + SALESFORCE () 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 { 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: { diff --git a/frontend/app/player/web/managers/PagesManager.ts b/frontend/app/player/web/managers/PagesManager.ts index 8fcdf7097..6d8f551dd 100644 --- a/frontend/app/player/web/managers/PagesManager.ts +++ b/frontend/app/player/web/managers/PagesManager.ts @@ -30,6 +30,10 @@ export default class PagesManager extends ListWalker { 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 { get: (key: string) => this.globalDictionary.get(key), all: () => Object.fromEntries(this.globalDictionary), }, + virtualMode: this.virtualMode, }), ); this.falseOrder = false;