refactor bypass/breackpoint storage to allow more than one traceId's per session

Author: zendive

README.md

@@ -34,9 +34,8 @@ If you're web developer and want to assess implementation correctness - this too
 - requestIdleCallback
 - cancelIdleCallback
 
-##### Note:
-
-- while measuring performance of your code – consider disabling this extension as it may affect the results.
+> [!NOTE]
+> While measuring performance of your code – consider disabling this extension as it may affect the results.
 
 <details>
   <summary> <strong>Example</strong> </summary>

deno.json

@@ -36,7 +36,7 @@
   "imports": {
     "esbuild": "https://deno.land/x/[email protected]/mod.js",
     "@luca/esbuild-deno-loader": "jsr:@luca/[email protected]",
-    "esbuild-svelte": "npm:[email protected].0",
+    "esbuild-svelte": "npm:[email protected].2",
     "svelte-preprocess": "npm:[email protected]",
 
     "@std/expect": "jsr:@std/expect@^1.0.15",

deno.lock

@@ -6,16 +6,27 @@ import {
   windowPost,
 } from './api/communication.ts';
 import { getSettings, onSettingsChange } from './api/settings.ts';
+import { getSession, onSessionChange } from './api/session.ts';
 
 getSettings().then((settings) => {
-  windowPost({ msg: EMsg.SETTINGS, settings: settings });
+  windowPost({ msg: EMsg.SETTINGS, settings });
 
   onSettingsChange((newValue) => {
     windowPost({ msg: EMsg.SETTINGS, settings: newValue });
   });
 });
 
+getSession().then((session) => {
+  windowPost({ msg: EMsg.SESSION, session });
+
+  onSessionChange((newValue) => {
+    windowPost({ msg: EMsg.SESSION, session: newValue });
+  });
+});
+
 portListen(windowPost);
 windowListen(runtimePost);
 
 runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });
+
+__development__ && console.log('api-monitor-cs-isolated.ts');

src/api-monitor-cs-isolated.ts

@@ -8,6 +8,7 @@ import {
   runMediaCommand,
   runTimerCommand,
   setSettings,
+  setTracePoints,
   type TTelemetry,
 } from './wrapper/Wrapper.ts';
 import diff from './api/diff.ts';
@@ -72,7 +73,9 @@ windowListen((o) => {
     runTimerCommand(o.type, o.handler);
   } else if (o.msg === EMsg.MEDIA_COMMAND) {
     runMediaCommand(o.mediaId, o.cmd, o.property);
+  } else if (o.msg === EMsg.SESSION) {
+    setTracePoints(o.session);
   }
 });
 
-__development__ && console.debug('cs-main.ts');
+__development__ && console.debug('api-monitor-cs-main.ts');

src/api-monitor-cs-main.ts

@@ -1,5 +1,6 @@
 import { EMsg, portPost } from './api/communication.ts';
 import { getSettings, setSettings } from './api/settings.ts';
+import { enableSessionInContentScript } from './api/session.ts';
 
 // tabId may be null if user opened the devtools of the devtools
 if (chrome.devtools.inspectedWindow.tabId !== null) {
@@ -21,4 +22,6 @@ if (chrome.devtools.inspectedWindow.tabId !== null) {
       });
     },
   );
+
+  enableSessionInContentScript();
 }

src/api-monitor-devtools.ts

@@ -17,6 +17,7 @@ import type { TTelemetry } from '../wrapper/Wrapper.ts';
 import type { TSettings } from './settings.ts';
 import type { TMediaCommand } from '../wrapper/MediaWrapper.ts';
 import type { Delta } from 'jsondiffpatch';
