alert about selfTime metric that exceeds 1/5 less of the 1/60 frame time

Author: zendive

public/global.css

@@ -11,6 +11,7 @@
   --text-zebra: 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%);
 
   --small-icon-size: 0.6875rem;
 }

src/api/const.ts

@@ -8,6 +8,7 @@ export const MAX_TRAFFIC_DURATION_BEFORE_AUTOPAUSE = 2e3; // ms
 export const FRAME_1of60 = 0.0166666666667; // ms
 export const VARIABLE_ANIMATION_THROTTLE = 3500; // eye blinking average frequency
 export const CALLED_ABORTED_TOOLTIP = '<called>-<aborted>/<abort-locations>';
+export const SELF_TIME_MAX_GOOD = 13.333333333333332; // ms
 
 // store native functions
 export const setTimeout = /*@__PURE__*/ window.setTimeout.bind(window);

src/view/components/AnimationRequestHistory.svelte

@@ -7,11 +7,11 @@
     ESortOrder,
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
-  import { Stopper } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
   import SortableColumn from './SortableColumn.svelte';
+  import FrameSensitiveTime from './FrameSensitiveTime.svelte';
 
   let {
     metrics,
@@ -82,7 +82,7 @@
         <td class="wb-all">
           <Trace trace={metric.trace} traceId={metric.traceId} />
         </td>
-        <td class="ta-r">{Stopper.toString(metric.selfTime)}</td>
+        <td class="ta-r"><FrameSensitiveTime value={metric.selfTime} /></td>
         <td class="ta-c"><Variable value={metric.calls} /></td>
         <td class="ta-c"><Variable value={metric.handler} /></td>
       </tr>

src/view/components/EvalMetrics.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { TEvalHistory } from '../../api/wrappers.ts';
-  import { Stopper } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
+  import FrameSensitiveTime from './FrameSensitiveTime.svelte';
 
   let { metrics }: { metrics: TEvalHistory[] } = $props();
 
@@ -40,7 +40,9 @@
         <td class="wb-all">
           <Trace trace={metric.trace} traceId={metric.traceId} />
         </td>
-        <td class="ta-r">{Stopper.toString(metric.selfTime)}</td>
+        <td class="ta-r">
+          <FrameSensitiveTime value={metric.selfTime} />
+        </td>
         <td class="ta-c">
           <Variable value={metric.calls} />
         </td>

src/view/components/FrameSensitiveTime.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { SELF_TIME_MAX_GOOD } from 'src/api/const.ts';
+  import { Stopper } from 'src/api/time';
+
+  let { value }: { value: number | null } = $props();
+  let isBad = $derived.by(() => {
+    return value && value > SELF_TIME_MAX_GOOD;
+  });
+</script>
+
+<span class:shouldMark={isBad}>
+  {Stopper.toString(value)}
+</span>
+
+<style lang="scss">
+  .shouldMark {
+    color: var(--error);
+    font-weight: bold;
+  }
+</style>

src/view/components/IdleCallbackRequestHistory.svelte

@@ -11,14 +11,15 @@
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
   import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
-  import { delayTitle, Stopper } from '../../api/time.ts';
+  import { delayTitle } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
   import IdleCallbackCancelHistory from './IdleCallbackCancelHistory.svelte';
   import Dialog from './Dialog.svelte';
   import Alert from './Alert.svelte';
   import SortableColumn from './SortableColumn.svelte';
+  import FrameSensitiveTime from './FrameSensitiveTime.svelte';
 
   let {
     metrics,
@@ -156,7 +157,9 @@
           ><Trace trace={metric.trace} traceId={metric.traceId} /></td
         >
         <td class="ta-c">{metric.didTimeout}</td>
-        <td class="ta-r">{Stopper.toString(metric.selfTime)}</td>
+        <td class="ta-r">
+          <FrameSensitiveTime value={metric.selfTime} />
+        </td>
         <td class="ta-c">
           <Variable value={metric.calls} />{#if metric.canceledCounter}-<a
               role="button"

src/view/components/TimersSetHistory.svelte

@@ -11,14 +11,15 @@
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
   import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
-  import { delayTitle, Stopper } from '../../api/time.ts';
+  import { delayTitle } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
   import SortableColumn from './SortableColumn.svelte';
   import TimersClearHistory from './TimersClearHistory.svelte';
   import Dialog from './Dialog.svelte';
   import Alert from './Alert.svelte';
+  import FrameSensitiveTime from './FrameSensitiveTime.svelte';
 
   let {
     metrics,
@@ -162,7 +163,9 @@
         <td class="wb-all">
           <Trace trace={metric.trace} traceId={metric.traceId} />
         </td>
-        <td class="ta-r">{Stopper.toString(metric.selfTime)}</td>
+        <td class="ta-r">
+          <FrameSensitiveTime value={metric.selfTime} />
+        </td>
         <td class="ta-c">
           <Variable value={metric.calls} />{#if metric.canceledCounter}-<a
               role="button"