Patch frontend inline css (#3344)

* add inlineCss enum

* updated changelog

tracker/tracker/CHANGELOG.md

@@ -3,11 +3,16 @@
 - css batching and inlining via (!plain mode will cause fake text nodes in style tags occupying 99*10^6 id space, can conflict with crossdomain iframes!)
 
 ```
-inlineRemoteCss: boolean
+inlineCss: 0 | 1 | 2 | 3
-  inlinerOptions?: {
+
-    forceFetch?: boolean,
+/**
-    forcePlain?: boolean,
+* export enum InlineCssMode {
-  }
+*  0 = None,
+*  1 = inlineRemoteCss,
+*  2 = inlineRemoteCss + forceFetch
+*  3 = inlineRemoteCss + forceFetch + forcePlain
+* }
+* */
 ```
 
 ## 16.1.4

tracker/tracker/src/main/app/index.ts

@@ -34,7 +34,7 @@ import Message, {
 } from './messages.gen.js'
 import Nodes from './nodes/index.js'
 import type { Options as ObserverOptions } from './observer/top_observer.js'
-import Observer from './observer/top_observer.js'
+import Observer, { InlineCssMode } from './observer/top_observer.js'
 import type { Options as SanitizerOptions } from './sanitizer.js'
 import Sanitizer from './sanitizer.js'
 import type { Options as SessOptions } from './session.js'
@@ -46,6 +46,15 @@ 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
@@ -207,6 +216,44 @@ 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',
@@ -273,6 +320,13 @@ export default class App {
     'usability-test': true,
   }
   private emptyBatchCounter = 0
+  private inlineCss: {
+    inlineRemoteCss: boolean
+    inlinerOptions: {
+      forceFetch: boolean
+      forcePlain: boolean
+    }
+  }
 
   constructor(
     projectKey: string,
@@ -284,6 +338,8 @@ 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
@@ -326,7 +382,6 @@ export default class App {
       disableCanvas: false,
       captureIFrames: true,
       disableSprites: false,
-      inlineRemoteCss: true,
       obscureTextEmails: true,
       obscureTextNumbers: false,
       crossdomain: {
@@ -339,6 +394,7 @@ export default class App {
         useAnimationFrame: false,
       },
       forceNgOff: false,
+      inlineCss: 0,
     }
     this.options = simpleMerge(defaultOptions, options)
 
@@ -363,7 +419,7 @@ export default class App {
       forceNgOff: Boolean(options.forceNgOff),
       maintainer: this.options.nodes?.maintainer,
     })
-    this.observer = new Observer({ app: this, options })
+    this.observer = new Observer({ app: this, options: { ...options, ...this.inlineCss } })
     this.ticker = new Ticker(this)
     this.ticker.attach(() => this.commit())
     this.debug = new Logger(this.options.__debug__)

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

@@ -9,6 +9,13 @@ import { CreateDocument } from '../messages.gen.js'
 import App from '../index.js'
 import { IN_BROWSER, hasOpenreplayAttribute, canAccessIframe } from '../../utils.js'
 
+export enum InlineCssMode {
+  None = 0,
+  RemoteOnly = 1,
+  RemoteWithForceFetch = 2,
+  All = 3,
+}
+
 export interface Options {
   captureIFrames: boolean
   disableSprites: boolean
@@ -19,7 +26,7 @@ export interface Options {
    * especially if the css itself is crossdomain
    * @default false
    * */
-  inlineRemoteCss: boolean
+  inlineCss: InlineCssMode;
 }
 
 type Context = Window & typeof globalThis
@@ -37,7 +44,7 @@ export default class TopObserver extends Observer {
       {
         captureIFrames: true,
         disableSprites: false,
-        inlineRemoteCss: false,
+        inlineCss: 0,
       },
       params.options,
     )