Bug 1562006 - Update FxA toolbar menu for skyline r=eoger,Gijs,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D37961 --HG-- extra : moz-landing-system : lando
2019-08-02 13:55:19 +00:00 · 2019-08-02 13:55:19 +00:00 · d9c1062c1c
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@ -1889,6 +1889,10 @@ pref("browser.toolbars.keyboard_navigation", true);
 pref("identity.fxaccounts.toolbar.enabled", true);
 pref("identity.fxaccounts.toolbar.accessed", false);

+// Prefs for different services supported by Firefox Account
+pref("identity.fxaccounts.service.sendLoginUrl", "https://send.firefox.com/login/");
+pref("identity.fxaccounts.service.monitorLoginUrl", "https://monitor.firefox.com/");
+
 // Check bundled JAR and XPI files for corruption.
 #ifdef RELEASE_OR_BETA
 pref("corroborator.enabled", false);
--- a/browser/base/content/browser-doctype.inc
+++ b/browser/base/content/browser-doctype.inc
@ -14,6 +14,8 @@
 %placesDTD;
 <!ENTITY % syncBrandDTD SYSTEM "chrome://browser/locale/syncBrand.dtd">
 %syncBrandDTD;
+<!ENTITY % brandingsDTD SYSTEM "chrome://browser/locale/brandings.dtd">
+%brandingsDTD;
 <!ENTITY % reportphishDTD SYSTEM "chrome://browser/locale/safebrowsing/report-phishing.dtd">
 %reportphishDTD;
 <!ENTITY % editBookmarkOverlayDTD SYSTEM "chrome://browser/locale/places/editBookmarkOverlay.dtd">
--- a/browser/base/content/browser-sync.js
+++ b/browser/base/content/browser-sync.js
@ -50,6 +50,13 @@ var gSync = {
    ));
  },

+  get brandStrings() {
+    delete this.brandStrings;
+    return (this.brandStrings = Services.strings.createBundle(
+      "chrome://branding/locale/brand.properties"
+    ));
+  },
+
  get syncReady() {
    return Cc["@mozilla.org/weave/service;1"].getService().wrappedJSObject
      .ready;
@ -324,7 +331,11 @@ var gSync = {
    }
  },

