From 45c1f78485be4c0c50e82a7af0b4f8aff71e1507 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Mon, 24 Jun 2024 19:08:02 -0500
Subject: [PATCH] [PM-5189] Fixing issues found within code review behind how
 we position elements

---
 .../src/autofill/background/overlay.background.ts        | 9 ++++++---
 .../autofill-inline-menu-iframe.service.ts               | 7 ++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index 1248dec09e9..7cdd8fb3776 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -173,6 +173,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       )
       .subscribe();
 
+    // Debounce used to update inline menu position
     merge(
       this.startUpdateInlineMenuPositionSubject.pipe(debounceTime(150)),
       this.cancelUpdateInlineMenuPositionSubject,
@@ -793,8 +794,11 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     { isInlineMenuHidden, setTransparentInlineMenu }: ToggleInlineMenuHiddenMessage,
     sender: chrome.runtime.MessageSender,
   ) {
-    this.cancelInlineMenuFadeIn();
+    if (sender.tab.id !== this.focusedFieldData?.tabId) {
+      return;
+    }
 
+    this.cancelInlineMenuFadeIn();
     const display = isInlineMenuHidden ? "none" : "block";
     let styles: { display: string; opacity?: string } = { display };
 
@@ -1199,6 +1203,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    */
   private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
     this.rebuildSubFrameOffsetsSubject.next(sender);
+    this.cancelUpdateInlineMenuPositionSubject.next();
     this.repositionInlineMenuSubject.next(sender);
   }
 
@@ -1209,7 +1214,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * @param sender - The sender of the message
    */
   private repositionInlineMenu = async (sender: chrome.runtime.MessageSender) => {
-    this.cancelUpdateInlineMenuPositionSubject.next();
     if (!this.isFieldCurrentlyFocused) {
       await this.closeInlineMenuAfterReposition(sender);
       return;
@@ -1229,7 +1233,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       this.rebuildSubFrameOffsetsSubject.next(sender);
     }
 
-    this.cancelUpdateInlineMenuPositionSubject.next();
     this.startUpdateInlineMenuPositionSubject.next(sender);
   };
 
diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
index 51de9769a10..dc5695989cd 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
@@ -313,9 +313,10 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
    */
   private handleFadeInInlineMenuIframe() {
     this.clearFadeInTimeout();
-    this.fadeInTimeout = globalThis.setTimeout(() => {
-      this.updateElementStyles(this.iframe, { display: "block", opacity: "1" });
-    }, 10);
+    this.fadeInTimeout = globalThis.setTimeout(
+      () => this.updateElementStyles(this.iframe, { display: "block", opacity: "1" }),
+      10,
+    );
   }
 
   /**