+import type { TSession } from './session.ts';
 
 let port: chrome.runtime.Port | null = null;
 export function portPost(payload: TMsgOptions) {
@@ -101,57 +102,63 @@ export enum EMsg {
   MEDIA_COMMAND,
   RESET_WRAPPER_HISTORY,
   TIMER_COMMAND,
+  SESSION,
 }
 
-export interface TMsgStartObserve {
+export interface IMsgStartObserve {
   msg: EMsg.START_OBSERVE;
 }
-export interface TMsgStopObserve {
+export interface IMsgStopObserve {
   msg: EMsg.STOP_OBSERVE;
 }
-export interface TMsgResetHistory {
+export interface IMsgResetHistory {
   msg: EMsg.RESET_WRAPPER_HISTORY;
 }
-export interface TMsgTimerCommand {
+export interface IMsgTimerCommand {
   msg: EMsg.TIMER_COMMAND;
   type: ETimerType;
   handler: number;
 }
-export interface TMsgLoaded {
+export interface IMsgLoaded {
   msg: EMsg.CONTENT_SCRIPT_LOADED;
 }
-export interface TMsgTelemetry {
+export interface IMsgTelemetry {
   msg: EMsg.TELEMETRY;
   timeOfCollection: number;
   telemetry: TTelemetry;
 }
-export interface TMsgTelemetryDelta {
+export interface IMsgTelemetryDelta {
   msg: EMsg.TELEMETRY_DELTA;
   timeOfCollection: number;
   telemetryDelta: Delta;
 }
-export interface TMsgTelemetryAcknowledged {
+export interface IMsgTelemetryAcknowledged {
   msg: EMsg.TELEMETRY_ACKNOWLEDGED;
   timeOfCollection: number;
 }
-export interface TMsgSettings {
+export interface IMsgSettings {
   msg: EMsg.SETTINGS;
   settings: TSettings;
 }
-export interface TMsgMediaCommand {
+export interface IMsgMediaCommand {
   msg: EMsg.MEDIA_COMMAND;
   mediaId: string;
   cmd: TMediaCommand;
   property?: keyof HTMLMediaElement;
 }
+export interface IMsgSession {
+  msg: EMsg.SESSION;
+  session: TSession;
+}
 export type TMsgOptions =
-  | TMsgTelemetry
-  | TMsgTelemetryDelta
-  | TMsgTelemetryAcknowledged
-  | TMsgStartObserve
-  | TMsgStopObserve
-  | TMsgLoaded
-  | TMsgResetHistory
-  | TMsgTimerCommand
-  | TMsgSettings
-  | TMsgMediaCommand;
+  | IMsgTelemetry
+  | IMsgTelemetryDelta
+  | IMsgTelemetryAcknowledged
+  | IMsgStartObserve
+  | IMsgStopObserve
+  | IMsgLoaded
+  | IMsgResetHistory
+  | IMsgTimerCommand
+  | IMsgSettings
+  | IMsgMediaCommand
+  | IMsgSession;

src/api/communication.ts

@@ -1,7 +1,7 @@
 import { sha256 } from '@noble/hashes/sha2';
 import { bytesToHex } from '@noble/hashes/utils';
 
-const HASH_STRING_LENGTH = 64;
+export const HASH_STRING_LENGTH = 64;
 
 export function hashString(str: string) {
   return (

src/api/hash.ts

@@ -0,0 +1,50 @@
+const SESSION_VERSION = '1.2.0';
+
+export type TSession = typeof DEFAULT_SESSION;
+type TSessionProperty = Partial<TSession>;
+const DEFAULT_SESSION = {
+  debug: <string[]> [],
+  bypass: <string[]> [],
+};
+
+export function enableSessionInContentScript() {
+  return chrome.storage.session.setAccessLevel({
+    accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS',
+  });
+}
+
+export async function getSession(): Promise<TSession> {
+  let store = await chrome.storage.session.get([SESSION_VERSION]);
+  const isEmpty = !Object.keys(store).length;
+
+  if (isEmpty) {
+    await chrome.storage.session.clear(); // rid off previous version settings
+    await chrome.storage.session.set({ [SESSION_VERSION]: DEFAULT_SESSION });
+    store = await chrome.storage.session.get([SESSION_VERSION]);
+  }
+
+  return store[SESSION_VERSION];
+}
+
+export async function setSession(value: TSessionProperty) {
+  const store = await chrome.storage.session.get([SESSION_VERSION]);
+
+  Object.assign(store[SESSION_VERSION], value);
+
+  return await chrome.storage.session.set(store);
+}
+
+export function onSessionChange(
+  callback: (newValue: TSession, oldValue: TSession) => void,
+) {
+  chrome.storage.session.onChanged.addListener((change) => {
+    if (
+      change && change[SESSION_VERSION] && change[SESSION_VERSION].newValue
+    ) {
+      callback(
+        change[SESSION_VERSION].newValue,
+        change[SESSION_VERSION].oldValue,
+      );
+    }
+  });
+}

src/api/session.ts

@@ -35,7 +35,7 @@ export type TSettingsPanel = {
 export type TSettings = typeof DEFAULT_SETTINGS;
 export type TSettingsProperty = Partial<TSettings>;
 
-const SETTINGS_VERSION = '1.0.7';
+const SETTINGS_VERSION = '1.2.0';
 export const DEFAULT_PANELS: TSettingsPanel[] = [
   { key: 'media', label: 'Media', visible: true, wrap: null },
   { key: 'activeTimers', label: 'Active Timers', visible: true, wrap: null },
@@ -129,8 +129,6 @@ export const DEFAULT_SETTINGS = {
   sortCancelIdleCallback: DEFAULT_SORT_CIC,
   paused: false,
   devtoolsPanelShown: false,
-  trace4Debug: <string | null> null,
-  trace4Bypass: <string | null> null,
   wrapperCallstackType: EWrapperCallstackType.SHORT,
 };