Skip to content

Commit f39286e

Browse files
zendivezendive
committed
add Scheduled column for timers, idle callbacks
1 parent d39a8c1 commit f39286e

11 files changed

+71
-63
lines changed

‎jest/tests/wrappers.test.ts‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,22 +61,22 @@ describe('wrappers', () => {
6161
expect(wrapper.setTimeoutHistory.size).toBe(1);
6262
});
6363

64-
test('setTimeoutHistory - isOnline/canceledByTraceId/selfTime handled after timer fired', async () => {
64+
test('setTimeoutHistory - online/canceledByTraceId/selfTime handled after timer fired', async () => {
6565
const DELAY = 5;
6666
setTimeout(() => {}, DELAY);
6767

6868
const rec = Array.from(wrapper.setTimeoutHistory.values())[0];
69-
expect(rec.isOnline).toBe(true);
69+
expect(rec.online).toBe(1);
7070
expect(rec.canceledByTraceIds).toBe(null);
7171

7272
await new Promise((resolve) => setTimeout(resolve, 2 * DELAY));
7373

74-
expect(rec.isOnline).toBe(false);
74+
expect(rec.online).toBe(0);
7575
expect(rec.canceledByTraceIds).toBe(null);
7676
expect(rec.selfTime).not.toBeNull();
7777
});
7878

79-
test('setTimeoutHistory - isOnline/canceledByTraceId/selfTime handled after timer canceled', () => {
79+
test('setTimeoutHistory - online/canceledByTraceId/selfTime handled after timer canceled', () => {
8080
function setTimeout_function(delay: number) {
8181
return Number(setTimeout(() => {}, delay));
8282
}
@@ -97,7 +97,7 @@ describe('wrappers', () => {
9797

9898
const rec = Array.from(wrapper.setTimeoutHistory.values())[0];
9999

100-
expect(rec.isOnline).toBe(false);
100+
expect(rec.online).toBe(0);
101101
expect(rec.selfTime).toBeNull();
102102
if (rec.canceledByTraceIds) {
103103
expect(rec.canceledByTraceIds.length).toBe(2);
@@ -145,18 +145,22 @@ describe('wrappers', () => {
145145
function poll() {
146146
called++;
147147

148-
if (called > 1) {
148+
if (called > 3) {
149149
resolve();
150150
} else {
151151
handler && clearTimeout(handler);
152-
handler = Number(setTimeout(poll, 2));
152+
handler = Number(setTimeout(poll, 1));
153153
}
154154
}
155155
poll();
156156
});
157157

158-
const rec = Array.from(wrapper.setTimeoutHistory.values())[0];
159-
expect(rec.selfTime).not.toBeNull();
158+
const recs = Array.from(wrapper.setTimeoutHistory.values());
159+
expect(wrapper.setTimeoutHistory.size).toBe(2);
160+
expect(recs[0].selfTime).not.toBeNull();
161+
expect(recs[0].calls).toBe(1);
162+
expect(recs[1].selfTime).not.toBeNull();
163+
expect(recs[1].calls).toBe(2);
160164
}, 1e3);
161165

162166
test('clearTimeoutHistory - valid handler', () => {
@@ -199,14 +203,14 @@ describe('wrappers', () => {
199203
expect(wrapper.setIntervalHistory.size).toBe(1);
200204
});
201205

202-
test('setIntervalHistory - isOnline becomes false after interval canceled', () => {
206+
test('setIntervalHistory - online becomes false after interval canceled', () => {
203207
const DELAY = 123;
204208
const handler = setInterval(() => {}, DELAY);
205209
const rec = Array.from(wrapper.setIntervalHistory.values())[0];
206210

207-
expect(rec.isOnline).toBe(true);
211+
expect(rec.online).toBe(1);
208212
clearInterval(handler);
209-
expect(rec.isOnline).toBe(false);
213+
expect(rec.online).toBe(0);
210214
});
211215

212216
test('setIntervalHistory - valid delay', async () => {

‎public/global.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,3 @@ th,
191191
-webkit-mask-image: url(img/trace-extension.svg);
192192
mask-image: url(img/trace-extension.svg);
193193
}
194-
.icon.-scheduled {
195-
-webkit-mask-image: url(img/scheduled.svg);
196-
mask-image: url(img/scheduled.svg);
197-
}

‎public/img/scheduled.svg‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/api/wrappers.ts‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export type TSetTimerHistory = {
6060
handler: number | string;
6161
delay: number | undefined | string;
6262
isEval: boolean | undefined;
63-
isOnline: boolean;
63+
online: number;
6464
canceledCounter: number;
6565
canceledByTraceIds: string[] | null;
6666
selfTime: number | null;
@@ -106,7 +106,7 @@ export type TRequestIdleCallbackHistory = {
106106
handler: number | undefined | string;
107107
delay: number | undefined | string;
108108
didTimeout: undefined | boolean;
109-
isOnline: boolean;
109+
online: number;
110110
canceledCounter: number;
111111
canceledByTraceIds: string[] | null;
112112
selfTime: number | null;
@@ -268,9 +268,7 @@ export class Wrapper {
268268
return;
269269
}
270270

271-
if (setTimerRecord.handler === handler) {
272-
setTimerRecord.isOnline = false;
273-
}
271+
setTimerRecord.online--;
274272
setTimerRecord.selfTime = trim2microsecond(selfTime);
275273

276274
if (canceledByTraceId === null) {
@@ -305,14 +303,14 @@ export class Wrapper {
305303
existing.delay = handlerDelay;
306304
existing.calls++;
307305
existing.isEval = isEval;
308-
existing.isOnline = true;
306+
existing.online++;
309307
} else {
310308
history.set(callstack.traceId, {
311309
handler,
312310
calls: 1,
313311
delay: handlerDelay,
314312
isEval,
315-
isOnline: true,
313+
online: 1,
316314
traceId: callstack.traceId,
317315
trace: callstack.trace,
318316
traceDomain: this.#getTraceDomain(callstack.trace[0]),
@@ -442,20 +440,21 @@ export class Wrapper {
442440

443441
ricOffline(
444442
handler: number,
445-
callstack: TCallstack,
443+
traceId: string,
446444
deadline: IdleDeadline,
447445
selfTime: number
448446
) {
449-
const ricRecord = this.ricHistory.get(callstack.traceId);
447+
const ricRecord = this.ricHistory.get(traceId);
448+
if (!ricRecord) {
449+
return;
450+
}
450451

451-
if (ricRecord) {
452-
this.onlineIdleCallbackLookup.delete(Number(ricRecord.handler));
452+
ricRecord.didTimeout = deadline.didTimeout;
453+
ricRecord.selfTime = trim2microsecond(selfTime);
453454

454-
ricRecord.didTimeout = deadline.didTimeout;
455-
if (ricRecord.handler === handler) {
456-
ricRecord.isOnline = false;
457-
}
458-
ricRecord.selfTime = trim2microsecond(selfTime);
455+
if (this.onlineIdleCallbackLookup.get(handler)) {
456+
this.onlineIdleCallbackLookup.delete(Number(handler));
457+
ricRecord.online--;
459458
}
460459
}
461460

@@ -476,7 +475,7 @@ export class Wrapper {
476475
existing.handler = handler;
477476
existing.didTimeout = undefined;
478477
existing.delay = delay;
479-
existing.isOnline = true;
478+
existing.online++;
480479
} else {
481480
this.ricHistory.set(callstack.traceId, {
482481
traceId: callstack.traceId,
@@ -486,7 +485,7 @@ export class Wrapper {
486485
handler,
487486
didTimeout: undefined,
488487
delay,
489-
isOnline: true,
488+
online: 1,
490489
canceledCounter: 0,
491490
canceledByTraceIds: null,
492491
selfTime: null,
@@ -522,10 +521,9 @@ export class Wrapper {
522521
if (ricRecord) {
523522
this.onlineIdleCallbackLookup.delete(Number(handler));
524523

525-
if (ricRecord.handler === handler) {
526-
ricRecord.isOnline = false;
527-
}
524+
ricRecord.online--;
528525
ricRecord.didTimeout = undefined;
526+
529527
if (ricRecord.canceledByTraceIds === null) {
530528
ricRecord.canceledByTraceIds = [callstack.traceId];
531529
} else if (!ricRecord.canceledByTraceIds.includes(callstack.traceId)) {
@@ -638,7 +636,7 @@ export class Wrapper {
638636
fn(deadline);
639637
this.ricOffline(
640638
handler,
641-
callstack,
639+
callstack.traceId,
642640
deadline,
643641
performance.now() - start
644642
);

‎src/view/components/AnimationCancelHistory.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@
7373
<td class="wb-all">
7474
<Trace trace={metric.trace} traceId={metric.traceId} />
7575
</td>
76-
<td class="ta-c">{metric.calls}</td>
77-
<td class="ta-c">{metric.handler}</td>
76+
<td class="ta-c"><Variable value={metric.calls} /></td>
77+
<td class="ta-c"><Variable value={metric.handler} /></td>
7878
</tr>
7979
{/each}
8080
</tbody>

‎src/view/components/AnimationRequestHistory.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<tr>
5151
<th class="shaft"></th>
5252
<th class="w-full">Callstack</th>
53-
<th class="ta-c">
53+
<th class="ta-r">
5454
<SortableColumn
5555
field="selfTime"
5656
currentField={sortField}
@@ -83,8 +83,8 @@
8383
<Trace trace={metric.trace} traceId={metric.traceId} />
8484
</td>
8585
<td class="ta-r">{Stopper.toString(metric.selfTime)}</td>
86-
<td class="ta-c">{metric.calls}</td>
87-
<td class="ta-c">{metric.handler}</td>
86+
<td class="ta-c"><Variable value={metric.calls} /></td>
87+
<td class="ta-c"><Variable value={metric.handler} /></td>
8888
</tr>
8989
{/each}
9090
</tbody>

‎src/view/components/EvalMetrics.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<tr>
2929
<th class="shaft"></th>
3030
<th class="w-full">Callstack</th>
31-
<th>Self</th>
31+
<th class="ta-r">Self</th>
3232
<th>Called</th>
3333
<th>Code</th>
3434
<th>Returns</th>

‎src/view/components/IdleCallbackCancelHistory.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@
7373
<td class="wb-all">
7474
<Trace trace={metric.trace} traceId={metric.traceId} />
7575
</td>
76-
<td class="ta-c">{metric.calls}</td>
77-
<td class="ta-c">{metric.handler}</td>
76+
<td class="ta-c"><Variable value={metric.calls} /></td>
77+
<td class="ta-c"><Variable value={metric.handler} /></td>
7878
</tr>
7979
{/each}
8080
</tbody>

‎src/view/components/IdleCallbackRequestHistory.svelte‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
<th class="shaft"></th>
108108
<th class="w-full">Callstack</th>
109109
<th class="ta-c">didTimeout</th>
110-
<th class="ta-c">
110+
<th class="ta-r">
111111
<SortableColumn
112112
field="selfTime"
113113
currentField={sortField}
@@ -139,7 +139,14 @@
139139
eventChangeSorting={onChangeSort}>Delay</SortableColumn
140140
>
141141
</th>
142-
<th class="shaft"></th>
142+
<th>
143+
<SortableColumn
144+
field="online"
145+
currentField={sortField}
146+
currentFieldOrder={sortOrder}
147+
eventChangeSorting={onChangeSort}>Scheduled</SortableColumn
148+
>
149+
</th>
143150
</tr>
144151

145152
{#each sortedMetrics as metric (metric.traceId)}
@@ -164,11 +171,11 @@
164171
</a>
165172
{/if}
166173
</td>
167-
<td class="ta-c">{metric.handler}</td>
174+
<td class="ta-c"><Variable value={metric.handler} /></td>
168175
<td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
169-
<td>
170-
{#if metric.isOnline}
171-
<span title="Scheduled" class="icon -scheduled -small"></span>
176+
<td class="ta-r">
177+
{#if metric.online}
178+
<Variable value={metric.online} />
172179
{/if}
173180
</td>
174181
</tr>

‎src/view/components/TimersClearHistoryMetric.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
<td class="wb-all"><Trace trace={metric.trace} traceId={metric.traceId} /></td
1414
>
1515
<td class="ta-c"><Variable value={metric.calls} /></td>
16-
<td class="ta-c">{metric.handler}</td>
16+
<td class="ta-c"><Variable value={metric.handler} /></td>
1717
<td class="ta-r" title={delayTitle(metric.delay)}>{metric.delay}</td>
1818
</tr>

0 commit comments

Comments
 (0)