[PM-5189] Fixing issue found in Safari with how the inline menu is re-positioned

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

@@ -686,15 +686,19 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * This is used to simultaneously fade in the inline menu elements.
    */
   private setInlineMenuFadeInTimeout() {
+    this.clearInlineMenuFadeInTimeout();
+
+    this.inlineMenuFadeInTimeout = globalThis.setTimeout(() => {
+      const message = { command: "fadeInAutofillInlineMenuIframe" };
+      this.inlineMenuButtonPort?.postMessage(message);
+      this.inlineMenuListPort?.postMessage(message);
+    }, 125);
+  }
+
+  private clearInlineMenuFadeInTimeout() {
     if (this.inlineMenuFadeInTimeout) {
       globalThis.clearTimeout(this.inlineMenuFadeInTimeout);
     }
-
-    this.inlineMenuFadeInTimeout = globalThis.setTimeout(() => {
-      const message = { command: "updateAutofillInlineMenuPosition", styles: { opacity: "1" } };
-      this.inlineMenuButtonPort?.postMessage(message);
-      this.inlineMenuListPort?.postMessage(message);
-    }, 50);
   }
 
   /**
@@ -777,11 +781,19 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     { isInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
+    if (isInlineMenuHidden) {
+      this.clearInlineMenuFadeInTimeout();
+    }
+
+    if (setTransparentInlineMenu) {
+      this.setInlineMenuFadeInTimeout();
+    }
+
     const display = isInlineMenuHidden ? "none" : "block";
-    let styles: { display: string; opacity?: number } = { display };
+    let styles: { display: string; opacity?: string } = { display };
 
     if (typeof setTransparentInlineMenu !== "undefined") {
-      const opacity = setTransparentInlineMenu ? 0 : 1;
+      const opacity = setTransparentInlineMenu ? "0" : "1";
       styles = { ...styles, opacity };
     }
 

apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts

@@ -22,6 +22,7 @@ export type BackgroundPortMessageHandlers = {
     message,
   }: AutofillInlineMenuIframeExtensionMessageParam) => void;
   updateAutofillInlineMenuColorScheme: () => void;
+  fadeInAutofillInlineMenuIframe: () => void;
 };
 
 export interface AutofillInlineMenuIframeService {

apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts

@@ -18,6 +18,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
   private ariaAlertElement: HTMLDivElement;
   private ariaAlertTimeout: number | NodeJS.Timeout;
   private delayedCloseTimeout: number | NodeJS.Timeout;
+  private fadeInTimeout: number | NodeJS.Timeout;
   private readonly fadeInOpacityTransition = "opacity 125ms ease-out 0s";
   private readonly fadeOutOpacityTransition = "opacity 65ms ease-out 0s";
   private iframeStyles: Partial<CSSStyleDeclaration> = {
@@ -53,6 +54,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
       this.updateElementStyles(this.iframe, message.styles),
     updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(),
     triggerDelayedAutofillInlineMenuClosure: () => this.handleDelayedAutofillInlineMenuClosure(),
+    fadeInAutofillInlineMenuIframe: () => this.handleFadeInInlineMenuIframe(),
   };
 
   constructor(
@@ -156,7 +158,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
       return;
     }
 
-    this.updateElementStyles(this.iframe, { opacity: "0", height: "0px", display: "block" });
+    this.updateElementStyles(this.iframe, { opacity: "0", height: "0px" });
     this.unobserveIframe();
     this.port?.onMessage.removeListener(this.handlePortMessage);
     this.port?.onDisconnect.removeListener(this.handlePortDisconnect);
@@ -305,6 +307,16 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
     void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
   }
 
+  private handleFadeInInlineMenuIframe() {
+    if (this.fadeInTimeout) {
+      clearTimeout(this.fadeInTimeout);
+    }
+
+    this.fadeInTimeout = globalThis.setTimeout(() => {
+      this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
+    }, 50);
+  }
+
   /**
    * Triggers a delayed closure of the inline menu to ensure that click events are
    * caught if focus is programmatically redirected away from the inline menu.