From 5868bf40301ee19f0c0262009bbc167e6e1a8387 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Tue, 18 Jun 2024 13:46:59 -0500
Subject: [PATCH] [PM-5189] Reworking how we handle updating the inline menu
 position

---
 .../autofill/background/overlay.background.ts | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index 33c13ab6562..ba917832657 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -1,4 +1,4 @@
-import { firstValueFrom, Subject } from "rxjs";
+import { firstValueFrom, Subject, throttleTime } from "rxjs";
 import { debounceTime, switchMap } from "rxjs/operators";
 
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
@@ -66,7 +66,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private inlineMenuPageTranslations: Record<string, string>;
   private inlineMenuFadeInTimeout: number | NodeJS.Timeout;
   private delayedCloseTimeout: number | NodeJS.Timeout;
-  private repositionInlineMenu$ = new Subject<chrome.runtime.MessageSender>();
+  private repositionInlineMenuDebounce$ = new Subject<chrome.runtime.MessageSender>();
+  private rebuildSubFrameOffsetsThrottle$ = new Subject<chrome.runtime.MessageSender>();
   private focusedFieldData: FocusedFieldData;
   private isFieldCurrentlyFocused: boolean = false;
   private isFieldCurrentlyFilling: boolean = false;
@@ -139,12 +140,18 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     private platformUtilsService: PlatformUtilsService,
     private themeStateService: ThemeStateService,
   ) {
-    this.repositionInlineMenu$
+    this.repositionInlineMenuDebounce$
       .pipe(
         debounceTime(500),
         switchMap((sender) => this.repositionInlineMenu(sender)),
       )
       .subscribe();
+    this.rebuildSubFrameOffsetsThrottle$
+      .pipe(
+        throttleTime(600),
+        switchMap((sender) => this.rebuildSubFrameOffsets(sender)),
+      )
+      .subscribe();
   }
 
   /**
@@ -1308,10 +1315,15 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private async triggerOverlayReposition(sender: chrome.runtime.MessageSender) {
     if (await this.checkShouldRepositionInlineMenu(sender)) {
       await this.toggleInlineMenuHidden({ isInlineMenuHidden: true }, sender);
-      this.repositionInlineMenu$.next(sender);
+      this.repositionInlineMenuDebounce$.next(sender);
     }
   }
 
+  private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
+    this.rebuildSubFrameOffsetsThrottle$.next(sender);
+    this.repositionInlineMenuDebounce$.next(sender);
+  }
+
   private repositionInlineMenu = async (sender: chrome.runtime.MessageSender) => {
     if (!this.isFieldCurrentlyFocused) {
       await this.closeInlineMenuAfterReposition(sender);
@@ -1328,8 +1340,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
-    if (this.focusedFieldData.frameId > 0) {
-      await this.rebuildSubFrameOffsets(sender);
+    if (this.focusedFieldData.frameId > 0 && sender.frameId !== this.focusedFieldData.frameId) {
+      this.rebuildSubFrameOffsetsThrottle$.next(sender);
     }
 
     await this.updateInlineMenuPositionAfterRepositionEvent(sender);
@@ -1342,8 +1354,4 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     );
     this.closeInlineMenu(sender, { forceCloseInlineMenu: true });
   }
-
-  private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
-    this.repositionInlineMenu$.next(sender);
-  }
 }