Merge pull request #10 from justcarlson/diag/ui-timing

feat: add UI timing instrumentation

Author: justcarlson

entrypoints/background.ts

@@ -10,6 +10,10 @@
  * - No global state variables (service worker terminates)
  */
 
+// DIAGNOSTIC: Capture absolute timestamp when module starts loading
+const SW_MODULE_START = Date.now();
+console.log(`[DIAG] SW module load start: ${new Date(SW_MODULE_START).toISOString()}`);
+
 import {
 	type AllStorageData,
 	clearState,

entrypoints/popup/main.ts

@@ -5,8 +5,17 @@
  * Communicates with background service worker via chrome.runtime.sendMessage.
  */
 
+// DIAGNOSTIC: Capture script start time immediately
+const POPUP_SCRIPT_START = performance.now();
+console.log("[DIAG] popup script started");
+
 import type { UrlDetectionMode } from "@/src/utils/types";
 
+const diagLog = (label: string, startTime: number) => {
+	const elapsed = Math.round(performance.now() - startTime);
+	console.log(`[DIAG] ${label}: ${elapsed}ms`);
+};
+
 interface GetStatusResponse {
 	mode: UrlDetectionMode;
 }
@@ -90,12 +99,19 @@ function populateI18n(): void {
  * Initialize popup on DOM ready.
  */
 document.addEventListener("DOMContentLoaded", async () => {
+	diagLog("popup DOMContentLoaded (from script start)", POPUP_SCRIPT_START);
+	const t0 = performance.now();
+
 	// Populate i18n strings first (while loading)
+	const t1 = performance.now();
 	populateI18n();
+	diagLog("popup populateI18n", t1);
 
 	try {
 		// Load current mode from background
+		const t2 = performance.now();
 		const currentMode = await getStatus();
+		diagLog("popup getStatus (sendMessage)", t2);
 		updateModeUI(currentMode);
 	} catch (error) {
 		// Silent fallback - default to allUrls on error
@@ -108,6 +124,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 	if (app) {
 		app.classList.remove("loading");
 	}
+	diagLog("popup DOMContentLoaded.TOTAL", t0);
 
 	// Bind mode change handlers
 	document.querySelectorAll<HTMLInputElement>('input[name="detection-mode"]').forEach((radio) => {

entrypoints/welcome/main.ts

@@ -5,6 +5,15 @@
  * Shown to users on first install.
  */
 
+// DIAGNOSTIC: Capture script start time immediately
+const WELCOME_SCRIPT_START = performance.now();
+console.log("[DIAG] welcome script started");
+
+const diagLog = (label: string, startTime: number) => {
+	const elapsed = Math.round(performance.now() - startTime);
+	console.log(`[DIAG] ${label}: ${elapsed}ms`);
+};
+
 /**
  * Get localized string with fallback to key name.
  */
@@ -53,5 +62,9 @@ function populateI18n(): void {
  * Initialize welcome page on DOM ready.
  */
 document.addEventListener("DOMContentLoaded", () => {
+	diagLog("welcome DOMContentLoaded (from script start)", WELCOME_SCRIPT_START);
+	const t0 = performance.now();
 	populateI18n();
+	diagLog("welcome populateI18n", t0);
+	diagLog("welcome DOMContentLoaded.TOTAL", t0);
 });