code review

Author: zendive

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;
 }
@@ -80,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);
 }
@@ -111,9 +114,10 @@ th,
 }
 
 .sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+  /* @NOTE: unstable in Chrome v135 */
+  /*position: sticky;*/
+  /*top: 0;*/
+  /*z-index: 1;*/
   height: 1rem;
   vertical-align: middle;
 }
@@ -188,6 +192,9 @@ 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);
 }

public/img/breakpoint.svg

@@ -5,24 +5,34 @@ import {
   windowListen,
   windowPost,
 } from './api/communication.ts';
-import { getSettings, onSettingsChange } from './api/settings.ts';
-import { getSession, onSessionChange } from './api/session.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 });
 
-Promise.all([getSettings(), getSession()]).then(([settings, session]) => {
-  windowPost({ msg: EMsg.SETTINGS, settings });
-  windowPost({ msg: EMsg.SESSION, session });
+    if (config.devtoolsPanelShown && !config.paused) {
+      windowPost({ msg: EMsg.START_OBSERVE });
+    }
 
-  portListen(windowPost);
-  windowListen(runtimePost);
+    portListen(windowPost);
+    windowListen(runtimePost);
 
-  onSettingsChange((newValue) => {
-    windowPost({ msg: EMsg.SETTINGS, settings: newValue });
-  });
-  onSessionChange((newValue) => {
-    windowPost({ msg: EMsg.SESSION, session: newValue });
-  });
+    onLocalStorageChange((newValue) => {
+      windowPost({ msg: EMsg.CONFIG, config: newValue });
+    });
+    onSessionStorageChange((newValue) => {
+      windowPost({ msg: EMsg.SESSION, session: newValue });
+    });
 
-  runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });
+    runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });
 
-  __development__ && console.log('api-monitor-cs-isolated.ts', performance.now());
-});
+    __development__ &&
+      console.log('api-monitor-cs-isolated.ts', performance.now());
+  },
+);

public/img/trace-webpack.svg

@@ -2,13 +2,13 @@ import { EMsg, windowListen, windowPost } from './api/communication.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,
-  setTracePoints,
   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();
@@ -74,7 +72,7 @@ windowListen((o) => {
   } else if (o.msg === EMsg.MEDIA_COMMAND) {
     runMediaCommand(o.mediaId, o.cmd, o.property);
   } else if (o.msg === EMsg.SESSION) {
-    setTracePoints(o.session);
+    applySession(o.session);
   }
 });
 

src/api-monitor-cs-isolated.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);
+});

src/api-monitor-cs-main.ts

@@ -1,6 +1,7 @@
 import { EMsg, portPost } from './api/communication.ts';
-import { getSettings, setSettings } from './api/settings.ts';
-import { enableSessionInContentScript } from './api/session.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) {
@@ -10,20 +11,17 @@ 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 });
         }
-        if (settings.keepAwake) {
+        if (config.keepAwake) {
           chrome.power.requestKeepAwake('display');
         }
-        setSettings({ devtoolsPanelShown: true });
-      });
-      panel.onHidden.addListener(() => {
-        chrome.power.releaseKeepAwake();
-        portPost({ msg: EMsg.STOP_OBSERVE });
-        setSettings({ devtoolsPanelShown: false });
+        await saveLocalStorage({ devtoolsPanelShown: true });
       });
+
+      panel.onHidden.addListener(onHidePanel);
     },
   );
 

src/api-monitor-devtools-panel.ts

@@ -14,10 +14,10 @@ import { APPLICATION_NAME } from './env.ts';
 import { ERRORS_IGNORED } from './const.ts';
 import { ETimerType } from '../wrapper/TimerWrapper.ts';
 import type { TTelemetry } from '../wrapper/Wrapper.ts';
-import type { TSettings } from './settings.ts';
+import type { TConfig } from './storage.local.ts';
 import type { TMediaCommand } from '../wrapper/MediaWrapper.ts';
 import type { Delta } from 'jsondiffpatch';
