Skip to content

Commit f32dfd5

Browse files
zendivezendive
committed
retrospective
1 parent f3db981 commit f32dfd5

File tree

76 files changed

+902
-638
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+902
-638
lines changed

‎Makefile‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.PHONY: clean install dev valid test prod
1+
.PHONY: clean install dev valid test prod serve_mirror
22
.DEFAULT_GOAL := dev
33
DENO_DEV = NODE_ENV=development deno run --watch
44
DENO_PROD = NODE_ENV=production deno run
@@ -30,5 +30,13 @@ test: valid
3030
prod: test
3131
rm -rf $(BUILD_DIR) $(CHROME_ZIP)
3232
$(DENO_PROD) $(DENO_OPTIONS) $(BUILD_SCRIPT)
33+
3334
zip -r $(CHROME_ZIP) $(OUTPUT_DIR) ./manifest.json > /dev/null
34-
tree -Dis $(BUILD_DIR) *.zip
35+
zip --delete $(CHROME_ZIP) "$(OUTPUT_DIR)mirror.html" "$(BUILD_DIR)mirror/*" > /dev/null
36+
37+
tree -Dis $(BUILD_DIR) *.zip | grep -E "api|zip"
38+
39+
serve_mirror:
40+
@echo "🎗 reminder to switch extension off"
41+
@echo "served at: http://localhost:5555/mirror.html"
42+
python3 -m http.server 5555 -d ./public/

‎build.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const buildOptions: BuildOptions = {
1717
'./src/api-monitor-cs-main.ts',
1818
'./src/api-monitor-cs-isolated.ts',
1919
'./src/api-monitor-devtools-panel.ts',
20+
'./src/mirror/mirror.ts',
2021
],
2122
outdir: './public/build/',
2223
define: {

‎manifest.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"version": "1.3.0",
3+
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxQCaHgX3DkPnGmHr+rhWyPvYemxMhBbvulmj4RvEpAnGVprdPCUiHSY0jOcDn3vnU6zm8mR1mT3sdlYoUGikBIT19/Jf1iGlc2dySt2bmDQXlTrqllT/XB8HW/wruFej9waMw9yqtW1wOJtElxWnT11pzXkKeflH1Sh+//Jnplr577vOmWh9TU8JLJHS9WklPHJyXCCMGrg/0Sxqte5qWryE2yIm9375KGkKN4ZKjSIxaCg0qodhf5Ug9s2QD7/s5xt548gbEUm9LqQHkNoIH3KXuYOnLksJFxi7FDwhg+oXalsONr5eEvPjkwxYpMKJXfRSg8sB8N6cXLUfgLAKUwIDAQAB",
34
"name": "API Monitor",
45
"manifest_version": 3,
56
"description": "Show active intervals, scheduled timeouts, animation frames, idle callbacks, eval invocations, media events and properties",

‎public/mirror.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Mirror - Browser API Monitor</title>
8+
9+
<link rel="icon" type="image/png" href="./img/panel-icon28.png" />
10+
<link rel="stylesheet" href="./global.css" />
11+
<link rel="stylesheet" href="./build/mirror/mirror.css" />
12+
13+
<!-- <link href="devtools://theme/colors.css?sets=ui,chrome" rel="stylesheet" type="text/css" /> -->
14+
15+
<script async src="./build/api-monitor-cs-main.js"></script>
16+
<script async src="./build/mirror/mirror.js"></script>
17+
</head>
18+
19+
<body></body>
20+
</html>

‎src/api-monitor-cs-isolated.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import {
55
windowListen,
66
windowPost,
77
} from './api/communication.ts';
8-
import { loadLocalStorage, onLocalStorageChange } from './api/storage.local.ts';
8+
import {
9+
loadLocalStorage,
10+
onLocalStorageChange,
11+
} from './api/storage/storage.local.ts';
912
import {
1013
loadSessionStorage,
1114
onSessionStorageChange,
12-
} from './api/storage.session.ts';
15+
} from './api/storage/storage.session.ts';
1316

