#5666 Add compose button on Thunderbird

extension/chrome/elements/compose-modules/compose-quote-module.ts

@@ -17,6 +17,7 @@ import { ViewModule } from '../../../js/common/view-module.js';
 import { ComposeView } from '../compose.js';
 import { MessageToReplyOrForward } from './compose-types.js';
 import { KeyStore } from '../../../js/common/platform/store/key-store.js';
+import { Time } from '../../../js/common/browser/time.js';
 
 export class ComposeQuoteModule extends ViewModule<ComposeView> {
   public tripleDotSanitizedHtmlContent: { quote: string | undefined; footer: string | undefined } | undefined;
@@ -177,6 +178,9 @@ export class ComposeQuoteModule extends ViewModule<ComposeView> {
     if (decryptRes.success) {
       return decryptRes.content.toUtfStr();
     } else if (decryptRes.error && decryptRes.error.type === DecryptErrTypes.needPassphrase) {
+      if (Catch.isThunderbirdMail() && this.view.useFullScreenSecureCompose) {
+        await Time.sleep(2300);
+      }
       BrowserMsg.send.passphraseDialog(this.view.parentTabId, {
         type: 'quote',
         longids: decryptRes.longids.needPassphrase,
@@ -206,7 +210,7 @@ export class ComposeQuoteModule extends ViewModule<ComposeView> {
       return;
     }
     const text = this.messageToReplyOrForward.text;
-    const from = this.messageToReplyOrForward.headers.from;
+    const from = Str.parseEmail(this.messageToReplyOrForward.headers.from || '').email;
     const date = new Date(String(this.messageToReplyOrForward.headers.date));
     const dateStr = Str.fromDate(date).replace(' ', ' at ');
     const rtl = text.match(new RegExp('[' + Str.rtlChars + ']'));
@@ -215,7 +219,8 @@ export class ComposeQuoteModule extends ViewModule<ComposeView> {
     if (method === 'reply') {
       const header = `<div ${dirAttr}>On ${dateStr}, ${from ?? ''} wrote:</div>`;
       const sanitizedQuote = Xss.htmlSanitize(header + escapedText);
-      return `<blockquote ${dirAttr}>${sanitizedQuote}</blockquote>`;
+      const thunderbirdClass = this.view.useFullScreenSecureCompose ? 'class="height-0"' : ''; // fix long quoted email UI issue happens in fullscreen
+      return `<blockquote ${thunderbirdClass} ${dirAttr}>${sanitizedQuote}</blockquote>`;
     } else {
       const header =
         `<div ${dirAttr}>` +

extension/chrome/elements/compose-modules/compose-render-module.ts

@@ -27,7 +27,11 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
   private previousReplyOption: ReplyOption | undefined;
 
   public initComposeBox = async () => {
-    if (this.view.isReplyBox) {
+    if (this.view.useFullScreenSecureCompose) {
+      this.view.S.cached('body').addClass('full_window');
+      this.view.S.cached('password_or_pubkey').height(1); // fix UI issue in fullscreen
+    }
+    if (this.view.replyMsgId) {
       this.responseMethod = 'reply';
     }
     await this.view.replyPopoverModule.render(this.view.isReplyBox);
@@ -41,11 +45,11 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
         this.view.draftModule.startDraftTimer();
         this.view.S.cached('triple_dot').remove(); // if it's draft, footer and quote should already be included in the draft
       }
-      if (this.view.isReplyBox) {
+      if (this.view.replyMsgId) {
         await this.view.renderModule.renderReplyMsgComposeTable();
       }
     } else {
-      if (this.view.isReplyBox && this.view.replyParams) {
+      if (this.view.replyMsgId && this.view.replyParams) {
         const recipients: Recipients = {
           to: this.view.replyParams.to,
           cc: this.view.replyParams.cc,
@@ -99,6 +103,9 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
         )?.value;
       }
       this.view.replyParams.subject = `${this.responseMethod === 'reply' ? 'Re' : 'Fwd'}: ${this.view.replyParams.subject}`;
+      if (this.view.useFullScreenSecureCompose) {
+        this.view.S.cached('input_subject').val(this.view.replyParams.subject);
+      }
     }
     if (!this.view.draftModule.wasMsgLoadedFromDraft) {
       // if there is a draft, don't attempt to pull quoted content. It's assumed to be already present in the draft
@@ -260,6 +267,12 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
     await this.renderReplyMsgComposeTable();
   };
 
+  public actionCloseHandler = async () => {
+    if (!this.view.sendBtnModule.isSendMessageInProgres() || (await Ui.modal.confirm(Lang.compose.abortSending))) {
+      this.view.renderModule.closeMsg();
+    }
+  };
+
   private initComposeBoxStyles = () => {
     if (this.view.isReplyBox) {
       this.view.S.cached('body').addClass('reply_box');
@@ -328,16 +341,12 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
     this.view.S.cached('compose_table').css('display', 'table');
     await this.addComposeTableHandlers();
     await this.view.senderModule.renderSendFromIfMoreThanOneAlias();
-    if (this.view.isReplyBox) {
+    if (this.view.replyMsgId) {
       if (this.view.replyParams?.to.length) {
         // Firefox will not always respond to initial automatic $input_text.blur(): recipients may be left unrendered, as standard text, with a trailing comma
         await this.view.recipientsModule.parseRenderRecipients(this.view.S.cached('input_to')); // this will force firefox to render them on load
       }
     } else {
-      $('.close_compose_window').on(
-        'click',
-        this.view.setHandler(() => this.actionCloseHandler(), this.view.errModule.handle(`close compose window`))
-      );
       this.view.S.cached('title').on('click', () => {
         if (this.view.sizeModule.composeWindowIsMinimized) {
           $('.minimize_compose_window').trigger('click');
@@ -400,12 +409,6 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
     }
   };
 
-  private actionCloseHandler = async () => {
-    if (!this.view.sendBtnModule.isSendMessageInProgres() || (await Ui.modal.confirm(Lang.compose.abortSending))) {
-      this.view.renderModule.closeMsg();
-    }
-  };
-
   private onRecipientsClickHandler = () => {
     if (!this.view.S.cached('input_to').is(':focus')) {
       this.view.errModule.debug(

extension/chrome/elements/compose-modules/compose-reply-btn-popover-module.ts

@@ -45,7 +45,9 @@ export class ComposeReplyBtnPopoverModule extends ViewModule<ComposeView> {
   };
 
   public changeOptionImage = (option: ReplyOption) => {
-    $('.reply-options-icon').attr('src', this.popoverItems[option].iconPath);
+    if (!this.view.useFullScreenSecureCompose) {
+      $('.reply-options-icon').attr('src', this.popoverItems[option].iconPath);
+    }
   };
 
   private didOptionClick = async (option: ReplyOption) => {

extension/chrome/elements/compose.ts

@@ -41,6 +41,7 @@ export class ComposeView extends View {
   public readonly removeAfterClose: boolean;
   public readonly disableDraftSaving: boolean;
   public readonly debug: boolean;
+  public readonly useFullScreenSecureCompose: boolean;
   public readonly isReplyBox: boolean;
   public readonly replyMsgId: string;
   public readonly replyPubkeyMismatch: boolean;
@@ -108,6 +109,7 @@ export class ComposeView extends View {
     toggle_send_options: '#toggle_send_options',
     toggle_reply_options: '#toggle_reply_options',
     icon_pubkey: '.icon.action_include_pubkey',
+    close_compose_window: '.close_compose_window',
     icon_help: '.action_feedback',
     icon_popout: '.popout img',
     triple_dot: '.action_show_prev_msg',
@@ -148,6 +150,7 @@ export class ComposeView extends View {
       'removeAfterClose',
       'replyPubkeyMismatch',
       'replyOption',
+      'useFullScreenSecureCompose',
     ]);
     this.acctEmail = Assert.urlParamRequire.string(uncheckedUrlParams, 'acctEmail');
     this.parentTabId = Assert.urlParamRequire.string(uncheckedUrlParams, 'parentTabId');
@@ -161,7 +164,8 @@ export class ComposeView extends View {
     this.replyPubkeyMismatch = uncheckedUrlParams.replyPubkeyMismatch === true;
     this.draftId = Assert.urlParamRequire.optionalString(uncheckedUrlParams, 'draftId') || '';
     this.replyMsgId = Assert.urlParamRequire.optionalString(uncheckedUrlParams, 'replyMsgId') || '';
-    this.isReplyBox = !!this.replyMsgId;
+    this.useFullScreenSecureCompose = uncheckedUrlParams.useFullScreenSecureCompose === true;
+    this.isReplyBox = !!this.replyMsgId && !this.useFullScreenSecureCompose;
     this.emailProvider = new Gmail(this.acctEmail);
     this.acctServer = new AccountServer(this.acctEmail);
   }
@@ -201,7 +205,7 @@ export class ComposeView extends View {
     }
     BrowserMsg.listen(this.tabId);
     await this.renderModule.initComposeBox();
-    if (this.replyOption && this.isReplyBox) {
+    if (this.replyOption && this.replyMsgId) {
       await this.renderModule.activateReplyOption(this.replyOption, true);
     }
     this.senderModule.checkEmailAliases().catch(Catch.reportErr);
@@ -225,6 +229,10 @@ export class ComposeView extends View {
     });
     this.S.cached('body').on('focusin', setActiveWindow);
     this.S.cached('body').on('click', setActiveWindow);
+    this.S.cached('close_compose_window').on(
+      'click',
+      this.setHandler(async () => await this.renderModule.actionCloseHandler(), this.errModule.handle(`close compose window`))
+    );
     this.S.cached('icon_help').on(
       'click',
       this.setHandler(async () => await this.renderModule.openSettingsWithDialog('help'), this.errModule.handle(`help dialog`))

extension/chrome/settings/inbox/inbox.htm

@@ -17,8 +17,10 @@
 
   <body id="settings" class="client">
     <div class="line header" id="banner">
-      This page has limited functionality. Using FlowCrypt directly in Gmail is more convenient:
-      <a href="https://mail.google.com/" class="action_open_webmail">Open Gmail</a>
+      <div id="container-gmail-banner">
+        This page has limited functionality. Using FlowCrypt directly in Gmail is more convenient:
+        <a href="https://mail.google.com/" class="action_open_webmail">Open Gmail</a>
+      </div>
 
       <img src="/img/svgs/profile-icon.svg" class="action_choose_account action-toggle-accounts-menu profile-img main-profile-img" alt="Profile Image" />
       <img src="/img/svgs/settings-icon.svg" class="action_open_settings" alt="Settings" title="Open FlowCrypt Settings" />

extension/chrome/settings/inbox/inbox.ts

@@ -36,6 +36,9 @@ export class InboxView extends View {
   public readonly threadId: string | undefined;
   public readonly showOriginal: boolean;
   public readonly debug: boolean;
+  public readonly useFullScreenSecureCompose: boolean;
+  public readonly thunderbirdMsgId: number | undefined;
+  public readonly composeMethod: 'reply' | 'forward' | undefined;
   public readonly S: SelCache;
   public readonly gmail: Gmail;
 
@@ -49,12 +52,24 @@ export class InboxView extends View {
 
   public constructor() {
     super();
-    const uncheckedUrlParams = Url.parse(['acctEmail', 'labelId', 'threadId', 'showOriginal', 'debug']);
+    const uncheckedUrlParams = Url.parse([
+      'acctEmail',
+      'labelId',
+      'threadId',
+      'showOriginal',
+      'debug',
+      'useFullScreenSecureCompose',
+      'composeMethod',
+      'thunderbirdMsgId',
+    ]);
     this.acctEmail = Assert.urlParamRequire.string(uncheckedUrlParams, 'acctEmail');
     this.labelId = uncheckedUrlParams.labelId ? String(uncheckedUrlParams.labelId) : 'INBOX';
     this.threadId = Assert.urlParamRequire.optionalString(uncheckedUrlParams, 'threadId');
     this.showOriginal = uncheckedUrlParams.showOriginal === true;
     this.debug = uncheckedUrlParams.debug === true;
+    this.useFullScreenSecureCompose = uncheckedUrlParams.useFullScreenSecureCompose === true;
+    this.composeMethod = (Assert.urlParamRequire.optionalString(uncheckedUrlParams, 'composeMethod') as 'reply') || 'forward';
+    this.thunderbirdMsgId = Number(Assert.urlParamRequire.optionalString(uncheckedUrlParams, 'thunderbirdMsgId'));
     this.S = Ui.buildJquerySels({ threads: '.threads', thread: '.thread', body: 'body' });
     this.gmail = new Gmail(this.acctEmail);
     this.inboxMenuModule = new InboxMenuModule(this);
@@ -72,6 +87,11 @@ export class InboxView extends View {
     ({ email_provider: emailProvider, picture: this.picture } = await AcctStore.get(this.acctEmail, ['email_provider', 'picture']));
     this.messageRenderer = await MessageRenderer.newInstance(this.acctEmail, this.gmail, this.relayManager, this.factory, this.debug);
     this.inboxNotificationModule.render();
+    const parsedThreadId = await this.parseThreadIdFromHeaderMessageId();
+    this.preRenderSecureComposeInFullScreen(parsedThreadId);
+    if (Catch.isThunderbirdMail()) {
+      $('#container-gmail-banner').hide();
+    }
     try {
       await Settings.populateAccountsMenu('inbox.htm');
       if (emailProvider && emailProvider !== 'gmail') {
@@ -81,7 +101,11 @@ export class InboxView extends View {
         if (this.threadId) {
           await this.inboxActiveThreadModule.render(this.threadId);
         } else {
-          await this.inboxListThreadsModule.render(this.labelId);
+          if (parsedThreadId && !this.useFullScreenSecureCompose) {
+            await this.inboxActiveThreadModule.render(parsedThreadId);
+          } else {
+            await this.inboxListThreadsModule.render(this.labelId);
+          }
         }
       }
     } catch (e) {
@@ -133,6 +157,31 @@ export class InboxView extends View {
     Xss.sanitizeRender('h1', title);
   };
 
+  private preRenderSecureComposeInFullScreen = (replyMsgId?: string) => {
+    if (this.useFullScreenSecureCompose && this.composeMethod) {
+      const replyOption = this.composeMethod === 'reply' ? 'a_reply' : 'a_forward';
+      this.injector.openComposeWin(undefined, true, this.thunderbirdMsgId, replyOption, replyMsgId);
+    }
+  };
+
+  private parseThreadIdFromHeaderMessageId = async () => {
+    let threadId;
+    if (Catch.isThunderbirdMail() && this.thunderbirdMsgId) {
+      const { headers } = await messenger.messages.getFull(this.thunderbirdMsgId);
+      if (headers) {
+        const messageId = headers['message-id'][0];
+        if (messageId) {
+          const query = `rfc822msgid:${messageId}`;
+          const gmailRes = await this.gmail.msgList(query);
+          if (gmailRes.messages) {
+            threadId = gmailRes.messages[0].threadId;
+          }
+        }
+      }
+    }
+    return threadId;
+  };
+
   private addBrowserMsgListeners = () => {
     BrowserMsg.addListener('add_end_session_btn', () => this.injector.insertEndSessionBtn(this.acctEmail));
     BrowserMsg.addListener('set_active_window', async ({ frameId }: Bm.ComposeWindow) => {

extension/chrome/settings/initial.ts

@@ -11,6 +11,7 @@ View.run(
       const browserName = Catch.browser().name === 'chrome' && Number(Catch.browser().v) >= 76 ? 'chrome' : Catch.browser().name;
       if (browserName === 'thunderbird') {
         $('#img-setup-arrow').hide();
+        $('#thunderbird-steps').parent().parent().css('text-align', 'center');
       }
       const stepsEl = document.getElementById(`${browserName}-steps`);
       if (stepsEl) {

extension/chrome/settings/setup.htm

@@ -338,7 +338,7 @@ <h1>Set Up FlowCrypt</h1>
 
       <div id="step_4_done">
         <div class="wide line">
-          <a class="button longer green action_send" target="_blank">COMPOSE ENCRYPTED EMAIL</a>
+          <a class="button longer green action_send">COMPOSE ENCRYPTED EMAIL</a>
         </div>
         <div class="wide line">
           <button class="button longer gray action_account_settings" data-test="action-step4done-account-settings">MORE SETTINGS</button>

extension/chrome/settings/setup.ts

@@ -34,6 +34,7 @@ import Swal from 'sweetalert2';
 import { BackupUi } from '../../js/common/ui/backup-ui/backup-ui.js';
 import { InMemoryStoreKeys } from '../../js/common/core/const.js';
 import { InMemoryStore } from '../../js/common/platform/store/in-memory-store.js';
+import { BgUtils } from '../../js/service_worker/bgutils.js';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export interface PassphraseOptions {
@@ -167,7 +168,10 @@ export class SetupView extends View {
       await Ui.modal.info(notification);
     });
     BrowserMsg.listen(this.tabId);
-    $('.action_send').attr('href', Google.webmailUrl(this.acctEmail));
+    $('.action_send').on(
+      'click',
+      this.setHandler(async () => await this.actionComposeEncryptedEmailHandler())
+    );
     $('.action_show_help').on(
       'click',
       this.setHandler(async () => await Settings.renderSubPage(this.acctEmail, this.tabId, '/chrome/settings/modules/help.htm'))
@@ -375,6 +379,12 @@ export class SetupView extends View {
     return true;
   };
 
+  private actionComposeEncryptedEmailHandler = async () => {
+    const inboxUrl = Url.create('/chrome/settings/inbox/inbox.htm', { acctEmail: this.acctEmail });
+    const redirectUrl = Catch.isThunderbirdMail() ? inboxUrl : Google.webmailUrl(this.acctEmail);
+    await BgUtils.openExtensionTab(redirectUrl, true);
+  };
+
   /**
    * empty pubkey means key not usable
    */

extension/css/cryptup.css

@@ -1,4 +1,8 @@
 /* © 2016-2018 FlowCrypt Limited. Limitations apply. Contact human@flowcrypt.com */
+.height-0 {
+  height: 0 !important;
+}
+
 .flex {
   display: flex;
 }