add base ui for secure forward

Author: martgil

extension/css/webmail.css

@@ -202,18 +202,19 @@ body.cryptup_gmail .inserted div.reply_message_button {
   }
 }
 
-body.cryptup_gmail div.menu_reply_message_button {
+body.cryptup_gmail div.action_menu_message_button {
   display: flex;
-  cursor: pointer;
   align-items: center;
+  text-transform: capitalize;
+  cursor: pointer;
   padding: 4px;
 }
 
-body.cryptup_gmail div.menu_reply_message_button:hover {
+body.cryptup_gmail div.action_menu_message_button:hover {
   background-color: #eee; /* mimic Gmail hover. uses exact color pallete from Gmail */
 }
 
-body.cryptup_gmail div.menu_reply_message_button > img {
+body.cryptup_gmail div.action_menu_message_button > img {
   height: 22px;
   width: 20px;
   padding: 0 12px;

extension/img/svgs/forward-icon.svg

@@ -261,10 +261,15 @@ export class XssSafeFactory {
     }
   };
 
-  public btnSecureReply = (placement: 'menu' | 'toolbar' = 'toolbar') => {
-    const msgBtnClassName = placement === 'toolbar' ? 'reply_message_button' : 'menu_reply_message_button';
-    return `<div class="${this.destroyableCls} ${msgBtnClassName}" data-test="secure-reply-button" role="button" tabindex="0" data-tooltip="Secure Reply" aria-label="Secure Reply">
-    <img title="Secure Reply" src="${this.srcImg('svgs/reply-icon.svg')}" />${placement === 'menu' ? '<span>Secure Reply</span>' : ''}
+  public btnSecureReply = () => {
+    return `<div class="${this.destroyableCls} reply_message_button" data-test="secure-reply-button" role="button" tabindex="0" data-tooltip="Secure Reply" aria-label="Secure Reply">
+    <img title="Secure Reply" src="${this.srcImg('svgs/reply-icon.svg')}" />
+    </div>`;
+  };
+
+  public actionsMenuBtn = (action: 'reply' | 'forward') => {
+    return `<div class="action_${action}_message_button action_menu_message_button" role="button" tabindex="0" aria-label="Secure Reply">
+    <img src="${this.srcImg(`svgs/${action}-icon.svg`)}" /><span>secure ${action}</span>
     </div>`;
   };
 

extension/js/common/xss-safe-factory.ts

@@ -280,13 +280,18 @@ export class GmailElementReplacer extends WebmailElementReplacer {
   };
 
   private replaceActionsMenu = () => {
-    const gmailReplyMenuBtn = $(this.sel.msgActionsMenu);
-    if ($('.menu_reply_message_button').length <= 0) {
-      const menuSecureReplyBtn = $(this.factory.btnSecureReply('menu')).prependTo(gmailReplyMenuBtn); // xss-safe-factory
+    const gmailActionsMenuContainer = $(this.sel.msgActionsMenu);
+    if ($('.action_menu_message_button').length <= 0) {
+      const menuSecureReplyBtn = $(this.factory.actionsMenuBtn('reply')).insertAfter($(gmailActionsMenuContainer).find('#r')); // xss-safe-factory
+      const menuSecureForwardBtn = $(this.factory.actionsMenuBtn('forward')).insertAfter($(gmailActionsMenuContainer).find('#r3')); // xss-safe-factory
       menuSecureReplyBtn.on(
         'click',
         Ui.event.handle((el, ev: JQuery.Event) => this.actionActivateSecureReplyHandler(el, ev))
       );
+      menuSecureForwardBtn.on(
+        'click',
+        Ui.event.handle((el, ev: JQuery.Event) => this.actionActivateSecureReplyHandler(el, ev))
+      );
     }
   };
 
@@ -307,7 +312,7 @@ export class GmailElementReplacer extends WebmailElementReplacer {
       for (const elem of convoReplyBtnsArr) {
         $(elem).addClass('inserted');
         const gmailReplyBtn = $(elem).find('.aaq.L3');
-        const secureReplyBtn = $(this.factory.btnSecureReply('toolbar')).insertAfter(gmailReplyBtn); // xss-safe-factory
+        const secureReplyBtn = $(this.factory.btnSecureReply()).insertAfter(gmailReplyBtn); // xss-safe-factory
         secureReplyBtn.addClass(gmailReplyBtn.attr('class') || '');
         secureReplyBtn.off();
         secureReplyBtn.on(
@@ -360,7 +365,7 @@ export class GmailElementReplacer extends WebmailElementReplacer {
 
   private actionActivateSecureReplyHandler = async (btn: HTMLElement, event: JQuery.Event) => {
     event.stopImmediatePropagation();
-    const secureReplyInvokedFromMenu = btn.className.includes('menu_reply_message_button');
+    const secureReplyInvokedFromMenu = btn.className.includes('action_reply_message_button');
     if ($('#switch_to_encrypted_reply').length) {
       $('#switch_to_encrypted_reply').trigger('click');
       return;