From e4d75467efc8fc6b347326086272e28ce764322e Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 28 Apr 2025 16:59:21 +0200
Subject: [PATCH] tracker: 16.2.1, rename inliner options for clarity

---
 tracker/tracker/src/main/app/index.ts         | 63 ++-----------------
 .../tracker/src/main/app/observer/observer.ts |  2 +-
 .../src/main/app/observer/top_observer.ts     | 58 +++++++++++++++--
 3 files changed, 57 insertions(+), 66 deletions(-)

diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts
index 55642065d..561333505 100644
--- a/tracker/tracker/src/main/app/index.ts
+++ b/tracker/tracker/src/main/app/index.ts
@@ -41,20 +41,12 @@ import type { Options as SessOptions } from './session.js'
 import Session from './session.js'
 import Ticker from './ticker.js'
 import { MaintainerOptions } from './nodes/maintainer.js'
+export { InlineCssMode } from './observer/top_observer.js'
 
 interface TypedWorker extends Omit<Worker, 'postMessage'> {
   postMessage(data: ToWorkerData): void
 }
 
-interface InlineOptions {
-  inlineRemoteCss: boolean
-  inlinerOptions: {
-    forceFetch: boolean,
-    forcePlain: boolean
-    ,
-  },
-}
-
 // TODO: Unify and clearly describe options logic
 export interface StartOptions {
   userID?: string
@@ -216,44 +208,6 @@ function getTimezone() {
 }
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms))
 
