Skip to content

Commit 9eda9f2

Browse files
zendivezendive
committed
extract CancelableCallMetric.svelte component 
1 parent 46e44ed commit 9eda9f2

File tree

5 files changed

+51
-48
lines changed

5 files changed

+51
-48
lines changed

‎src/api/const.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const TELEMETRY_FREQUENCY_30PS = 33.3333333333; // ms
66
export const TELEMETRY_FREQUENCY_1PS = 1000; // ms
77
export const FRAME_1of60 = 0.0166666666667; // ms
88
export const VARIABLE_ANIMATION_THROTTLE = 3500; // eye blinking average frequency
9-
export const CALLED_ABORTED_TOOLTIP = '<called>-<aborted>/<abort-locations>';
109
export const SELF_TIME_MAX_GOOD = 13.333333333333332; // ms
1110

1211
// store native functions

‎src/view/components/AnimationRequestHistory.svelte‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
setSettings,
1111
} from '../../api/settings.ts';
1212
import { compareByFieldOrder } from '../../api/comparator.ts';
13-
import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
1413
import Variable from './Variable.svelte';
1514
import Trace from './Trace.svelte';
1615
import TraceDomain from './TraceDomain.svelte';
@@ -21,6 +20,7 @@
2120
import Alert from './Alert.svelte';
2221
import AnimationCancelHistory from './AnimationCancelHistory.svelte';
2322
import TraceBypass from './TraceBypass.svelte';
23+
import CancelableCallMetric from './CancelableCallMetric.svelte';
2424
2525
let {
2626
rafHistory,
@@ -152,20 +152,12 @@
152152
<td class="ta-r"><FrameSensitiveTime value={metric.selfTime} /></td>
153153
<td class="ta-c">{metric.cps || undefined}</td>
154154
<td class="ta-c">
155-
<Variable value={metric.calls} />
156-
{#if metric.canceledCounter}-<a
157-
role="button"
158-
href="void(0)"
159-
title={CALLED_ABORTED_TOOLTIP}
160-
onclick={(e) => {
161-
e.preventDefault();
162-
onFindRegressors(metric.canceledByTraceIds);
163-
}}
164-
><Variable value={metric.canceledCounter} />/{
165-
metric
166-
.canceledByTraceIds?.length
167-
}</a>
168-
{/if}
155+
<CancelableCallMetric
156+
calls={metric.calls}
157+
canceledCounter={metric.canceledCounter}
158+
canceledByTraceIds={metric.canceledByTraceIds}
159+
onClick={onFindRegressors}
160+
/>
169161
</td>
170162
<td class="ta-c"><Variable value={metric.handler} /></td>
171163
<td class="ta-r">

‎src/view/components/CancelableCallMetric.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import Variable from './Variable.svelte';
3+
4+
let {
5+
calls,
6+
canceledCounter,
7+
canceledByTraceIds,
8+
onClick,
9+
}: {
10+
calls: number;
11+
canceledCounter: number;
12+
canceledByTraceIds: string[] | null;
13+
onClick: (canceledByTraceIds: string[] | null) => void;
14+
} = $props();
15+
</script>
16+
17+
<Variable value={calls} />
18+
{#if canceledCounter}
19+
<a
20+
role="button"
21+
href="void(0)"
22+
title="<called> [<aborted>/<abort-locations>]"
23+
onclick={(e) => {
24+
e.preventDefault();
25+
onClick(canceledByTraceIds);
26+
}}
27+
>
28+
[<Variable value={canceledCounter} />/{canceledByTraceIds?.length}]
29+
</a>
30+
{/if}

‎src/view/components/IdleCallbackRequestHistory.svelte‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
setSettings,
1111
} from '../../api/settings.ts';
1212
import { compareByFieldOrder } from '../../api/comparator.ts';
13-
import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
1413
import { msToHms } from '../../api/time.ts';
1514
import Variable from './Variable.svelte';
1615
import Trace from './Trace.svelte';
@@ -22,6 +21,7 @@
2221
import FrameSensitiveTime from './FrameSensitiveTime.svelte';
2322
import TraceBreakpoint from './TraceBreakpoint.svelte';
2423
import TraceBypass from './TraceBypass.svelte';
24+
import CancelableCallMetric from './CancelableCallMetric.svelte';
2525
2626
let {
2727
ricHistory,
@@ -161,21 +161,12 @@
161161
<td class="ta-c">{metric.didTimeout}</td>
162162
<td class="ta-r"><FrameSensitiveTime value={metric.selfTime} /></td>
163163
<td class="ta-c">
164-
<Variable value={metric.calls} />
165-
{#if metric.canceledCounter}-<a
166-
role="button"
167-
href="void(0)"
168-
title={CALLED_ABORTED_TOOLTIP}
169-
onclick={(e) => {
170-
e.preventDefault();
171-
onFindRegressors(metric.canceledByTraceIds);
172-
}}
173-
><Variable value={metric.canceledCounter} />/{
174-
metric
175-
.canceledByTraceIds?.length
176-
}
177-
</a>
178-
{/if}
164+
<CancelableCallMetric
165+
calls={metric.calls}
166+
canceledCounter={metric.canceledCounter}
167+
canceledByTraceIds={metric.canceledByTraceIds}
168+
onClick={onFindRegressors}
169+
/>
179170
</td>
180171
<td class="ta-c"><Variable value={metric.handler} /></td>
181172
<td class="ta-r" title={msToHms(metric.delay)}>{metric.delay}</td>

‎src/view/components/TimersSetHistoryMetric.svelte‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
TClearTimerHistory,
44
TSetTimerHistory,
55
} from '../../wrapper/TimerWrapper.ts';
6-
import { CALLED_ABORTED_TOOLTIP } from '../../api/const.ts';
76
import { msToHms } from '../../api/time.ts';
87
import FrameSensitiveTime from './FrameSensitiveTime.svelte';
98
import Trace from './Trace.svelte';
@@ -14,6 +13,7 @@
1413
import Dialog from './Dialog.svelte';
1514
import Alert from './Alert.svelte';
1615
import TimersClearHistory from './TimersClearHistory.svelte';
16+
import CancelableCallMetric from './CancelableCallMetric.svelte';
1717
1818
let {
1919
metric,
@@ -84,21 +84,12 @@
8484
<FrameSensitiveTime value={metric.selfTime} />
8585
</td>
8686
<td class="ta-c">
87-
<Variable value={metric.calls} />
88-
{#if metric.canceledCounter}-<a
89-
role="button"
90-
href="void(0)"
91-
title={CALLED_ABORTED_TOOLTIP}
92-
onclick={(e) => {
93-
e.preventDefault();
94-
onFindRegressors(metric.canceledByTraceIds);
95-
}}
96-
><Variable value={metric.canceledCounter} />/{
97-
metric.canceledByTraceIds
98-
?.length
99-
}
100-
</a>
101-
{/if}
87+
<CancelableCallMetric
88+
calls={metric.calls}
89+
canceledCounter={metric.canceledCounter}
90+
canceledByTraceIds={metric.canceledByTraceIds}
91+
onClick={onFindRegressors}
92+
/>
10293
</td>
10394
<td class="ta-c"><Variable value={metric.handler} /></td>
10495
<td class="ta-r" title={msToHms(metric.delay)}>{metric.delay}</td>

0 commit comments

Comments
 (0)