bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues 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
2 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -661,6 +661,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
this.clearInlineMenuFadeInTimeout();
await BrowserApi.tabSendMessage( await BrowserApi.tabSendMessage(
sender.tab, sender.tab,
{ command: "appendAutofillInlineMenuToDom", overlayElement }, { command: "appendAutofillInlineMenuToDom", overlayElement },
@@ -673,13 +675,12 @@ export class OverlayBackground implements OverlayBackgroundInterface {
subFrameOffsets = subFrameOffsetsForTab.get(this.focusedFieldData.frameId); subFrameOffsets = subFrameOffsetsForTab.get(this.focusedFieldData.frameId);
} }
this.setInlineMenuFadeInTimeout();
if (overlayElement === AutofillOverlayElement.Button) { if (overlayElement === AutofillOverlayElement.Button) {
this.inlineMenuButtonPort?.postMessage({ this.inlineMenuButtonPort?.postMessage({
command: "updateAutofillInlineMenuPosition", command: "updateAutofillInlineMenuPosition",
styles: this.getInlineMenuButtonPosition(subFrameOffsets), styles: this.getInlineMenuButtonPosition(subFrameOffsets),
}); });
this.setInlineMenuFadeInTimeout();
return; return;
} }
@@ -688,6 +689,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
command: "updateAutofillInlineMenuPosition", command: "updateAutofillInlineMenuPosition",
styles: this.getInlineMenuListPosition(subFrameOffsets), 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 display - The display property of the inline menu, either "block" or "none"
* @param sender - The sender of the extension message * @param sender - The sender of the extension message
*/ */
private updateInlineMenuHidden( private async updateInlineMenuHidden(
{ isInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage, { isInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage,
sender: chrome.runtime.MessageSender, sender: chrome.runtime.MessageSender,
) { ) {
if (isInlineMenuHidden) {
this.clearInlineMenuFadeInTimeout(); this.clearInlineMenuFadeInTimeout();
}
if (setTransparentInlineMenu) {
this.setInlineMenuFadeInTimeout();
}
const display = isInlineMenuHidden ? "none" : "block"; const display = isInlineMenuHidden ? "none" : "block";
let styles: { display: string; opacity?: string } = { display }; let styles: { display: string; opacity?: string } = { display };
@@ -809,7 +805,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
styles = { ...styles, opacity }; styles = { ...styles, opacity };
} }
void BrowserApi.tabSendMessage( await BrowserApi.tabSendMessage(
sender.tab, sender.tab,
{ command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden }, { command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden },
{ frameId: 0 }, { frameId: 0 },
@@ -818,6 +814,10 @@ export class OverlayBackground implements OverlayBackgroundInterface {
const portMessage = { command: "toggleAutofillInlineMenuHidden", styles }; const portMessage = { command: "toggleAutofillInlineMenuHidden", styles };
this.inlineMenuButtonPort?.postMessage(portMessage); this.inlineMenuButtonPort?.postMessage(portMessage);
this.inlineMenuListPort?.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; return;
} }
this.clearFadeInTimeout();
this.updateElementStyles(this.iframe, position); this.updateElementStyles(this.iframe, position);
this.announceAriaAlert(); this.announceAriaAlert();
} }
@@ -308,13 +309,16 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
} }
private handleFadeInInlineMenuIframe() { private handleFadeInInlineMenuIframe() {
this.clearFadeInTimeout();
this.fadeInTimeout = globalThis.setTimeout(() => {
this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
}, 10);
}
private clearFadeInTimeout() {
if (this.fadeInTimeout) { if (this.fadeInTimeout) {
clearTimeout(this.fadeInTimeout); clearTimeout(this.fadeInTimeout);
} }
this.fadeInTimeout = globalThis.setTimeout(() => {
this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
}, 25);
} }
/** /**