diff --git a/tracker/tracker/CHANGELOG.md b/tracker/tracker/CHANGELOG.md index 434eb35e6..925de6ab1 100644 --- a/tracker/tracker/CHANGELOG.md +++ b/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 - inlinerOptions?: { - forceFetch?: boolean, - forcePlain?: boolean, - } +inlineCss: 0 | 1 | 2 | 3 + +/** +* export enum InlineCssMode { +* 0 = None, +* 1 = inlineRemoteCss, +* 2 = inlineRemoteCss + forceFetch +* 3 = inlineRemoteCss + forceFetch + forcePlain +* } +* */ ``` ## 16.1.4 diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts index 89de2be40..26ddd1b0a 100644 --- a/tracker/tracker/src/main/app/index.ts +++ b/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 { 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__) diff --git a/tracker/tracker/src/main/app/observer/top_observer.ts b/tracker/tracker/src/main/app/observer/top_observer.ts index f7fdea6fc..65f9754ac 100644 --- a/tracker/tracker/src/main/app/observer/top_observer.ts +++ b/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, )