From f8ba3f6d8963191f5320ea8f4b8199c5ab5d5f5b Mon Sep 17 00:00:00 2001
From: Andrey Babushkin <55714097+reyand43@users.noreply.github.com>
Date: Tue, 22 Apr 2025 17:59:25 +0200
Subject: [PATCH] Css batching (#3326)

* tracker: initial css inlining functionality

* tracker: add tests, adjust sheet id, stagger rule sending

* ui: rereoute custom html component fragments

* removed sorting

---------

Co-authored-by: nick-delirium <nikita@openreplay.com>
---
 .../app/player/web/managers/DOM/DOMManager.ts |   6 +-
 tracker/tracker/src/main/app/index.ts         |  37 +-
 .../src/main/app/observer/cssInliner.ts       | 339 ++++--------------
 .../tracker/src/main/app/observer/observer.ts |  35 +-
 .../src/main/app/observer/top_observer.ts     |   6 +-
 tracker/tracker/src/tests/cssInliner.test.ts  |  20 +-
 6 files changed, 103 insertions(+), 340 deletions(-)

diff --git a/frontend/app/player/web/managers/DOM/DOMManager.ts b/frontend/app/player/web/managers/DOM/DOMManager.ts
index 9e4f06f8d..76e194916 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';
@@ -450,8 +449,9 @@ export default class DOMManager extends ListWalker<Message> {
           logger.error('CreateIFrameDocument: Node not found', msg);
           return;
         }
-        // shadow DOM for a custom element + SALESFORCE (<slot>) 
-        const isCustomElement = vElem.tagName.includes('-') || vElem.tagName === 'SLOT';
+
+        // shadow DOM for a custom element
+        const isCustomElement = vElem.tagName.includes('-');
         const isNotActualIframe = !["IFRAME", "FRAME"].includes(vElem.tagName.toUpperCase());
         const isLikelyShadowRoot = isCustomElement && isNotActualIframe;
 
diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts
index 04aa62f74..89de2be40 100644
--- a/tracker/tracker/src/main/app/index.ts
+++ b/tracker/tracker/src/main/app/index.ts
@@ -272,6 +272,7 @@ export default class App {
     'feature-flags': true,
     'usability-test': true,
   }
+  private emptyBatchCounter = 0
 
   constructor(
     projectKey: string,
@@ -318,14 +319,16 @@ export default class App {
       __save_canvas_locally: false,
       localStorage: null,
       sessionStorage: null,
+      disableStringDict: true,
       forceSingleTab: false,
       assistSocketHost: '',
       fixedCanvasScaling: false,
       disableCanvas: false,
       captureIFrames: true,
-      obscureTextEmails: false,
+      disableSprites: false,
+      inlineRemoteCss: true,
+      obscureTextEmails: true,
       obscureTextNumbers: false,
-      disableStringDict: false,
       crossdomain: {
         parentDomain: '*',
       },
@@ -336,12 +339,6 @@ export default class App {
         useAnimationFrame: false,
       },
       forceNgOff: false,
-      inlineRemoteCss: false,
-      disableSprites: false,
-      inlinerOptions: {
-        forceFetch: false,
-        forcePlain: false,
-      }
     }
     this.options = simpleMerge(defaultOptions, options)
 
@@ -436,6 +433,7 @@ export default class App {
         if (ev.data.context === this.contextId) {
           return
         }
+        this.debug.log(ev)
         if (ev.data.line === proto.resp) {
           const sessionToken = ev.data.token
           this.session.setSessionToken(sessionToken)
@@ -853,8 +851,7 @@ export default class App {
    * */
   private _nCommit(): void {
     if (this.socketMode) {
-      this.messages.unshift(TabData(this.session.getTabId()))
-      this.messages.unshift(Timestamp(this.timestamp()))
+      this.messages.unshift(Timestamp(this.timestamp()), TabData(this.session.getTabId()))
       this.commitCallbacks.forEach((cb) => cb(this.messages))
       this.messages.length = 0
       return
@@ -877,10 +874,19 @@ export default class App {
       return
     }
 
+    if (!this.messages.length) {
+      // Release empty batches every 30 secs (1000 * 30ms)
+      if (this.emptyBatchCounter < 1000) {
+        this.emptyBatchCounter++;
+        return;
+      }
+    }
+
+    this.emptyBatchCounter = 0
+
     try {
       requestIdleCb(() => {
-        this.messages.unshift(TabData(this.session.getTabId()))
-        this.messages.unshift(Timestamp(this.timestamp()))
+        this.messages.unshift(Timestamp(this.timestamp()), TabData(this.session.getTabId()))
         this.worker?.postMessage(this.messages)
         this.commitCallbacks.forEach((cb) => cb(this.messages))
         this.messages.length = 0
@@ -905,10 +911,9 @@ export default class App {
   private _cStartCommit(): void {
     this.coldStartCommitN += 1
     if (this.coldStartCommitN === 2) {
-      this.bufferedMessages1.push(Timestamp(this.timestamp()))
-      this.bufferedMessages1.push(TabData(this.session.getTabId()))
-      this.bufferedMessages2.push(Timestamp(this.timestamp()))
-      this.bufferedMessages2.push(TabData(this.session.getTabId()))
+      const payload = [Timestamp(this.timestamp()), TabData(this.session.getTabId())]
+      this.bufferedMessages1.push(...payload)
+      this.bufferedMessages2.push(...payload)
       this.coldStartCommitN = 0
     }
   }
diff --git a/tracker/tracker/src/main/app/observer/cssInliner.ts b/tracker/tracker/src/main/app/observer/cssInliner.ts
index b8c5fb57d..df0133dba 100644
--- a/tracker/tracker/src/main/app/observer/cssInliner.ts
+++ b/tracker/tracker/src/main/app/observer/cssInliner.ts
@@ -1,5 +1,3 @@
-let fakeIdHolder = 1000000 * 99;
-
 export function inlineRemoteCss(
   node: HTMLLinkElement,
   id: number,
@@ -7,286 +5,83 @@ export function inlineRemoteCss(
   getNextID: () => number,
   insertRule: (id: number, cssText: string, index: number, baseHref: string) => any[],
   addOwner: (sheetId: number, ownerId: number) => any[],
-  forceFetch?: boolean,
-  sendPlain?: boolean,
-  onPlain?: (cssText: string, id: number) => void,
 ) {
-  const sheetId = getNextID();
+  const sheet = node.sheet;
+  const sheetId = getNextID()
   addOwner(sheetId, id);
 
-  const sheet = node.sheet;
-
-  if (sheet && !forceFetch) {
-    try {
-      const cssText = stringifyStylesheet(sheet);
-
-      if (cssText) {
-        processCssText(cssText);
-        return;
-      }
-    } catch (e) {
-      console.warn("Could not stringify sheet, falling back to fetch:", e);
+  const processRules = (rules: CSSRuleList) => {
+    if (rules.length) {
+      setTimeout(() => {
+        for (let i = 0; i < rules.length; i++) {
+          const rule = rules[i];
+          insertRule(sheetId, rule.cssText, i, baseHref);
+        }
+      }, 0)
     }
-  }
+  };
 
-  // Fall back to fetching if we couldn't get or stringify the sheet
-  if (node.href) {
+  const processCssText = (cssText: string) => {
+    cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
+
+    const ruleTexts: string[] = [];
+    let depth = 0;
+    let currentRule = '';
+
+    for (let i = 0; i < cssText.length; i++) {
+      const char = cssText[i];
+
+      if (char === '{') {
+        depth++;
+      } else if (char === '}') {
+        depth--;
+        if (depth === 0) {
+          currentRule += char;
+          ruleTexts.push(currentRule.trim());
+          currentRule = '';
+          continue;
+        }
+      }
+
+      currentRule += char;
+    }
+
+    for (let i = 0; i < ruleTexts.length; i++) {
+      const ruleText = ruleTexts[i];
+      insertRule(sheetId, ruleText, i, baseHref);
+    }
+  };
+
+  if (sheet) {
+    try {
+      const rules = sheet.cssRules;
+      processRules(rules);
+    } catch (e) {
+      const href = node.href;
+      if (href) {
+        fetch(href)
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Failed to fetch CSS: ${response.status}`);
+            }
+            return response.text();
+          })
+          .then(cssText => {
+            processCssText(cssText);
+          })
+          .catch(error => {
+            console.error(`Failed to fetch or process CSS from ${href}:`, error);
+          });
+      }
+    }
+  } else if (node.href) {
     fetch(node.href)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`Failed to fetch CSS: ${response.status}`);
-        }
-        return response.text();
-      })
+      .then(response => response.text())
       .then(cssText => {
-        if (sendPlain && onPlain) {
-          onPlain(cssText, fakeIdHolder++);
-        }
         processCssText(cssText);
       })
       .catch(error => {
         console.error(`Failed to fetch CSS from ${node.href}:`, error);
       });
   }
-
-  function processCssText(cssText: string) {
-    // Remove comments
-    cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
-
-    // Parse and process the CSS text to extract rules
-    const ruleTexts = parseCSS(cssText);
-
-    for (let i = 0; i < ruleTexts.length; i++) {
-      insertRule(sheetId, ruleTexts[i], i, baseHref);
-    }
-  }
-
-
-  function parseCSS(cssText: string): string[] {
-    const rules: string[] = [];
-    let inComment = false;
-    let inString = false;
-    let stringChar = '';
-    let braceLevel = 0;
-    let currentRule = '';
-
-    for (let i = 0; i < cssText.length; i++) {
-      const char = cssText[i];
-      const nextChar = cssText[i + 1] || '';
-
-      // comments
-      if (!inString && char === '/' && nextChar === '*') {
-        inComment = true;
-        i++; // Skip the next character
-        continue;
-      }
-
-      if (inComment) {
-        if (char === '*' && nextChar === '/') {
-          inComment = false;
-          i++; // Skip the next character
-        }
-        continue;
-      }
-
-
-      if (!inString && (char === '"' || char === "'")) {
-        inString = true;
-        stringChar = char;
-        currentRule += char;
-        continue;
-      }
-
-      if (inString) {
-        currentRule += char;
-        if (char === stringChar && cssText[i - 1] !== '\\') {
-          inString = false;
-        }
-        continue;
-      }
-
-
-      currentRule += char;
-
-      if (char === '{') {
-        braceLevel++;
-      } else if (char === '}') {
-        braceLevel--;
-
-        if (braceLevel === 0) {
-          // End of a top-level rule
-          rules.push(currentRule.trim());
-          currentRule = '';
-        }
-      }
-    }
-
-    // Handle any remaining text (should be rare)
-    if (currentRule.trim()) {
-      rules.push(currentRule.trim());
-    }
-
-    return rules;
-  }
-
-
-  function stringifyStylesheet(s: CSSStyleSheet): string | null {
-    try {
-      const rules = s.rules || s.cssRules;
-      if (!rules) {
-        return null;
-      }
-
-      let sheetHref = s.href;
-      if (!sheetHref && s.ownerNode && (s.ownerNode as HTMLElement).ownerDocument) {
-        // an inline <style> element
-        sheetHref = (s.ownerNode as HTMLElement).ownerDocument.location.href;
-      }
-
-      const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
-        stringifyRule(rule, sheetHref)
-      ).join('');
-
-      return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
-    } catch (error) {
-      return null;
-    }
-  }
-  function stringifyRule(rule: CSSRule, sheetHref: string | null): string {
-    if (isCSSImportRule(rule)) {
-      let importStringified;
-      try {
-        importStringified =
-          // for same-origin stylesheets,
-          // we can access the imported stylesheet rules directly
-          stringifyStylesheet((rule as any).styleSheet) ||
-          // work around browser issues with the raw string `@import url(...)` statement
-          escapeImportStatement(rule as any);
-      } catch (error) {
-        importStringified = rule.cssText;
-      }
-      if ((rule as any).styleSheet.href) {
-        // url()s within the imported stylesheet are relative to _that_ sheet's href
-        return absolutifyURLs(importStringified, (rule as any).styleSheet.href);
-      }
-      return importStringified;
-    } else {
-      let ruleStringified = rule.cssText;
-      if (isCSSStyleRule(rule) && (rule as any).selectorText.includes(':')) {
-        // Safari does not escape selectors with : properly
-        ruleStringified = fixSafariColons(ruleStringified);
-      }
-      if (sheetHref) {
-        return absolutifyURLs(ruleStringified, sheetHref);
-      }
-      return ruleStringified;
-    }
-  }
-  function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {
-    // Fix for Chrome's handling of webkit-background-clip
-    if (
-      cssText.includes(' background-clip: text;') &&
-      !cssText.includes(' -webkit-background-clip: text;')
-    ) {
-      cssText = cssText.replace(
-        /\sbackground-clip:\s*text;/g,
-        ' -webkit-background-clip: text; background-clip: text;',
-      );
-    }
-    return cssText;
-  }
-
-  function escapeImportStatement(rule: any): string {
-    const { cssText } = rule;
-    if (cssText.split('"').length < 3) return cssText;
-
-    const statement = ['@import', `url(${JSON.stringify(rule.href)})`];
-    if (rule.layerName === '') {
-      statement.push(`layer`);
-    } else if (rule.layerName) {
-      statement.push(`layer(${rule.layerName})`);
-    }
-    if (rule.supportsText) {
-      statement.push(`supports(${rule.supportsText})`);
-    }
-    if (rule.media.length) {
-      statement.push(rule.media.mediaText);
-    }
-    return statement.join(' ') + ';';
-  }
-
-  function fixSafariColons(cssStringified: string): string {
-    const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
-    return cssStringified.replace(regex, '$1\\$2');
-  }
-
-  function isCSSImportRule(rule: CSSRule): boolean {
-    return 'styleSheet' in rule;
-  }
-
-  function isCSSStyleRule(rule: CSSRule): boolean {
-    return 'selectorText' in rule;
-  }
-
-  function absolutifyURLs(cssText: string | null, href: string): string {
-    if (!cssText) return '';
-
-    const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
-    const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
-    const URL_WWW_MATCH = /^www\..*/i;
-    const DATA_URI = /^(data:)([^,]*),(.*)/i;
-
-    return cssText.replace(
-      URL_IN_CSS_REF,
-      (
-        origin: string,
-        quote1: string,
-        path1: string,
-        quote2: string,
-        path2: string,
-        path3: string,
-      ) => {
-        const filePath = path1 || path2 || path3;
-        const maybeQuote = quote1 || quote2 || '';
-        if (!filePath) {
-          return origin;
-        }
-        if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
-          return `url(${maybeQuote}${filePath}${maybeQuote})`;
-        }
-        if (DATA_URI.test(filePath)) {
-          return `url(${maybeQuote}${filePath}${maybeQuote})`;
-        }
-        if (filePath[0] === '/') {
-          return `url(${maybeQuote}${
-            extractOrigin(href) + filePath
-          }${maybeQuote})`;
-        }
-        const stack = href.split('/');
-        const parts = filePath.split('/');
-        stack.pop();
-        for (const part of parts) {
-          if (part === '.') {
-            continue;
-          } else if (part === '..') {
-            stack.pop();
-          } else {
-            stack.push(part);
-          }
-        }
-        return `url(${maybeQuote}${stack.join('/')}${maybeQuote})`;
-      },
-    );
-  }
-
-  function extractOrigin(url: string): string {
-    let origin = '';
-    if (url.indexOf('//') > -1) {
-      origin = url.split('/').slice(0, 3).join('/');
-    } else {
-      origin = url.split('/')[0];
-    }
-    origin = origin.split('?')[0];
-    return origin;
-  }
-}
+}
\ No newline at end of file
diff --git a/tracker/tracker/src/main/app/observer/observer.ts b/tracker/tracker/src/main/app/observer/observer.ts
index 1a7da668a..733eeeb13 100644
--- a/tracker/tracker/src/main/app/observer/observer.ts
+++ b/tracker/tracker/src/main/app/observer/observer.ts
@@ -184,15 +184,6 @@ enum RecentsType {
   Changed,
 }
 
-interface Options {
-  inlineRemoteCss?: boolean,
-  disableSprites?: boolean,
-  inlinerOptions?: {
-    forceFetch?: boolean,
-    forcePlain?: boolean,
-  }
-}
-
 export default abstract class Observer {
   private readonly observer: MutationObserver
   private readonly commited: Array<boolean | undefined> = []
@@ -207,16 +198,14 @@ export default abstract class Observer {
    * can (and will) affect performance
    * */
   private readonly inlineRemoteCss: boolean = false
-  private readonly inlinerOptions: Options['inlinerOptions'] = undefined
   private readonly domParser = new DOMParser()
   constructor(
     protected readonly app: App,
-    protected readonly isTopContext: boolean = false,
-    options: Options = {},
+    protected readonly isTopContext = false,
+    options: { disableSprites: boolean, inlineRemoteCss: boolean } = { disableSprites: false, inlineRemoteCss: false },
   ) {
-    this.disableSprites = Boolean(options.disableSprites)
-    this.inlineRemoteCss = Boolean(options.inlineRemoteCss)
-    this.inlinerOptions = options.inlinerOptions
+    this.disableSprites = options.disableSprites
+    this.inlineRemoteCss = options.inlineRemoteCss
     this.observer = createMutationObserver(
       this.app.safe((mutations) => {
         for (const mutation of mutations) {
@@ -379,23 +368,15 @@ export default abstract class Observer {
         setTimeout(() => {
           inlineRemoteCss(
             // @ts-ignore
-            node,
-            id,
-            this.app.getBaseHref(),
-            nextID,
+          node,
+          id,
+          this.app.getBaseHref(),
+          nextID,
             (id: number, cssText: string, index: number, baseHref: string) => {
               this.app.send(AdoptedSSInsertRuleURLBased(id, cssText, index, baseHref))
             },
             (sheetId: number, ownerId: number) => {
               this.app.send(AdoptedSSAddOwner(sheetId, ownerId))
-            },
-            this.inlinerOptions?.forceFetch,
-            this.inlinerOptions?.forcePlain,
-            (cssText: string, fakeTextId: number) => {
-              this.app.send(CreateTextNode(fakeTextId, id, 0))
-              setTimeout(() => {
-                this.app.send(SetNodeData(fakeTextId, cssText))
-              }, 10)
             }
           )
         }, 0)
diff --git a/tracker/tracker/src/main/app/observer/top_observer.ts b/tracker/tracker/src/main/app/observer/top_observer.ts
index 6049288ca..f7fdea6fc 100644
--- a/tracker/tracker/src/main/app/observer/top_observer.ts
+++ b/tracker/tracker/src/main/app/observer/top_observer.ts
@@ -20,10 +20,6 @@ export interface Options {
    * @default false
    * */
   inlineRemoteCss: boolean
-  inlinerOptions?: {
-    forceFetch?: boolean,
-    forcePlain?: boolean,
-  }
 }
 
 type Context = Window & typeof globalThis
@@ -99,7 +95,7 @@ export default class TopObserver extends Observer {
           this.app.debug.info('doc already observed for', id)
           return
         }
-        const observer = new IFrameObserver(this.app, false, {})
+        const observer = new IFrameObserver(this.app)
         this.iframeObservers.set(iframe, observer)
         this.docObservers.set(currentDoc, observer)
         this.iframeObserversArr.push(observer)
diff --git a/tracker/tracker/src/tests/cssInliner.test.ts b/tracker/tracker/src/tests/cssInliner.test.ts
index 99b7f5924..0e6936032 100644
--- a/tracker/tracker/src/tests/cssInliner.test.ts
+++ b/tracker/tracker/src/tests/cssInliner.test.ts
@@ -53,7 +53,7 @@ describe('inlineRemoteCss', () => {
     jest.runAllTimers();
     expect(mockNextID).toHaveBeenCalled();
     expect(mockAdoptedSSAddOwner).toHaveBeenCalledWith(123, 456);
-    expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(123, 'body { color: red; }', 0, 'http://example.com');
+    expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(456, 'body { color: red; }', 0, 'http://example.com');
     jest.useRealTimers();
   });
 
@@ -73,12 +73,6 @@ describe('inlineRemoteCss', () => {
   test('should handle successful fetch and process CSS text', async () => {
     mockNode.href = 'http://example.com/style.css';
     const mockSheet = {};
-    global.fetch.mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: true,
-        text: () => Promise.resolve('body { color: red; }')
-      })
-    );
     Object.defineProperty(mockSheet, 'cssRules', {
       get: () => { throw new Error('CORS error'); }
     });
@@ -86,26 +80,18 @@ describe('inlineRemoteCss', () => {
       get: () => mockSheet
     });
     inlineRemoteCss(mockNode, 456,  'http://example.com',mockNextID,mockAdoptedSSInsertRuleURLBased, mockAdoptedSSAddOwner);
-    await new Promise(resolve => setTimeout(resolve, 0));
+    await new Promise(process.nextTick);
     expect(mockNextID).toHaveBeenCalled();
     expect(mockAdoptedSSAddOwner).toHaveBeenCalledWith(123, 456);
     expect(mockAdoptedSSInsertRuleURLBased).toHaveBeenCalledWith(123, 'body { color: red; }', 0, 'http://example.com');
-    jest.useRealTimers();
   });
 
-  test('should fetch CSS if node has no sheet but has href', async () => {
+  test('should fetch CSS if node has no sheet but has href', () => {
     Object.defineProperty(mockNode, 'sheet', {
       get: () => null
     });
-    global.fetch.mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: true,
-        text: () => Promise.resolve('body { color: red; }')
-      })
-    );
     mockNode.href = 'http://example.com/style.css';
     inlineRemoteCss(mockNode, 456,  'http://example.com',mockNextID,mockAdoptedSSInsertRuleURLBased, mockAdoptedSSAddOwner);
-    await new Promise(resolve => setTimeout(resolve, 0));
     expect(global.fetch).toHaveBeenCalledWith('http://example.com/style.css');
   });