From ef716ee728e68ed5e9dfc4ecd7d79a8dc290b96d Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Sat, 6 Apr 2024 14:30:42 -0500
Subject: [PATCH] [PM-5189] Fixing an issue where the inline menu can render
 elements as hidden when collecting page details

---
 .../src/autofill/content/autofill-init.ts     |  2 +-
 .../abstractions/inline-menu-elements.ts      |  3 +-
 .../overlay/content/inline-menu-elements.ts   | 44 +++++++++----------
 .../dom-element-visibility.service.ts         |  7 +++
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index e71f6ca8b2..eee933cc76 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -63,7 +63,7 @@ class AutofillInit implements AutofillInitInterface {
       );
     }
 
-    this.domElementVisibilityService = new DomElementVisibilityService();
+    this.domElementVisibilityService = new DomElementVisibilityService(this.inlineMenuElements);
     this.collectAutofillContentService = new CollectAutofillContentService(
       this.domElementVisibilityService,
       this.autofillOverlayContentService,
diff --git a/apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts b/apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts
index 268ef2ac7b..92b2926751 100644
--- a/apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts
+++ b/apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts
@@ -11,5 +11,6 @@ export type InlineMenuExtensionMessageHandlers = {
 
 export interface InlineMenuElements {
   extensionMessageHandlers: InlineMenuExtensionMessageHandlers;
-  destroy: () => void;
+  isElementInlineMenu(element: HTMLElement): boolean;
+  destroy(): void;
 }
diff --git a/apps/browser/src/autofill/overlay/content/inline-menu-elements.ts b/apps/browser/src/autofill/overlay/content/inline-menu-elements.ts
index c0219448bd..9826c1cd83 100644
--- a/apps/browser/src/autofill/overlay/content/inline-menu-elements.ts
+++ b/apps/browser/src/autofill/overlay/content/inline-menu-elements.ts
@@ -52,6 +52,10 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
     return this._extensionMessageHandlers;
   }
 
+  isElementInlineMenu(element: HTMLElement) {
+    return element === this.buttonElement || element === this.listElement;
+  }
+
   /**
    * Sends a message that facilitates hiding the overlay elements.
    *
@@ -133,38 +137,30 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
    * Updates the position of the overlay button.
    */
   private async updateButtonPosition(): Promise<void> {
-    return new Promise((resolve) => {
-      if (!this.buttonElement) {
-        this.createButton();
-        this.updateCustomElementDefaultStyles(this.buttonElement);
-      }
+    if (!this.buttonElement) {
+      this.createButton();
+      this.updateCustomElementDefaultStyles(this.buttonElement);
+    }
 
-      if (!this.isButtonVisible) {
-        this.appendOverlayElementToBody(this.buttonElement);
-        this.isButtonVisible = true;
-      }
-
-      resolve();
-    });
+    if (!this.isButtonVisible) {
+      this.appendOverlayElementToBody(this.buttonElement);
+      this.isButtonVisible = true;
+    }
   }
 
   /**
    * Updates the position of the overlay list.
    */
   private async updateListPosition(): Promise<void> {
-    return new Promise((resolve) => {
-      if (!this.listElement) {
-        this.createList();
-        this.updateCustomElementDefaultStyles(this.listElement);
-      }
+    if (!this.listElement) {
+      this.createList();
+      this.updateCustomElementDefaultStyles(this.listElement);
+    }
 
-      if (!this.isListVisible) {
-        this.appendOverlayElementToBody(this.listElement);
-        this.isListVisible = true;
-      }
-
-      resolve();
-    });
+    if (!this.isListVisible) {
+      this.appendOverlayElementToBody(this.listElement);
+      this.isListVisible = true;
+    }
   }
 
   /**
diff --git a/apps/browser/src/autofill/services/dom-element-visibility.service.ts b/apps/browser/src/autofill/services/dom-element-visibility.service.ts
index 127ce84d91..7c6038edf9 100644
--- a/apps/browser/src/autofill/services/dom-element-visibility.service.ts
+++ b/apps/browser/src/autofill/services/dom-element-visibility.service.ts
@@ -1,3 +1,4 @@
+import { InlineMenuElements } from "../overlay/abstractions/inline-menu-elements";
 import { FillableFormFieldElement, FormFieldElement } from "../types";
 
 import { DomElementVisibilityService as domElementVisibilityServiceInterface } from "./abstractions/dom-element-visibility.service";
@@ -5,6 +6,8 @@ import { DomElementVisibilityService as domElementVisibilityServiceInterface } f
 class DomElementVisibilityService implements domElementVisibilityServiceInterface {
   private cachedComputedStyle: CSSStyleDeclaration | null = null;
 
+  constructor(private inlineMenuElements?: InlineMenuElements) {}
+
   /**
    * Checks if a form field is viewable. This is done by checking if the element is within the
    * viewport bounds, not hidden by CSS, and not hidden behind another element.
@@ -187,6 +190,10 @@ class DomElementVisibilityService implements domElementVisibilityServiceInterfac
       return true;
     }
 
+    if (this.inlineMenuElements?.isElementInlineMenu(elementAtCenterPoint as HTMLElement)) {
+      return true;
+    }
+
     const targetElementLabelsSet = new Set((targetElement as FillableFormFieldElement).labels);
     if (targetElementLabelsSet.has(elementAtCenterPoint as HTMLLabelElement)) {
       return true;