zendive · zendive · May 2, 2025 · Apr 12, 2025 · Apr 12, 2025 · Apr 12, 2025
diff --git a/README.md b/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>
@@ -49,8 +48,8 @@ If you're web developer and want to assess implementation correctness - this too
 ### Build requirements
 
 - OS: Linux
-- Node: 22.12.0 (LTS)
-- [Deno](https://docs.deno.com/runtime/getting_started/installation/) 2.2.8
+- Node: 22.14.0 (LTS)
+- [Deno](https://docs.deno.com/runtime/getting_started/installation/) 2.2.12
 
 ### Build instructions
 

diff --git a/build.ts b/build.ts
@@ -33,7 +33,7 @@ const buildOptions: BuildOptions = {
   minify: isProd,
   sourcemap: false,
   treeShaking: true,
-  logLevel: 'warning',
+  logLevel: isProd ? 'warning' : 'debug',
 };
 
 if (isProd) {

diff --git a/deno.json b/deno.json
@@ -27,18 +27,20 @@
     "include": [
       "src/",
       "tests/",
+      "public/*.html",
+      "public/*.css",
       "build.ts",
       "*.json"
     ]
   },
   "imports": {
     "esbuild": "https://deno.land/x/esbuild@v0.25.2/mod.js",
     "@luca/esbuild-deno-loader": "jsr:@luca/esbuild-deno-loader@0.11.1",
-    "esbuild-svelte": "npm:esbuild-svelte@0.9.0",
+    "esbuild-svelte": "npm:esbuild-svelte@0.9.2",
     "svelte-preprocess": "npm:svelte-preprocess@6.0.3",
 
-    "@std/expect": "jsr:@std/expect@1.0.14",
-    "@std/testing": "jsr:@std/testing@1.0.10",
+    "@std/expect": "jsr:@std/expect@^1.0.15",
+    "@std/testing": "jsr:@std/testing@^1.0.11",
     "happy-dom": "npm:happy-dom@17.4.4"
   }
 }
diff --git a/deno.lock b/deno.lock
diff --git a/manifest.json b/manifest.json
@@ -1,11 +1,11 @@
 {
-  "version": "1.1.0",
+  "version": "1.2.0",
   "name": "API Monitor",
   "manifest_version": 3,
   "description": "Show active intervals, scheduled timeouts, animation frames, idle callbacks, eval invocations, media events and properties",
   "minimum_chrome_version": "135.0",
   "homepage_url": "https://github.com/zendive/browser-api-monitor",
-  "permissions": ["storage"],
+  "permissions": ["storage", "power"],
   "host_permissions": ["*://*/*"],
   "devtools_page": "public/api-monitor-devtools.html",
   "icons": {

diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
   "type": "module",
   "devDependencies": {
-    "@types/chrome": "0.0.313",
+    "@types/chrome": "0.0.317",
     "@types/deno": "2.2.0",
-    "sass": "1.86.3",
-    "sv": "0.8.0",
-    "svelte": "5.25.7",
-    "svelte-check": "4.1.5",
+    "sass": "1.87.0",
+    "sv": "0.8.3",
+    "svelte": "5.28.2",
+    "svelte-check": "4.1.6",
     "typescript": "5.8.3"
   },
   "dependencies": {
-    "@noble/hashes": "1.7.1",
+    "@noble/hashes": "1.8.0",
     "jsondiffpatch": "0.7.3"
   }
 }
diff --git a/public/api-monitor-devtools-panel.html b/public/api-monitor-devtools-panel.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/public/api-monitor-devtools.html b/public/api-monitor-devtools.html
@@ -1,7 +1,8 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <title>DevtoolsTab</title>
     <script src="./build/api-monitor-devtools.js"></script>
   </head>
   <body></body>

diff --git a/public/global.css b/public/global.css
@@ -11,7 +11,7 @@
   --text-trace: light-dark(rgb(30% 30% 30%), rgb(70% 70% 70%));
   --link: light-dark(rgb(0% 0% 0%), rgb(100% 100% 100%));
   --link-visited-bg: rgb(79 189 36 / 0.24);
-  --error: rgb(100% 0% 0%);
+  --attention: rgb(100% 0% 0%);
 
   --small-icon-size: 0.6875rem;
 }
@@ -30,8 +30,15 @@ body {
   padding: 0;
   box-sizing: border-box;
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, 'Helvetica Neue', sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    'Helvetica Neue',
+    sans-serif;
 }
 
 a {
@@ -73,6 +80,9 @@ th,
 .ta-r {
   text-align: right;
 }
+.tc-attention {
+  color: var(--attention);
+}
 .t-zebra:where(:nth-child(even)) {
   background-color: var(--bg-table-even);
 }
@@ -103,6 +113,15 @@ th,
   margin-right: 0;
 }
 
+.sticky-header {
+  /* @NOTE: unstable in Chrome v135 */
+  /*position: sticky;*/
+  /*top: 0;*/
+  /*z-index: 1;*/
+  height: 1rem;
+  vertical-align: middle;
+}
+
 .icon {
   display: inline-block;
   width: 1rem;
@@ -173,9 +192,15 @@ th .icon {
 .icon.-trace-extension {
   mask-image: url(img/trace-extension.svg);
 }
+.icon.-trace-webpack {
+  mask-image: url(img/trace-webpack.svg);
+}
 .icon.-breakpoint {
   mask-image: url(img/breakpoint.svg);
 }
 .icon.-bypass {
   mask-image: url(img/bypass.svg);
 }
+.icon.-facts {
+  mask-image: url(img/facts.svg);
+}
diff --git a/public/img/breakpoint.svg b/public/img/breakpoint.svg
diff --git a/public/img/facts.svg b/public/img/facts.svg
diff --git a/public/img/trace-webpack.svg b/public/img/trace-webpack.svg
diff --git a/src/api-monitor-cs-isolated.ts b/src/api-monitor-cs-isolated.ts
@@ -5,17 +5,34 @@ import {
   windowListen,
   windowPost,
 } from './api/communication.ts';
-import { getSettings, onSettingsChange } from './api/settings.ts';
+import { loadLocalStorage, onLocalStorageChange } from './api/storage.local.ts';
+import {
+  loadSessionStorage,
+  onSessionStorageChange,
+} from './api/storage.session.ts';
+
+Promise.all([loadLocalStorage(), loadSessionStorage()]).then(
+  ([config, session]) => {
+    windowPost({ msg: EMsg.CONFIG, config });
+    windowPost({ msg: EMsg.SESSION, session });
+
+    if (config.devtoolsPanelShown && !config.paused) {
+      windowPost({ msg: EMsg.START_OBSERVE });
+    }
 
-getSettings().then((settings) => {
-  windowPost({ msg: EMsg.SETTINGS, settings: settings });
+    portListen(windowPost);
+    windowListen(runtimePost);
 
-  onSettingsChange((newValue) => {
-    windowPost({ msg: EMsg.SETTINGS, settings: newValue });
-  });
-});
+    onLocalStorageChange((newValue) => {
+      windowPost({ msg: EMsg.CONFIG, config: newValue });
+    });
+    onSessionStorageChange((newValue) => {
+      windowPost({ msg: EMsg.SESSION, session: newValue });
+    });
 
-portListen(windowPost);
-windowListen(runtimePost);
+    runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });
 
-runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });
+    __development__ &&
+      console.log('api-monitor-cs-isolated.ts', performance.now());
+  },
+);
diff --git a/src/api-monitor-cs-main.ts b/src/api-monitor-cs-main.ts
@@ -1,14 +1,14 @@
 import { EMsg, windowListen, windowPost } from './api/communication.ts';
