bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Adjusting how we handle fade out of the inline menu element

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-06-05 05:09:54 -05:00
parent 5a1e061778
commit 4477b9b34f
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,8 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
private ariaAlertElement: HTMLDivElement; private ariaAlertElement: HTMLDivElement;
private ariaAlertTimeout: number | NodeJS.Timeout; private ariaAlertTimeout: number | NodeJS.Timeout;
private delayedCloseTimeout: 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<CSSStyleDeclaration> = { private iframeStyles: Partial<CSSStyleDeclaration> = {
all: "initial", all: "initial",
position: "fixed", position: "fixed",
@@ -25,7 +26,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
zIndex: "2147483647", zIndex: "2147483647",
lineHeight: "0", lineHeight: "0",
overflow: "hidden", overflow: "hidden",
transition: this.defaultOpacityTransition, transition: this.fadeInOpacityTransition,
visibility: "visible", visibility: "visible",
clipPath: "none", clipPath: "none",
pointerEvents: "auto", pointerEvents: "auto",
@@ -412,10 +413,13 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
clearTimeout(this.delayedCloseTimeout); 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.delayedCloseTimeout = globalThis.setTimeout(() => {
this.updateElementStyles(this.iframe, { transition: this.defaultOpacityTransition }); this.updateElementStyles(this.iframe, { transition: this.fadeInOpacityTransition });
this.forceCloseAutofillInlineMenu(); this.forceCloseAutofillInlineMenu();
}, 100); }, 100);
} }