diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index a3675566955..aa3f68442e9 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/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 }; } diff --git a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts index d791b130f4d..f5aff5d65f6 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts +++ b/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 { 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 ac69b5b620c..c126ef963c7 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 @@ -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 = { @@ -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.