1417
Promise.all([loadLocalStorage(), loadSessionStorage()]).then(
1518
([config, session]) => {
@@ -23,11 +26,11 @@ Promise.all([loadLocalStorage(), loadSessionStorage()]).then(
2326
portListen(windowPost);
2427
windowListen(runtimePost);
2528

26-
onLocalStorageChange((newValue) => {
27-
windowPost({ msg: EMsg.CONFIG, config: newValue });
29+
onLocalStorageChange((config) => {
30+
windowPost({ msg: EMsg.CONFIG, config });
2831
});
29-
onSessionStorageChange((newValue) => {
30-
windowPost({ msg: EMsg.SESSION, session: newValue });
32+
onSessionStorageChange((session) => {
33+
windowPost({ msg: EMsg.SESSION, session });
3134
});
3235

3336
runtimePost({ msg: EMsg.CONTENT_SCRIPT_LOADED });

‎src/api-monitor-cs-main.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,31 +47,29 @@ const tick = new Timer(
4747
);
4848

4949
windowListen((o) => {
50-
if (o.msg === EMsg.TELEMETRY_ACKNOWLEDGED) {
50+
if (EMsg.TELEMETRY_ACKNOWLEDGED === o.msg) {
5151
tick.delay = adjustTelemetryDelay(o.timeOfCollection);
5252
originalMetrics = currentMetrics;
5353
eachSecond.isPending() && tick.start();
54-
} else if (
55-
o.msg === EMsg.CONFIG && o.config && typeof o.config === 'object'
56-
) {
54+
} else if (EMsg.CONFIG === o.msg) {
5755
applyConfig(o.config);
58-
} else if (o.msg === EMsg.START_OBSERVE) {
56+
} else if (EMsg.START_OBSERVE === o.msg) {
5957
originalMetrics = currentMetrics = null;
6058
tick.trigger();
6159
eachSecond.start();
62-
} else if (o.msg === EMsg.STOP_OBSERVE) {
60+
} else if (EMsg.STOP_OBSERVE === o.msg) {
6361
tick.stop();
6462
eachSecond.stop();
6563
originalMetrics = currentMetrics = null;
66-
} else if (o.msg === EMsg.RESET_WRAPPER_HISTORY) {
64+
} else if (EMsg.RESET_WRAPPER_HISTORY === o.msg) {
6765
originalMetrics = currentMetrics = null;
6866
cleanHistory();
6967
!tick.isPending() && tick.trigger();
70-
} else if (o.msg === EMsg.TIMER_COMMAND) {
68+
} else if (EMsg.TIMER_COMMAND === o.msg) {
7169
runTimerCommand(o.type, o.handler);
72-
} else if (o.msg === EMsg.MEDIA_COMMAND) {
70+
} else if (EMsg.MEDIA_COMMAND === o.msg) {
7371
runMediaCommand(o.mediaId, o.cmd, o.property);
74-
} else if (o.msg === EMsg.SESSION) {
72+
} else if (EMsg.SESSION === o.msg) {
7573
applySession(o.session);
7674
}
7775
});

‎src/api-monitor-devtools-panel.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { mount } from 'svelte';
22
import App from './view/App.svelte';
33
import { initConfigState } from './state/config.state.svelte.ts';
44
import { onHidePanel } from './devtoolsPanelUtil.ts';
5+
import { establishTelemetryReceiver } from './state/telemetry.state.svelte.ts';
56

67
initConfigState().then(() => {
78
mount(App, { target: document.body });
9+
establishTelemetryReceiver();
810
globalThis.addEventListener('beforeunload', onHidePanel);
911
});

‎src/api-monitor-devtools.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { EMsg, portPost } from './api/communication.ts';
2-
import { loadLocalStorage, saveLocalStorage } from './api/storage.local.ts';
3-
import { enableSessionInContentScript } from './api/storage.session.ts';
2+
import {
3+
loadLocalStorage,
4+
saveLocalStorage,
5+
} from './api/storage/storage.local.ts';
6+
import { enableSessionInContentScript } from './api/storage/storage.session.ts';
47
import { onHidePanel } from './devtoolsPanelUtil.ts';
58

69
// tabId may be null if user opened the devtools of the devtools

‎src/api/communication.ts‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,26 @@ import { APPLICATION_NAME } from './env.ts';
1414
import { ERRORS_IGNORED } from './const.ts';
1515
import { ETimerType } from '../wrapper/TimerWrapper.ts';
1616
import type { TTelemetry } from '../wrapper/Wrapper.ts';
17-
import type { TConfig } from './storage.local.ts';
17+
import type { TConfig } from './storage/storage.local.ts';
1818
import type { TMediaCommand } from '../wrapper/MediaWrapper.ts';
1919
import type { Delta } from 'jsondiffpatch';
20-
import type { TSession } from './storage.session.ts';
20+
import type { TSession } from './storage/storage.session.ts';
2121

2222
let port: chrome.runtime.Port | null = null;
2323
export function portPost(payload: TMsgOptions) {
24+
if (!chrome.runtime) {
25+
windowPost(payload);
26+
return;
27+
}
28+
2429
if (!port) {
2530
port = chrome.tabs.connect(chrome.devtools.inspectedWindow.tabId, {
2631
name: APPLICATION_NAME,
2732
});
28-
port.onDisconnect.addListener(() => void (port = null));
33+
port?.onDisconnect.addListener(() => void (port = null));
2934
}
3035

31-
port.postMessage(payload);
36+
port?.postMessage(payload);
3237
}
3338

3439
export function portListen(callback: (payload: TMsgOptions) => void) {
@@ -67,16 +72,20 @@ export function runtimePost(payload: TMsgOptions) {
6772
}
6873

6974
export function runtimeListen(callback: (payload: TMsgOptions) => void) {
70-
chrome.runtime.onMessage.addListener(
71-
(payload, sender: chrome.runtime.MessageSender, sendResponse) => {
72-
if (
73-
sender.tab?.id === chrome.devtools.inspectedWindow.tabId
74-
) {
75-
callback(payload);
76-
sendResponse();
77-
}
78-
},
79-
);
75+
if (chrome?.runtime) {
76+
chrome.runtime.onMessage.addListener(
77+
(payload, sender: chrome.runtime.MessageSender, sendResponse) => {
78+
if (
79+
sender.tab?.id === chrome.devtools.inspectedWindow.tabId
80+
) {
81+
callback(payload);
82+
sendResponse();
83+
}
84+
},
85+
);
86+
} else {
87+
windowListen(callback);
88+
}
8089
}
8190

8291
function handleRuntimeMessageResponse(): void {

‎src/api/const.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ export const ERRORS_IGNORED = [
66
];
77
export const TELEMETRY_FREQUENCY_30PS = 33.3333333333; // ms
88
export const TELEMETRY_FREQUENCY_1PS = 1000; // ms
9-
export const FRAME_1of60 = 0.0166666666667; // ms
9+
export const TIME_60FPS_SEC = 0.0166666666667; // s
10+
export const TIME_60FPS_MS = 16.666666666666668;
1011
export const VARIABLE_ANIMATION_THROTTLE = 3500; // eye blinking average frequency
1112
export const SELF_TIME_MAX_GOOD = 13.333333333333332; // ms
1213

0 commit comments

Comments
 (0)