add tooltip over delay column for large numbers in short time format

Author: zendive

jest/tests/time.test.ts

@@ -59,6 +59,7 @@ describe('Stopper', () => {
     expect(Stopper.toString(999.123456)).toMatch('999ms');
     expect(Stopper.toString(5432.123456)).toMatch('5.432s');
     expect(Stopper.toString(5 * 60e3)).toMatch('0:05:00');
+    expect(Stopper.toString(987654321.0123456789)).toMatch('274:20:54');
   });
 });
 

src/api/const.ts

@@ -2,10 +2,10 @@ export const ERRORS_IGNORED = [
   'Could not establish connection. Receiving end does not exist.',
   'The message port closed before a response was received.',
 ];
-export const TELEMETRY_FREQUENCY_30PS = 33.3333333333; //MS
+export const TELEMETRY_FREQUENCY_30PS = 33.3333333333; // ms
 export const TELEMETRY_FREQUENCY_1PS = 1000; // ms
 export const MAX_TRAFFIC_DURATION_BEFORE_AUTOPAUSE = 2e3; // ms
-export const FRAME_1of60 = 0.0166666666667;
+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>';
 
@@ -99,7 +99,7 @@ export const MEDIA_ELEMENT_PROPS = [
   'videoHeight',
 ];
 
-export const MEDIA_ELEMENT_TOGGABLE_PROPS = new Set([
+export const MEDIA_ELEMENT_TOGGABLE_PROPS = /*@__PURE__*/ new Set([
   'autoplay',
   'playsInline',
   'loop',

src/api/time.ts

@@ -65,8 +65,8 @@ export class Stopper {
       return `${s}.${ms.toString().padStart(3, '0')}s`;
     }
 
-    const h = Math.trunc(msTime / 1e3 / 60 / 60);
-    const m = Math.trunc(msTime / 1e3 / 60) % 60;
+    const h = Math.trunc(msTime / 3600e3);
+    const m = Math.trunc(msTime / 60e3) % 60;
     const s = Math.trunc(msTime / 1e3) % 60;
 
     return `${h.toString().padStart(2, '0')}:${m
@@ -246,3 +246,7 @@ export class MeanAggregator {
 export function trim2microsecond(ms: number | null) {
   return ms === null ? null : Math.trunc(ms * 1e3) / 1e3;
 }
+
+export function delayTitle(delay: number | unknown): string | undefined {
+  return delay && Number(delay) > 10e3 ? Stopper.toString(delay) : undefined;
+}

src/view/components/ActiveTimers.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { TOnlineTimerMetrics } from '../../api/wrappers.ts';
   import { portPost } from '../../api/communication.ts';
+  import { delayTitle } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
@@ -33,7 +34,7 @@
 
     {#each metrics as metric (metric.handler)}
       <tr class="t-zebra">
-        <td class="ta-r">{metric.delay}</td>
+        <td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
         <td class="ta-c handler-cell">
           <span class="handler-value">{metric.handler}</span>
           <!-- svelte-ignore a11y_click_events_have_key_events -->

src/view/components/IdleCallbackRequestHistory.svelte

@@ -13,7 +13,7 @@
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
   import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
-  import { Stopper } from '../../api/time.ts';
+  import { delayTitle, Stopper } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
@@ -171,7 +171,7 @@
           {/if}
         </td>
         <td class="ta-c">{metric.handler}</td>
-        <td class="ta-r">{metric.delay}</td>
+        <td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
         <td>
           {#if metric.isOnline}
             <span title="Scheduled" class="icon -scheduled -small"></span>

src/view/components/TimersClearHistoryMetric.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { TClearTimerHistory } from '../../api/wrappers.ts';
+  import { delayTitle } from '../../api/time.ts';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
   import Variable from './Variable.svelte';
@@ -13,5 +14,5 @@
   >
   <td class="ta-c"><Variable value={metric.calls} /></td>
   <td class="ta-c">{metric.handler}</td>
-  <td class="ta-r">{metric.delay}</td>
+  <td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
 </tr>

src/view/components/TimersSetHistory.svelte

@@ -13,7 +13,7 @@
   } from '../../api/settings.ts';
   import { compareByFieldOrder } from '../../api/comparator.ts';
   import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
-  import { Stopper } from '../../api/time.ts';
+  import { delayTitle, Stopper } from '../../api/time.ts';
   import Variable from './Variable.svelte';
   import Trace from './Trace.svelte';
   import TraceDomain from './TraceDomain.svelte';
@@ -173,7 +173,7 @@
           {/if}
         </td>
         <td class="ta-c">{metric.handler}</td>
-        <td class="ta-r">{metric.delay}</td>
+        <td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
         <td>
           {#if metric.isOnline}
             <span title="Scheduled" class="icon -scheduled -small"></span>