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

---
 .../autofill/background/overlay.background.ts | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index 9e46bae130f..2f21b795c3f 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -67,7 +67,8 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private delayedCloseTimeout: number | NodeJS.Timeout;
   private startInlineMenuFadeInSubject = new Subject<void>();
   private cancelInlineMenuFadeInSubject = new Subject<boolean>();
-  private repositionInlineMenuSubject = new Subject<chrome.runtime.MessageSender>();
+  private calculateInlineMenuPositionSubject = new Subject<chrome.runtime.MessageSender>();
+  private updateInlineMenuPositionSubject = new Subject<chrome.runtime.MessageSender>();
   private rebuildSubFrameOffsetsSubject = new Subject<chrome.runtime.MessageSender>();
   private focusedFieldData: FocusedFieldData;
   private isFieldCurrentlyFocused: boolean = false;
@@ -155,12 +156,18 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   }
 
   private initOverlayObservables() {
-    this.repositionInlineMenuSubject
+    this.calculateInlineMenuPositionSubject
       .pipe(
         debounceTime(500),
         switchMap((sender) => this.repositionInlineMenu(sender)),
       )
       .subscribe();
+    this.updateInlineMenuPositionSubject
+      .pipe(
+        debounceTime(250),
+        switchMap((sender) => this.updateInlineMenuPositionAfterRepositionEvent(sender)),
+      )
+      .subscribe();
     this.rebuildSubFrameOffsetsSubject
       .pipe(
         throttleTime(600),
@@ -448,6 +455,13 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
+    if (!(await this.checkIsInlineMenuButtonVisible(sender))) {
+      await this.toggleInlineMenuHidden(
+        { isInlineMenuHidden: false, setTransparentInlineMenu: true },
+        sender,
+      );
+    }
+
     void this.updateInlineMenuPosition({ overlayElement: AutofillOverlayElement.Button }, sender);
 
     const mostRecentlyFocusedFieldHasValue = await BrowserApi.tabSendMessage(
@@ -1331,13 +1345,13 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private async triggerOverlayReposition(sender: chrome.runtime.MessageSender) {
     if (await this.checkShouldRepositionInlineMenu(sender)) {
       await this.toggleInlineMenuHidden({ isInlineMenuHidden: true }, sender);
-      this.repositionInlineMenuSubject.next(sender);
+      this.calculateInlineMenuPositionSubject.next(sender);
     }
   }
 
   private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
     this.rebuildSubFrameOffsetsSubject.next(sender);
-    this.repositionInlineMenuSubject.next(sender);
+    this.calculateInlineMenuPositionSubject.next(sender);
   }
 
   private repositionInlineMenu = async (sender: chrome.runtime.MessageSender) => {
@@ -1360,7 +1374,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       this.rebuildSubFrameOffsetsSubject.next(sender);
     }
 
-    await this.updateInlineMenuPositionAfterRepositionEvent(sender);
+    this.updateInlineMenuPositionSubject.next(sender);
   };
 
   private async closeInlineMenuAfterReposition(sender: chrome.runtime.MessageSender) {