refactor panel column sortings

Author: zendive

jest/tests/wrappers.test.ts

@@ -14,7 +14,7 @@ import {
   TAG_EVAL_RETURN_SET_INTERVAL,
   TRACE_ERROR_MESSAGE,
 } from '../../src/api/const.ts';
-import { WrapperCallstackType } from '../../src/api/settings.ts';
+import { EWrapperCallstackType } from '../../src/api/settings.ts';
 
 const TEST_STACK = `Error: ${TRACE_ERROR_MESSAGE}
         at <anonymous>:1:1
@@ -391,7 +391,7 @@ describe('wrappers', () => {
     const standard = [
       { name: 'call2', link: 'https://example2.com/bundle3.js:4:5' },
     ];
-    wrapper.setCallstackType(WrapperCallstackType.SHORT);
+    wrapper.setCallstackType(EWrapperCallstackType.SHORT);
     const { trace } = wrapper.createCallstack(
       <Error>{ stack: TEST_STACK },
       null

src/api-monitor-cs-main.ts

@@ -12,7 +12,10 @@ import {
   type TMediaTelemetry,
 } from './api/mediaMonitor.ts';
 import { Wrapper, TimerType, type TWrapperMetrics } from './api/wrappers.ts';
-import { DEFAULT_PANELS, panelsArrayToVisibilityMap } from './api/settings.ts';
+import {
+  panelsArrayToVisibilityMap,
+  type TPanelVisibilityMap,
+} from './api/settings.ts';
 
 export interface TMetrics {
   mediaMetrics: TMediaTelemetry;
@@ -38,7 +41,7 @@ const wrapRequestIdleCallbackOnce = callingOnce(() =>
 const wrapCancelIdleCallbackOnce = callingOnce(() =>
   wrapper.wrapCancelIdleCallback()
 );
-let panels = panelsArrayToVisibilityMap(DEFAULT_PANELS);
+let panels: TPanelVisibilityMap;
 const eachSecond = new Timer(
   () => {
     meetMedia(document.querySelectorAll('video,audio'));

src/api/comparator.ts

@@ -1,12 +1,8 @@
 import type { TOnlineTimerMetrics } from './wrappers.ts';
-import { SortOrder, type TSortOrder } from './settings.ts';
+import { ESortOrder } from './settings.ts';
 
 // descending sort by `handler` field
-function compareIfEqual<T, Key extends keyof T>(
-  field: Key,
-  first: T,
-  second: T
-) {
+function compareIfEqual<T>(field: keyof T, first: T, second: T) {
   if (field === 'calls' || field === 'delay') {
     // @ts-ignore
     return second['handler'] > first['handler'] ? 1 : -1;
@@ -15,10 +11,7 @@ function compareIfEqual<T, Key extends keyof T>(
   }
 }
 
-export function compareByFieldOrder<T, Key extends keyof T>(
-  field: Key,
-  order: TSortOrder
-) {
+export function compareByFieldOrder<T>(field: keyof T, order: ESortOrder) {
   return function (first: T, second: T) {
     let a = first[field] || 0;
     let b = second[field] || 0;
@@ -27,13 +20,13 @@ export function compareByFieldOrder<T, Key extends keyof T>(
       (typeof a === 'number' && typeof b === 'number') ||
       (typeof a === 'string' && typeof b === 'string')
     ) {
-      if (order === SortOrder.DESCENDING) {
+      if (order === ESortOrder.DESCENDING) {
         return b > a ? 1 : b < a ? -1 : compareIfEqual(field, first, second);
       } else {
         return a > b ? 1 : a < b ? -1 : compareIfEqual(field, first, second);
       }
     } else {
-      return typeof (order === SortOrder.DESCENDING ? b : a) === 'number'
+      return typeof (order === ESortOrder.DESCENDING ? b : a) === 'number'
         ? -1
         : 1;
     }

src/api/mediaMonitor.ts

@@ -13,14 +13,13 @@ type TMediaModel = {
   metrics: TMediaMetrics;
   eventListener: (e: Event) => void;
 };
-export const TMediaType = {
-  VIDEO: 0,
-  AUDIO: 1,
-} as const;
-type TMediaTypeKeys = (typeof TMediaType)[keyof typeof TMediaType];
+export enum EMediaType {
+  VIDEO,
+  AUDIO,
+}
 export type TMediaMetrics = {
   mediaId: string;
-  type: TMediaTypeKeys;
+  type: EMediaType;
   events: { [key: string]: number };
   props: { [key: string]: unknown };
 };
@@ -168,7 +167,7 @@ function startMonitorMedia(mediaId: string, el: HTMLMediaElement): TMediaModel {
     metrics: {
       mediaId,
       type:
-        el instanceof HTMLVideoElement ? TMediaType.VIDEO : TMediaType.AUDIO,
+        el instanceof HTMLVideoElement ? EMediaType.VIDEO : EMediaType.AUDIO,
       events,
       props,
     },

src/api/settings.ts

@@ -1,3 +1,12 @@
+import type {
+  TCancelAnimationFrameHistory,
+  TCancelIdleCallbackHistory,
+  TClearTimerHistory,
+  TRequestAnimationFrameHistory,
+  TRequestIdleCallbackHistory,
+  TSetTimerHistory,
+} from './wrappers.ts';
+
 type TPanelKey =
   | 'eval'
   | 'media'
@@ -11,11 +20,6 @@ type TPanelKey =
   | 'requestIdleCallback'
   | 'cancelIdleCallback';
 
-export type THistorySortField =
-  (typeof HistorySortField)[keyof typeof HistorySortField];
-export type TWrapperCallstackType =
-  (typeof WrapperCallstackType)[keyof typeof WrapperCallstackType];
-export type TSortOrder = (typeof SortOrder)[keyof typeof SortOrder];
 export type TPanelVisibilityMap = {
   [K in TPanelKey]: TSettingsPanel;
 };
@@ -26,7 +30,7 @@ export type TSettingsPanel = {
   wrap: boolean | null;
 };
 export type TSettings = typeof DEFAULT_SETTINGS;
-export type TSettingsProperty = Partial<typeof DEFAULT_SETTINGS>;
+export type TSettingsProperty = Partial<TSettings>;
 
 const SETTINGS_VERSION = '1.0.7';
 export const DEFAULT_PANELS: TSettingsPanel[] = [
@@ -78,35 +82,52 @@ export const DEFAULT_PANELS: TSettingsPanel[] = [
   },
 ];
 
-export const WrapperCallstackType = {
-  FULL: 0,
-  SHORT: 1,
-} as const;
+export enum EWrapperCallstackType {
+  FULL,
+  SHORT,
+}
+export enum ESortOrder {
+  ASCENDING,
+  DESCENDING,
+}
 
-export const HistorySortField = {
-  calls: 'calls',
-  handler: 'handler',
-  delay: 'delay',
-  selfTime: 'selfTime',
+export const DEFAULT_SORT_SET_TIMERS = {
+  field: <keyof TSetTimerHistory>'calls',
+  order: <ESortOrder>ESortOrder.DESCENDING,
 } as const;
-
-export const SortOrder = {
-  ASCENDING: 0,
-  DESCENDING: 1,
+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_SORT = {
-  timersHistoryField: HistorySortField.delay as THistorySortField,
-  timersHistoryOrder: SortOrder.DESCENDING as TSortOrder,
-};
 
 export const DEFAULT_SETTINGS = {
   panels: DEFAULT_PANELS,
-  sort: DEFAULT_SORT,
+  sortSetTimers: DEFAULT_SORT_SET_TIMERS,
+  sortClearTimers: DEFAULT_SORT_CLEAR_TIMERS,
+  sortRequestAnimationFrame: DEFAULT_SORT_RAF,
+  sortCancelAnimationFrame: DEFAULT_SORT_CAF,
+  sortRequestIdleCallback: DEFAULT_SORT_RIC,
+  sortCancelIdleCallback: DEFAULT_SORT_CIC,
   paused: false,
   devtoolsPanelShown: false,
   traceForDebug: <string | null>null,
-  wrapperCallstackType: <TWrapperCallstackType>WrapperCallstackType.FULL,
+  wrapperCallstackType: EWrapperCallstackType.SHORT,
 };
 
 export function panelsArrayToVisibilityMap(panels: TSettingsPanel[]) {
@@ -116,7 +137,7 @@ export function panelsArrayToVisibilityMap(panels: TSettingsPanel[]) {
   );
 }
 
-export async function getSettings(): Promise<typeof DEFAULT_SETTINGS> {
+export async function getSettings(): Promise<TSettings> {
   let store = await chrome.storage.local.get([SETTINGS_VERSION]);
   const isEmpty = !Object.keys(store).length;
 

src/api/wrappers.ts

@@ -19,11 +19,7 @@ import {
   TAG_EVAL_RETURN_SET_INTERVAL,
 } from './const.ts';
 import { TAG_EXCEPTION, cloneObjectSafely } from './clone.ts';
-import {
-  WrapperCallstackType,
-  type TWrapperCallstackType,
-  type TPanelVisibilityMap,
-} from './settings.ts';
+import { EWrapperCallstackType, type TPanelVisibilityMap } from './settings.ts';
 import { hashString } from './hash.ts';
 import { trim2microsecond } from './time.ts';
 
@@ -185,7 +181,7 @@ export class Wrapper {
   };
   selfTraceLink = '';
   #traceForDebug: string | null = null;
-  #callstackType: TWrapperCallstackType = WrapperCallstackType.FULL;
+  #callstackType: EWrapperCallstackType = EWrapperCallstackType.FULL;
 
   constructor() {
     this.#initSelfTrace();
@@ -225,7 +221,7 @@ export class Wrapper {
     this.#traceForDebug = traceId;
   }
 
-  setCallstackType(type: TWrapperCallstackType) {
+  setCallstackType(type: EWrapperCallstackType) {
     this.#callstackType = type;
   }
 
@@ -920,7 +916,7 @@ export class Wrapper {
   }
 
   createCallstack(e: Error, uniqueTrait?: unknown): TCallstack {
-    if (this.#callstackType === WrapperCallstackType.FULL) {
+    if (this.#callstackType === EWrapperCallstackType.FULL) {
       return this.#createFullCallstack(e, uniqueTrait);
     } else {
       return this.#createShortCallstack(e, uniqueTrait);

src/view/components/AnimationCancelHistory.svelte

@@ -1,44 +1,40 @@
 <script lang="ts">
   import type { TCancelAnimationFrameHistory } from '../../api/wrappers.ts';
   import {
-    DEFAULT_SORT,
+    DEFAULT_SORT_CAF,
     getSettings,
     setSettings,
-    HistorySortField,
-    type THistorySortField,
-    type TSortOrder,
+    ESortOrder,
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
-  import TimersHistoryCellSort from './TimersHistoryCellSort.svelte';
+  import SortableColumn from './SortableColumn.svelte';
 
   let {
     metrics,
     caption = '',
   }: { metrics: TCancelAnimationFrameHistory[]; caption?: string } = $props();
-  let field = $state(DEFAULT_SORT.timersHistoryField);
-  let order = $state(DEFAULT_SORT.timersHistoryOrder);
+  let sortField = $state(DEFAULT_SORT_CAF.field);
+  let sortOrder = $state(DEFAULT_SORT_CAF.order);
   let sortedMetrics = $derived.by(() =>
-    metrics.sort(
-      compareByFieldOrder(<keyof TCancelAnimationFrameHistory>field, order)
-    )
+    metrics.sort(compareByFieldOrder(sortField, sortOrder))
   );
 
   getSettings().then((settings) => {
-    field = settings.sort.timersHistoryField;
-    order = settings.sort.timersHistoryOrder;
+    sortField = settings.sortCancelAnimationFrame.field;
+    sortOrder = settings.sortCancelAnimationFrame.order;
   });
 
-  function onChangeSort(_field: THistorySortField, _order: TSortOrder) {
-    field = _field;
-    order = _order;
+  function onChangeSort(_field: string, _order: ESortOrder) {
+    sortField = <keyof TCancelAnimationFrameHistory>_field;
+    sortOrder = _order;
 
     setSettings({
-      sort: {
-        timersHistoryField: $state.snapshot(_field),
-        timersHistoryOrder: $state.snapshot(_order),
+      sortCancelAnimationFrame: {
+        field: $state.snapshot(sortField),
+        order: $state.snapshot(sortOrder),
       },
     });
   }
@@ -54,19 +50,19 @@
       <th class="shaft"></th>
       <th class="w-full">Callstack</th>
       <th class="ta-c">
-        <TimersHistoryCellSort
-          field={HistorySortField.calls}
-          currentField={field}
-          currentFieldOrder={order}
-          eventChangeSorting={onChangeSort}>Called</TimersHistoryCellSort
+        <SortableColumn
+          field="calls"
+          currentField={sortField}
+          currentFieldOrder={sortOrder}
+          eventChangeSorting={onChangeSort}>Called</SortableColumn
         >
       </th>
       <th class="ta-c">
-        <TimersHistoryCellSort
-          field={HistorySortField.handler}
-          currentField={field}
-          currentFieldOrder={order}
-          eventChangeSorting={onChangeSort}>Handler</TimersHistoryCellSort
+        <SortableColumn
+          field="handler"
+          currentField={sortField}
+          currentFieldOrder={sortOrder}
+          eventChangeSorting={onChangeSort}>Handler</SortableColumn
         >
       </th>
     </tr>