mirror: reflect all internal api usages

zendive · zendive · commit b96546dce19c · 2025-08-02T21:40:14.000+03:00
+ add CSP to rIC
+ minor changes

Signed-off-by: 🕷️ &lt;3756473+zendive@users.noreply.github.com&gt;
diff --git a/Makefile b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: clean install dev valid test test-dev prod serve_mirror
+.PHONY: clean install dev valid test test-dev prod mirror-dev mirror-serve
 .DEFAULT_GOAL := dev
 DENO_DEV := NODE_ENV=development deno run --watch
 DENO_PROD := NODE_ENV=production deno run
@@ -43,7 +43,12 @@ prod: test
 
 	tree -Dis $(BUILD_DIR) *.zip | grep -E "api|zip"
 
-serve_mirror:
+mirror-dev:
+	@echo "🎗 reminder to stop \"make dev\""
+	rm -rf $(BUILD_DIR)
+	$(DENO_DEV) $(DENO_OPTIONS) $(BUILD_SCRIPT) --mirror
+
+mirror-serve:
 	@echo "🎗 reminder to switch extension off"
 	@echo "served at: http://localhost:5555/mirror.html"
 	python3 -m http.server 5555 -d ./public/
diff --git a/build.ts b/build.ts
@@ -5,6 +5,7 @@ import manifest from './manifest.json' with { type: 'json' };
 
 const nodeEnv = Deno.env.get('NODE_ENV');
 const isProd = nodeEnv === 'production';
