add SchedulerWrapper.ts

Signed-off-by: 🕷️ <[email protected]>

Author: zendive

README.md

@@ -44,6 +44,9 @@ To assess Web Application implementation correctness and expedite issues discove
     - attempt to add already added listener with `addEventListener`.
     - attempt to remove unknown listener with `removeEventListener`.
 
+- Monitor `scheduler.yield` and `scheduler.postTask`.
+  - Calls, delay, priority, aborts, self-time metrics.
+
 - Monitor mounted `video` and `audio` media elements in DOM.
   - Present control panel with basic media functions.
   - Show media events and number of times they have been fired.
@@ -65,6 +68,9 @@ To assess Web Application implementation correctness and expedite issues discove
 - `requestIdleCallback`
   - `cancelIdleCallback`
 - `Worker`
+- `scheduler`
+  - 'postTask'
+  - `yield`
 
 </details>
 <details>

deno.json

@@ -40,6 +40,7 @@
 
     "@std/expect": "jsr:@std/expect@^1.0.16",
     "@std/testing": "jsr:@std/testing@^1.0.15",
-    "happy-dom": "npm:[email protected]"
+    "happy-dom": "npm:[email protected]",
+    "scheduler-polyfill": "npm:[email protected]"
   }
 }

deno.lock

@@ -52,6 +52,8 @@ windowListen((o) => {
     eachSecond.isPending() && tick.start();
   } else if (EMsg.CONFIG === o.msg) {
     applyConfig(o.config);
+    originalMetrics = currentMetrics = null;
+    tick.trigger();
   } else if (EMsg.START_OBSERVE === o.msg) {
     originalMetrics = currentMetrics = null;
     tick.trigger();

src/api-monitor-cs-main.ts

@@ -16,6 +16,7 @@ type TPanelKey =
   | 'callsSummary'
   | 'media'
   | 'worker'
+  | 'scheduler'
   | 'eval'
   | 'activeTimers'
   | 'setTimeout'
@@ -45,6 +46,7 @@ export const DEFAULT_PANELS: TPanel[] = [
   { key: 'media', label: 'Media', visible: true, wrap: null },
   { key: 'activeTimers', label: 'Active Timers', visible: true, wrap: null },
   { key: 'worker', label: 'Worker', visible: true, wrap: true },
+  { key: 'scheduler', label: 'Scheduler', visible: true, wrap: true },
   { key: 'eval', label: 'eval', visible: true, wrap: false },
   { key: 'setTimeout', label: 'setTimeout', visible: true, wrap: true },
   {

src/api/storage/storage.local.ts

@@ -1,4 +1,4 @@
-export const CONFIG_VERSION = '2025-07-24';
+export const CONFIG_VERSION = '2025-07-28';
 export const SESSION_VERSION = '2025-04-25';
 
 export const local = /*@__PURE__*/ (() => {

src/api/storage/storage.ts

@@ -25,6 +25,22 @@
       count={ts.telemetry.worker.totalOnline}
     />
 
+    <SummaryBarItem
+      label="s.pT"
+      tooltip="scheduler.postTask"
+      navSelector="scheduler.postTask"
+      panel={panels.scheduler}
+      count={ts.telemetry.scheduler.postTask?.length || 0}
+    />
+
+    <SummaryBarItem
+      label="s.y"
+      tooltip="scheduler.yield"
+      navSelector="scheduler.yield"
+      panel={panels.scheduler}
+      count={ts.telemetry.scheduler.yield?.length || 0}
+    />
+
     <SummaryBarItem
       label="eval"
       navSelector="Eval"

src/view/menu/SummaryBar.svelte

@@ -10,13 +10,15 @@
   import Online from './online/Online.svelte';
   import { useTelemetryState } from '../../state/telemetry.state.svelte.ts';
   import Worker from './worker/Worker.svelte';
+  import Scheduler from './scheduler/Scheduler.svelte';
 
   const ts = useTelemetryState();
 </script>
 
 {#if ts.telemetry}
   <Media media={ts.telemetry.media} />
   <Worker telemetry={ts.telemetry.worker} />
+  <Scheduler telemetry={ts.telemetry.scheduler} />
   <Eval evalHistory={ts.telemetry.evalHistory} />
   <Online onlineTimers={ts.telemetry.onlineTimers} />
 

src/view/panels/Panels.svelte

@@ -125,7 +125,7 @@
           eventChangeSorting={onChangeSort}
         >Handler</ColumnSortable>
       </th>
-      <th>
+      <th class="ta-c">
         <ColumnSortable
           field="online"
           currentField={sortRequestAnimationFrame.field}

src/view/panels/animation/AnimationRequestHistory.svelte

@@ -144,7 +144,7 @@
           eventChangeSorting={onChangeSort}
         >Delay</ColumnSortable>
       </th>
-      <th>
+      <th class="ta-c">
         <ColumnSortable
           field="online"
           currentField={sortRequestIdleCallback.field}