Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00
Code Issues Projects Releases Wiki Activity

[PM-5189] Refining how we handle fading in the inline menu elements

Browse Source
This commit is contained in:
Cesar Gonzalez 2024-06-17 12:46:08 -05:00
parent c7708b958b
commit 0109bcacd1
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/browser/src/autofill/background/overlay.background.ts
View File

@ -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();
}
}
/**

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

@ -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);
}
/**