From 0109bcacd17d7c654633e664c84f37543cffc118 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Mon, 17 Jun 2024 12:46:08 -0500
Subject: [PATCH] [PM-5189] Refining how we handle fading in the inline menu
 elements

---
 .../autofill/background/overlay.background.ts | 22 +++++++++----------
 .../autofill-inline-menu-iframe.service.ts    | 12 ++++++----
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index 9d398d6d6f1..f83f423a70f 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -661,6 +661,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
+    this.clearInlineMenuFadeInTimeout();
+
     await BrowserApi.tabSendMessage(
       sender.tab,
       { command: "appendAutofillInlineMenuToDom", overlayElement },
@@ -673,13 +675,12 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       subFrameOffsets = subFrameOffsetsForTab.get(this.focusedFieldData.frameId);
     }
 
-    this.setInlineMenuFadeInTimeout();
-
     if (overlayElement === AutofillOverlayElement.Button) {
       this.inlineMenuButtonPort?.postMessage({
         command: "updateAutofillInlineMenuPosition",
         styles: this.getInlineMenuButtonPosition(subFrameOffsets),
       });
+      this.setInlineMenuFadeInTimeout();
 
       return;
     }
@@ -688,6 +689,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       command: "updateAutofillInlineMenuPosition",
       styles: this.getInlineMenuListPosition(subFrameOffsets),
     });
+    this.setInlineMenuFadeInTimeout();
   }
 
   /**
@@ -789,17 +791,11 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * @param display - The display property of the inline menu, either "block" or "none"
    * @param sender - The sender of the extension message
    */
-  private updateInlineMenuHidden(
+  private async updateInlineMenuHidden(
     { isInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
-    if (isInlineMenuHidden) {
-      this.clearInlineMenuFadeInTimeout();
-    }
-
-    if (setTransparentInlineMenu) {
-      this.setInlineMenuFadeInTimeout();
-    }
+    this.clearInlineMenuFadeInTimeout();
 
     const display = isInlineMenuHidden ? "none" : "block";
     let styles: { display: string; opacity?: string } = { display };
@@ -809,7 +805,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       styles = { ...styles, opacity };
     }
 
-    void BrowserApi.tabSendMessage(
+    await BrowserApi.tabSendMessage(
       sender.tab,
       { command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden },
       { frameId: 0 },
@@ -818,6 +814,10 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     const portMessage = { command: "toggleAutofillInlineMenuHidden", styles };
     this.inlineMenuButtonPort?.postMessage(portMessage);
     this.inlineMenuListPort?.postMessage(portMessage);
+
+    if (setTransparentInlineMenu) {
+      this.setInlineMenuFadeInTimeout();
+    }
   }
 
   /**
diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
index ec5117cefe5..a8d4c7354de 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
@@ -255,6 +255,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
       return;
     }
 
+    this.clearFadeInTimeout();
     this.updateElementStyles(this.iframe, position);
     this.announceAriaAlert();
   }
@@ -308,13 +309,16 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
   }
 
   private handleFadeInInlineMenuIframe() {
+    this.clearFadeInTimeout();
+    this.fadeInTimeout = globalThis.setTimeout(() => {
+      this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
+    }, 10);
+  }
+
+  private clearFadeInTimeout() {
     if (this.fadeInTimeout) {
       clearTimeout(this.fadeInTimeout);
     }
-
-    this.fadeInTimeout = globalThis.setTimeout(() => {
-      this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
-    }, 25);
   }
 
   /**