-function getInlineOptions(mode: InlineCssMode): InlineOptions {
-  switch (mode) {
-    case InlineCssMode.RemoteOnly:
-      return {
-        inlineRemoteCss: true,
-        inlinerOptions: {
-          forceFetch: false,
-          forcePlain: false,
-        },
-      }
-    case InlineCssMode.RemoteWithForceFetch:
-      return {
-        inlineRemoteCss: true,
-        inlinerOptions: {
-          forceFetch: true,
-          forcePlain: false,
-        },
-      };
-    case InlineCssMode.All:
-      return {
-        inlineRemoteCss: true,
-        inlinerOptions: {
-          forceFetch: true,
-          forcePlain: true,
-        },
-      };
-    case InlineCssMode.None:
-    default:
-      return {
-        inlineRemoteCss: false,
-        inlinerOptions: {
-          forceFetch: false,
-          forcePlain: false,
-        },
-      };
-  }
-}
-
 const proto = {
   // ask if there are any tabs alive
   ask: 'never-gonna-give-you-up',
@@ -293,7 +247,7 @@ export default class App {
   private readonly startCallbacks: Array<StartCallback> = []
   private readonly stopCallbacks: Array<() => any> = []
   private readonly commitCallbacks: Array<CommitCallback> = []
-  public readonly options: AppOptions
+  public readonly options: Options
   public readonly networkOptions?: NetworkOptions
   private readonly revID: string
   private activityState: ActivityState = ActivityState.NotActive
@@ -305,7 +259,7 @@ export default class App {
   public socketMode = false
   private compressionThreshold = 24 * 1000
   private readonly bc: BroadcastChannel | null = null
-  private readonly contextId
+  private readonly contextId: string
   private canvasRecorder: CanvasRecorder | null = null
   private uxtManager: UserTestManager
   private conditionsManager: ConditionsManager | null = null
@@ -320,13 +274,6 @@ export default class App {
     'usability-test': true,
   }
   private emptyBatchCounter = 0
-  private inlineCss: {
-    inlineRemoteCss: boolean
-    inlinerOptions: {
-      forceFetch: boolean
-      forcePlain: boolean
-    }
-  }
 
   constructor(
     projectKey: string,
@@ -338,8 +285,6 @@ export default class App {
     this.contextId = Math.random().toString(36).slice(2)
     this.projectKey = projectKey
 
-    this.inlineCss = getInlineOptions(options.inlineCss ?? 0)
-
     if (
       Object.keys(options).findIndex((k) => ['fixedCanvasScaling', 'disableCanvas'].includes(k)) !==
       -1
@@ -419,7 +364,7 @@ export default class App {
       forceNgOff: Boolean(options.forceNgOff),
       maintainer: this.options.nodes?.maintainer,
     })
-    this.observer = new Observer({ app: this, options: { ...options, ...this.inlineCss } })
+    this.observer = new Observer({ app: this, options })
     this.ticker = new Ticker(this)
     this.ticker.attach(() => this.commit())
     this.debug = new Logger(this.options.__debug__)
diff --git a/tracker/tracker/src/main/app/observer/observer.ts b/tracker/tracker/src/main/app/observer/observer.ts
index ade273c52..06d92107a 100644
--- a/tracker/tracker/src/main/app/observer/observer.ts
+++ b/tracker/tracker/src/main/app/observer/observer.ts
@@ -185,8 +185,8 @@ enum RecentsType {
 }
 
 interface Options {
-  inlineRemoteCss?: boolean,
   disableSprites?: boolean,
+  inlineRemoteCss?: boolean,
   inlinerOptions?: {
     forceFetch?: boolean,
     forcePlain?: boolean,
diff --git a/tracker/tracker/src/main/app/observer/top_observer.ts b/tracker/tracker/src/main/app/observer/top_observer.ts
index d31e7814f..cca5cd0d1 100644
--- a/tracker/tracker/src/main/app/observer/top_observer.ts
+++ b/tracker/tracker/src/main/app/observer/top_observer.ts
@@ -10,10 +10,52 @@ import App from '../index.js'
 import { IN_BROWSER, hasOpenreplayAttribute, canAccessIframe } from '../../utils.js'
 
 export enum InlineCssMode {
-  None = 0,
-  RemoteOnly = 1,
-  RemoteWithForceFetch = 2,
-  All = 3,
+  /** default behavior -- will parse and cache the css file on backend */
+  Disabled = 0,
+  /** will attempt to record the linked css file as AdoptedStyleSheet object */
+  Inline = 1,
+  /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+  InlineFetched = 2,
+  /** will fetch the file, then save it as plain css inside <style> node */
+  PlainFetched = 3,
+}
+
+function getInlineOptions(mode: InlineCssMode) {
+  switch (mode) {
+    case InlineCssMode.Inline:
+      return {
+        inlineRemoteCss: true,
+        inlinerOptions: {
+          forceFetch: false,
+          forcePlain: false,
+        },
+      }
+    case InlineCssMode.InlineFetched:
+      return {
+        inlineRemoteCss: true,
+        inlinerOptions: {
+          forceFetch: true,
+          forcePlain: false,
+        },
+      };
+    case InlineCssMode.PlainFetched:
+      return {
+        inlineRemoteCss: true,
+        inlinerOptions: {
+          forceFetch: true,
+          forcePlain: true,
+        },
+      };
+    case InlineCssMode.Disabled:
+    default:
+      return {
+        inlineRemoteCss: false,
+        inlinerOptions: {
+          forceFetch: false,
+          forcePlain: false,
+        },
+      };
+  }
 }
 
 export interface Options {
@@ -24,7 +66,7 @@ export interface Options {
    * we will try to parse the css text instead and send it as css rules set
    * can (and probably will) affect performance to certain degree,
    * especially if the css itself is crossdomain
-   * @default false
+   * @default InlineCssMode.None = 0
    * */
   inlineCss: InlineCssMode;
 }
@@ -48,7 +90,11 @@ export default class TopObserver extends Observer {
       },
       params.options,
     )
-    super(params.app, true, opts)
+    const observerOptions = {
+      disableSprites: opts.disableSprites,
+      ...getInlineOptions(opts.inlineCss)
+    }
+    super(params.app, true, observerOptions)
     this.app = params.app
     this.options = opts
     // IFrames