From b88601d9cfc64f399317937f1e3cf27d39290d02 Mon Sep 17 00:00:00 2001 From: Mart <46025304+martgil@users.noreply.github.com> Date: Fri, 29 Nov 2024 21:43:05 +0800 Subject: [PATCH] #5858 add FlowCrypt secure messaging options in Gmail's actions menu (#5870) * add "secure reply" option in Gmail actions menu * add base ui for secure forward * fix forward icon * add secure forward functionality * add test * revert unneeded changes * update test * update test * remove unneeded attributes * pr reviews: make code concise --- extension/css/webmail.css | 19 ++++++++ extension/img/svgs/forward-icon.svg | 26 +++++++++++ extension/js/common/xss-safe-factory.ts | 6 +++ .../generic/webmail-element-replacer.ts | 3 +- .../webmail/gmail/gmail-element-replacer.ts | 45 +++++++++++++++---- extension/manifest.json | 1 + test/source/tests/gmail.ts | 25 +++++++++++ 7 files changed, 115 insertions(+), 10 deletions(-) create mode 100644 extension/img/svgs/forward-icon.svg diff --git a/extension/css/webmail.css b/extension/css/webmail.css index 09a2869c620..cc45985f285 100644 --- a/extension/css/webmail.css +++ b/extension/css/webmail.css @@ -202,6 +202,25 @@ body.cryptup_gmail .inserted div.reply_message_button { } } +body.cryptup_gmail div.action_menu_message_button { + display: flex; + align-items: center; + text-transform: capitalize; + cursor: pointer; + padding: 4px; +} + +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.action_menu_message_button > img { + height: 20px; + width: 20px; + padding: 0 12px; + object-fit: contain; +} + body.cryptup_gmail.firefox .inserted div.reply_message_button { padding-top: 16px; } diff --git a/extension/img/svgs/forward-icon.svg b/extension/img/svgs/forward-icon.svg new file mode 100644 index 00000000000..e0702a6462f --- /dev/null +++ b/extension/img/svgs/forward-icon.svg @@ -0,0 +1,26 @@ + \ No newline at end of file diff --git a/extension/js/common/xss-safe-factory.ts b/extension/js/common/xss-safe-factory.ts index 676158c75e0..686435c749e 100644 --- a/extension/js/common/xss-safe-factory.ts +++ b/extension/js/common/xss-safe-factory.ts @@ -266,6 +266,12 @@ export class XssSafeFactory { this.destroyableCls } reply_message_button" data-test="secure-reply-button" role="button" tabindex="0" data-tooltip="Secure Reply" aria-label="Secure Reply"> + `; + }; + + public actionsMenuBtn = (action: 'reply' | 'forward') => { + return `
`; }; diff --git a/extension/js/content_scripts/webmail/generic/webmail-element-replacer.ts b/extension/js/content_scripts/webmail/generic/webmail-element-replacer.ts index ed5fbf06606..db51b273ac9 100644 --- a/extension/js/content_scripts/webmail/generic/webmail-element-replacer.ts +++ b/extension/js/content_scripts/webmail/generic/webmail-element-replacer.ts @@ -1,5 +1,6 @@ /* ©️ 2016 - present FlowCrypt a.s. Limitations apply. Contact human@flowcrypt.com */ +import { ReplyOption } from '../../../../chrome/elements/compose-modules/compose-reply-btn-popover-module'; import { ContentScriptWindow } from '../../../common/browser/browser-window'; import { notifyMurdered } from './setup-webmail-content-script'; @@ -9,7 +10,7 @@ export abstract class WebmailElementReplacer { private replacePgpElsInterval: number; public abstract getIntervalFunctions: () => IntervalFunction[]; - public abstract setReplyBoxEditable: () => Promise