-import type { TSession } from './session.ts';
+import type { TSession } from './storage.session.ts';
 
 let port: chrome.runtime.Port | null = null;
 export function portPost(payload: TMsgOptions) {
@@ -92,7 +92,7 @@ function handleRuntimeMessageResponse(): void {
 }
 
 export enum EMsg {
-  SETTINGS,
+  CONFIG,
   CONTENT_SCRIPT_LOADED,
   START_OBSERVE,
   STOP_OBSERVE,
@@ -136,9 +136,9 @@ export interface IMsgTelemetryAcknowledged {
   msg: EMsg.TELEMETRY_ACKNOWLEDGED;
   timeOfCollection: number;
 }
-export interface IMsgSettings {
-  msg: EMsg.SETTINGS;
-  settings: TSettings;
+export interface IMsgConfig {
+  msg: EMsg.CONFIG;
+  config: TConfig;
 }
 export interface IMsgMediaCommand {
   msg: EMsg.MEDIA_COMMAND;
@@ -159,6 +159,6 @@ export type TMsgOptions =
   | IMsgLoaded
   | IMsgResetHistory
   | IMsgTimerCommand
-  | IMsgSettings
+  | IMsgConfig
   | IMsgMediaCommand
   | IMsgSession;

src/api-monitor-devtools.ts

@@ -1,5 +1,5 @@
 import type { TOnlineTimerMetrics } from '../wrapper/TimerWrapper.ts';
-import { ESortOrder } from './settings.ts';
+import { ESortOrder } from './storage.local.ts';
 
 const SEMISORTING_FIELDS = ['calls', 'delay', 'online'];
 

src/api/communication.ts

@@ -10,7 +10,7 @@ export const FRAME_1of60 = 0.0166666666667; // ms
 export const VARIABLE_ANIMATION_THROTTLE = 3500; // eye blinking average frequency
 export const SELF_TIME_MAX_GOOD = 13.333333333333332; // ms
 
-// store native functions
+// state native functions
 export const setTimeout = /*@__PURE__*/ globalThis.setTimeout.bind(globalThis);
 export const clearTimeout = /*@__PURE__*/ globalThis.clearTimeout.bind(
   globalThis,

src/api/comparator.ts

@@ -12,6 +12,7 @@ import type {
 } from '../wrapper/TimerWrapper.ts';
 
 type TPanelKey =
+  | 'callsSummary'
   | 'eval'
   | 'media'
   | 'activeTimers'
@@ -24,19 +25,20 @@ type TPanelKey =
   | 'requestIdleCallback'
   | 'cancelIdleCallback';
 export type TPanelMap = {
-  [K in TPanelKey]: TSettingsPanel;
+  [K in TPanelKey]: TPanel;
 };
-export type TSettingsPanel = {
+export type TPanel = {
   key: TPanelKey;
   label: string;
   visible: boolean;
   wrap: boolean | null;
 };
-export type TSettings = typeof DEFAULT_SETTINGS;
-export type TSettingsProperty = Partial<TSettings>;
+export type TConfig = typeof DEFAULT_CONFIG;
+export type TConfigField = Partial<TConfig>;
 
-const SETTINGS_VERSION = '1.2.0';
-export const DEFAULT_PANELS: TSettingsPanel[] = [
+const CONFIG_VERSION = '2025-04-25';
+export const DEFAULT_PANELS: TPanel[] = [
+  { key: 'callsSummary', label: 'Calls Summary', visible: false, wrap: null },
   { key: 'media', label: 'Media', visible: true, wrap: null },
   { key: 'activeTimers', label: 'Active Timers', visible: true, wrap: null },
   { key: 'eval', label: 'eval', visible: true, wrap: false },
@@ -97,29 +99,29 @@ export enum ESortOrder {
 export const DEFAULT_SORT_SET_TIMERS = {
   field: <keyof TSetTimerHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 export const DEFAULT_SORT_CLEAR_TIMERS = {
   field: <keyof TClearTimerHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 export const DEFAULT_SORT_RAF = {
   field: <keyof TRequestAnimationFrameHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 export const DEFAULT_SORT_CAF = {
   field: <keyof TCancelAnimationFrameHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 export const DEFAULT_SORT_RIC = {
   field: <keyof TRequestIdleCallbackHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 export const DEFAULT_SORT_CIC = {
   field: <keyof TCancelIdleCallbackHistory> 'calls',
   order: <ESortOrder> ESortOrder.DESCENDING,
-} as const;
+};
 
-export const DEFAULT_SETTINGS = {
+export const DEFAULT_CONFIG = {
   panels: DEFAULT_PANELS,
   sortSetTimers: DEFAULT_SORT_SET_TIMERS,
   sortClearTimers: DEFAULT_SORT_CLEAR_TIMERS,
@@ -133,44 +135,44 @@ export const DEFAULT_SETTINGS = {
   keepAwake: false,
 };
 
-export function panelsArray2Map(panels: TSettingsPanel[]) {
+export function panelsArray2Map(panels: TPanel[]) {
   return panels.reduce(
     (acc, o) => Object.assign(acc, { [o.key]: o }),
     {} as TPanelMap,
   );
 }
 
-export async function getSettings(): Promise<TSettings> {
-  let store = await chrome.storage.local.get([SETTINGS_VERSION]);
+export async function loadLocalStorage(): Promise<TConfig> {
+  let store = await chrome.storage.local.get([CONFIG_VERSION]);
   const isEmpty = !Object.keys(store).length;
 
   if (isEmpty) {
-    await chrome.storage.local.clear(); // rid off previous version settings
-    await chrome.storage.local.set({ [SETTINGS_VERSION]: DEFAULT_SETTINGS });
-    store = await chrome.storage.local.get([SETTINGS_VERSION]);
+    await chrome.storage.local.clear(); // reset previous version
+    await chrome.storage.local.set({ [CONFIG_VERSION]: DEFAULT_CONFIG });
+    store = await chrome.storage.local.get([CONFIG_VERSION]);
   }
 
-  return store[SETTINGS_VERSION];
+  return store[CONFIG_VERSION];
 }
 
-export async function setSettings(value: TSettingsProperty) {
-  const store = await chrome.storage.local.get([SETTINGS_VERSION]);
+export async function saveLocalStorage(value: TConfigField) {
+  const store = await chrome.storage.local.get([CONFIG_VERSION]);
 
-  Object.assign(store[SETTINGS_VERSION], value);
+  Object.assign(store[CONFIG_VERSION], value);
 
   return await chrome.storage.local.set(store);
 }
 
-export function onSettingsChange(
-  callback: (newValue: TSettings, oldValue: TSettings) => void,
+export function onLocalStorageChange(
+  callback: (newValue: TConfig, oldValue: TConfig) => void,
 ) {
   chrome.storage.local.onChanged.addListener((change) => {
     if (
-      change && change[SETTINGS_VERSION] && change[SETTINGS_VERSION].newValue
+      change && change[CONFIG_VERSION] && change[CONFIG_VERSION].newValue
     ) {
       callback(
-        change[SETTINGS_VERSION].newValue,
-        change[SETTINGS_VERSION].oldValue,
+        change[CONFIG_VERSION].newValue,
+        change[CONFIG_VERSION].oldValue,
       );
     }
   });