1
0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-13 00:51:45 +01:00

[PM-5189] Addressing visual flash bug with repositioning of inline menu

This commit is contained in:
Cesar Gonzalez 2024-03-22 11:58:05 -05:00
parent 533b56682e
commit 208d40809a
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
3 changed files with 27 additions and 11 deletions

View File

@ -268,7 +268,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
}
private async rebuildSubFrameOffsets(sender: chrome.runtime.MessageSender) {
if (sender.frameId === this.focusedFieldData.frameId) {
if (sender.frameId === this.focusedFieldData?.frameId) {
return;
}
@ -277,10 +277,23 @@ class OverlayBackground implements OverlayBackgroundInterface {
return;
}
subFrameOffsetsForTab.forEach((_, frameId) => {
const frameTabs = Array.from(subFrameOffsetsForTab.keys());
for (const frameId of frameTabs) {
if (frameId === sender.frameId) {
continue;
}
subFrameOffsetsForTab.delete(frameId);
void this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
});
await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
}
// TODO: Consider a better way to facilitate this delayed update
setTimeout(() => {
if (this.isFieldCurrentlyFocused) {
void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.List }, sender);
void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.Button }, sender);
}
}, 650);
}
private async buildSubFrameOffsets(tab: chrome.tabs.Tab, frameId: number, url: string) {
@ -298,7 +311,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
const subFrameData = { url, top: 0, left: 0 };
let frameDetails = await BrowserApi.getFrameDetails({ tabId, frameId });
while (frameDetails.parentFrameId !== -1) {
while (frameDetails && frameDetails.parentFrameId !== -1) {
const subFrameOffset: SubFrameOffsetData = await BrowserApi.tabSendMessage(
tab,
{

View File

@ -25,7 +25,6 @@ class AutofillInit implements AutofillInitInterface {
collectPageDetailsImmediately: ({ message }) => this.collectPageDetails(message, true),
fillForm: ({ message }) => this.fillForm(message),
openAutofillOverlay: ({ message }) => this.openAutofillOverlay(message),
// closeAutofillOverlay: ({ message }) => this.removeAutofillOverlay(message),
addNewVaultItemFromOverlay: () => this.addNewVaultItemFromOverlay(),
redirectOverlayFocusOut: ({ message }) => this.redirectOverlayFocusOut(message),
updateIsOverlayCiphersPopulated: ({ message }) => this.updateIsOverlayCiphersPopulated(message),

View File

@ -707,11 +707,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* repositioning of the overlay.
*/
private handleOverlayRepositionEvent = async () => {
this.clearRecalculateSubFrameOffsetsTimeout();
this.recalculateSubFrameOffsetsTimeout = setTimeout(
() => void this.sendExtensionMessage("rebuildSubFrameOffsets"),
750,
);
this.rebuildSubFrameOffsets();
if (
(await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) !== true &&
@ -725,6 +721,14 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
this.userInteractionEventTimeout = setTimeout(this.triggerOverlayRepositionUpdates, 750);
};
private rebuildSubFrameOffsets() {
this.clearRecalculateSubFrameOffsetsTimeout();
this.recalculateSubFrameOffsetsTimeout = setTimeout(
() => void this.sendExtensionMessage("rebuildSubFrameOffsets"),
150,
);
}
/**
* Triggers the overlay reposition updates. This method ensures that the overlay elements
* are correctly positioned when the viewport scrolls or repositions.