Time CS loading (#4059)

src/contentScript/contentScript.ts

@@ -24,9 +24,12 @@ import {
   setInstalledInThisSession,
   setReadyInThisDocument,
 } from "@/contentScript/ready";
+import { logPromiseDuration } from "@/utils";
 
 // See note in `@/contentScript/ready.ts` for further details about the lifecycle of content scripts
 async function initContentScript() {
+  const uuid = uuidv4();
+
   if (isInstalledInThisSession()) {
     console.error(
       "contentScript: was requested twice in the same context, aborting injection"
@@ -39,28 +42,27 @@ async function initContentScript() {
       "contentScript: injecting again because the previous context was invalidated"
     );
   } else {
-    console.debug("contentScript: injecting");
+    console.debug(`contentScript: injecting ${uuid}`);
   }
 
   setInstalledInThisSession();
-  const uuid = uuidv4();
 
   // eslint-disable-next-line promise/prefer-await-to-then -- It's an unrelated event listener
   void onContextInvalidated().then(() => {
     console.debug("contentScript: invalidated", uuid);
   });
 
-  console.time(`contentScript: ready ${uuid}`);
-
   // Keeping the import separate ensures that no side effects are run until this point
-  const { init } = await import(
-    /* webpackChunkName: "contentScriptCore" */ "./contentScriptCore"
+  const { init } = await logPromiseDuration(
+    "contentScript: imported", // "imported" timing includes the parsing of the file, which can take 500-1000ms
+    import(/* webpackChunkName: "contentScriptCore" */ "./contentScriptCore")
   );
   await init();
   setReadyInThisDocument(uuid);
-  console.timeEnd("contentScript ready");
 }
 
-void initContentScript().catch((error) => {
-  throw new Error("Error initializing contentScript", { cause: error });
-});
+void logPromiseDuration("contentScript: ready", initContentScript()).catch(
+  (error) => {
+    throw new Error("Error initializing contentScript", { cause: error });
+  }
+);

src/errors/contextInvalidated.ts

@@ -26,24 +26,34 @@ import {
 
 const id = "connection-lost";
 
+/**
+ * Display a notification when the background page unloads/reloads because at this point
+ * all communcation becomes impossible.
+ */
 export function notifyContextInvalidated(): void {
   notify.error({
     id,
     message: "PixieBrix was updated or restarted. Reload the page to continue",
-    reportError: false,
+    reportError: false, // It cannot report it because its background page no longer exists
     duration: Number.POSITIVE_INFINITY,
   });
 }
 
 /** Detects whether an error is a fatal context invalidation */
 export function isContextInvalidatedError(possibleError: unknown): boolean {
+  // Do not use `wasContextInvalidated` in here because this function must return `true`
+  // only if the specific error was an invalidation error.
   return (
     getErrorMessage(getRootCause(possibleError)) === CONTEXT_INVALIDATED_ERROR
   );
 }
 
 export const wasContextInvalidated = () => !chrome.runtime?.id;
 
+/**
+ * Returns a promise that resolves when the background script is unloaded,
+ * which can only happens once per script lifetime.
+ */
 export const onContextInvalidated = once(async (): Promise<void> => {
   expectContext("extension");