-import { IS_DEV } from './api/env.ts';
 import { TELEMETRY_FREQUENCY_1PS } from './api/const.ts';
 import { adjustTelemetryDelay, Timer } from './api/time.ts';
 import {
+  applyConfig,
+  applySession,
   cleanHistory,
   collectMetrics,
   onEachSecond,
   runMediaCommand,
   runTimerCommand,
-  setSettings,
   type TTelemetry,
 } from './wrapper/Wrapper.ts';
 import diff from './api/diff.ts';
@@ -52,11 +52,9 @@ windowListen((o) => {
     originalMetrics = currentMetrics;
     eachSecond.isPending() && tick.start();
   } else if (
-    o.msg === EMsg.SETTINGS &&
-    o.settings &&
-    typeof o.settings === 'object'
+    o.msg === EMsg.CONFIG && o.config && typeof o.config === 'object'
   ) {
-    setSettings(o.settings);
+    applyConfig(o.config);
   } else if (o.msg === EMsg.START_OBSERVE) {
     originalMetrics = currentMetrics = null;
     tick.trigger();
@@ -73,7 +71,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) {
+    applySession(o.session);
   }
 });
 
-IS_DEV && console.debug('cs-main.ts');
+__development__ && console.debug('api-monitor-cs-main.ts', performance.now());
diff --git a/src/api-monitor-devtools-panel.ts b/src/api-monitor-devtools-panel.ts
@@ -1,4 +1,9 @@
 import { mount } from 'svelte';
 import App from './view/App.svelte';
+import { initConfigState } from './state/config.state.svelte.ts';
+import { onHidePanel } from './devtoolsPanelUtil.ts';
 
-mount(App, { target: document.body });
+initConfigState().then(() => {
+  mount(App, { target: document.body });
+  globalThis.addEventListener('beforeunload', onHidePanel);
+});
diff --git a/src/api-monitor-devtools.ts b/src/api-monitor-devtools.ts
@@ -1,5 +1,7 @@
 import { EMsg, portPost } from './api/communication.ts';
-import { getSettings, setSettings } from './api/settings.ts';
+import { loadLocalStorage, saveLocalStorage } from './api/storage.local.ts';
+import { enableSessionInContentScript } from './api/storage.session.ts';
+import { onHidePanel } from './devtoolsPanelUtil.ts';
 
 // tabId may be null if user opened the devtools of the devtools
 if (chrome.devtools.inspectedWindow.tabId !== null) {
@@ -9,16 +11,19 @@ if (chrome.devtools.inspectedWindow.tabId !== null) {
     '/public/api-monitor-devtools-panel.html',
     (panel) => {
       panel.onShown.addListener(async () => {
-        const settings = await getSettings();
-        if (!settings.paused) {
+        const config = await loadLocalStorage();
+        if (!config.paused) {
           portPost({ msg: EMsg.START_OBSERVE });
         }
-        setSettings({ devtoolsPanelShown: true });
-      });
-      panel.onHidden.addListener(() => {
-        portPost({ msg: EMsg.STOP_OBSERVE });
-        setSettings({ devtoolsPanelShown: false });
+        if (config.keepAwake) {
+          chrome.power.requestKeepAwake('display');
+        }
+        await saveLocalStorage({ devtoolsPanelShown: true });
       });
+
+      panel.onHidden.addListener(onHidePanel);
     },
   );
+
+  enableSessionInContentScript();
 }