Bug 1825115 - Add "Use Relay email mask" to the context menu on <input type=email> r=groovecoder,credential-management-reviewers,flod,issammani

Differential Revision: https://phabricator.services.mozilla.com/D174361

browser/actors/ContextMenuChild.sys.mjs

@@ -11,6 +11,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
   E10SUtils: "resource://gre/modules/E10SUtils.sys.mjs",
   InlineSpellCheckerContent:
     "resource://gre/modules/InlineSpellCheckerContent.sys.mjs",
+  LoginHelper: "resource://gre/modules/LoginHelper.sys.mjs",
   LoginManagerChild: "resource://gre/modules/LoginManagerChild.sys.mjs",
   SelectionUtils: "resource://gre/modules/SelectionUtils.sys.mjs",
   SpellCheckHelper: "resource://gre/modules/InlineSpellChecker.sys.mjs",
@@ -174,6 +175,14 @@ export class ContextMenuChild extends JSWindowActorChild {
         break;
       }
 
+      case "ContextMenu:UseRelayMask": {
+        const input = lazy.ContentDOMReference.resolve(
+          message.data.targetIdentifier
+        );
+        input.setUserInput(message.data.emailMask);
+        break;
+      }
+
       case "ContextMenu:ReloadImage": {
         let image = lazy.ContentDOMReference.resolve(
           message.data.targetIdentifier
@@ -1060,6 +1069,13 @@ export class ContextMenuChild extends JSWindowActorChild {
       context.onNumeric = (editFlags & lazy.SpellCheckHelper.NUMERIC) !== 0;
       context.onEditable = (editFlags & lazy.SpellCheckHelper.EDITABLE) !== 0;
       context.onPassword = (editFlags & lazy.SpellCheckHelper.PASSWORD) !== 0;
+
+      context.showRelay =
+        HTMLInputElement.isInstance(context.target) &&
+        !context.target.disabled &&
+        !context.target.readOnly &&
+        (lazy.LoginHelper.isInferredEmailField(context.target) ||
+          lazy.LoginHelper.isInferredUsernameField(context.target));
       context.isDesignMode =
         (editFlags & lazy.SpellCheckHelper.CONTENTEDITABLE) !== 0;
       context.passwordRevealed =

browser/actors/ContextMenuParent.sys.mjs

@@ -3,6 +3,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  FirefoxRelay: "resource://gre/modules/FirefoxRelay.sys.mjs",
+});
+
 export class ContextMenuParent extends JSWindowActorParent {
   receiveMessage(message) {
     let browser = this.manager.rootFrameLoader.ownerElement;
@@ -17,6 +23,8 @@ export class ContextMenuParent extends JSWindowActorParent {
       win = topBrowser.ownerGlobal;
     }
 
+    message.data.context.showRelay &&= lazy.FirefoxRelay.isEnabled;
+
     win.openContextMenu(message, browser, this);
   }
 
@@ -48,6 +56,22 @@ export class ContextMenuParent extends JSWindowActorParent {
     });
   }
 
+  async useRelayMask(targetIdentifier, origin) {
+    if (!origin) {
+      return;
+    }
+
+    const windowGlobal = this.manager.browsingContext.currentWindowGlobal;
+    const browser = windowGlobal.rootFrameLoader.ownerElement;
+    const emailMask = await lazy.FirefoxRelay.generateUsername(browser, origin);
+    if (emailMask) {
+      this.sendAsyncMessage("ContextMenu:UseRelayMask", {
+        targetIdentifier,
+        emailMask,
+      });
+    }
+  }
+
   reloadImage(targetIdentifier) {
     this.sendAsyncMessage("ContextMenu:ReloadImage", { targetIdentifier });
   }

browser/base/content/browser-context.inc

@@ -281,6 +281,10 @@
                 data-l10n-id="main-context-menu-suggest-strong-password"
                 hidden="true"
                 oncommand="gContextMenu.useGeneratedPassword();"/>
+      <menuitem id="use-relay-mask"
+                data-l10n-id="main-context-menu-use-relay-mask"
+                hidden="true"
+                oncommand="gContextMenu.useRelayMask();"/>
       <menuitem id="manage-saved-logins"
                 data-l10n-id="main-context-menu-manage-logins2"
                 hidden="true"

browser/base/content/nsContextMenu.js

