From 4477b9b34fcd49c9eb4170b94fc5823e18b78650 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Wed, 5 Jun 2024 05:09:54 -0500 Subject: [PATCH] [PM-5189] Adjusting how we handle fade out of the inline menu element --- .../autofill-inline-menu-iframe.service.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) 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 28611f5660d..d9b574260c8 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 @@ -17,7 +17,8 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe private ariaAlertElement: HTMLDivElement; private ariaAlertTimeout: number | NodeJS.Timeout; private delayedCloseTimeout: number | NodeJS.Timeout; - private readonly defaultOpacityTransition = "opacity 125ms ease-out 0s"; + private readonly fadeInOpacityTransition = "opacity 125ms ease-out 0s"; + private readonly fadeOutOpacityTransition = "opacity 75ms ease-in 0s"; private iframeStyles: Partial = { all: "initial", position: "fixed", @@ -25,7 +26,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe zIndex: "2147483647", lineHeight: "0", overflow: "hidden", - transition: this.defaultOpacityTransition, + transition: this.fadeInOpacityTransition, visibility: "visible", clipPath: "none", pointerEvents: "auto", @@ -412,10 +413,13 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe clearTimeout(this.delayedCloseTimeout); } - this.updateElementStyles(this.iframe, { opacity: "0", transition: "none" }); + this.updateElementStyles(this.iframe, { + transition: this.fadeOutOpacityTransition, + opacity: "0", + }); this.delayedCloseTimeout = globalThis.setTimeout(() => { - this.updateElementStyles(this.iframe, { transition: this.defaultOpacityTransition }); + this.updateElementStyles(this.iframe, { transition: this.fadeInOpacityTransition }); this.forceCloseAutofillInlineMenu(); }, 100); }