[PM-5189] Fix issues present with inline menu rendering within iframes

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

@@ -2,9 +2,26 @@ import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 
 import AutofillPageDetails from "../../models/autofill-page-details";
+import { PageDetail } from "../../services/abstractions/autofill.service";
 
 import { LockedVaultPendingNotificationsData } from "./notification.background";
 
+type PageDetailsForTab = Record<
+  chrome.runtime.MessageSender["tab"]["id"],
+  Map<chrome.runtime.MessageSender["frameId"], PageDetail>
+>;
+
+type SubFrameOffsetData = {
+  url: string;
+  top: number;
+  left: number;
+};
+
+type SubFrameOffsetsForTab = Record<
+  chrome.runtime.MessageSender["tab"]["id"],
+  Map<chrome.runtime.MessageSender["frameId"], SubFrameOffsetData>
+>;
+
 type WebsiteIconData = {
   imageEnabled: boolean;
   image: string;
@@ -73,7 +90,7 @@ type OverlayBackgroundExtensionMessageHandlers = {
   focusAutofillOverlayList: () => void;
   updateAutofillOverlayPosition: ({ message }: BackgroundMessageParam) => void;
   updateAutofillOverlayHidden: ({ message }: BackgroundMessageParam) => void;
-  updateFocusedFieldData: ({ message }: BackgroundMessageParam) => void;
+  updateFocusedFieldData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   unlockCompleted: ({ message }: BackgroundMessageParam) => void;
   addEditCipherSubmitted: () => void;
@@ -116,6 +133,9 @@ interface OverlayBackground {
 }
 
 export {
+  PageDetailsForTab,
+  SubFrameOffsetData,
+  SubFrameOffsetsForTab,
   WebsiteIconData,
   OverlayBackgroundExtensionMessage,
   OverlayPortMessage,

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

@@ -25,7 +25,7 @@ import {
   openViewVaultItemPopout,
   openAddEditVaultItemPopout,
 } from "../../vault/popup/utils/vault-popout-window";
-import { AutofillService, PageDetail } from "../services/abstractions/autofill.service";
+import { AutofillService } from "../services/abstractions/autofill.service";
 import { AutofillOverlayElement, AutofillOverlayPort } from "../utils/autofill-overlay.enum";
 
 import { LockedVaultPendingNotificationsData } from "./abstractions/notification.background";
@@ -40,6 +40,7 @@ import {
   OverlayAddNewItemMessage,
   OverlayPortMessage,
   WebsiteIconData,
+  PageDetailsForTab,
 } from "./abstractions/overlay.background";
 
 class OverlayBackground implements OverlayBackgroundInterface {
@@ -47,10 +48,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
   private readonly openViewVaultItemPopout = openViewVaultItemPopout;
   private readonly openAddEditVaultItemPopout = openAddEditVaultItemPopout;
   private overlayLoginCiphers: Map<string, CipherView> = new Map();
-  private pageDetailsForTab: Record<
+  private pageDetailsForTab: PageDetailsForTab = {};
-    chrome.runtime.MessageSender["tab"]["id"],
-    Map<chrome.runtime.MessageSender["frameId"], PageDetail>
-  > = {};
   private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
   private overlayButtonPort: chrome.runtime.Port;
   private overlayListPort: chrome.runtime.Port;
@@ -66,7 +64,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
     focusAutofillOverlayList: () => this.focusOverlayList(),
     updateAutofillOverlayPosition: ({ message }) => this.updateOverlayPosition(message),
     updateAutofillOverlayHidden: ({ message }) => this.updateOverlayHidden(message),
-    updateFocusedFieldData: ({ message }) => this.setFocusedFieldData(message),
+    updateFocusedFieldData: ({ message, sender }) => this.setFocusedFieldData(message, sender),
     collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
     unlockCompleted: ({ message }) => this.unlockCompleted(message),
     addEditCipherSubmitted: () => this.updateOverlayCiphers(),
@@ -220,6 +218,10 @@ class OverlayBackground implements OverlayBackgroundInterface {
     pageDetailsMap.set(sender.frameId, pageDetails);
   }
 
+  private buildFrameOffset(frameId: number, tabId: number) {
+    return frameId ? 10 : 0;
+  }
+
   /**
    * Triggers autofill for the selected cipher in the overlay list. Also places
    * the selected cipher at the top of the list of ciphers.
@@ -396,7 +398,10 @@ class OverlayBackground implements OverlayBackgroundInterface {
    *
    * @param focusedFieldData - Contains the rects and styles of the focused field.
    */
-  private setFocusedFieldData({ focusedFieldData }: OverlayBackgroundExtensionMessage) {
+  private setFocusedFieldData(
+    { focusedFieldData }: OverlayBackgroundExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) {
     this.focusedFieldData = focusedFieldData;
   }
 

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -1087,6 +1087,10 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
    * @param element - The element to get the root node active element for.
    */
   private getRootNodeActiveElement(element: Element): Element {
+    if (!element) {
+      return null;
+    }
+
     const documentRoot = element.getRootNode() as ShadowRoot | Document;
     return documentRoot?.activeElement;
   }

apps/browser/src/manifest.json

@@ -67,7 +67,8 @@
     "http://*/*",
     "https://*/*",
     "webRequest",
-    "webRequestBlocking"
+    "webRequestBlocking",
+    "webNavigation"
   ],
   "optional_permissions": ["nativeMessaging", "privacy"],
   "content_security_policy": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",