@@ -61,6 +61,7 @@ function openContextMenu(aMessage, aBrowser, aActor) {
     frameBrowsingContext: wgp.browsingContext,
     selectionInfo: data.selectionInfo,
     disableSetDesktopBackground: data.disableSetDesktopBackground,
+    showRelay: data.showRelay,
     loginFillInfo: data.loginFillInfo,
     userContextId: wgp.browsingContext.originAttributes.userContextId,
     webExtContextData: data.webExtContextData,
@@ -1191,8 +1192,13 @@ class nsContextMenu {
       let popup = document.getElementById("fill-login-popup");
       popup.appendChild(fragment);
     } finally {
+      const documentURI = this.contentData?.documentURIObject;
+      const origin = LoginHelper.getLoginOrigin(documentURI?.spec);
+      const showRelay = origin && this.contentData?.context.showRelay;
+
       this.showItem("fill-login", showUseSavedLogin);
       this.showItem("fill-login-generated-password", showGenerate);
+      this.showItem("use-relay-mask", showRelay);
       this.showItem("manage-saved-logins", showManage);
       this.setItemAttr(
         "fill-login-generated-password",
@@ -1202,7 +1208,9 @@ class nsContextMenu {
       this.setItemAttr(
         "passwordmgr-items-separator",
         "ensureHidden",
-        showUseSavedLogin || showGenerate || showManage ? null : true
+        showUseSavedLogin || showGenerate || showManage || showRelay
+          ? null
+          : true
       );
     }
   }
@@ -1333,6 +1341,12 @@ class nsContextMenu {
     });
   }
 
+  useRelayMask() {
+    const documentURI = this.contentData?.documentURIObject;
+    const origin = LoginHelper.getLoginOrigin(documentURI?.spec);
+    this.actor.useRelayMask(this.targetIdentifier, origin);
+  }
+
   useGeneratedPassword() {
     nsContextMenu.LoginManagerContextMenu.useGeneratedPassword(
       this.targetIdentifier,

browser/base/content/test/contextMenu/browser_contextmenu_input.js

@@ -176,6 +176,70 @@ add_task(async function test_password_input() {
   await SpecialPowers.popPrefEnv();
 });
 
+add_task(async function firefox_relay_input() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["signon.firefoxRelay.feature", "enabled"]],
+  });
+
+  await test_contextmenu("#input_username", [
+    "use-relay-mask",
+    true,
+    "---",
+    null,
+    "context-undo",
+    false,
+    "context-redo",
+    false,
+    "---",
+    null,
+    "context-cut",
+    false,
+    "context-copy",
+    false,
+    "context-paste",
+    null, // ignore clipboard state
+    "context-delete",
+    false,
+    "context-selectall",
+    false,
+    "---",
+    null,
+    "spell-check-enabled",
+    true,
+  ]);
+
+  await test_contextmenu(
+    "#input_email",
+    [
+      "use-relay-mask",
+      true,
+      "---",
+      null,
+      "context-undo",
+      false,
+      "context-redo",
+      false,
+      "---",
+      null,
+      "context-cut",
+      false,
+      "context-copy",
+      false,
+      "context-paste",
+      null, // ignore clipboard state
+      "context-delete",
+      false,
+      "context-selectall",
+      null,
+    ],
+    {
+      skipFocusChange: true,
+    }
+  );
+
+  await SpecialPowers.popPrefEnv();
+});
+
 add_task(async function test_tel_email_url_number_input() {
   todo(
     false,

browser/base/content/test/contextMenu/subtst_contextmenu_input.html

@@ -25,5 +25,6 @@
   <input id="input_week" type="week">
   <input id="input_datetime-local" type="datetime-local">
   <input id="input_readonly" readonly="true">
+  <input id="input_username" name="username">
 </body>
 </html>

browser/locales/en-US/browser/browserContext.ftl

@@ -357,6 +357,10 @@ main-context-menu-use-saved-password =
 
 ##
 
+main-context-menu-use-relay-mask =
+    .label = Use { -relay-brand-short-name } Email Mask
+    .accesskey = E
+
 main-context-menu-suggest-strong-password =
     .label = Suggest Strong Password…
     .accesskey = S

toolkit/components/passwordmgr/FirefoxRelay.sys.mjs

@@ -54,7 +54,7 @@ XPCOMUtils.defineLazyGetter(lazy, "strings", function() {
 });
 
 if (Services.appinfo.processType !== Services.appinfo.PROCESS_TYPE_DEFAULT) {
-  throw new Error("FirefoxRelay.jsm should only run in the parent process");
+  throw new Error("FirefoxRelay.sys.mjs should only run in the parent process");
 }
 
 async function getRelayTokenAsync() {