Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-13 00:51:45 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -268,7 +268,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
} }
private async rebuildSubFrameOffsets(sender: chrome.runtime.MessageSender) { private async rebuildSubFrameOffsets(sender: chrome.runtime.MessageSender) {
if (sender.frameId === this.focusedFieldData.frameId) { if (sender.frameId === this.focusedFieldData?.frameId) {
return; return;
} }
@ -277,10 +277,23 @@ class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
subFrameOffsetsForTab.forEach((_, frameId) => { const frameTabs = Array.from(subFrameOffsetsForTab.keys());
for (const frameId of frameTabs) {
if (frameId === sender.frameId) {
continue;
}
subFrameOffsetsForTab.delete(frameId); 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) { 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 }; const subFrameData = { url, top: 0, left: 0 };
let frameDetails = await BrowserApi.getFrameDetails({ tabId, frameId }); let frameDetails = await BrowserApi.getFrameDetails({ tabId, frameId });
while (frameDetails.parentFrameId !== -1) { while (frameDetails && frameDetails.parentFrameId !== -1) {
const subFrameOffset: SubFrameOffsetData = await BrowserApi.tabSendMessage( const subFrameOffset: SubFrameOffsetData = await BrowserApi.tabSendMessage(
tab, tab,
{ {

1
apps/browser/src/autofill/content/autofill-init.ts
View File

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

14
apps/browser/src/autofill/services/autofill-overlay-content.service.ts
View File

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