From ae5e73b0ae0c555b6e5fc260d83c977ac0dc692c Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Tue, 11 Jun 2024 14:02:46 -0500
Subject: [PATCH] [PM-5189] Fixing an issue found with iframe service
---
.../autofill-inline-menu-iframe.service.ts | 65 ++++++++++---------
1 file changed, 34 insertions(+), 31 deletions(-)
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 a9d42bb46a..ac69b5b620 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
@@ -9,7 +9,8 @@ import {
} from "../abstractions/autofill-inline-menu-iframe.service";
export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframeServiceInterface {
- private sendExtensionMessage = sendExtensionMessage;
+ private readonly setElementStyles = setElementStyles;
+ private readonly sendExtensionMessage = sendExtensionMessage;
private port: chrome.runtime.Port | null = null;
private portKey: string;
private iframeMutationObserver: MutationObserver;
@@ -288,12 +289,42 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
this.unobserveIframe();
- setElementStyles(customElement, styles, true);
- this.iframeStyles = { ...this.iframeStyles, ...styles };
+ this.setElementStyles(customElement, styles, true);
+ if (customElement === this.iframe) {
+ this.iframeStyles = { ...this.iframeStyles, ...styles };
+ }
this.observeIframe();
}
+ /**
+ * Triggers a forced closure of the autofill inline menu. This is used when the
+ * mutation observer is triggered excessively.
+ */
+ private forceCloseInlineMenu() {
+ void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
+ }
+
+ /**
+ * Triggers a delayed closure of the inline menu to ensure that click events are
+ * caught if focus is programmatically redirected away from the inline menu.
+ */
+ private handleDelayedAutofillInlineMenuClosure() {
+ if (this.delayedCloseTimeout) {
+ clearTimeout(this.delayedCloseTimeout);
+ }
+
+ this.updateElementStyles(this.iframe, {
+ transition: this.fadeOutOpacityTransition,
+ opacity: "0",
+ });
+
+ this.delayedCloseTimeout = globalThis.setTimeout(() => {
+ this.updateElementStyles(this.iframe, { transition: this.fadeInOpacityTransition });
+ this.forceCloseInlineMenu();
+ }, 100);
+ }
+
/**
* Handles mutations to the iframe element. The ensures that the iframe
* element's styles are not modified by a third party source.
@@ -323,34 +354,6 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
}
};
- /**
- * Triggers a forced closure of the autofill inline menu. This is used when the
- * mutation observer is triggered excessively.
- */
- private forceCloseInlineMenu() {
- void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
- }
-
- /**
- * Triggers a delayed closure of the inline menu to ensure that click events are
- * caught if focus is programmatically redirected away from the inline menu.
- */
- private handleDelayedAutofillInlineMenuClosure() {
- if (this.delayedCloseTimeout) {
- clearTimeout(this.delayedCloseTimeout);
- }
-
- this.updateElementStyles(this.iframe, {
- transition: this.fadeOutOpacityTransition,
- opacity: "0",
- });
-
- this.delayedCloseTimeout = globalThis.setTimeout(() => {
- this.updateElementStyles(this.iframe, { transition: this.fadeInOpacityTransition });
- this.forceCloseInlineMenu();
- }, 100);
- }
-
/**
* Handles mutations to the iframe element's attributes. This ensures that
* the iframe element's attributes are not modified by a third party source.