Css inliner tuning (#3337)

* tracker: don't send double sheets

* tracker: don't send double sheets

* tracker: slot checker

* add slot tag to custom elements

---------

Co-authored-by: nick-delirium <nikita@openreplay.com>

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

@@ -450,9 +450,8 @@ export default class DOMManager extends ListWalker<Message> {
           logger.error('CreateIFrameDocument: Node not found', msg);
           return;
         }
-
-        // shadow DOM for a custom element
-        const isCustomElement = vElem.tagName.includes('-');
+        // 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;
 

tracker/tracker/src/main/app/observer/cssInliner.ts

@@ -11,8 +11,10 @@ export function inlineRemoteCss(
   sendPlain?: boolean,
   onPlain?: (cssText: string, id: number) => void,
 ) {
-  const sheetId = getNextID();
-  addOwner(sheetId, id);
+  const sheetId = sendPlain ? null : getNextID();
+  if (!sendPlain) {
+    addOwner(sheetId!, id);
+  }
 
   const sheet = node.sheet;
 
@@ -25,7 +27,7 @@ export function inlineRemoteCss(
         return;
       }
     } catch (e) {
-      console.warn("Could not stringify sheet, falling back to fetch:", e);
+      // console.warn("Could not stringify sheet, falling back to fetch:", e);
     }
   }
 
@@ -34,18 +36,19 @@ export function inlineRemoteCss(
     fetch(node.href)
       .then(response => {
         if (!response.ok) {
-          throw new Error(`Failed to fetch CSS: ${response.status}`);
+          throw new Error(`response status ${response.status}`);
         }
         return response.text();
       })
       .then(cssText => {
         if (sendPlain && onPlain) {
           onPlain(cssText, fakeIdHolder++);
+        } else {
+          processCssText(cssText);
         }
-        processCssText(cssText);
       })
       .catch(error => {
-        console.error(`Failed to fetch CSS from ${node.href}:`, error);
+        console.error(`OpenReplay: Failed to fetch CSS from ${node.href}:`, error);
       });
   }
 
@@ -57,7 +60,7 @@ export function inlineRemoteCss(
     const ruleTexts = parseCSS(cssText);
 
     for (let i = 0; i < ruleTexts.length; i++) {
-      insertRule(sheetId, ruleTexts[i], i, baseHref);
+      insertRule(sheetId!, ruleTexts[i], i, baseHref);
     }
   }
 

tracker/tracker/src/main/app/observer/observer.ts

@@ -497,7 +497,8 @@ export default abstract class Observer {
     if (isRootNode(node)) {
       return true
     }
-    const parent = node.parentNode
+    // @ts-ignore SALESFORCE
+    const parent = node.assignedSlot ? node.assignedSlot : node.parentNode
     let parentID: number | undefined
 
     // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before)