bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 06:43:35 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Reworking how we handle updating the inline menu position

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-06-18 12:07:42 -05:00
parent add2f9ba8a
commit cb76f004b4
1 changed files with 3 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,10 +65,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
private inlineMenuCiphers: Map<string, CipherView> = new Map(); private inlineMenuCiphers: Map<string, CipherView> = new Map();
private inlineMenuPageTranslations: Record<string, string>; private inlineMenuPageTranslations: Record<string, string>;
private inlineMenuFadeInTimeout: number | NodeJS.Timeout; private inlineMenuFadeInTimeout: number | NodeJS.Timeout;
private delayedUpdateInlineMenuPositionTimeout: number | NodeJS.Timeout;
private delayedCloseTimeout: number | NodeJS.Timeout; private delayedCloseTimeout: number | NodeJS.Timeout;
private repositionInlineMenu$ = new Subject<chrome.runtime.MessageSender>(); private repositionInlineMenu$ = new Subject<chrome.runtime.MessageSender>();
private rebuildSubFrameOffsets$ = new Subject<chrome.runtime.MessageSender>();
private focusedFieldData: FocusedFieldData; private focusedFieldData: FocusedFieldData;
private isFieldCurrentlyFocused: boolean = false; private isFieldCurrentlyFocused: boolean = false;
private isFieldCurrentlyFilling: boolean = false; private isFieldCurrentlyFilling: boolean = false;
@@ -147,12 +145,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
switchMap((sender) => this.repositionInlineMenu(sender)), switchMap((sender) => this.repositionInlineMenu(sender)),
) )
.subscribe(); .subscribe();
this.rebuildSubFrameOffsets$
.pipe(
debounceTime(200),
switchMap((sender) => this.rebuildSubFrameOffsets(sender)),
)
.subscribe();
} }
/** /**
@@ -312,7 +304,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
const subFrameOffsetsForTab = this.subFrameOffsetsForTab[sender.tab.id]; const subFrameOffsetsForTab = this.subFrameOffsetsForTab[sender.tab.id];
if (subFrameOffsetsForTab) { if (subFrameOffsetsForTab) {
subFrameOffsetsForTab.set(message.subFrameData.frameId, message.subFrameData); subFrameOffsetsForTab.set(message.subFrameData.frameId, message.subFrameData);
this.delayedUpdateInlineMenuPosition(sender);
} }
} }
@@ -385,7 +376,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
} }
subFrameOffsetsForTab.set(frameId, subFrameData); subFrameOffsetsForTab.set(frameId, subFrameData);
this.delayedUpdateInlineMenuPosition(sender);
} }
/** /**
@@ -426,20 +416,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
} }
} }
/**
* Triggers a delayed repositioning of the inline menu. Used in cases where the page in some way
* is resized, scrolled, or when a sub frame is interacted with.
*
* @param sender - The sender of the message
*/
private delayedUpdateInlineMenuPosition(sender: chrome.runtime.MessageSender) {
this.clearDelayedUpdateInlineMenuPositionTimeout();
this.delayedUpdateInlineMenuPositionTimeout = globalThis.setTimeout(async () => {
this.clearDelayedUpdateInlineMenuPositionTimeout();
await this.updateInlineMenuPositionAfterRepositionEvent(sender);
}, 650);
}
/** /**
* Handles updating the inline menu's position after rebuilding the sub frames * Handles updating the inline menu's position after rebuilding the sub frames
* for the provided tab. Will skip repositioning the inline menu if the field * for the provided tab. Will skip repositioning the inline menu if the field
@@ -597,16 +573,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
} }
} }
/**
* Clears the timeout used to trigger a delayed update of the inline menu position.
*/
private clearDelayedUpdateInlineMenuPositionTimeout() {
if (this.delayedUpdateInlineMenuPositionTimeout) {
clearTimeout(this.delayedUpdateInlineMenuPositionTimeout);
this.delayedUpdateInlineMenuPositionTimeout = null;
}
}
/** /**
* Handles cleanup when an overlay element is closed. Disconnects * Handles cleanup when an overlay element is closed. Disconnects
* the list and button ports and sets them to null. * the list and button ports and sets them to null.
@@ -646,16 +612,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
{ overlayElement }: { overlayElement?: string }, { overlayElement }: { overlayElement?: string },
sender: chrome.runtime.MessageSender, sender: chrome.runtime.MessageSender,
) { ) {
if (this.isFieldCurrentlyFocused && this.delayedUpdateInlineMenuPositionTimeout) { if (!overlayElement || sender.tab.id !== this.focusedFieldData?.tabId) {
this.closeInlineMenu(sender, { forceCloseInlineMenu: true });
return;
}
if (
!overlayElement ||
sender.tab.id !== this.focusedFieldData?.tabId ||
this.delayedUpdateInlineMenuPositionTimeout
) {
return; return;
} }
@@ -1371,9 +1328,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
if (this.focusedFieldData.frameId > 0 && sender.frameId !== this.focusedFieldData.frameId) { if (this.focusedFieldData.frameId > 0) {
this.rebuildSubFrameOffsets$.next(sender); await this.rebuildSubFrameOffsets(sender);
return;
} }
await this.updateInlineMenuPositionAfterRepositionEvent(sender); await this.updateInlineMenuPositionAfterRepositionEvent(sender);