+const isMirror = Deno.args.includes('--mirror');
 const buildOptions: BuildOptions = {
   plugins: [
     esbuildSvelte({
@@ -25,6 +26,7 @@ const buildOptions: BuildOptions = {
     __app_name__: `"browser-api-monitor@${manifest.version}"`,
     __app_version__: `"${manifest.version}"`,
     __home_page__: `"${manifest.homepage_url}"`,
+    __mirror__: `${isMirror}`,
   },
   bundle: true,
   platform: 'browser',
diff --git a/src/api-monitor-cs-main.ts b/src/api-monitor-cs-main.ts
@@ -16,7 +16,7 @@ let originalMetrics: TTelemetry | null;
 let currentMetrics: TTelemetry | null;
 const eachSecond = new Timer(
   { type: ETimer.TIMEOUT, delay: 1e3 },
-  () => {
+  function apiMonitorEachSecond() {
     onEachSecond();
     eachSecond.start();
   },
@@ -56,7 +56,8 @@ windowListen((o) => {
   if (EMsg.TELEMETRY_ACKNOWLEDGED === o.msg) {
     tick.delay = adjustTelemetryDelay(o.timeOfCollection);
     originalMetrics = currentMetrics;
-    eachSecond.isPending() && tick.start();
+    const shouldRun = eachSecond.isPending() && !tick.isPending();
+    shouldRun && tick.start();
   } else if (EMsg.CONFIG === o.msg) {
     applyConfig(o.config);
     originalMetrics = currentMetrics = null;
diff --git a/src/api/communication.ts b/src/api/communication.ts
@@ -21,7 +21,7 @@ import type { TSession } from './storage/storage.session.ts';
 
 let port: chrome.runtime.Port | null = null;
 export function portPost(payload: TMsgOptions) {
-  if (!chrome.runtime) {
+  if (__mirror__) {
     windowPost(payload);
     return;
   }
@@ -72,7 +72,9 @@ export function runtimePost(payload: TMsgOptions) {
 }
 
 export function runtimeListen(callback: (payload: TMsgOptions) => void) {
-  if (chrome?.runtime) {
+  if (__mirror__) {
+    windowListen(callback);
+  } else {
     chrome.runtime.onMessage.addListener(
       (payload, sender: chrome.runtime.MessageSender, sendResponse) => {
         if (
@@ -83,8 +85,6 @@ export function runtimeListen(callback: (payload: TMsgOptions) => void) {
         }
       },
     );
-  } else {
-    windowListen(callback);
   }
 }
 
diff --git a/src/api/const.ts b/src/api/const.ts
@@ -25,6 +25,10 @@ export const requestAnimationFrame = /*@__PURE__*/ globalThis
   .requestAnimationFrame.bind(globalThis);
 export const cancelAnimationFrame = /*@__PURE__*/ globalThis
   .cancelAnimationFrame.bind(globalThis);
+export const requestIdleCallback = /*@__PURE__*/ globalThis
+  .requestIdleCallback.bind(globalThis);
+export const cancelIdleCallback = /*@__PURE__*/ globalThis
+  .cancelIdleCallback.bind(globalThis);
 export const nativeYield = /*@__PURE__*/ globalThis.scheduler.yield.bind(
   globalThis.scheduler,
 );
diff --git a/src/api/time.ts b/src/api/time.ts
@@ -1,9 +1,11 @@
 import {
   cancelAnimationFrame,
+  cancelIdleCallback,
   clearTimeout,
   nativePostTask,
   NOOP,
   requestAnimationFrame,
+  requestIdleCallback,
   setTimeout,
   TELEMETRY_FREQUENCY_30PS,
   TIME_60FPS_MS,
@@ -119,6 +121,39 @@ type TTimerOptions =
   | TTimerIdle
   | TTimerTask;
 
+const timerApi = __mirror__
+  ? {
+    get setTimeout() {
+      return globalThis.setTimeout;
+    },
+    get clearTimeout() {
+      return globalThis.clearTimeout;
+    },
+    get requestAnimationFrame() {
+      return globalThis.requestAnimationFrame;
+    },
+    get cancelAnimationFrame() {
+      return globalThis.cancelAnimationFrame;
+    },
+    get requestIdleCallback() {
+      return globalThis.requestIdleCallback;
+    },
+    get cancelIdleCallback() {
+      return globalThis.cancelIdleCallback;
+    },
+    get postTask() {
+      return globalThis.scheduler.postTask;
+    },
+  }
+  : {
+    setTimeout,
+    clearTimeout,
+    requestAnimationFrame,
+    cancelAnimationFrame,
+    requestIdleCallback,
+    cancelIdleCallback,
+    postTask: nativePostTask,
+  } as const;
 /**
  * A unification of ways to delay a callback execution
  * in javascript event-loop
@@ -158,27 +193,28 @@ export class Timer {
     if (
       this.#options.type === ETimer.TIMEOUT
     ) {
-      this.#handler = setTimeout(() => {
+      this.#handler = timerApi.setTimeout(() => {
         this.#handler = 0;
         this.trigger(...args);
       }, this.delay);
     } else if (
       this.#options.type === ETimer.ANIMATION
     ) {
-      this.#handler = requestAnimationFrame((...argsAF) => {
+      this.#handler = timerApi.requestAnimationFrame((...argsAF) => {
         this.#handler = 0;
         this.trigger(...[...args, ...argsAF]);
       });
     } else if (this.#options.type === ETimer.IDLE) {
-      this.#handler = requestIdleCallback((...argsIC) => {
+      this.#handler = timerApi.requestIdleCallback((...argsIC) => {
         this.#handler = 0;
         this.trigger(...[...args, ...argsIC]);
       }, { timeout: this.delay });
     } else if (this.#options.type === ETimer.TASK) {
       this.#abortController = new AbortController();
-      nativePostTask(() => {
-        this.#abortController = null;
+      timerApi.postTask(() => {
         this.trigger(...args);
+        // nullifying AFTER the trigger to allow use-case when aborting from the callback
+        this.#abortController = null;
       }, {
         delay: this.delay,
         signal: this.#abortController.signal,
@@ -203,13 +239,13 @@ export class Timer {
 
   stop() {
     if (this.#options.type === ETimer.TIMEOUT) {
-      this.#handler && clearTimeout(this.#handler);
+      this.#handler && timerApi.clearTimeout(this.#handler);
       this.#handler = 0;
     } else if (this.#options.type === ETimer.ANIMATION) {
-      this.#handler && cancelAnimationFrame(this.#handler);
+      this.#handler && timerApi.cancelAnimationFrame(this.#handler);
       this.#handler = 0;
     } else if (this.#options.type === ETimer.IDLE) {
-      this.#handler && cancelIdleCallback(this.#handler);
+      this.#handler && timerApi.cancelIdleCallback(this.#handler);
       this.#handler = 0;
     } else if (this.#options.type === ETimer.TASK) {
       this.#abortController && this.#abortController.abort();
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -5,4 +5,5 @@ declare global {
   let __app_name__: string;
   let __app_version__: string;
   let __home_page__: string;
+  let __mirror__: boolean;
 }
diff --git a/src/view/ConnectionAlert.svelte b/src/view/ConnectionAlert.svelte
@@ -3,6 +3,7 @@
   import { ETimer, Timer } from '../api/time.ts';
   import Alert from './shared/Alert.svelte';
   import {
+    CONTEXT_ERROR,
     INJECTION_ALERT_TIMEOUT,
     UPDATE_SENSOR_INTERVAL,
   } from './shared/const.ts';
@@ -36,7 +37,7 @@
   });
 
   onMount(() => {
-    if (chrome.runtime) {
+    if (!__mirror__) {
       pingContentScript();
       extensionUpdateSensor.start();
     }
@@ -60,7 +61,7 @@
    */
   function whenUpdateDetected(callback: () => void) {
     loadLocalStorage().catch((e: Error) => {
-      if (!e || e.message !== 'Extension context invalidated.') {
+      if (!e || e.message !== CONTEXT_ERROR) {
         return;
       }
       try {
diff --git a/src/view/menu/SummaryBarItem.svelte b/src/view/menu/SummaryBarItem.svelte
@@ -54,8 +54,10 @@
       if (stopAnimate.isPending()) {
         stopAnimate.stop();
       }
-      el.classList.add(AFTER_SCROLL_ANIMATION_CLASSNAME);
-      stopAnimate.start(el);
+      void requestAnimationFrame(() => {
+        el.classList.add(AFTER_SCROLL_ANIMATION_CLASSNAME);
+        stopAnimate.start(el);
+      });
     }
   }
 </script>
diff --git a/src/view/panels/idle/IdleCallbackRequestHistory.svelte b/src/view/panels/idle/IdleCallbackRequestHistory.svelte
@@ -120,6 +120,7 @@
           eventChangeSorting={onChangeSort}
         ><span class="icon -facts"></span></ColumnSortable>
       </th>
+      <th class="ta-c" title="Calls per second">CPS</th>
       <th class="ta-c">
         <ColumnSortable
           field="calls"
@@ -142,7 +143,7 @@
           currentField={sortRequestIdleCallback.field}
           currentFieldOrder={sortRequestIdleCallback.order}
           eventChangeSorting={onChangeSort}
-        >Delay</ColumnSortable>
+        >Timeout</ColumnSortable>
       </th>
       <th class="ta-c">
         <ColumnSortable
@@ -171,6 +172,7 @@
         <td class="ta-c">
           <CellFacts facts={metric.facts} factsMap={RicFacts} />
         </td>
+        <td class="ta-c">{metric.cps || undefined}</td>
         <td class="ta-c">
           <CellCancelable
             calls={metric.calls}
diff --git a/src/view/shared/const.ts b/src/view/shared/const.ts
@@ -8,3 +8,4 @@ export enum ESelfTimeDisplayMode {
   DEFAULT,
   STATS,
 }
+export const CONTEXT_ERROR = 'Extension context invalidated.';
diff --git a/src/wrapper/AnimationWrapper.ts b/src/wrapper/AnimationWrapper.ts
@@ -46,7 +46,7 @@ export class AnimationWrapper {
     requestAnimationFrame: requestAnimationFrame,
     cancelAnimationFrame: cancelAnimationFrame,
   };
-  animationCallsMap = new Map</*traceId*/ string, /*calls*/ number>();
+  #callsMap = new Map</*traceId*/ string, /*calls*/ number>();
   onlineAnimationFrameLookup: Map</*handler*/ number, /*traceId*/ string> =
     new Map();
   rafHistory: Map</*traceId*/ string, TRequestAnimationFrameHistory> =
@@ -152,10 +152,10 @@ export class AnimationWrapper {
     if (!panel.wrap || !panel.visible) return;
 
     for (const [, rafRecord] of this.rafHistory) {
-      const prevCalls = this.animationCallsMap.get(rafRecord.traceId) || 0;
+      const prevCalls = this.#callsMap.get(rafRecord.traceId) || 0;
       rafRecord.cps = rafRecord.calls - prevCalls;
 
-      this.animationCallsMap.set(rafRecord.traceId, rafRecord.calls);
+      this.#callsMap.set(rafRecord.traceId, rafRecord.calls);
     }
   }
 
diff --git a/src/wrapper/IdleWrapper.ts b/src/wrapper/IdleWrapper.ts
@@ -7,11 +7,17 @@ import {
 } from './shared/TraceUtil.ts';
 import { traceUtil, validHandler, validTimerDelay } from './shared/util.ts';
 import { Fact, type TFact } from './shared/Fact.ts';
-import { TAG_BAD_DELAY, TAG_BAD_HANDLER } from '../api/const.ts';
+import {
+  cancelIdleCallback,
+  requestIdleCallback,
+  TAG_BAD_DELAY,
+  TAG_BAD_HANDLER,
+} from '../api/const.ts';
 
 export type TRequestIdleCallbackHistory = TTraceable & {
   facts: TFact;
   calls: number;
+  cps: number;
   handler: number | undefined | string;
   delay: number | undefined | string;
   didTimeout: undefined | boolean;
@@ -26,12 +32,6 @@ export type TCancelIdleCallbackHistory = TTraceable & {
   handler: number | undefined | string;
 };
 
-const requestIdleCallback = /*@__PURE__*/ globalThis.requestIdleCallback.bind(
-  globalThis,
-);
-const cancelIdleCallback = /*@__PURE__*/ globalThis.cancelIdleCallback.bind(
-  globalThis,
-);
 export const RicFact = /*@__PURE__*/ (() => ({
   BAD_DELAY: Fact.define(1 << 0),
 } as const))();
@@ -68,6 +68,7 @@ export class IdleWrapper {
     requestIdleCallback: requestIdleCallback,
     cancelIdleCallback: cancelIdleCallback,
   };
+  #callsMap = new Map</*traceId*/ string, /*calls*/ number>();
 
   constructor() {
   }
@@ -124,6 +125,7 @@ export class IdleWrapper {
         traceDomain: traceUtil.getTraceDomain(callstack.trace[0]),
         facts,
         calls: 1,
+        cps: 1,
         handler,
         didTimeout: undefined,
         delay,
@@ -187,6 +189,17 @@ export class IdleWrapper {
     }
   }
 
+  updateCallsPerSecond(panel: TPanel) {
+    if (!panel.wrap || !panel.visible) return;
+
+    for (const [, ricRecord] of this.ricHistory) {
+      const prevCalls = this.#callsMap.get(ricRecord.traceId) || 0;
+      ricRecord.cps = ricRecord.calls - prevCalls;
+
+      this.#callsMap.set(ricRecord.traceId, ricRecord.calls);
+    }
+  }
+
   wrapRequestIdleCallback() {
     globalThis.requestIdleCallback = function requestIdleCallback(
       this: IdleWrapper,
diff --git a/src/wrapper/SchedulerWrapper.ts b/src/wrapper/SchedulerWrapper.ts
@@ -44,7 +44,7 @@ export const PostTaskFacts = /*@__PURE__*/ (() =>
 export class SchedulerWrapper {
   #yieldMap: Map</*traceId*/ string, IYield> = new Map();
   #postTaskMap: Map</*traceId*/ string, IPostTask> = new Map();
-  #callsPerSecond: Map</*traceId*/ string, /*calls*/ number> = new Map();
+  #callsMap: Map</*traceId*/ string, /*calls*/ number> = new Map();
 
   wrapYield() {
     globalThis.scheduler.yield = function (
@@ -165,17 +165,17 @@ export class SchedulerWrapper {
     if (!panel.wrap || !panel.visible) return;
 
     for (const [_, methodMetric] of this.#yieldMap) {
-      const prevCalls = this.#callsPerSecond.get(methodMetric.traceId) || 0;
+      const prevCalls = this.#callsMap.get(methodMetric.traceId) || 0;
 
       methodMetric.cps = methodMetric.calls - prevCalls;
-      this.#callsPerSecond.set(methodMetric.traceId, methodMetric.calls);
+      this.#callsMap.set(methodMetric.traceId, methodMetric.calls);
     }
 
     for (const [_, methodMetric] of this.#postTaskMap) {
-      const prevCalls = this.#callsPerSecond.get(methodMetric.traceId) || 0;
+      const prevCalls = this.#callsMap.get(methodMetric.traceId) || 0;
 
       methodMetric.eventsCps = methodMetric.calls - prevCalls;
-      this.#callsPerSecond.set(methodMetric.traceId, methodMetric.calls);
+      this.#callsMap.set(methodMetric.traceId, methodMetric.calls);
     }
   }
 
diff --git a/src/wrapper/WorkerWrapper.ts b/src/wrapper/WorkerWrapper.ts
diff --git a/src/wrapper/Wrapper.ts b/src/wrapper/Wrapper.ts
diff --git a/tests/browserPolyfill.ts b/tests/browserPolyfill.ts

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ import type { TSession } from './storage/storage.session.ts';`
`21`	`21`
`22`	`22`	`let port: chrome.runtime.Port \| null = null;`
`23`	`23`	`export function portPost(payload: TMsgOptions) {`
`24`		`- if (!chrome.runtime) {`
	`24`	`+ if (__mirror__) {`
`25`	`25`	`windowPost(payload);`
`26`	`26`	`return;`
`27`	`27`	`}`
`@@ -72,7 +72,9 @@ export function runtimePost(payload: TMsgOptions) {`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`export function runtimeListen(callback: (payload: TMsgOptions) => void) {`
`75`		`- if (chrome?.runtime) {`
	`75`	`+ if (__mirror__) {`
	`76`	`+ windowListen(callback);`
	`77`	`+ } else {`
`76`	`78`	`chrome.runtime.onMessage.addListener(`
`77`	`79`	`(payload, sender: chrome.runtime.MessageSender, sendResponse) => {`
`78`	`80`	`if (`
`@@ -83,8 +85,6 @@ export function runtimeListen(callback: (payload: TMsgOptions) => void) {`
`83`	`85`	`}`
`84`	`86`	`},`
`85`	`87`	`);`
`86`		`- } else {`
`87`		`- windowListen(callback);`
`88`	`88`	`}`
`89`	`89`	`}`
`90`	`90`
Original file line number	Diff line number	Diff line change
`@@ -5,4 +5,5 @@ declare global {`
`5`	`5`	`let __app_name__: string;`
`6`	`6`	`let __app_version__: string;`
`7`	`7`	`let __home_page__: string;`
	`8`	`+ let __mirror__: boolean;`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -54,8 +54,10 @@`
`54`	`54`	`if (stopAnimate.isPending()) {`
`55`	`55`	`stopAnimate.stop();`
`56`	`56`	`}`
`57`		`- el.classList.add(AFTER_SCROLL_ANIMATION_CLASSNAME);`
`58`		`- stopAnimate.start(el);`
	`57`	`+ void requestAnimationFrame(() => {`
	`58`	`+ el.classList.add(AFTER_SCROLL_ANIMATION_CLASSNAME);`
	`59`	`+ stopAnimate.start(el);`
	`60`	`+ });`
`59`	`61`	`}`
`60`	`62`	`}`
`61`	`63`	`</script>`