#6154 Fix: 3 dot menu action button not appear issue (#6162)

* fix: 3 dot menu action button not appear issue

* feat: added test

* fix: message select issue

Author: ioanatflowcrypt

extension/js/content_scripts/webmail/gmail/gmail-element-replacer.ts

@@ -57,6 +57,7 @@ export class GmailElementReplacer extends WebmailElementReplacer {
     msgInnerText: 'table.cf.An',
     msgInnerContainingPgp: "div.a3s:not(.undefined):contains('" + PgpArmor.headers('null').begin + "')",
     msgActionsBtn: '.Wsq5Cf',
+    msgActionsBtnExpanded: '.Wsq5Cf[aria-expanded="true"]',
     msgActionsMenu: '.tB5Jxf-M-S5Cmsd, ul.aqdrmf-Kf[role="menu"]',
     attachmentsContainerOuter: 'div.hq.gt',
     attachmentsContainerInner: 'div.aQH',
@@ -298,12 +299,18 @@ export class GmailElementReplacer extends WebmailElementReplacer {
   };
 
   private addMenuButton = (replyOption: ReplyOption, gmailContextMenuBtn: Element | null) => {
-    if (gmailContextMenuBtn && $(gmailContextMenuBtn).is(':visible') && !document.querySelector(`.action_${replyOption.replace('a_', '')}_message_button`)) {
-      const button = $(this.factory.btnSecureMenuBtn(replyOption)).insertAfter(gmailContextMenuBtn); // xss-safe-factory
-      button.on(
-        'click',
-        Ui.event.handle((el, ev: JQuery.Event) => this.actionActivateSecureReplyHandler(el, ev))
-      );
+    if (gmailContextMenuBtn && $(gmailContextMenuBtn).is(':visible')) {
+      const btnClass = `action_${replyOption.replace('a_', '')}_message_button`;
+      // Check if button already exists in this specific menu (sibling of the target button)
+      const alreadyExists = $(gmailContextMenuBtn).parent().find(`.${btnClass}`).length > 0;
+
+      if (!alreadyExists) {
+        const button = $(this.factory.btnSecureMenuBtn(replyOption)).insertAfter(gmailContextMenuBtn); // xss-safe-factory
+        button.on(
+          'click',
+          Ui.event.handle((el, ev: JQuery.Event) => this.actionActivateSecureReplyHandler(el, ev))
+        );
+      }
     }
   };
 
@@ -402,7 +409,7 @@ export class GmailElementReplacer extends WebmailElementReplacer {
       this.insertEncryptedReplyBox(messageContainer, replyOption);
     }
     if (secureReplyInvokedFromMenu) {
-      $(this.sel.msgActionsBtn).trigger('click');
+      $(this.sel.msgActionsBtnExpanded).trigger('click');
     }
   };
 
@@ -970,7 +977,25 @@ export class GmailElementReplacer extends WebmailElementReplacer {
     }
 
     // Find the message container from the menu's position or context
-    const messageContainer = $('div.h7:visible').last(); // Get the last visible message container
+    let messageContainer;
+
+    // Try to find the trigger button that opened this menu (it should have aria-expanded="true")
+    const messageContainerSelector = 'div.h7:visible';
+    const menuTrigger = document.querySelector(this.sel.msgActionsBtnExpanded);
+
+    if (menuTrigger) {
+      if (this.debug) {
+        console.debug('addSecureActionsToMessageMenu found menu trigger:', menuTrigger);
+      }
+      messageContainer = $(menuTrigger).closest(this.sel.msgOuter).closest(messageContainerSelector);
+      if (!messageContainer.length) {
+        // Fallback
+        messageContainer = $(messageContainerSelector).last();
+      }
+    } else {
+      messageContainer = $(messageContainerSelector).last(); // Get the last visible message container
+    }
+
     const msgIdElement = messageContainer.find('[data-legacy-message-id], [data-message-id]');
     const msgId = msgIdElement.attr('data-legacy-message-id') || msgIdElement.attr('data-message-id');
 

test/source/tests/gmail.ts

@@ -719,6 +719,44 @@ export const defineGmailTests = (testVariant: TestVariant, testWithBrowser: Test
     //   expect(content).to.contain('Fingerprint: 7A2E 4FFD 34BC 4AED 0F54 4199 D652 7AD6 65C3 B0DD');
     // }));
 
+    test(
+      'mail.google.com - verify secure reply buttons on expanded older message',
+      testWithBrowser(async (t, browser) => {
+        await BrowserRecipe.setUpCommonAcct(t, browser, 'ci.tests.gmail');
+        const gmailPage = await openGmailPage(t, browser);
+        // Use a known thread with multiple messages.
+        await gotoGmailPage(gmailPage, '/FMfcgzGqRGfPBbNLWvfPvDbxnHBwkdGf');
+
+        // 1. Verify buttons on the newest message (usually expanded by default)
+        await Util.sleep(3);
+        let messages = await gmailPage.target.$$('[role="listitem"] .adn.ads');
+        const newestMessage = messages[messages.length - 1]; 
+        const newestMenuBtn = await newestMessage.$('[aria-label="More message options"]');
+        await newestMenuBtn?.click();
+        await Util.sleep(1);
+        
+        await gmailPage.waitAll('.action_reply_message_button');
+        const collapsedMessage = await gmailPage.target.$('[role="listitem"] .adf.ads');
+        if (collapsedMessage) {
+            await collapsedMessage.click();
+            await Util.sleep(2);
+        }
+
+        // Now find the 3-dot menu on this expanded older message.
+        // After expansion, it should have .adn.ads class active/visible.
+        
+        messages = await gmailPage.target.$$('[role="listitem"] .adn.ads');
+        const olderExpandedMessage = messages[0];
+        const olderMenuBtn = await olderExpandedMessage.$('[aria-label="More message options"]');
+        expect(olderMenuBtn).to.be.ok;
+        await olderMenuBtn?.click();
+        await Util.sleep(1);
+
+        // Verify secure buttons exist in the open menu for the older message
+        await gmailPage.waitAll('.action_reply_message_button');
+      })
+    );
+
     const testMinimumElementHeight = async (page: ControllablePage, selector: string, min: number) => {
       // testing https://github.com/FlowCrypt/flowcrypt-browser/issues/3519
       const elStyle = await page.target.$eval(selector, el => el.getAttribute('style')); // 'height: 289.162px;'