[PM-2857] Reworking how we handle invalidating cache when a tab chagne has occurred

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -319,7 +319,7 @@ describe("OverlayBackground", () => {
   });
 
   describe("removing pageDetails", () => {
-    it("removes the page details, sub frame details, and port key for a specific tab from the pageDetailsForTab object", () => {
+    it("removes the page details and port key for a specific tab from the pageDetailsForTab object", () => {
       const tabId = 1;
       sendMockExtensionMessage(
         { command: "collectPageDetailsResponse", details: createAutofillPageDetailsMock() },
@@ -329,7 +329,6 @@ describe("OverlayBackground", () => {
       overlayBackground.removePageDetails(tabId);
 
       expect(pageDetailsForTabSpy[tabId]).toBeUndefined();
-      expect(subFrameOffsetsSpy[tabId]).toBeUndefined();
       expect(portKeyForTabSpy[tabId]).toBeUndefined();
     });
   });

apps/browser/src/autofill/background/overlay.background.ts

@@ -151,7 +151,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * overlay's visibility and the user's authentication status.
    */
   async init() {
-    this.setupExtensionMessageListeners();
+    this.setupExtensionListeners();
     const env = await firstValueFrom(this.environmentService.environment$);
     this.iconsServerUrl = env.getIconsUrl();
   }
@@ -201,11 +201,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       delete this.pageDetailsForTab[tabId];
     }
 
-    if (this.subFrameOffsetsForTab[tabId]) {
-      this.subFrameOffsetsForTab[tabId].clear();
-      delete this.subFrameOffsetsForTab[tabId];
-    }
-
     if (this.portKeyForTab[tabId]) {
       delete this.portKeyForTab[tabId];
     }
@@ -1255,8 +1250,9 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   /**
    * Sets up the extension message listeners for the overlay.
    */
-  private setupExtensionMessageListeners() {
+  private setupExtensionListeners() {
     BrowserApi.messageListener("overlay.background", this.handleExtensionMessage);
+    BrowserApi.addListener(chrome.webNavigation.onCommitted, this.handleWebNavigationOnCommitted);
     BrowserApi.addListener(chrome.runtime.onConnect, this.handlePortOnConnect);
   }
 
@@ -1288,6 +1284,25 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     return true;
   };
 
+  private handleWebNavigationOnCommitted = (
+    details: chrome.webNavigation.WebNavigationTransitionCallbackDetails,
+  ) => {
+    const { frameId, tabId } = details;
+    const subFrames = this.subFrameOffsetsForTab[tabId];
+    if (frameId === 0) {
+      this.removePageDetails(tabId);
+      if (subFrames) {
+        subFrames.clear();
+        delete this.subFrameOffsetsForTab[tabId];
+      }
+      return;
+    }
+
+    if (subFrames && subFrames.has(frameId)) {
+      subFrames.delete(frameId);
+    }
+  };
+
   /**
    * Handles the connection of a port to the extension background.
    *

apps/browser/src/autofill/background/tabs.background.ts

@@ -86,11 +86,6 @@ export default class TabsBackground {
     changeInfo: chrome.tabs.TabChangeInfo,
     tab: chrome.tabs.Tab,
   ) => {
-    const removePageDetailsStatus = new Set(["loading", "unloaded"]);
-    if (removePageDetailsStatus.has(changeInfo.status)) {
-      this.overlayBackground.removePageDetails(tabId);
-    }
-
     if (this.focusedWindowId > 0 && tab.windowId !== this.focusedWindowId) {
       return;
     }