-  toggleAccountPanel(viewId, aEvent) {
+  toggleAccountPanel(
+    viewId,
+    anchor = document.getElementById("fxa-toolbar-menu-button"),
+    aEvent
+  ) {
    // Don't show the panel if the window is in customization mode.
    if (document.documentElement.hasAttribute("customizing")) {
      return;
@ -346,7 +357,6 @@ var gSync = {

    this.enableSendTabIfValidTab();

-    const anchor = document.getElementById("fxa-toolbar-menu-button");
    if (anchor.getAttribute("open") == "true") {
      PanelUI.hide();
    } else {
@ -363,14 +373,48 @@ var gSync = {
    // state shows an avatar with an email icon and the `verified` state will show
    // the users custom profile image or a filled avatar.
    let stateValue = "not_configured";
-    document.getElementById("PanelUI-fxa").removeAttribute("title");
+
+    const menuHeaderTitleEl = document.getElementById("fxa-menu-header-title");
+    const menuHeaderDescriptionEl = document.getElementById(
+      "fxa-menu-header-description"
+    );
+
+    const cadButtonEl = document.getElementById(
+      "PanelUI-fxa-menu-connect-device-button"
+    );
+    const syncNowButtonEl = document.getElementById(
+      "PanelUI-fxa-menu-syncnow-button"
+    );
+    const fxaMenuPanel = document.getElementById("PanelUI-fxa");
+
+    let headerTitle = menuHeaderTitleEl.getAttribute("defaultLabel");
+    let headerDescription = menuHeaderDescriptionEl.getAttribute(
+      "defaultLabel"
+    );
+
+    const appMenuFxAButtonEl = document.getElementById("appMenu-fxa-label");
+
+    let panelTitle = this.fxaStrings.GetStringFromName("account.title");
+
+    fxaMenuPanel.removeAttribute("title");
+    cadButtonEl.setAttribute("disabled", true);
+    syncNowButtonEl.setAttribute("disabled", true);
+
    if (state.status === UIState.STATUS_NOT_CONFIGURED) {
      mainWindowEl.style.removeProperty("--avatar-image-url");
-    } else if (
-      state.status === UIState.STATUS_LOGIN_FAILED ||
-      state.status === UIState.STATUS_NOT_VERIFIED
-    ) {
+    } else if (state.status === UIState.STATUS_LOGIN_FAILED) {
      stateValue = "unverified";
+      headerTitle = this.fxaStrings.formatStringFromName(
+        "account.reconnectToSync",
+        [this.brandStrings.GetStringFromName("syncBrandShortName")]
+      );
+      headerDescription = state.email;
+    } else if (state.status === UIState.STATUS_NOT_VERIFIED) {
+      stateValue = "unverified";
+      headerTitle = this.fxaStrings.GetStringFromName(
+        "account.finishAccountSetup"
+      );
+      headerDescription = state.email;
    } else if (state.status === UIState.STATUS_SIGNED_IN) {
      stateValue = "signedin";
      if (state.avatarURL && !state.avatarIsDefault) {
@ -392,19 +436,23 @@ var gSync = {
        mainWindowEl.style.removeProperty("--avatar-image-url");
      }

-      document.getElementById("fxa-menu-email").value = state.email;
+      cadButtonEl.removeAttribute("disabled");
+      syncNowButtonEl.removeAttribute("disabled");

-      let defaultPanelTitle = this.fxaStrings.GetStringFromName(
-        "account.title"
+      headerTitle = state.email;
+      headerDescription = this.fxaStrings.GetStringFromName(
+        "account.manageAccount"
      );
-      document
-        .getElementById("PanelUI-fxa")
-        .setAttribute(
-          "title",
-          state.displayName ? state.displayName : defaultPanelTitle
-        );
+
+      panelTitle = state.displayName ? state.displayName : panelTitle;
    }
    mainWindowEl.setAttribute("fxastatus", stateValue);
+
+    menuHeaderTitleEl.value = headerTitle;
+    menuHeaderDescriptionEl.value = headerDescription;
+    appMenuFxAButtonEl.setAttribute("label", headerTitle);
+
+    fxaMenuPanel.setAttribute("title", panelTitle);
  },

  enableSendTabIfValidTab() {
@ -536,28 +584,6 @@ var gSync = {
    }
  },

-  onMenuPanelCommand() {
-    switch (this.appMenuStatus.getAttribute("fxastatus")) {
-      case "signedin":
-        const panel = document.getElementById("appMenu-fxa-status");
-        this.emitFxaToolbarTelemetry("toolbar_icon", panel);
-        PanelUI.showSubView("PanelUI-fxa", panel);
-        break;
-      case "unverified":
-        this.openPrefs("menupanel", "fxaError");
-        PanelUI.hide();
-        break;
-      case "error":
-        this.openSignInAgainPage("menupanel");
-        PanelUI.hide();
-        break;
-      default:
-        this.openPrefs("menupanel", "fxa");
-        PanelUI.hide();
-        break;
-    }
-  },
-
  async openSignInAgainPage(entryPoint) {
    const url = await FxAccounts.config.promiseForceSigninURI(entryPoint);
    switchToTabHavingURI(url, true, {
@ -594,6 +620,25 @@ var gSync = {
    switchToTabHavingURI(url, true, { replaceQueryString: true });
  },

+  async clickFxAMenuHeaderButton(panel = undefined) {
+    // Depending on the current logged in state of a user,
+    // clicking the FxA header will either open
+    // a sign-in page, account management page, or sync
+    // preferences page.
+    const { status } = UIState.get();
+    switch (status) {
+      case UIState.STATUS_NOT_CONFIGURED:
+        this.openFxAEmailFirstPageFromFxaMenu(panel);
+        break;
+      case UIState.STATUS_LOGIN_FAILED:
+      case UIState.STATUS_NOT_VERIFIED:
+        this.openPrefsFromFxaMenu("sync_settings", panel);
+        break;
+      case UIState.STATUS_SIGNED_IN:
+        this.openFxAManagePageFromFxaMenu(panel);
+    }
+  },
+
  async openFxAEmailFirstPage(entryPoint) {
    const url = await FxAccounts.config.promiseEmailFirstURI(entryPoint);
    switchToTabHavingURI(url, true, { replaceQueryString: true });
@ -622,6 +667,34 @@ var gSync = {
    this.openFxAManagePage(entryPoint);
  },

+  async openSendFromFxaMenu(panel) {
+    this.emitFxaToolbarTelemetry("open_send", panel);
+    this.launchFxaService(gFxaSendLoginUrl);
+  },
+
+  async openMonitorFromFxaMenu(panel) {
+    this.emitFxaToolbarTelemetry("open_monitor", panel);
+    this.launchFxaService(gFxaMonitorLoginUrl);
+  },
+
+  launchFxaService(serviceUrl, panel) {
+    let entryPoint = "fxa_discoverability_native";
+    if (this.isPanelInsideAppMenu(panel)) {
+      entryPoint = "fxa_app_menu";
+    }
+
+    const url = new URL(serviceUrl);
+    url.searchParams.set("utm_source", Services.appinfo.name.toLowerCase());
+    url.searchParams.set("entrypoint", entryPoint);
+
+    const state = UIState.get();
+    if (state.status == UIState.STATUS_SIGNED_IN) {
+      url.searchParams.set("email", state.email);
+    }
+
+    switchToTabHavingURI(url, true, { replaceQueryString: true });
+  },
+
  async sendTabToDevice(url, targets, title) {
    const fxaCommandsDevices = [];
    const oldSendTabClients = [];
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -489,6 +489,26 @@ XPCOMUtils.defineLazyPreferenceGetter(
  }
 );

+XPCOMUtils.defineLazyPreferenceGetter(
+  this,
+  "gFxaSendLoginUrl",
+  "identity.fxaccounts.service.sendLoginUrl",
+  false,
+  (aPref, aOldVal, aNewVal) => {
+    showFxaToolbarMenu(gFxaToolbarEnabled);
+  }
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  this,
+  "gFxaMonitorLoginUrl",
+  "identity.fxaccounts.service.monitorLoginUrl",
+  false,
+  (aPref, aOldVal, aNewVal) => {
+    showFxaToolbarMenu(gFxaToolbarEnabled);
+  }
+);
+
 XPCOMUtils.defineLazyPreferenceGetter(
  this,
  "gMsgingSystemFxABadge",
@ -648,6 +668,18 @@ function showFxaToolbarMenu(enable) {
    } else {
      mainWindowEl.removeAttribute("fxa_avatar_badged");
    }
+
+    // When the pref for a FxA service is removed, we remove it from
+    // the FxA toolbar menu as well. This is useful when the service
+    // might not be available that browser.
+    document.getElementById(
+      "PanelUI-fxa-menu-send-button"
+    ).hidden = !gFxaSendLoginUrl;
+    document.getElementById(
+      "PanelUI-fxa-menu-monitor-button"
+    ).hidden = !gFxaMonitorLoginUrl;
+    document.getElementById("fxa-menu-service-separator").hidden =
+      !gFxaSendLoginUrl && !gFxaMonitorLoginUrl;
  } else {
    mainWindowEl.removeAttribute("fxatoolbarmenu");
  }
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@ -1082,8 +1082,8 @@

        <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
                       badged="true"
-                       onmousedown="gSync.toggleAccountPanel('PanelUI-fxa', event)"
-                       onkeypress="gSync.toggleAccountPanel('PanelUI-fxa', event)"
+                       onmousedown="gSync.toggleAccountPanel('PanelUI-fxa', this, event)"
+                       onkeypress="gSync.toggleAccountPanel('PanelUI-fxa', this, event)"
                       consumeanchor="fxa-toolbar-menu-button"
                       closemenu="none"
                       label="&fxa.menu.firefoxAccount;"
--- a/browser/base/content/logos/send.svg
+++ b/browser/base/content/logos/send.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><defs><linearGradient id="a" x1="57.082" y1="5.474" x2="18.997" y2="71.439" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" x1="57.082" y1="5.474" x2="18.997" y2="71.439" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="48.99" y1="47.048" x2="66.606" y2="16.537" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0090ed"/><stop offset=".386" stop-color="#5b6df8"/><stop offset=".629" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" x1="48.305" y1="37.697" x2="75.234" y2="44.176" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="66.607" y1="16.536" x2="58.343" y2="30.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".5" stop-color="#722291" stop-opacity="0"/></linearGradient></defs><path fill="none" d="M0 0h80v80H0z"/><path d="M40 0A40.136 40.136 0 0 0 0 39.562 4.4 4.4 0 0 0 4.4 44H36v21.284l-10.174-10.16a4 4 0 1 0-5.652 5.661l17 16.977a4 4 0 0 0 5.652 0l17-16.977a4 4 0 1 0-5.652-5.661L44 65.284V44h31.6a4.4 4.4 0 0 0 4.4-4.447A40.133 40.133 0 0 0 40 0zM8.248 36a32 32 0 0 1 63.505 0z" fill="url(#a)"/><path d="M40 0A40.136 40.136 0 0 0 0 39.562 4.4 4.4 0 0 0 4.4 44H36v21.284l-10.174-10.16a4 4 0 1 0-5.652 5.661l17 16.977a4 4 0 0 0 5.652 0l17-16.977a4 4 0 1 0-5.652-5.661L44 65.284V44h31.6a4.4 4.4 0 0 0 4.4-4.447A40.133 40.133 0 0 0 40 0zM8.248 36a32 32 0 0 1 63.505 0z" fill="url(#b)"/><path d="M44 8.259A32.157 32.157 0 0 1 71.753 36H52a8 8 0 0 0-8 8h31.6a4.428 4.428 0 0 0 3.124-1.3A4.48 4.48 0 0 0 80 39.553c0-22.196-24.462-30.11-36-31.294z" fill="url(#c)"/><path d="M52 36a8 8 0 0 0-8 8h31.6a4.416 4.416 0 0 0 2.973-1.179L71.753 36z" opacity=".9" fill="url(#d)"/><path d="M80 39.553c0-22.2-24.443-30.124-36-31.294A32.157 32.157 0 0 1 71.753 36l6.821 6.821c.048-.044.105-.078.151-.124A4.48 4.48 0 0 0 80 39.553z" fill="url(#e)"/></svg>
--- a/browser/base/content/test/performance/browser_appmenu.js
+++ b/browser/base/content/test/performance/browser_appmenu.js
@ -51,6 +51,9 @@ add_task(async function() {
  let menuButtonRect = document
    .getElementById("PanelUI-menu-button")
    .getBoundingClientRect();
+  let fxaToolbarButtonRect = document
+    .getElementById("fxa-toolbar-menu-button")
+    .getBoundingClientRect();
  let firstTabRect = gBrowser.selectedTab.getBoundingClientRect();
  let frameExpectations = {
    filter: rects =>
@ -83,6 +86,14 @@ add_task(async function() {
          r.y1 >= firstTabRect.top &&
          r.y2 <= firstTabRect.bottom,
      },
+      {
+        name: "the fxa toolbar changes icon when first clicked",
+        condition: r =>
+          r.x1 >= fxaToolbarButtonRect.left &&
+          r.x2 <= fxaToolbarButtonRect.right &&
+          r.y1 >= fxaToolbarButtonRect.top &&
+          r.y2 <= fxaToolbarButtonRect.bottom,
+      },
    ],
  };

@ -103,7 +114,8 @@ add_task(async function() {
      // exhausted, we go back up a level.
      async function openSubViewsRecursively(currentView) {
        let navButtons = Array.from(
-          currentView.querySelectorAll(".subviewbutton-nav")
+          // Ensure that only enabled buttons are tested
+          currentView.querySelectorAll(".subviewbutton-nav:not([disabled])")
        );
        if (!navButtons) {
          return;
--- a/browser/base/content/test/sync/browser_sync.js
+++ b/browser/base/content/test/sync/browser_sync.js
@ -45,16 +45,28 @@ add_task(async function test_ui_state_signedin() {
  };

  gSync.updateAllUI(state);
-  let lastSyncTooltip = gSync.formatLastSyncDate(new Date(state.lastSync));
  checkPanelUIStatusBar({
-    label: "Foo Bar",
+    label: "foo@bar.com",
    fxastatus: "signedin",
    syncing: false,
-    syncNowTooltip: lastSyncTooltip,
  });
  checkRemoteTabsPanel("PanelUI-remotetabs-main", false);
  checkMenuBarItem("sync-syncnowitem");
-  checkFxaToolbarButtonPanel("PanelUI-fxa-menu");
+  checkFxaToolbarButtonPanel({
+    headerTitle: "foo@bar.com",
+    headerDescription: "Manage Account",
+    enabledItems: [
+      "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-remotetabs-button",
+      "PanelUI-fxa-menu-connect-device-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
+      "PanelUI-fxa-menu-logins-button",
+      "PanelUI-fxa-menu-monitor-button",
+      "PanelUI-fxa-menu-send-button",
+      "PanelUI-fxa-menu-syncnow-button",
+    ],
+    disabledItems: [],
+  });
  if (!msBadgeEnabled) {
    checkFxAAvatar("signedin");
  }
@ -102,7 +114,22 @@ add_task(async function test_ui_state_unconfigured() {
  });
  checkRemoteTabsPanel("PanelUI-remotetabs-setupsync");
  checkMenuBarItem("sync-setup");
-  checkFxaToolbarButtonPanel("PanelUI-fxa-signin");
+  checkFxaToolbarButtonPanel({
+    headerTitle: signedOffLabel,
+    headerDescription: "Turn on Sync",
+    enabledItems: [
+      "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-remotetabs-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
+      "PanelUI-fxa-menu-logins-button",
+      "PanelUI-fxa-menu-monitor-button",
+      "PanelUI-fxa-menu-send-button",
+    ],
+    disabledItems: [
+      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-connect-device-button",
+    ],
+  });
  if (!msBadgeEnabled) {
    checkFxAAvatar("not_configured");
  }
@ -112,26 +139,38 @@ add_task(async function test_ui_state_unverified() {
  let state = {
    status: UIState.STATUS_NOT_VERIFIED,
    email: "foo@bar.com",
-    lastSync: new Date(),
    syncing: false,
  };

  gSync.updateAllUI(state);

-  let expectedLabel = gSync.appMenuStatus.getAttribute("unverifiedlabel");
-  let tooltipText = gSync.fxaStrings.formatStringFromName("verifyDescription", [
-    state.email,
-  ]);
+  const expectedLabel = gSync.fxaStrings.GetStringFromName(
+    "account.finishAccountSetup"
+  );
  checkPanelUIStatusBar({
    label: expectedLabel,
-    tooltip: tooltipText,
    fxastatus: "unverified",
    syncing: false,
-    syncNowTooltip: tooltipText,
  });
+
  checkRemoteTabsPanel("PanelUI-remotetabs-unverified", false);
  checkMenuBarItem("sync-unverifieditem");
-  checkFxaToolbarButtonPanel("PanelUI-fxa-unverified");
+  checkFxaToolbarButtonPanel({
+    headerTitle: expectedLabel,
+    headerDescription: state.email,
+    enabledItems: [
+      "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-remotetabs-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
+      "PanelUI-fxa-menu-logins-button",
+      "PanelUI-fxa-menu-monitor-button",
+      "PanelUI-fxa-menu-send-button",
+    ],
+    disabledItems: [
+      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-connect-device-button",
+    ],
+  });
  checkFxAAvatar("unverified");
 });

@ -143,51 +182,40 @@ add_task(async function test_ui_state_loginFailed() {

  gSync.updateAllUI(state);

-  let expectedLabel = gSync.appMenuStatus.getAttribute("errorlabel");
-  let tooltipText = gSync.fxaStrings.formatStringFromName(
-    "reconnectDescription",
-    [state.email]
+  const expectedLabel = gSync.fxaStrings.formatStringFromName(
+    "account.reconnectToSync",
+    [gSync.brandStrings.GetStringFromName("syncBrandShortName")]
  );
+
  checkPanelUIStatusBar({
    label: expectedLabel,
-    tooltip: tooltipText,
    fxastatus: "login-failed",
    syncing: false,
-    syncNowTooltip: tooltipText,
  });
  checkRemoteTabsPanel("PanelUI-remotetabs-reauthsync", false);
  checkMenuBarItem("sync-reauthitem");
-  checkFxaToolbarButtonPanel("PanelUI-fxa-unverified");
+  checkFxaToolbarButtonPanel({
+    headerTitle: expectedLabel,
+    headerDescription: state.email,
+    enabledItems: [
+      "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-remotetabs-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
+      "PanelUI-fxa-menu-logins-button",
+      "PanelUI-fxa-menu-monitor-button",
+      "PanelUI-fxa-menu-send-button",
+    ],
+    disabledItems: [
+      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-connect-device-button",
+    ],
+  });
  checkFxAAvatar("unverified");
 });

-function checkPanelUIStatusBar({
-  label,
-  tooltip,
-  fxastatus,
-  syncing,
-  syncNowTooltip,
-}) {
+function checkPanelUIStatusBar({ label, fxastatus, syncing }) {
  let labelNode = document.getElementById("appMenu-fxa-label");
-  let statusNode = document.getElementById("appMenu-fxa-status");
-
  is(labelNode.getAttribute("label"), label, "fxa label has the right value");
-  if (statusNode.getAttribute("tooltiptext")) {
-    is(
-      statusNode.getAttribute("tooltiptext"),
-      tooltip,
-      "fxa tooltip has the right value"
-    );
-  }
-  if (fxastatus) {
-    is(
-      statusNode.getAttribute("fxastatus"),
-      fxastatus,
-      "fxa fxastatus has the right value"
-    );
-  } else {
-    ok(!statusNode.hasAttribute("fxastatus"), "fxastatus is unset");
-  }
 }

 function checkRemoteTabsPanel(expectedShownItemId, syncing, syncNowTooltip) {
@ -258,15 +286,32 @@ function checkSyncNowButton(buttonId, syncing, tooltip = null) {
  }
 }

-async function checkFxaToolbarButtonPanel(expectedShownItemId) {
-  let panel = document.getElementById("PanelUI-fxa");
-  let promisePanelOpen = BrowserTestUtils.waitForEvent(panel, "ViewShown");
-  document.getElementById("PanelUI-fxa-menu").click();
-  await promisePanelOpen;
-  checkItemsDisplayed(
-    ["PanelUI-fxa-signin", "PanelUI-fxa-unverified", "PanelUI-fxa-menu"],
-    expectedShownItemId
+async function checkFxaToolbarButtonPanel({
+  headerTitle,
+  headerDescription,
+  enabledItems,
+  disabledItems,
+}) {
+  is(
+    document.getElementById("fxa-menu-header-title").value,
+    headerTitle,
+    "has correct title"
  );
+  is(
+    document.getElementById("fxa-menu-header-description").value,
+    headerDescription,
+    "has correct description"
+  );
+
+  for (const id of enabledItems) {
+    const el = document.getElementById(id);
+    is(el.hasAttribute("disabled"), false, id + " is enabled");
+  }
+
+  for (const id of disabledItems) {
+    const el = document.getElementById(id);
+    is(el.getAttribute("disabled"), "true", id + " is disabled");
+  }
 }

 async function checkFxABadged() {
@ -282,7 +327,7 @@ async function checkFxABadged() {
 // fxaStatus is one of 'not_configured', 'unverified', or 'signedin'.
 function checkFxAAvatar(fxaStatus) {
  const avatarContainers = [
-    document.getElementById("appMenu-fxa-avatar"),
+    document.getElementById("fxa-menu-avatar"),
    document.getElementById("fxa-avatar-image"),
  ];
  for (const avatar of avatarContainers) {
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@ -22,6 +22,7 @@ browser.jar:
        content/browser/logos/lockwise.svg             (content/logos/lockwise.svg)
        content/browser/logos/lockwise-mobile-app.svg             (content/logos/lockwise-mobile-app.svg)
        content/browser/logos/monitor.svg             (content/logos/monitor.svg)
+        content/browser/logos/send.svg                (content/logos/send.svg)
        content/browser/logos/tracking-protection.svg (content/logos/tracking-protection.svg)
        content/browser/aboutNetError.xhtml            (content/aboutNetError.xhtml)
        content/browser/aboutNetError.js               (content/aboutNetError.js)
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@ -238,20 +238,14 @@
                       hidden="true"/>
        <toolbaritem id="appMenu-fxa-status"
                     class="sync-ui-item"
-                     flex="1"
-                     defaultlabel="&fxaSignIn.label;"
-# Despite the name, the tooltip says "Open Sync Preferences" and it is only used when *not* signed in.
-# Bug 1542334 changed the behaviour of the item when signed in so the tooltip was no longer appropriate there.
-                     tooltiptext="&fxaSignedIn.tooltip;"
-                     errorlabel="&fxaSignInError.label;"
-                     unverifiedlabel="&fxaUnverified.label;"
-                     onclick="if (event.which == 1) gSync.onMenuPanelCommand();">
+                     defaultlabel="&fxa.menu.signin.label;"
+                     flex="1">
          <image id="appMenu-fxa-avatar"/>
          <toolbarbutton id="appMenu-fxa-label"
-                         class="subviewbutton subviewbutton-iconic"
-                         label="&fxaSignIn.label;"
-                         fxabrandname="&syncBrand.fxAccount.label;"
-                         closemenu="none"/>
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        label="&fxa.menu.signin.label;"
+                        closemenu="none"
+                        oncommand="gSync.toggleAccountPanel('PanelUI-fxa', this, event)"/>
        </toolbaritem>
        <toolbarseparator class="sync-ui-item"/>
        <toolbaritem>
@ -712,66 +706,66 @@
      </vbox>
    </panelview>

-    <panelview id="PanelUI-fxa" class="PanelUI-subView" descriptionheightworkaround="true">
-      <vbox class="panel-subview-body">
-        <vbox id="PanelUI-fxa-signin">
-          <image class="fxaChooseWhatToSyncDevices"/>
-          <label class="PanelUI-fxa-signin-instruction-callout">&fxa.signin.callout.label;</label>
-          <label class="PanelUI-fxa-signin-instruction-label">&fxa.signin.description.label;</label>
-          <toolbarbutton class="PanelUI-fxa-signin-button"
-                         label="&fxa.signin.button.label;"
-                         oncommand="gSync.openFxAEmailFirstPageFromFxaMenu(this);"/>
-        </vbox>
-        <vbox id="PanelUI-fxa-unverified" class="PanelUI-fxa-unverified-instruction-box">
-          <image class="fxaGraphicMail"/>
-          <label class="PanelUI-fxa-signin-instruction-callout">&fxa.unverified.callout.label;</label>
-          <label class="PanelUI-fxa-signin-instruction-label">&fxa.unverified.description.label;</label>
-          <toolbarbutton class="PanelUI-fxa-signin-button"
-                         label="&fxa.unverified.button.label;"
-                         oncommand="gSync.openPrefsFromFxaMenu('unver_sync_settings', this);"/>
-        </vbox>
-        <vbox id="PanelUI-fxa-menu">
-          <hbox flex="1" align="center" class="fxa-avatar-subpanel">
-            <image role="presentation" id="fxa-menu-avatar"/>
-            <vbox flex="1">
-              <label class="fxa-avatar-subpanel-description" >&fxa.menu.signedInAs.label;</label>
-              <label id="fxa-menu-email"></label>
-            </vbox>
-          </hbox>
-          <toolbarseparator/>
-          <toolbarbutton id="PanelUI-fxa-menu-sendtab-button"
-                         class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                         closemenu="none"
-                         oncommand="gSync.showSendToDeviceViewFromFxaMenu(this);"/>
-          <toolbarbutton id="PanelUI-fxa-menu-remotetabs-button"
-                         class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                         label="&appMenuRemoteTabs.label;"
-                         closemenu="none"
-                         oncommand="gSync.showRemoteTabsFromFxaMenu(this);"/>
-          <toolbarbutton id="PanelUI-fxa-menu-view-sidebar"
-                         class="subviewbutton subviewbutton-iconic"
-                         label="&appMenuRemoteTabs.sidebar.label;"
-                         oncommand="gSync.showSidebarFromFxaMenu(this);">
-            <observes element="sidebar-box" attribute="positionend"/>
-          </toolbarbutton>
-          <toolbarseparator/>
-          <toolbarbutton class="subviewbutton"
-                         label="&fxa.menu.connectAnotherDevice2.label;"
-                         oncommand="gSync.openConnectAnotherDeviceFromFxaMenu(this);"/>
-          <toolbarbutton class="subviewbutton"
-                         label="&fxa.menu.manageAccount.label;"
-                         oncommand="gSync.openFxAManagePageFromFxaMenu(this);"/>
-          <toolbarbutton class="subviewbutton"
-                         label="&fxa.menu.syncSettings.label;"
-                         oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
-          <toolbarseparator/>
-          <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
-                         label="&syncSyncNowItem.label;"
-                         syncinglabel="&syncSyncNowItemSyncing.label;"
-                         class="subviewbutton subviewbutton-iconic"
-                         oncommand="gSync.doSyncFromFxaMenu(this);"
-                         closemenu="none"/>
-        </vbox>
+    <panelview id="PanelUI-fxa" title="&fxa.menu.account.label;" class="PanelUI-subView" descriptionheightworkaround="true">
+      <vbox id="PanelUI-fxa-menu" class="panel-subview-body">
+        <toolbarbutton id="fxa-manage-account-button" flex="1"
+                       align="center"
+                       class="fxa-menu-header subviewbutton"
+                       oncommand="gSync.clickFxAMenuHeaderButton(this);">
+          <image role="presentation" id="fxa-menu-avatar"/>
+          <vbox flex="1">
+            <label id="fxa-menu-header-title"
+                   defaultLabel="&fxa.menu.signin.label;">&fxa.menu.signin.label;</label>
+            <label id="fxa-menu-header-description"
+                   crop="end"
+                   defaultLabel="&fxa.menu.turnOnSync.label;">&fxa.menu.turnOnSync.label;</label>
+          </vbox>
+        </toolbarbutton>
+        <toolbarseparator/>
+        <toolbarbutton id="PanelUI-fxa-menu-sendtab-button"
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        closemenu="none"
+                        oncommand="gSync.showSendToDeviceViewFromFxaMenu(this);"/>
+        <toolbarbutton id="PanelUI-fxa-menu-remotetabs-button"
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        label="&appMenuRemoteTabs.label;"
+                        closemenu="none"
+                        oncommand="gSync.showRemoteTabsFromFxaMenu(this);"/>
+        <!-- The `Connect Another Device` button is disabled by default until the user logs into Sync. -->
+        <toolbarbutton id="PanelUI-fxa-menu-connect-device-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&fxa.menu.connectAnotherDevice2.label;"
+                        disabled="true"
+                        oncommand="gSync.openConnectAnotherDeviceFromFxaMenu(this);"/>
+        <toolbarbutton id="PanelUI-fxa-menu-sync-prefs-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&fxa.menu.syncSettings.label;"
+                        oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
+        <toolbarseparator/>
+        <toolbarbutton id="PanelUI-fxa-menu-logins-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&logins.label;"
+                        oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'fxamenu' })"/>
+        <toolbarseparator id="fxa-menu-service-separator"/>
+        <toolbarbutton id="PanelUI-fxa-menu-monitor-button"
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        label="&monitorFullName;"
+                        closemenu="none"
+                        oncommand="PanelUI.showSubView('PanelUI-fxa-menu-monitor', this, event)"/>
+        <toolbarbutton id="PanelUI-fxa-menu-send-button"
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        label="&sendFullName;"
+                        closemenu="none"
+                        oncommand="PanelUI.showSubView('PanelUI-fxa-menu-send', this, event)"/>
+        <toolbarseparator/>
+        <!-- The `Sync Now` button is disabled by default until the user logs into Sync. -->
+        <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
+                        label="&syncSyncNowItem.label;"
+                        syncinglabel="&syncSyncNowItemSyncing.label;"
+                        disabled="true"
+                        class="subviewbutton subviewbutton-iconic"
+                        oncommand="gSync.doSyncFromFxaMenu(this);"
+                        closemenu="none"/>
      </vbox>
    </panelview>
    <!-- This panelview is used to contain the dynamically created buttons for send tab to devices -->
@ -782,6 +776,24 @@
                       disabled="true"/>
      </vbox>
    </panelview>
+    <panelview id="PanelUI-fxa-menu-monitor" flex="1" class="PanelUI-subView">
+      <vbox id="PanelUI-fxa-monitor" align="center" class="panel-subview-body">
+        <image class="fxaMonitorLogo" role="presentation"/>
+        <label class="PanelUI-fxa-service-description-label">&fxa.service.monitor.description;</label>
+        <toolbarbutton class="PanelUI-fxa-signin-button"
+                       label="&fxa.service.monitor.launch;"
+                       oncommand="gSync.openMonitorFromFxaMenu(this);"/>
+      </vbox>
+    </panelview>
+    <panelview id="PanelUI-fxa-menu-send" flex="1" class="PanelUI-subView">
+      <vbox id="PanelUI-fxa-send" align="center" class="panel-subview-body">
+        <image class="fxaSendLogo" role="presentation"/>
+        <label class="PanelUI-fxa-service-description-label">&fxa.service.send.description;</label>
+        <toolbarbutton class="PanelUI-fxa-signin-button"
+                       label="&fxa.service.send.launch;"
+                       oncommand="gSync.openSendFromFxaMenu(this);"/>
+      </vbox>
+    </panelview>

    <panelview id="PanelUI-bookmarkingTools" class="PanelUI-subView">
      <vbox class="panel-subview-body">
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@ -105,13 +105,7 @@ var UITour = {
      "accountStatus",
      {
        query: aDocument => {
-          // If the user is logged in, use the avatar element.
-          let fxAFooter = aDocument.getElementById("appMenu-fxa-status");
-          if (fxAFooter.getAttribute("fxastatus")) {
-            return aDocument.getElementById("appMenu-fxa-avatar");
-          }
-
-          // Otherwise use the sync setup icon.
+          // Use the sync setup icon.
          let statusButton = aDocument.getElementById("appMenu-fxa-label");
          return statusButton.icon;
        },
--- a/browser/components/uitour/test/browser_fxa.js
+++ b/browser/components/uitour/test/browser_fxa.js
@ -46,8 +46,6 @@ var tests = [
    await showMenuPromise("appMenu");
    await showHighlightPromise("accountStatus");
    let highlight = document.getElementById("UITourHighlightContainer");
-    let expectedTarget = "appMenu-fxa-avatar";
-    is(highlight.anchorNode.id, expectedTarget, "Anchored on avatar");
    is(
      highlight.getAttribute("targetName"),
      "accountStatus",
--- a/browser/locales/en-US/chrome/browser/accounts.properties
+++ b/browser/locales/en-US/chrome/browser/accounts.properties
@ -106,3 +106,17 @@ singleTabArrivingWithTruncatedURL.body = %S…
 # LOCALIZATION NOTE (account.title):
 # Used as a default header for the FxA toolbar menu.
 account.title = Account
+
+# LOCALIZATION NOTE (account.manageAccount):
+# Used as the description below user's email in the FxA toolbar menu.
+account.manageAccount = Manage Account
+
+# LOCALIZATION NOTE (account.finishAccountSetup):
+# Used as the FxA toolbar menu item value when user has not
+# finished setting up an account.
+account.finishAccountSetup = Finish Account Setup
+
+# LOCALIZATION NOTE (account.reconnectToSync):
+# Used as the FxA toolbar menu item title when the user
+# needs to reconnect Sync. %S is the Sync brand name.
+account.reconnectToSync = Reconnect to %S
--- a/browser/locales/en-US/chrome/browser/brandings.dtd
+++ b/browser/locales/en-US/chrome/browser/brandings.dtd
@ -0,0 +1,11 @@
+<!-- LOCALIZATION NOTE:
+	The following feature names must be treated as a brand, and kept in English.
+	They cannot be:
+	- Declined to adapt to grammatical case.
+	- Transliterated.
+	- Translated. -->
+
+<!ENTITY sendShortName "Send">
+<!ENTITY sendFullName "Firefox Send">
+<!ENTITY monitorShortName "Monitor">
+<!ENTITY monitorFullName "Firefox Monitor">
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -111,12 +111,6 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY toggleReaderMode.key "R">
 <!ENTITY toggleReaderMode.win.keycode "VK_F9">

-<!ENTITY fxaSignIn.label "Sign in to &syncBrand.shortName.label;">
-<!ENTITY fxaSignedIn.tooltip "Open &syncBrand.shortName.label; preferences">
-<!ENTITY fxaSignInError.label "Reconnect to &syncBrand.shortName.label;">
-<!ENTITY fxaUnverified.label "Verify Your Account">
-
-
 <!ENTITY fullScreenMinimize.tooltip "Minimize">
 <!ENTITY fullScreenRestore.tooltip "Restore">
 <!ENTITY fullScreenClose.tooltip "Close">
@ -125,26 +119,24 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY fullScreenExit.label "Exit Full Screen Mode">
 <!ENTITY fullScreenExit.accesskey "F">

- <!-- LOCALIZATION NOTE (fxa.signin) Used to define the different labels
-     for the Firefox Account toolbar signin menu screen. -->
-<!ENTITY fxa.signin.callout.label "Take Firefox with You">
-<!ENTITY fxa.signin.description.label "Get your bookmarks, history, passwords and other settings on all your devices.">
-<!ENTITY fxa.signin.button.label "Turn on &syncBrand.shortName.label;…">
-
-<!-- LOCALIZATION NOTE (fxa.unverified) Used to define the different labels
-     for the Firefox Account toolbar unverified menu screen. -->
-<!ENTITY fxa.unverified.callout.label "Check Your Email">
-<!ENTITY fxa.unverified.description.label "You’ll need to verify your account before you can sync.">
-<!ENTITY fxa.unverified.button.label "Open &syncBrand.shortName.label; Settings…">
-
 <!-- LOCALIZATION NOTE (fxa.menu) Used to define the different labels
-     for the Firefox Account toolbart menu screen. The `Signed in as` text is
+     for the Firefox Account toolbar menu screen. The `Signed in as` text is
     followed by the user's email. -->
 <!ENTITY fxa.menu.signedInAs.label "Signed in as">
 <!ENTITY fxa.menu.manageAccount.label "Manage Account…">
 <!ENTITY fxa.menu.syncSettings.label "&syncBrand.shortName.label; Settings…">
 <!ENTITY fxa.menu.connectAnotherDevice2.label "Connect Another Device…">
 <!ENTITY fxa.menu.firefoxAccount "&syncBrand.fxAccount.label;">
+<!ENTITY fxa.menu.signin.label "Sign in to &brandProductName;">
+<!ENTITY fxa.menu.turnOnSync.label "Turn on &syncBrand.shortName.label;">
+<!ENTITY fxa.menu.account.label "Account">
+
+<!-- LOCALIZATION NOTE (fxa.service) Used to define the different FxA services
+     for the Firefox Account toolbar menu screen.  -->
+<!ENTITY fxa.service.send.description "Upload and share files with end-to-end encryption plus a link that automatically expires.">
+<!ENTITY fxa.service.send.launch "Launch &sendShortName;">
+<!ENTITY fxa.service.monitor.description "Check if your email has appeared in a data breach and get alerted if it appears in a new breach.">
+<!ENTITY fxa.service.monitor.launch "Launch &monitorShortName;">

 <!-- LOCALIZATION NOTE (fullscreenWarning.beforeDomain.label,
     fullscreenWarning.afterDomain.label): these two strings are used
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@ -59,6 +59,7 @@
    locale/pdfviewer/viewer.properties             (%pdfviewer/viewer.properties)
    locale/pdfviewer/chrome.properties             (%pdfviewer/chrome.properties)
    locale/browser/newInstall.dtd                  (%chrome/browser/newInstall.dtd)
+    locale/browser/brandings.dtd                   (%chrome/browser/brandings.dtd)

 #ifdef XPI_NAME
 # Bug 1240628, restructure how l10n repacks work with feature addons
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -525,7 +525,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 #appMenu-fxa-label {
  -moz-context-properties: fill;
  fill: currentColor;
-  list-style-image: url(chrome://browser/skin/sync.svg);
+  list-style-image: var(--avatar-image-url);
 }

 #appMenu-fxa-label {
@ -578,7 +578,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }

 #appMenu-fxa-status[fxastatus="login-failed"],
-#appMenu-fxa-status[fxastatus="unverified"] {
+#appMenu-fxa-status[fxastatus="unverified"],
+:root[fxastatus="unverified"] .fxa-menu-header {
  background-color: @appmenuWarningBackgroundColor@;
  color: @appmenuWarningColor@;
  border-top: 1px solid @appmenuWarningBorderColor@;
@ -586,12 +587,14 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }

 #appMenu-fxa-status[fxastatus="login-failed"]:hover,
-#appMenu-fxa-status[fxastatus="unverified"]:hover {
+#appMenu-fxa-status[fxastatus="unverified"]:hover,
+:root[fxastatus="unverified"] .fxa-menu-header:hover {
  background-color: @appmenuWarningBackgroundColorHover@;
 }

 #appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
-#appMenu-fxa-status[fxastatus="unverified"]:hover:active {
+#appMenu-fxa-status[fxastatus="unverified"]:hover:active,
+:root[fxastatus="unverified"] .fxa-menu-header:hover:active {
  background-color: @appmenuWarningBackgroundColorActive@;
 }

@ -650,18 +653,21 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }

 :root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"],
-:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"] {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"],
+:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header {
  background-color: @appmenuWarningBackgroundColorBrightText@;
  color: @appmenuWarningColorBrightText@;
 }

 :root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover,
-:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover,
+:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header:hover {
  background-color: @appmenuWarningBackgroundColorHoverBrightText@;
 }

 :root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
-:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover:active {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover:active,
+:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header:hover:active {
  background-color: @appmenuWarningBackgroundColorActiveBrightText@;
 }

@ -703,33 +709,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
  border-radius: 50%;
 }

-:root[fxastatus="signedin"] #PanelUI-fxa-signin,
-:root[fxastatus="signedin"] #PanelUI-fxa-unverified,
-:root[fxastatus="unverified"] #PanelUI-fxa-signin,
-:root[fxastatus="unverified"] #PanelUI-fxa-menu,
-:root[fxastatus="not_configured"] #PanelUI-fxa-unverified,
-:root[fxastatus="not_configured"] #PanelUI-fxa-menu {
-  display: none;
-}
-
-:root[fxastatus="not_configured"] #PanelUI-fxa > .panel-subview-body,
-:root[fxastatus="unverified"] #PanelUI-fxa > .panel-subview-body {
-  -moz-box-align: center;
-}
-
-#PanelUI-fxa-signin,
-#PanelUI-fxa-unverified {
-  margin-top: 20px;
-  -moz-box-align: center;
-}
-
-.PanelUI-fxa-signin-instruction-callout {
-  font-size: 1.3em;
-  font-weight: normal;
-  padding: .6em 0 .6em;
-}
-
-.PanelUI-fxa-signin-instruction-label {
+.PanelUI-fxa-service-description-label {
  /* Use 'lighter' font for this to de-emphasize it compared to the title.
   * We use 300 on Linux because 100 is too light (lacks contrast with
   * the background) for some fonts in combination with anti-aliasing. */
@ -740,24 +720,46 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 %endif
 }

-.fxa-avatar-subpanel {
+.fxa-menu-header {
  padding-top: 8px;
  padding-bottom: 4px;
+  /* Important is here to ensure that the proper header height is fixed
+     regardless if opened from browser icon or under app menu.
+  */
+  max-height: 46px !important;
 }

-.fxa-avatar-subpanel-description {
+#fxa-menu-header-title {
+  color: var(--arrowpanel-color);
+}
+
+#fxa-menu-header-description {
  color: var(--panel-disabled-color);
 }

 #fxa-menu-avatar {
  height: 32px;
  width: 32px;
-  margin-inline-start: 20px;
-  margin-inline-end: 5px;
  -moz-context-properties: fill, fill-opacity;
  fill: var(--arrowpanel-color);
 }

+#PanelUI-fxa-menu-send-button {
+  list-style-image: url(chrome://browser/skin/fxa/send.svg);
+}
+
+#PanelUI-fxa-menu-monitor-button {
+  list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
+}
+
+#PanelUI-fxa-menu-connect-device-button {
+  list-style-image: url(chrome://browser/skin/fxa/add-device.svg);
+}
+
+#PanelUI-fxa-menu-connect-device-button[disabled="true"] {
+  color: var(--panel-disabled-color);
+}
+
 /* From the FxA menu -> remote tabs, we don't need to clutter the view with
   redundant buttons because these are accessible from the main menu */
 panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-view-sidebar,
@ -777,24 +779,26 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
  transform: scaleX(-1);
 }

-.fxaChooseWhatToSyncDevices {
-  height: 102px;
-  width: 201px;
-  list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
+.fxaSendLogo,
+.fxaMonitorLogo {
+  margin-top: 15px;
+  height: 80px;
+  width: 80px;
 }

-.fxaGraphicMail {
-  height: 71px;
-  width: 143px;
-  list-style-image: url(chrome://browser/skin/fxa/graphic-mail.svg);
+.fxaSendLogo {
+  list-style-image: url(chrome://browser/content/logos/send.svg);
+}
+
+.fxaMonitorLogo {
+  list-style-image: url(chrome://browser/content/logos/monitor.svg);
 }

 #PanelUI-remotetabs {
  --panel-ui-sync-illustration-height: 141px;
 }

-.PanelUI-fxa-signin-instruction-label,
-.PanelUI-fxa-signin-instruction-callout,
+.PanelUI-fxa-service-description-label,
 .PanelUI-remotetabs-instruction-label {
  /* If you change the margin here, the min-height of the synced tabs panel
    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
@ -805,6 +809,10 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
  max-width: 15em;
 }

+.PanelUI-fxa-service-description-label {
+  margin-top: 10px;
+}
+
 .PanelUI-remotetabs-instruction-label {
  color: var(--panel-disabled-color);
 }
--- a/browser/themes/shared/fxa/add-device.svg
+++ b/browser/themes/shared/fxa/add-device.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 5h-3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-3 8V7h3v6z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 3h8v1h2V3a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3v1H3a1 1 0 0 0 0 2h5v-2H7v-1h1V9H2z"/></svg>
--- a/browser/themes/shared/fxa/graphic-mail.svg
+++ b/browser/themes/shared/fxa/graphic-mail.svg
@ -1,112 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143 71">
-  <style>.st1{fill:#ccedf0}.st2{fill:#1da4e9}.st6{fill:#fff}</style>
-  <path
-    d="M50 45.1H38c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h12c.3 0 .5.2.5.5s-.2.5-.5.5zm-21 0h-1c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h1c.3 0 .5.2.5.5s-.2.5-.5.5zm-5 0h-3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h3c.3 0 .5.2.5.5s-.2.5-.5.5zm-11 0H1c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h12c.3 0 .5.2.5.5s-.2.5-.5.5zm41.1 3.8c0-.6-.4-1-1-1H1c-.6 0-1 .4-1 1s.4 1 1 1h52.1c.6 0 1-.5 1-1zm-3.1 7h-6c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h6c.3 0 .5.2.5.5s-.2.5-.5.5zm-8 0h-4c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h4c.3 0 .5.2.5.5s-.2.5-.5.5zm-12 0H21c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h10c.3 0 .5.2.5.5s-.2.5-.5.5zm-16 0h-2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h2c.3 0 .5.2.5.5s-.2.5-.5.5zm-6 0H1c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h8c.3 0 .5.2.5.5s-.2.5-.5.5z"
-    fill="#eaeaee"/>
-  <g id="Layer_2">
-    <path class="st1"
-          d="M96.8 66.6c-.2 0-.4-.1-.6-.2L70.6 48.6 44.9 66.5c-.3.2-.7.2-1 .1-.3-.2-.5-.5-.5-.9V38.1c0-3.2 2.7-5.9 5.9-5.9h42.6c3.2 0 5.9 2.6 5.9 5.9v27.5c0 .4-.2.7-.5.9-.2.1-.3.1-.5.1z"/>
-    <path class="st2"
-          d="M91.9 33.3c2.7 0 4.9 2.2 4.9 4.9v27.5L70.6 47.4 44.3 65.6V38.1c0-2.7 2.2-4.9 4.9-4.9l42.7.1m0-2H49.3c-3.8 0-6.9 3-6.9 6.8v27.5c0 .7.4 1.4 1.1 1.8.7.3 1.5.3 2.1-.1l25.1-17.4 25.1 17.4c.6.4 1.4.5 2.1.1.7-.3 1.1-1 1.1-1.8V38.1c-.2-3.8-3.3-6.8-7.1-6.8z"/>
-  </g>
-  <g id="Layer_3">
-    <path class="st1"
-          d="M48.9 70h-.5c-.1 0-.2 0-.3-.1h.2c-1.2-.1-2.3-.6-3.2-1.4 0 0-.1 0-.1-.1l-.1-.1-.5-.5c-.4-.5-.7-1-1-1.6v-.5c0-.3.1-.6.4-.8 1.3-1.5 6-5.2 22.7-17.7 1.2-1 2.6-1.7 4.2-1.8 1.3 0 2.5.5 4.2 1.8C91.3 59.7 96.1 63.5 97.5 65c.4.3.5.8.3 1.3-.9 2.3-3.1 3.7-5.5 3.7H48.9z"/>
-    <path class="st2"
-          d="M70.5 46.6c1.3.1 2.6.7 3.6 1.6 0 0 22.9 17.1 22.7 17.6-.7 1.9-2.6 3.2-4.7 3.2H48.9c-.2 0-.3 0-.5-.1h-.1c-1-.1-2-.5-2.7-1.2-.2-.2-.4-.3-.5-.5-.4-.4-.6-.9-.8-1.4-.3-.5 22.6-17.6 22.6-17.6 1-.9 2.3-1.5 3.6-1.6m0-2c-1.8.1-3.5.8-4.8 2-.1 0-5.8 4.3-11.4 8.6-3.3 2.5-6 4.6-7.8 6.1-1.1.9-2 1.6-2.6 2.1-.9.8-1.8 1.6-1.6 2.8 0 .2.1.3.1.5.3.7.6 1.3 1.1 1.9l.6.6c0 .1.1.1.1.1l.1.1c1 .9 2.3 1.4 3.6 1.6h.4c.2 0 .4.1.6.1h43.3c2.8 0 5.4-1.7 6.5-4.3.2-.3.2-.6.2-.9 0-1-.8-1.7-1.6-2.4-.6-.5-1.5-1.2-2.6-2.1-1.9-1.5-4.5-3.5-7.9-6.1-5.6-4.3-11.4-8.6-11.5-8.6-1.3-1.3-3-2-4.8-2.1z"/>
-  </g>
-  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="379.562" y1="1053.255" x2="509.452" y2="1183.146"
-                  gradientTransform="translate(-364.41 -1094.055)">
-    <stop offset="0" stop-color="#00c8d7"/>
-    <stop offset="1" stop-color="#0a84ff"/>
-  </linearGradient>
-  <path
-    d="M70.4 16.4c1.3.1 2.5.6 3.4 1.5l.9.7c.4.2.7.4.9.7l.2.1c-.3-.3-.5-.6-.6-1-.4-1.5-1.4-2.8-2.8-3.6-.6-.3-1.3-.4-2-.4-.5 0-1.1.1-1.6.3.5.6 1 1.1 1.6 1.7z"
-    fill="url(#SVGID_1_)"/>
-  <path d="M71.1 39.1s.1-.1 0 0c.1-.1 0 0 0 0z" fill="#9cf"/>
-  <path d="M73.2 48.1s-.1.1 0 0z" fill="#59acff"/>
-  <path id="_Group_" class="st6"
-        d="M70.5 56.5c-1.3 0-2.5-.5-4.2-1.8L44 37.2c-.3-.3-.5-.7-.3-1.1.3-.9.8-1.7 1.4-2.3.3-.2.5-.4.8-.6l20.7-15.9c1.1-1 2.5-1.6 4-1.7 1.5.1 2.9.7 4 1.7l19.8 15.5c.7.3 1.3.7 1.8 1.3.7.7 1.1 1.5 1.3 2.5 0 .3-.1.7-.4.9L74.7 54.8c-1.2 1-2.7 1.6-4.2 1.7z"/>
-  <g id="Chain">
-    <path
-      d="M61.8 44.4l1.9-1.9c.4-.4.8-.6 1.2-.8.5-1.4 1.2-2.7 2.3-3.8-2.2-.2-4.4.6-5.9 2.2l-3.5 3.3-2.7 2.7-.1.1 2.7 2.1.1-.1 4-3.8zm11.1 5.2s0-.1 0 0c1.8-2.8 1.7-6.2-.2-8.7-1.3.2-2.3 1.2-2.5 2.5.9 1.6.7 3.7-.6 5l-1.3 1.3-3.8 3.8-.1.1 2.5 2c.1.1.2.1.2.2l.1-.1 3.4-3.4 2.3-2.7z"
-      fill="#90e8f0"/>
-    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="430.109" y1="1136.555" x2="450.432" y2="1136.555"
-                    gradientTransform="translate(-364.41 -1094.055)">
-      <stop offset="0" stop-color="#02bdde"/>
-      <stop offset="1" stop-color="#04aee7"/>
-    </linearGradient>
-    <path
-      d="M78.6 38.5c-2.8-2.8-7.2-3-10.2-.5-.1.1-.3.2-.4.4-.6.6-1.2 1.4-1.6 2.2-.1.2-.2.5-.3.7-.9 2.6-.4 5.5 1.4 7.5.5-.5 1.1-1.1 1.5-1.6.3-.4.6-.9.7-1.3-.6-1.1-.7-2.4-.3-3.5 0-.1.1-.2.2-.3s.1-.3.2-.4l.1-.1c.3-.4.6-.8 1.1-1.1 0 0 .1 0 .1-.1.1-.1.2-.1.3-.2 1.6-.9 3.6-.6 4.9.7l6.7 6.7.3.3c0 .1.1.1.1.2l2.7-2.1c0-.1-.1-.1-.1-.2-.2-.2-.4-.4-.5-.6l-6.9-6.7z"
-      fill="url(#SVGID_2_)"/>
-    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="71.406" y1="770.773" x2="76.783" y2="770.773"
-                    gradientTransform="translate(0 -718)">
-      <stop offset="0" stop-color="#02bdde"/>
-      <stop offset="1" stop-color="#04aee7"/>
-    </linearGradient>
-    <path d="M71.4 52.8l2.5 2.5.1.1 2.7-2.1-.1-.2-2.9-2.9-2.3 2.6z" fill="url(#SVGID_3_)"/>
-    <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 -1.5"
-                      begin="0s; anim3.end" dur="0.4s" fill="freeze"/>
-    <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="translate" from="0 -1.5" to="0 0"
-                      begin="anim1.end" dur="0.4s" fill="freeze"/>
-    <animateTransform id="anim3" attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 0"
-                      begin="anim2.end" dur="5s" fill="freeze"/>
-  </g>
-  <path id="_Group_2" class="st2"
-        d="M70.5 16.4c1.3.1 2.4.6 3.4 1.5 0 0 21 15.9 21.5 16.5.5.5.9 1.2 1.1 1.9L74.2 53.7c-1 .9-2.2 1.4-3.5 1.6-1.3-.1-2.6-.7-3.6-1.6L44.7 36.3c.2-.7.6-1.3 1.1-1.9.2-.2 21.4-16.5 21.4-16.5.9-.8 2.1-1.4 3.3-1.5m0-2c-1.7.1-3.3.8-4.6 1.9 0 0-21.3 16.4-21.5 16.6-.8.8-1.3 1.7-1.7 2.7-.3.8 0 1.7.7 2.2l22.4 17.4c1.3 1.1 3 1.8 4.8 1.9 1.8-.1 3.4-.8 4.7-2l22.4-17.4c.5-.4.8-1.1.8-1.8-.2-1.1-.8-2.2-1.6-3-.6-.7-21.8-16.8-21.8-16.8-1.3-.9-2.9-1.5-4.6-1.7z"/>
-  <g>
-    <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="58.063" y1="-5.732" x2="89.598" y2="25.803">
-      <stop offset="0" stop-color="#00c8d7"/>
-      <stop offset="1" stop-color="#0a84ff"/>
-    </linearGradient>
-    <path
-      d="M68.9 9.6c-.5 0-1-.4-1.1-.9-.3-1.2-1.3-2.2-2.5-2.5-.6-.1-1-.8-.8-1.4.1-.4.4-.7.8-.8 1.2-.3 2.2-1.3 2.5-2.5.1-.6.8-1 1.4-.8.4.1.7.4.8.8.3 1.2 1.3 2.2 2.5 2.5.6.1 1 .8.8 1.4-.1.4-.4.7-.8.8-1.3.4-2.2 1.3-2.5 2.5-.1.5-.6.9-1.1.9z"
-      fill="url(#SVGID_5_)"/>
-    <path class="st6"
-          d="M68.9 2c.1 0 .1 0 0 0 .5 1.7 1.7 2.9 3.3 3.3.1 0 .1.1.1.2s-.1.1-.1.1c-1.6.4-2.8 1.6-3.2 3.2 0 .1-.1.1-.2.1s-.1-.1-.1-.1c-.4-1.6-1.6-2.8-3.2-3.2-.1 0-.1-.1-.1-.2s.1-.1.1-.1c1.6-.4 2.8-1.6 3.2-3.2.1-.1.1-.1.2-.1m0-2c-1 0-1.8.7-2.1 1.6-.2.9-.9 1.5-1.7 1.7-1.1.3-1.8 1.4-1.6 2.6.2.8.8 1.4 1.6 1.6.9.2 1.5.9 1.7 1.7.3 1.1 1.4 1.8 2.6 1.6.8-.2 1.4-.8 1.6-1.6.2-.9.9-1.5 1.7-1.7 1.1-.3 1.8-1.4 1.6-2.6-.2-.8-.8-1.4-1.6-1.6-.9-.2-1.5-.9-1.7-1.7C70.7.7 69.9 0 68.9 0z"/>
-    <animate id="anim1y" attributeName="opacity" attributeType="XML" from="0" to="0" begin="0s; anim3y.end" dur="1s"
-             fill="freeze"/>
-    <animate id="anim2y" attributeName="opacity" attributeType="XML" from="0" to="1" begin="anim1y.end" dur="0.4s"
-             fill="freeze"/>
-    <animate id="anim3y" attributeName="opacity" attributeType="XML" from="1" to="0" begin="anim2y.end" dur="0.4s"
-             fill="freeze"/>
-  </g>
-  <g>
-    <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="61.027" y1="-4.906" x2="109.386" y2="43.452">
-      <stop offset="0" stop-color="#00c8d7"/>
-      <stop offset="1" stop-color="#0a84ff"/>
-    </linearGradient>
-    <path
-      d="M78.8 17.8c.6-2.4 2.5-4.3 4.9-4.9.7-.2 1.1-.8.9-1.5-.1-.5-.5-.8-.9-.9-2.4-.6-4.3-2.5-4.9-4.9-.2-.7-.8-1.1-1.5-.9-.5.1-.8.5-.9.9-.6 2.4-2.5 4.3-4.9 4.9-.7.2-1.1.8-.9 1.5.1.5.5.8.9.9 2.4.6 4.3 2.5 4.9 4.9.2.7.8 1.1 1.5.9.5-.1.8-.4.9-.9z"
-      fill="url(#SVGID_6_)"/>
-    <path class="st6"
-          d="M77.4 5.9c.1 0 .2.1.2.2.7 2.8 2.9 4.9 5.6 5.6.1 0 .2.1.2.3 0 .1-.1.2-.2.2-2.8.7-4.9 2.9-5.6 5.6 0 .1-.1.2-.2.2s-.2-.1-.2-.2c-.7-2.8-2.9-4.9-5.6-5.6-.1 0-.2-.2-.2-.3s.1-.2.2-.2c2.8-.7 4.9-2.9 5.6-5.6 0-.1.1-.2.2-.2m0-2c-1 0-1.9.7-2.2 1.7-.5 2.1-2.1 3.7-4.2 4.2-1.2.3-1.9 1.5-1.6 2.7.2.8.8 1.5 1.7 1.7 2.1.5 3.7 2.1 4.2 4.2.3 1.2 1.5 1.9 2.7 1.6.8-.2 1.5-.8 1.6-1.7.5-2.1 2.1-3.7 4.2-4.2 1.2-.3 1.9-1.5 1.6-2.7-.2-.8-.8-1.5-1.7-1.6-2.1-.5-3.7-2.1-4.2-4.2-.2-.9-1.1-1.6-2.1-1.7z"/>
-    <animate id="anim1z" attributeName="opacity" attributeType="XML" from="0" to="0" begin="0s; anim3z.end" dur="2s"
-             fill="freeze"/>
-    <animate id="anim2z" attributeName="opacity" attributeType="XML" from="0" to="1" begin="anim1z.end" dur="0.4s"
-             fill="freeze"/>
-    <animate id="anim3z" attributeName="opacity" attributeType="XML" from="1" to="0" begin="anim2z.end" dur="0.4s"
-             fill="freeze"/>
-  </g>
-  <g>
-    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="406.081" y1="1091.23" x2="474.017" y2="1159.166"
-                    gradientTransform="translate(-364.41 -1094.055)">
-      <stop offset="0" stop-color="#00c8d7"/>
-      <stop offset="1" stop-color="#0a84ff"/>
-    </linearGradient>
-    <path
-      d="M66.4 29.5c1-3.8 3.9-6.8 7.7-7.7.6-.2 1-.7 1-1.3 0-.6-.4-1.2-1.1-1.3-3.8-1-6.7-3.9-7.7-7.7-.2-.7-.9-1.2-1.6-1-.5.1-.9.5-1 1-1 3.8-3.9 6.7-7.7 7.7-.6.1-1.1.7-1.1 1.3 0 .6.4 1.2 1.1 1.3 3.8 1 6.7 3.9 7.7 7.7.2.7.9 1.2 1.6 1 .6-.1 1-.5 1.1-1z"
-      fill="url(#SVGID_4_)"/>
-    <path class="st6"
-          d="M65.1 11.6c.2 0 .3.1.4.3 1.1 4.1 4.3 7.4 8.4 8.4.2 0 .3.2.3.4 0 .1-.1.3-.3.3-4.1 1.1-7.4 4.3-8.4 8.4 0 .2-.2.3-.4.3s-.3-.1-.4-.3c-1.1-4.1-4.3-7.4-8.4-8.4-.2 0-.3-.2-.3-.4 0-.1.1-.3.3-.3 4.1-1.1 7.4-4.3 8.4-8.4 0-.1.2-.3.4-.3m0-2c-1.1 0-2 .7-2.3 1.8-.9 3.4-3.6 6.1-7 7-1.3.3-2 1.6-1.7 2.8.2.9.9 1.5 1.7 1.7 3.4.9 6.1 3.6 7 7 .3 1.3 1.6 2 2.8 1.7.9-.2 1.5-.9 1.7-1.7.9-3.4 3.6-6.1 7-7 1.3-.3 2-1.6 1.7-2.9-.2-.9-.9-1.5-1.8-1.7-3.4-.9-6.1-3.6-7-7-.1-.9-1-1.7-2.1-1.7z"/>
-    <animate id="anim1x" attributeName="opacity" attributeType="XML" from="0" to="0" begin="0s; anim3x.end" dur="2.5s"
-             fill="freeze"/>
-    <animate id="anim2x" attributeName="opacity" attributeType="XML" from="0" to="1" begin="anim1x.end" dur="0.4s"
-             fill="freeze"/>
-    <animate id="anim3x" attributeName="opacity" attributeType="XML" from="1" to="0" begin="anim2x.end" dur="0.4s"
-             fill="freeze"/>
-  </g>
-</svg>
--- a/browser/themes/shared/fxa/monitor.svg
+++ b/browser/themes/shared/fxa/monitor.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 3.43L9.11.64 9 .58a2 2 0 0 0-2 0L2.11 3.37 2 3.43a2 2 0 0 0-1 1.74v5.7a2 2 0 0 0 1 1.74l4.89 2.79a1 1 0 0 0 1.32-.35 1 1 0 0 0-.36-1.32L3.08 11a.29.29 0 0 1-.14-.25V5.29A.27.27 0 0 1 3.08 5l4.77-2.69a.29.29 0 0 1 .3 0L12.92 5a.29.29 0 0 1 .14.25v5.46a.29.29 0 0 1-.14.25l-1.44.82-.6-.9A4.11 4.11 0 1 0 8 12.1a3.84 3.84 0 0 0 1.22-.19l1.15 1.73a.48.48 0 0 0 .1.12.46.46 0 0 0 .1.1l.15.08.16.06h.37a.57.57 0 0 0 .15 0h.18L14 12.61a2 2 0 0 0 1-1.74v-5.7a2 2 0 0 0-1-1.74zM8 5.86A2.16 2.16 0 1 1 5.83 8 2.17 2.17 0 0 1 8 5.86z"/></svg>
--- a/browser/themes/shared/fxa/send.svg
+++ b/browser/themes/shared/fxa/send.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 0a8.06 8.06 0 0 0-8 7.37 1.54 1.54 0 0 0 .4 1.15A1.48 1.48 0 0 0 1.5 9H7v3.59l-1.3-1.3a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.42l3 3a1.15 1.15 0 0 0 .33.21A1 1 0 0 0 8 16a1.09 1.09 0 0 0 .39-.08 1 1 0 0 0 .32-.21l3-3a1 1 0 0 0-1.42-1.42L9 12.59V9h5.51A1.49 1.49 0 0 0 16 7.37 8 8 0 0 0 8 0zm0 7H2.07a6 6 0 0 1 11.86 0z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 0a8.06 8.06 0 0 0-8 7.37 1.54 1.54 0 0 0 .4 1.15A1.48 1.48 0 0 0 1.5 9H7v3.59l-1.3-1.3a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.42l3 3a1.15 1.15 0 0 0 .33.21A1 1 0 0 0 8 16a1.09 1.09 0 0 0 .39-.08 1 1 0 0 0 .32-.21l3-3a1 1 0 0 0-1.42-1.42L9 12.59V9h5.51A1.49 1.49 0 0 0 16 7.37 8 8 0 0 0 8 0zm0 7H2.07a6 6 0 0 1 11.86 0z"/></svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -141,8 +141,10 @@
  skin/classic/browser/fxa/avatar-confirm.svg                  (../shared/fxa/avatar-confirm.svg)
  skin/classic/browser/fxa/avatar-empty.svg                    (../shared/fxa/avatar-empty.svg)
  skin/classic/browser/fxa/avatar-empty-badged.svg             (../shared/fxa/avatar-empty-badged.svg)
-  skin/classic/browser/fxa/graphic-mail.svg                    (../shared/fxa/graphic-mail.svg)
  skin/classic/browser/fxa/sync-devices.svg                    (../shared/fxa/sync-devices.svg)
+  skin/classic/browser/fxa/send.svg                            (../shared/fxa/send.svg)
+  skin/classic/browser/fxa/monitor.svg                         (../shared/fxa/monitor.svg)
+  skin/classic/browser/fxa/add-device.svg                      (../shared/fxa/add-device.svg)

  skin/classic/browser/accessibility.svg              (../shared/icons/accessibility.svg)
  skin/classic/browser/accessibility-active.svg       (../shared/icons/accessibility-active.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@ -16,7 +16,8 @@
  list-style-image: url(chrome://browser/skin/library.svg);
 }

-#appMenu-logins-button {
+#appMenu-logins-button,
+#PanelUI-fxa-menu-logins-button {
  list-style-image: url(chrome://browser/skin/login.svg);
 }

@ -24,6 +25,7 @@
  list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
 }

+#PanelUI-fxa-menu-sync-prefs-button,
 #appMenu-preferences-button {
  list-style-image: url(chrome://browser/skin/settings.svg);
 }
--- a/toolkit/components/telemetry/Events.yaml
+++ b/toolkit/components/telemetry/Events.yaml
@ -511,7 +511,7 @@ normandy:

 pwmgr:
  open_management:
-    objects: ["autocomplete", "capturedoorhanger", "contextmenu", "pageinfo", "preferences", "mainmenu"]
+    objects: ["autocomplete", "capturedoorhanger", "contextmenu", "pageinfo", "preferences", "mainmenu", "fxamenu"]
    methods: ["open_management"]
    description: >
      Sent when opening the password management UI.
@ -598,8 +598,10 @@ fxa_avatar_menu:
      "sync_tabs",
      "sync_tabs_sidebar",
      "toolbar_icon",
-      "unver_sync_settings"
-    ]
+      "unver_sync_settings",
+      "open_monitor",
+      "open_send"
+      ]
    methods: ["click"]
    release_channel_collection: opt-out
    products:
@ -622,13 +624,17 @@ fxa_app_menu:
    objects: [
      "account_settings",
      "cad",
+      "login",
      "send_tab",
      "sync_now",
      "sync_settings",
      "sync_tabs",
      "sync_tabs_sidebar",
-      "toolbar_icon"
-    ]
+      "toolbar_icon",
+      "unver_sync_settings",
+      "open_monitor",
+      "open_send"
+      ]
    methods: ["click"]
    release_channel_collection: opt-out
    products: