Bug 1524665 - Add FxA avatar toolbar menu, r=gijs,eoger
authorVijay Budhram <vbudhram@mozilla.com>
Sat, 23 Feb 2019 17:56:19 +0000
changeset 464736 a3d28922f30e7f2b4b906a3951c18f8d512f4626
parent 464735 b9a53cec8555d13272107a0e17ff52d3a093131e
child 464737 465af3e561275ab93db9b63cefe1a91ccb2250af
push id112477
push usergijskruitbosch@gmail.com
push dateMon, 18 Mar 2019 15:45:42 +0000
treeherdermozilla-inbound@dc47fddd9a63 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs, eoger
bugs1524665
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1524665 - Add FxA avatar toolbar menu, r=gijs,eoger Differential Revision: https://phabricator.services.mozilla.com//D20433
browser/app/profile/firefox.js
browser/base/content/browser-sync.js
browser/base/content/browser.js
browser/base/content/browser.xul
browser/base/content/test/keyboard/browser_toolbarKeyNav.js
browser/base/content/test/sync/browser_sync.js
browser/components/customizableui/CustomizableUI.jsm
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/test/browser_1042100_default_placements_update.js
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/fxa/avatar-confirm.svg
browser/themes/shared/fxa/avatar-empty-badged.svg
browser/themes/shared/fxa/avatar-empty.svg
browser/themes/shared/fxa/avatar.svg
browser/themes/shared/fxa/choose-what-to-sync-devices.svg
browser/themes/shared/fxa/graphic-mail.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
services/fxaccounts/FxAccountsConfig.jsm
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1840,8 +1840,15 @@ pref("browser.discovery.enabled", true);
 pref("browser.discovery.containers.enabled", true);
 pref("browser.discovery.sites", "addons.mozilla.org");
 
 pref("browser.engagement.recent_visited_origins.expiry", 86400); // 24 * 60 * 60 (24 hours in seconds)
 
 pref("browser.aboutConfig.showWarning", true);
 
 pref("browser.toolbars.keyboard_navigation", true);
+
+// Prefs to control the Firefox Account toolbar menu.
+// This pref will surface existing Firefox Account information
+// as a button next to the hamburger menu. It allows
+// quick access to sign-in and manage your Firefox Account.
+pref("identity.fxaccounts.toolbar.enabled", true);
+pref("identity.fxaccounts.toolbar.accessed", false);
--- a/browser/base/content/browser-sync.js
+++ b/browser/base/content/browser-sync.js
@@ -11,16 +11,18 @@ ChromeUtils.defineModuleGetter(this, "Fx
   "resource://gre/modules/FxAccounts.jsm");
 ChromeUtils.defineModuleGetter(this, "EnsureFxAccountsWebChannel",
   "resource://gre/modules/FxAccountsWebChannel.jsm");
 ChromeUtils.defineModuleGetter(this, "Weave",
   "resource://services-sync/main.js");
 
 const MIN_STATUS_ANIMATION_DURATION = 1600;
 
+const FXA_NO_AVATAR_ZEROS = "00000000000000000000000000000000";
+
 var gSync = {
   _initialized: false,
   // The last sync start time. Used to calculate the leftover animation time
   // once syncing completes (bug 1239042).
   _syncStartTime: 0,
   _syncAnimationTimer: 0,
 
   _obs: [
@@ -93,17 +95,17 @@ var gSync = {
           }
         });
     XPCOMUtils.defineLazyPreferenceGetter(this, "PRODUCT_INFO_BASE_URL",
         "app.productInfo.baseURL");
     XPCOMUtils.defineLazyPreferenceGetter(this, "SYNC_ENABLED",
         "identity.fxaccounts.enabled");
   },
 
-  _maybeUpdateUIState() {
+  maybeUpdateUIState() {
     // Update the UI.
     if (UIState.isReady()) {
       const state = UIState.get();
       // If we are not configured, the UI is already in the right state when
       // we open the window. We can avoid a repaint.
       if (state.status != UIState.STATUS_NOT_CONFIGURED) {
         this.updateAllUI(state);
       }
@@ -138,17 +140,17 @@ var gSync = {
     document.getElementById("sync-setup").hidden = false;
 
     for (let topic of this._obs) {
       Services.obs.addObserver(this, topic, true);
     }
 
     this._generateNodeGetters();
 
-    this._maybeUpdateUIState();
+    this.maybeUpdateUIState();
 
     EnsureFxAccountsWebChannel();
 
     this._initialized = true;
   },
 
   uninit() {
     if (!this._initialized) {
@@ -186,16 +188,89 @@ var gSync = {
     }
   },
 
   updateAllUI(state) {
     this.updatePanelPopup(state);
     this.updateState(state);
     this.updateSyncButtonsTooltip(state);
     this.updateSyncStatus(state);
+    this.updateFxAToolbarPanel(state);
+  },
+
+  toggleAccountPanel(viewId, aEvent) {
+    // Don't show the panel if the window is in customization mode.
+    if (document.documentElement.hasAttribute("customizing")) {
+      return;
+    }
+
+    if ((aEvent.type == "mousedown" && aEvent.button != 0) ||
+        (aEvent.type == "keypress" && aEvent.charCode != KeyEvent.DOM_VK_SPACE &&
+        aEvent.keyCode != KeyEvent.DOM_VK_RETURN)) {
+      return;
+    }
+
+    if (!gFxaToolbarAccessed) {
+      Services.prefs.setBoolPref("identity.fxaccounts.toolbar.accessed", true);
+      document.documentElement.removeAttribute("fxa_avatar_badged");
+    }
+
+    const anchor = document.getElementById("fxa-toolbar-menu-button");
+    if (anchor.getAttribute("open") == "true") {
+      PanelUI.hide();
+    } else {
+      PanelUI.showSubView(viewId, anchor);
+    }
+  },
+
+  updateFxAToolbarPanel(state = {}) {
+    if (!gFxaToolbarEnabled) {
+      return;
+    }
+
+    const mainWindowEl = document.documentElement;
+
+    // The Firefox Account toolbar currently handles 3 different states for
+    // users. The default `not_configured state shows an empty avatar, `unverified`
+    // 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";
+    if (state.status === UIState.STATUS_LOGIN_FAILED || state.status === UIState.STATUS_NOT_VERIFIED) {
+      stateValue = "unverified";
+    } else if (state.status === UIState.STATUS_SIGNED_IN) {
+      stateValue = "signedin";
+      // Firefox Account specifies a `default` avatar image that uses the convention
+      // of all 0s in url. The default used in the design of the toolbar menu is
+      // different from the one provided by Firefox Account. Perform a check and only
+      // change avatar *if* this is not a default avatar.
+      if (state.avatarURL && !state.avatarURL.includes(FXA_NO_AVATAR_ZEROS)) {
+        // The user has specified a custom avatar, attempt to load the image on all the menu buttons.
+        const bgImage = `url("${state.avatarURL}")`;
+        let img = new Image();
+        img.onload = () => {
+          // If the image has successfully loaded, update the menu buttons else
+          // we will use the default avatar image.
+          mainWindowEl.style.setProperty("--avatar-image-url", bgImage);
+        };
+        img.onerror = () => {
+          // If the image failed to load, remove the property and default
+          // to standard avatar.
+          mainWindowEl.style.removeProperty("--avatar-image-url");
+        };
+        img.src = state.avatarURL;
+      } else {
+        mainWindowEl.style.removeProperty("--avatar-image-url");
+      }
+
+      document.getElementById("fxa-menu-email").value = state.email;
+
+      let defaultPanelTitle = this.fxaStrings.GetStringFromName("account.title");
+      document.getElementById("PanelUI-fxa").setAttribute("title", state.displayName ? state.displayName : defaultPanelTitle);
+    }
+    mainWindowEl.setAttribute("fxastatus", stateValue);
   },
 
   updatePanelPopup(state) {
     let defaultLabel = this.appMenuStatus.getAttribute("defaultlabel");
     // The localization string is for the signed in text, but it's the default text as well
     let defaultTooltiptext = this.appMenuStatus.getAttribute("signedinTooltiptext");
 
     const status = state.status;
@@ -312,16 +387,31 @@ var gSync = {
   },
 
   openSendToDevicePromo() {
     let url = this.PRODUCT_INFO_BASE_URL;
     url += "send-tabs/?utm_source=" + Services.appinfo.name.toLowerCase();
     switchToTabHavingURI(url, true, { replaceQueryString: true });
   },
 
+  async openFxAChangeAvatar(entryPoint) {
+    const url = await FxAccounts.config.promiseChangeAvatarURI(entryPoint);
+    switchToTabHavingURI(url, true, { replaceQueryString: true });
+  },
+
+  async openFxAEmailFirstPage(entryPoint) {
+    const url = await FxAccounts.config.promiseEmailFirstURI(entryPoint);
+    switchToTabHavingURI(url, true, { replaceQueryString: true });
+  },
+
+  async openFxAManagePage(entryPoint) {
+    const url = await FxAccounts.config.promiseManageURI(entryPoint);
+    switchToTabHavingURI(url, true, { replaceQueryString: true });
+  },
+
   async sendTabToDevice(url, targets, title) {
     const fxaCommandsDevices = [];
     const oldSendTabClients = [];
     for (const target of targets) {
       if (fxAccounts.commands.sendTab.isDeviceCompatible(target)) {
         fxaCommandsDevices.push(target);
       } else if (target.clientRecord) {
         oldSendTabClients.push(target.clientRecord);
@@ -589,38 +679,48 @@ var gSync = {
   },
 
   // Functions called by observers
   onActivityStart() {
     clearTimeout(this._syncAnimationTimer);
     this._syncStartTime = Date.now();
 
     let label = this.syncStrings.GetStringFromName("syncingtabs.label");
-    let syncIcon = document.getElementById("appMenu-fxa-icon");
-    let syncNow = document.getElementById("PanelUI-remotetabs-syncnow");
-    syncIcon.setAttribute("syncstatus", "active");
-    syncIcon.setAttribute("label", label);
-    syncIcon.setAttribute("disabled", "true");
-    syncNow.setAttribute("syncstatus", "active");
-    syncNow.setAttribute("label", label);
-    syncNow.setAttribute("disabled", "true");
+    let remotetabsSyncNowEl = document.getElementById("PanelUI-remotetabs-syncnow");
+    let syncElements = [
+      document.getElementById("appMenu-fxa-icon"),
+      remotetabsSyncNowEl,
+      document.getElementById("PanelUI-fxa-menu-syncnow-button"),
+    ];
+
+    syncElements.forEach((el) => {
+      el.setAttribute("syncstatus", "active");
+      el.setAttribute("disabled", "true");
+    });
+
+    remotetabsSyncNowEl.setAttribute("label", label);
   },
 
   _onActivityStop() {
     if (!gBrowser)
       return;
+
     let label = this.syncStrings.GetStringFromName("syncnow.label");
-    let syncIcon = document.getElementById("appMenu-fxa-icon");
-    let syncNow = document.getElementById("PanelUI-remotetabs-syncnow");
-    syncIcon.removeAttribute("syncstatus");
-    syncIcon.removeAttribute("disabled");
-    syncIcon.setAttribute("label", label);
-    syncNow.removeAttribute("syncstatus");
-    syncNow.removeAttribute("disabled");
-    syncNow.setAttribute("label", label);
+    let syncElements = [
+      document.getElementById("appMenu-fxa-icon"),
+      document.getElementById("PanelUI-remotetabs-syncnow"),
+      document.getElementById("PanelUI-fxa-menu-syncnow-button"),
+    ];
+
+    syncElements.forEach((el) => {
+      el.removeAttribute("syncstatus");
+      el.removeAttribute("disabled");
+      el.setAttribute("label", label);
+    });
+
     Services.obs.notifyObservers(null, "test:browser-sync:activity-stop");
   },
 
   onActivityStop() {
     let now = Date.now();
     let syncDuration = now - this._syncStartTime;
 
     if (syncDuration < MIN_STATUS_ANIMATION_DURATION) {
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -356,16 +356,26 @@ XPCOMUtils.defineLazyPreferenceGetter(th
   (aPref, aOldVal, aNewVal) => {
     if (aNewVal) {
       ToolbarKeyboardNavigator.init();
     } else {
       ToolbarKeyboardNavigator.uninit();
     }
   });
 
+XPCOMUtils.defineLazyPreferenceGetter(this, "gFxaToolbarEnabled",
+  "identity.fxaccounts.toolbar.enabled", false, (aPref, aOldVal, aNewVal) => {
+    showFxaToolbarMenu(aNewVal);
+  });
+
+XPCOMUtils.defineLazyPreferenceGetter(this, "gFxaToolbarAccessed",
+  "identity.fxaccounts.toolbar.accessed", false, (aPref, aOldVal, aNewVal) => {
+    showFxaToolbarMenu(gFxaToolbarEnabled);
+  });
+
 customElements.setElementCreationCallback("translation-notification", () => {
   Services.scriptloader.loadSubScript(
     "chrome://browser/content/translation-notification.js", window);
 });
 
 var gBrowser;
 var gLastValidURLStr = "";
 var gInPrintPreviewMode = false;
@@ -455,16 +465,40 @@ var gNavigatorBundle = {
   getString(key) {
     return gBrowserBundle.GetStringFromName(key);
   },
   getFormattedString(key, array) {
     return gBrowserBundle.formatStringFromName(key, array, array.length);
   },
 };
 
+function showFxaToolbarMenu(enable) {
+  // We only show the Firefox Account toolbar menu if the feature is enabled and
+  // if sync is enabled.
+  const syncEnabled = Services.prefs.getBoolPref("identity.fxaccounts.enabled", false);
+  const mainWindowEl = document.documentElement;
+  if (enable && syncEnabled) {
+    mainWindowEl.setAttribute("fxastatus", "not_configured");
+    // We have to manually update the sync state UI when toggling the FxA toolbar
+    // because it could show an invalid icon if the user is logged in and no sync
+    // event was performed yet.
+    gSync.maybeUpdateUIState();
+
+    // We set an attribute here so that we can toggle the custom
+    // badge depending on whether the FxA menu was ever accessed.
+    if (!gFxaToolbarAccessed) {
+      mainWindowEl.setAttribute("fxa_avatar_badged", "badged");
+    } else {
+      mainWindowEl.removeAttribute("fxa_avatar_badged");
+    }
+  } else {
+    mainWindowEl.removeAttribute("fxastatus");
+  }
+}
+
 function UpdateBackForwardCommands(aWebNavigation) {
   var backCommand = document.getElementById("Browser:Back");
   var forwardCommand = document.getElementById("Browser:Forward");
 
   // Avoid setting attributes on commands if the value hasn't changed!
   // Remember, guys, setting attributes on elements is expensive!  They
   // get inherited into anonymous content, broadcast to other widgets, etc.!
   // Don't do it if the value hasn't changed! - dwh
@@ -1397,16 +1431,18 @@ var gBrowserInit = {
       }
       let nonQuery = url.prePath + url.filePath;
       if (nonQuery in gPageIcons) {
         gBrowser.setIcon(gBrowser.selectedTab, gPageIcons[nonQuery]);
       }
     });
 
     this._setInitialFocus();
+
+    showFxaToolbarMenu(gFxaToolbarEnabled);
   },
 
   onLoad() {
     gBrowser.addEventListener("DOMUpdateBlockedPopups", gPopupBlockerObserver);
 
     Services.obs.addObserver(gPluginHandler.NPAPIPluginCrashed, "plugin-crashed");
 
     window.addEventListener("AppCommand", HandleAppCommandEvent, true);
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1082,16 +1082,29 @@
                        removable="true"
                        onmousedown="PanelUI.showSubView('appMenu-libraryView', this, event);"
                        onkeypress="PanelUI.showSubView('appMenu-libraryView', this, event);"
                        closemenu="none"
                        cui-areatype="toolbar"
                        tooltiptext="&libraryButton.tooltip;"
                        label="&places.library.title;"/>
 
+        <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 badged-button"
+                       onmousedown="gSync.toggleAccountPanel('PanelUI-fxa', event)"
+                       onkeypress="gSync.toggleAccountPanel('PanelUI-fxa, event)"
+                       consumeanchor="fxa-toolbar-menu-button"
+                       closemenu="none"
+                       label="&fxa.menu.firefoxAccount;"
+                       tooltiptext="&fxa.menu.firefoxAccount;"
+                       cui-areatype="toolbar"
+                       removable="true">
+                       <vbox>
+                        <image id="fxa-avatar-image"/>
+                       </vbox>
+        </toolbarbutton>
       </hbox>
 
       <toolbarbutton id="nav-bar-overflow-button"
                      class="toolbarbutton-1 chromeclass-toolbar-additional overflow-button"
                      skipintoolbarset="true"
                      tooltiptext="&navbarOverflow.label;">
         <box class="toolbarbutton-animatable-box">
           <image class="toolbarbutton-animatable-image"/>
--- a/browser/base/content/test/keyboard/browser_toolbarKeyNav.js
+++ b/browser/base/content/test/keyboard/browser_toolbarKeyNav.js
@@ -169,22 +169,24 @@ add_task(async function testTabStopNoBut
 add_task(async function testArrowsToolbarbuttons() {
   await BrowserTestUtils.withNewTab("about:blank", async function() {
     startFromUrlBar();
     await expectFocusAfterKey("Tab", "library-button");
     EventUtils.synthesizeKey("KEY_ArrowLeft");
     is(document.activeElement.id, "library-button",
        "ArrowLeft at end of button group does nothing");
     await expectFocusAfterKey("ArrowRight", "sidebar-button");
+    await expectFocusAfterKey("ArrowRight", "fxa-toolbar-menu-button");
     // This next check also confirms that the overflow menu button is skipped,
     // since it is currently invisible.
     await expectFocusAfterKey("ArrowRight", "PanelUI-menu-button");
     EventUtils.synthesizeKey("KEY_ArrowRight");
     is(document.activeElement.id, "PanelUI-menu-button",
        "ArrowRight at end of button group does nothing");
+    await expectFocusAfterKey("ArrowLeft", "fxa-toolbar-menu-button");
     await expectFocusAfterKey("ArrowLeft", "sidebar-button");
     await expectFocusAfterKey("ArrowLeft", "library-button");
   });
 });
 
 // Test that right/left arrows move through buttons wihch aren't toolbarbuttons
 // but have role="button".
 add_task(async function testArrowsRoleButton() {
@@ -224,21 +226,20 @@ add_task(async function testArrowsDisabl
 // Test that right arrow reaches the overflow menu button when it is visible.
 add_task(async function testArrowsOverflowButton() {
   await BrowserTestUtils.withNewTab("about:blank", async function() {
     // Move something to the overflow menu to make the button appear.
     CustomizableUI.addWidgetToArea("home-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
     startFromUrlBar();
     await expectFocusAfterKey("Tab", "library-button");
     await expectFocusAfterKey("ArrowRight", "sidebar-button");
+    await expectFocusAfterKey("ArrowRight", "fxa-toolbar-menu-button");
     await expectFocusAfterKey("ArrowRight", "nav-bar-overflow-button");
-    await expectFocusAfterKey("ArrowRight", "PanelUI-menu-button");
-    await expectFocusAfterKey("ArrowLeft", "nav-bar-overflow-button");
     // Make sure the button is not reachable once it is invisible again.
     await expectFocusAfterKey("ArrowRight", "PanelUI-menu-button");
     resetToolbarWithoutDevEditionButtons();
     // Flush layout so its invisibility can be detected.
     document.getElementById("nav-bar-overflow-button").clientWidth;
-    await expectFocusAfterKey("ArrowLeft", "sidebar-button");
+    await expectFocusAfterKey("ArrowLeft", "fxa-toolbar-menu-button");
   });
 });
 
 registerCleanupFunction(() => CustomizableUI.reset());
--- a/browser/base/content/test/sync/browser_sync.js
+++ b/browser/base/content/test/sync/browser_sync.js
@@ -46,16 +46,18 @@ add_task(async function test_ui_state_si
     tooltip: statusBarTooltip,
     fxastatus: "signedin",
     avatarURL: "https://foo.bar",
     syncing: false,
     syncNowTooltip: lastSyncTooltip,
   });
   checkRemoteTabsPanel("PanelUI-remotetabs-main", false);
   checkMenuBarItem("sync-syncnowitem");
+  checkFxaToolbarButtonPanel("PanelUI-fxa-menu");
+  checkFxaToolbarButtonAvatar("signedin");
   gSync.relativeTimeFormat = origRelativeTimeFormat;
 });
 
 add_task(async function test_ui_state_syncing() {
   let state = {
     status: UIState.STATUS_SIGNED_IN,
     email: "foo@bar.com",
     displayName: "Foo Bar",
@@ -90,16 +92,18 @@ add_task(async function test_ui_state_un
   let signedOffLabel = gSync.appMenuStatus.getAttribute("defaultlabel");
   let statusBarTooltip = gSync.appMenuStatus.getAttribute("signedinTooltiptext");
   checkPanelUIStatusBar({
     label: signedOffLabel,
     tooltip: statusBarTooltip,
   });
   checkRemoteTabsPanel("PanelUI-remotetabs-setupsync");
   checkMenuBarItem("sync-setup");
+  checkFxaToolbarButtonPanel("PanelUI-fxa-signin");
+  checkFxaToolbarButtonAvatar("not_configured");
 });
 
 add_task(async function test_ui_state_unverified() {
   let state = {
     status: UIState.STATUS_NOT_VERIFIED,
     email: "foo@bar.com",
     lastSync: new Date(),
     syncing: false,
@@ -114,16 +118,18 @@ add_task(async function test_ui_state_un
     tooltip: tooltipText,
     fxastatus: "unverified",
     avatarURL: null,
     syncing: false,
     syncNowTooltip: tooltipText,
   });
   checkRemoteTabsPanel("PanelUI-remotetabs-unverified", false);
   checkMenuBarItem("sync-unverifieditem");
+  checkFxaToolbarButtonPanel("PanelUI-fxa-unverified");
+  checkFxaToolbarButtonAvatar("unverified");
 });
 
 add_task(async function test_ui_state_loginFailed() {
   let state = {
     status: UIState.STATUS_LOGIN_FAILED,
     email: "foo@bar.com",
   };
 
@@ -136,16 +142,18 @@ add_task(async function test_ui_state_lo
     tooltip: tooltipText,
     fxastatus: "login-failed",
     avatarURL: null,
     syncing: false,
     syncNowTooltip: tooltipText,
   });
   checkRemoteTabsPanel("PanelUI-remotetabs-reauthsync", false);
   checkMenuBarItem("sync-reauthitem");
+  checkFxaToolbarButtonPanel("PanelUI-fxa-unverified");
+  checkFxaToolbarButtonAvatar("unverified");
 });
 
 function checkPanelUIStatusBar({label, tooltip, fxastatus, avatarURL, syncing, syncNowTooltip}) {
   let labelNode = document.getElementById("appMenu-fxa-label");
   let tooltipNode = document.getElementById("appMenu-fxa-status");
   let statusNode = document.getElementById("appMenu-fxa-container");
   let avatar = document.getElementById("appMenu-fxa-avatar");
 
@@ -163,30 +171,29 @@ function checkPanelUIStatusBar({label, t
   }
 
   if (syncing != undefined && syncNowTooltip != undefined) {
     checkSyncNowButton("appMenu-fxa-icon", syncing, syncNowTooltip);
   }
 }
 
 function checkRemoteTabsPanel(expectedShownItemId, syncing, syncNowTooltip) {
-  checkItemsVisiblities(["PanelUI-remotetabs-main",
-                         "PanelUI-remotetabs-setupsync",
-                         "PanelUI-remotetabs-reauthsync",
-                         "PanelUI-remotetabs-unverified"],
-                        expectedShownItemId);
+  checkItemsVisibilities(["PanelUI-remotetabs-main",
+                          "PanelUI-remotetabs-setupsync",
+                          "PanelUI-remotetabs-reauthsync",
+                          "PanelUI-remotetabs-unverified"],
+                          expectedShownItemId);
 
   if (syncing != undefined && syncNowTooltip != undefined) {
     checkSyncNowButton("PanelUI-remotetabs-syncnow", syncing, syncNowTooltip);
   }
 }
 
 function checkMenuBarItem(expectedShownItemId) {
-  checkItemsVisiblities(["sync-setup", "sync-syncnowitem", "sync-reauthitem", "sync-unverifieditem"],
-                        expectedShownItemId);
+  checkItemsVisibilities(["sync-setup", "sync-syncnowitem", "sync-reauthitem", "sync-unverifieditem"], expectedShownItemId);
 }
 
 function checkSyncNowButton(buttonId, syncing, tooltip = null) {
   const remoteTabsButton = document.getElementById(buttonId);
 
   is(remoteTabsButton.getAttribute("syncstatus"), syncing ? "active" : "", "button active has the right value");
   if (tooltip) {
     is(remoteTabsButton.getAttribute("tooltiptext"), tooltip, "button tooltiptext is set to the right value");
@@ -199,18 +206,49 @@ function checkSyncNowButton(buttonId, sy
   is(remoteTabsButton.hasAttribute("disabled"), syncing, "disabled has the right value");
   if (syncing) {
     is(remoteTabsButton.getAttribute("label"), gSync.syncStrings.GetStringFromName("syncingtabs.label"), "label is set to the right value");
   } else {
     is(remoteTabsButton.getAttribute("label"), gSync.syncStrings.GetStringFromName("syncnow.label"), "label is set to the right value");
   }
 }
 
+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);
+}
+
+// fxaStatus is one of 'not_configured', 'unverified', or 'signedin'.
+function checkFxaToolbarButtonAvatar(fxaStatus) {
+  const avatar = document.getElementById("fxa-avatar-image");
+  const avatarURL = getComputedStyle(avatar).listStyleImage;
+  const expected = {
+    not_configured: "url(\"chrome://browser/skin/fxa/avatar-empty-badged.svg\")",
+    unverified: "url(\"chrome://browser/skin/fxa/avatar-confirm.svg\")",
+    signedin: "url(\"chrome://browser/skin/fxa/avatar.svg\")",
+  };
+  ok(avatarURL == expected[fxaStatus], `expected avatar URL to be ${expected[fxaStatus]}, but got ${avatarURL}`);
+}
+
+// Only one item displayed at a time.
+function checkItemsDisplayed(itemsIds, expectedShownItemId) {
+  for (let id of itemsIds) {
+    if (id == expectedShownItemId) {
+      ok(BrowserTestUtils.is_visible(document.getElementById(id)), `view ${id} should be visible`);
+    } else {
+      ok(BrowserTestUtils.is_hidden(document.getElementById(id)), `view ${id} should be hidden`);
+    }
+  }
+}
+
 // Only one item visible at a time.
-function checkItemsVisiblities(itemsIds, expectedShownItemId) {
+function checkItemsVisibilities(itemsIds, expectedShownItemId) {
   for (let id of itemsIds) {
     if (id == expectedShownItemId) {
       ok(!document.getElementById(id).hidden, "menuitem " + id + " should be visible");
     } else {
       ok(document.getElementById(id).hidden, "menuitem " + id + " should be hidden");
     }
   }
 }
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -1,12 +1,11 @@
 /* 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/. */
-
 "use strict";
 
 var EXPORTED_SYMBOLS = ["CustomizableUI"];
 
 const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
 const {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 const {AppConstants} = ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 
@@ -50,17 +49,17 @@ const kSubviewEvents = [
   "ViewShowing",
   "ViewHiding",
 ];
 
 /**
  * The current version. We can use this to auto-add new default widgets as necessary.
  * (would be const but isn't because of testing purposes)
  */
-var kVersion = 15;
+var kVersion = 16;
 
 /**
  * Buttons removed from built-ins by version they were removed. kVersion must be
  * bumped any time a new id is added to this. Use the button id as key, and
  * version the button is removed in as the value.  e.g. "pocket-button": 5
  */
 var ObsoleteBuiltinButtons = {
   "feed-button": 15,
@@ -197,16 +196,17 @@ var CustomizableUIInternal = {
       "stop-reload-button",
       "home-button",
       "spring",
       "urlbar-container",
       "spring",
       "downloads-button",
       "library-button",
       "sidebar-button",
+      "fxa-toolbar-menu-button",
     ];
 
     if (AppConstants.MOZ_DEV_EDITION) {
       navbarPlacements.splice(2, 0, "developer-button");
     }
 
     this.registerArea(CustomizableUI.AREA_NAVBAR, {
       type: CustomizableUI.TYPE_TOOLBAR,
@@ -265,16 +265,17 @@ var CustomizableUIInternal = {
   },
 
   _defineBuiltInWidgets() {
     for (let widgetDefinition of CustomizableWidgets) {
       this.createBuiltinWidget(widgetDefinition);
     }
   },
 
+  // eslint-disable-next-line complexity
   _updateForNewVersion() {
     // We should still enter even if gSavedState.currentVersion >= kVersion
     // because the per-widget pref facility is independent of versioning.
     if (!gSavedState) {
       // Flip all the prefs so we don't try to re-introduce later:
       for (let [, widget] of gPalette) {
         if (widget.defaultArea && widget._introducedInVersion === "pref") {
           let prefId = "browser.toolbarbuttons.introduced." + widget.id;
@@ -471,16 +472,25 @@ var CustomizableUIInternal = {
     // Remove unsupported custom toolbar saved placements
     if (currentVersion < 14 && gSavedState.placements) {
       for (let area in gSavedState.placements) {
         if (!this._builtinAreas.has(area)) {
           delete gSavedState.placements[area];
         }
       }
     }
+
+    // Add the FxA toolbar menu as the right most button item
+    if (currentVersion < 16 && gSavedState.placements) {
+      let navbarPlacements = gSavedState.placements[CustomizableUI.AREA_NAVBAR];
+      // Place the menu item as the first item to the left of the hamburger menu
+      if (navbarPlacements) {
+        navbarPlacements.push("fxa-toolbar-menu-button");
+      }
+    }
   },
 
   /**
    * _markObsoleteBuiltinButtonsSeen
    * when upgrading, ensure obsoleted buttons are in seen state.
    */
   _markObsoleteBuiltinButtonsSeen() {
     if (!gSavedState)
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -712,16 +712,64 @@
                      smoothscroll="false"
                      flatList="true"
                      tooltip="bhTooltip">
           <!-- Recent Highlights will go here -->
         </toolbaritem>
       </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.openFxAEmailFirstPage('fxa_discoverability_native');"/>
+        </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.openPrefs('fxa_discoverability_native');"/>
+        </vbox>
+        <vbox id="PanelUI-fxa-menu">
+          <hbox flex="1" pack="center" class="fxa-avatar-subpanel">
+            <toolbarbutton align="left" oncommand="gSync.openFxAChangeAvatar('fxa_discoverability_native');">
+              <image id="fxa-menu-avatar"/>
+            </toolbarbutton>
+            <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-remotetabs-button"
+                         class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                         label="&appMenuRemoteTabs.label;"
+                         closemenu="none"
+                         oncommand="PanelUI.showSubView('PanelUI-remotetabs', this)"/>
+          <toolbarbutton id="PanelUI-fxa-menu-view-sidebar"
+                         class="subviewbutton subviewbutton-iconic"
+                         label="&appMenuRemoteTabs.sidebar.label;"
+                         oncommand="SidebarUI.toggle('viewTabsSidebar');"/>
+          <toolbarseparator/>
+          <toolbarbutton class="subviewbutton" label="&fxa.menu.connectAnotherDevice.label;" oncommand="gSync.openConnectAnotherDevice('fxa_discoverability_native');"/>
+          <toolbarbutton class="subviewbutton" label="&fxa.menu.manageAccount.label;" oncommand="gSync.openFxAManagePage('fxa_discoverability_native');"/>
+          <toolbarbutton class="subviewbutton" label="&fxa.menu.syncSettings.label;" oncommand="gSync.openPrefs('fxa_discoverability_native');"/>
+          <toolbarseparator/>
+          <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
+                         label="&syncSyncNowItem.label;"
+                         class="subviewbutton subviewbutton-iconic"
+                         oncommand="gSync.doSync();"
+                         closemenu="none"/>
+        </vbox>
+      </vbox>
+    </panelview>
+
     <panelview id="PanelUI-bookmarkingTools" class="PanelUI-subView">
       <vbox class="panel-subview-body">
         <toolbarbutton id="panelMenu_toggleBookmarksMenu"
                        class="subviewbutton subviewbutton-iconic"
                        label-show="&addBookmarksMenu.label;"
                        label-hide="&removeBookmarksMenu.label;"
                        oncommand="BookmarkingUI.toggleMenuButtonInToolbar(this);"/>
         <toolbarbutton id="panelMenu_viewBookmarksSidebar"
--- a/browser/components/customizableui/test/browser_1042100_default_placements_update.js
+++ b/browser/components/customizableui/test/browser_1042100_default_placements_update.js
@@ -116,64 +116,65 @@ function test() {
   is(navbarPlacements[0], "back-button", "Back button is in the right place.");
   is(navbarPlacements[1], "forward-button", "Fwd button is in the right place.");
   is(navbarPlacements[2], "stop-reload-button", "Stop/reload button is in the right place.");
   is(navbarPlacements[3], "home-button", "Home button is in the right place.");
   is(navbarPlacements[4], "urlbar-container", "URL bar is in the right place.");
   is(navbarPlacements[5], "downloads-button", "Downloads button is in the right place.");
   is(navbarPlacements[6], "library-button", "Library button is in the right place.");
   is(navbarPlacements[7], "sidebar-button", "Sidebar button is in the right place.");
-  is(navbarPlacements.length, 8, "Should have 8 items");
+  is(navbarPlacements[8], "fxa-toolbar-menu-button", "FxA button is in the right place.");
+  is(navbarPlacements.length, 9, "Should have 9 items");
 
   let overflowPlacements = CustomizableUIBSPass.gSavedState.placements["widget-overflow-fixed-list"];
   Assert.deepEqual(overflowPlacements, ["panic-button"]);
 
-  // Finally test that the downloads migration works:
+  // Finally, test the downloads and fxa avatar button migrations work.
   let oldNavbarPlacements = [
     "urlbar-container", "customizableui-special-spring3", "search-container",
   ];
   CustomizableUIBSPass.gSavedState = {
     currentVersion: 10,
     placements: {
       "nav-bar": Array.from(oldNavbarPlacements),
       "widget-overflow-fixed-list": ["downloads-button"],
     },
   };
   CustomizableUIInternal._updateForNewVersion();
   navbarPlacements = CustomizableUIBSPass.gSavedState.placements["nav-bar"];
-  Assert.deepEqual(navbarPlacements, oldNavbarPlacements.concat(["downloads-button"]),
+  Assert.deepEqual(navbarPlacements, oldNavbarPlacements.concat(["downloads-button", "fxa-toolbar-menu-button"]),
                    "Downloads button inserted in navbar");
   Assert.deepEqual(CustomizableUIBSPass.gSavedState.placements["widget-overflow-fixed-list"], [],
                    "Overflow panel is empty");
 
   CustomizableUIBSPass.gSavedState = {
     currentVersion: 10,
     placements: {
       "nav-bar": ["downloads-button"].concat(oldNavbarPlacements),
     },
   };
   CustomizableUIInternal._updateForNewVersion();
   navbarPlacements = CustomizableUIBSPass.gSavedState.placements["nav-bar"];
-  Assert.deepEqual(navbarPlacements, oldNavbarPlacements.concat(["downloads-button"]),
+  Assert.deepEqual(navbarPlacements, oldNavbarPlacements.concat(["downloads-button", "fxa-toolbar-menu-button"]),
                    "Downloads button reinserted in navbar");
 
   oldNavbarPlacements = [
     "urlbar-container", "customizableui-special-spring3", "search-container", "other-widget",
   ];
   CustomizableUIBSPass.gSavedState = {
     currentVersion: 10,
     placements: {
       "nav-bar": Array.from(oldNavbarPlacements),
     },
   };
   CustomizableUIInternal._updateForNewVersion();
   navbarPlacements = CustomizableUIBSPass.gSavedState.placements["nav-bar"];
   let expectedNavbarPlacements = [
     "urlbar-container", "customizableui-special-spring3", "search-container",
-    "downloads-button", "other-widget",
+    "downloads-button", "other-widget", "fxa-toolbar-menu-button",
   ];
   Assert.deepEqual(navbarPlacements, expectedNavbarPlacements,
                    "Downloads button inserted in navbar before other widgets");
 
   gFuturePlacements.delete(CustomizableUI.AREA_NAVBAR);
   gPalette.delete(testWidgetNew.id);
   gPalette.delete(testWidgetOld.id);
 }
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -535,16 +535,17 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 @keyframes syncRotate {
   from { transform: rotate(0); }
   to { transform: rotate(360deg); }
 }
 
 #appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon,
+#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon,
 #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon {
   animation: syncRotate 0.8s linear infinite;
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #appMenu-fxa-status {
   -moz-box-align: center;
 }
@@ -666,40 +667,147 @@ toolbarbutton[constrain-size="true"][cui
   background-color: @appmenuWarningBackgroundColorHoverBrightText@;
 }
 
 :root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
 :root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
   background-color: @appmenuWarningBackgroundColorActiveBrightText@;
 }
 
+/* Firefox Account Toolbar Panel */
+
+#fxa-menu-avatar,
+#fxa-avatar-image {
+  width: 16px;
+  height: 16px;
+}
+
+:root {
+  --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
+}
+
+:root[fxastatus="unverified"] #fxa-avatar-image {
+  list-style-image: url(chrome://browser/skin/fxa/avatar-confirm.svg);
+}
+
+:root[fxastatus="not_configured"] #fxa-avatar-image {
+  list-style-image: url(chrome://browser/skin/fxa/avatar-empty.svg);
+}
+
+:root[fxastatus="not_configured"][fxa_avatar_badged="badged"] #fxa-avatar-image {
+  list-style-image: url(chrome://browser/skin/fxa/avatar-empty-badged.svg);
+}
+
+:root:not([fxastatus]) #fxa-toolbar-menu-button {
+  display: none;
+}
+
+:root[fxastatus="signedin"] #fxa-menu-avatar,
+:root[fxastatus="signedin"] #fxa-avatar-image {
+  border-radius: 50%;
+  list-style-image: var(--avatar-image-url);
+}
+
+: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 {
+  font-weight: lighter;
+}
+
+.fxa-avatar-subpanel {
+  padding-top: 8px;
+  padding-bottom: 4px;
+}
+
+.fxa-avatar-subpanel-description {
+  color: var(--panel-disabled-color);
+}
+
+#fxa-menu-avatar {
+  height: 32px;
+  width: 32px;
+  pointer-events: none;
+  margin-inline-start: 20px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--arrowpanel-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,
+panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
+  display: none;
+}
+
+.fxaChooseWhatToSyncDevices {
+  height: 102px;
+  width: 201px;
+  list-style-image: url(chrome://browser/skin/fxa/choose-what-to-sync-devices.svg);
+}
+
+.fxaGraphicMail {
+  height: 71px;
+  width: 143px;
+  list-style-image: url(chrome://browser/skin/fxa/graphic-mail.svg);
+}
+
 #PanelUI-remotetabs {
   --panel-ui-sync-illustration-height: 91px;
 }
 
+.PanelUI-fxa-signin-instruction-label,
+.PanelUI-fxa-signin-instruction-callout,
 .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
     need adjusting (see bug 1248506) */
   margin: 0;
   text-align: center;
   text-shadow: none;
   max-width: 15em;
+}
+
+.PanelUI-remotetabs-instruction-label {
   color: var(--panel-disabled-color);
 }
 
 /* The boxes with "instructions" get extra top and bottom padding for space
    around the illustration and buttons */
 .PanelUI-remotetabs-instruction-box {
   /* If you change the padding here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
   padding-bottom: 30px;
 }
 
+.PanelUI-fxa-signin-button,
 .PanelUI-remotetabs-button {
   -moz-appearance: none;
   background-color: #0060df;
   /* !important for the color as an OSX specific rule when a lightweight theme
      is used for buttons in the toolbox overrides. See bug 1238531 for details */
   color: white !important;
   border-radius: 2px;
   /* If you change the margin or padding below, the min-height of the synced tabs
@@ -707,20 +815,26 @@ toolbarbutton[constrain-size="true"][cui
      etc) may need adjusting (see bug 1248506) */
   margin-top: 15px;
   margin-bottom: 15px;
   padding: 8px;
   text-shadow: none;
   min-width: 200px;
 }
 
+.PanelUI-fxa-signin-button {
+  padding: 1em;
+}
+
+.PanelUI-fxa-signin-button:hover,
 .PanelUI-remotetabs-button:hover {
   background-color: #003eaa;
 }
 
+.PanelUI-fxa-signin-button:hover:active,
 .PanelUI-remotetabs-button:hover:active {
   background-color: #002275;
 }
 
 .remotetabs-promo-link {
   margin: 0;
 }
 
@@ -749,16 +863,17 @@ toolbarbutton[constrain-size="true"][cui
 .fxaSyncIllustration {
   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
 }
 
 .fxaSyncIllustrationIssue {
   list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
 }
 
+.PanelUI-fxa-signin-button > .toolbarbutton-text,
 .PanelUI-remotetabs-button > .toolbarbutton-text {
   /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
   text-align: center !important;
   text-shadow: none;
 }
 
 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
   min-width: 19em;
@@ -1203,16 +1318,20 @@ menuitem.panel-subview-footer@menuStateA
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
+#appMenu-fxa-avatar {
+  border-radius: 50%;
+}
+
 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menu-dropmarker,
 #bookmarks-menu-button[overflowedItem] > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 #search-container[cui-areatype="menu-panel"] {
   padding-top: 6px;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-confirm.svg
@@ -0,0 +1,8 @@
+<!-- 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" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14.92 9A6.63 6.63 0 0 0 15 8a7 7 0 1 0-7 7v-2a4.94 4.94 0 0 1-4.11-2.19A1 1 0 0 1 4 9.58C5 8.36 6.48 10 8 10h.09A1.51 1.51 0 0 1 9.5 9zM8 9a3 3 0 1 1 3-3 3 3 0 0 1-3 3z"/>
+  <path d="M15.5 10h-6a.5.5 0 0 0-.5.5v.32l3.5 2.1 3.5-2.1v-.32a.5.5 0 0 0-.5-.5z"/>
+  <path d="M12.5 14a.48.48 0 0 1-.26-.07L9 12v3.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V12l-3.24 1.95a.48.48 0 0 1-.26.05z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-empty-badged.svg
@@ -0,0 +1,8 @@
+<!-- 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 9a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm4.05.58C11 8.36 9.52 10 8 10s-3-1.64-4-.42a1 1 0 0 0-.06 1.23 5 5 0 0 0 8.22 0 1 1 0 0 0-.11-1.23z"/>
+  <circle fill="#0A84FF" cx="13.5" cy="2.5" r="2.5"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.13 5.93a.4.4 0 0 0-.35.48A5.89 5.89 0 0 1 14 8.1 6 6 0 0 1 8 14h-.1A6 6 0 0 1 8 2h.1a6 6 0 0 1 1.42.2.48.48 0 0 0 .56-.38.48.48 0 0 0-.3-.59A7 7 0 1 0 7.89 15H8a7 7 0 0 0 7-6.89 7.09 7.09 0 0 0-.24-1.91c-.04-.14-.22-.36-.63-.27z"/>
+</svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-empty.svg
@@ -0,0 +1,9 @@
+<!-- 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" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.05 9.58C11 8.36 9.52 10 8 10s-3-1.64-4-.42a1 1 0 0 0-.06 1.23 5 5 0 0 0 8.22 0 1 1 0 0 0-.11-1.23z"/>
+  <circle cx="8" cy="6" r="3"/>
+  <path d="M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"/>
+</svg>
+
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar.svg
@@ -0,0 +1,6 @@
+<!-- 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" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 2a3 3 0 1 1-3 3 3 3 0 0 1 3-3zm4.11 7.81a5 5 0 0 1-8.22 0A1 1 0 0 1 4 9.58C5 8.36 6.48 10 8 10s3-1.64 4.05-.42a1 1 0 0 1 .06 1.23z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/choose-what-to-sync-devices.svg
@@ -0,0 +1,39 @@
+<!-- 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="201" height="102">
+  <g>
+    <path fill="#eaeaee" d="M142.1 93.3c-3 0-5.9-.3-8.8-.9-.3-.1-.4-.3-.4-.6.1-.3.3-.4.6-.4 2.8.6 5.6.9 8.5.9.7 0 1.5 0 2.2-.1.3 0 .5.2.5.4 0 .3-.2.5-.5.5-.7.2-1.4.2-2.1.2zm8.6-.9c-.3 0-.5-.2-.5-.5 0-.2.2-.4.4-.5.7-.1 1.4-.3 2.1-.5.3-.1.5.1.6.4.1.3-.1.5-.4.6-.7.2-1.4.4-2.1.5h-.1zm6.2-1.8c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5 2.7-1 5.2-2.3 7.6-3.9.2-.2.5-.1.7.1s.1.5-.1.7c-2.5 1.6-5.1 2.9-7.8 4-.1.1-.1.1-.2.1zm-31.8-.8h-.2c-2.7-1.2-5.2-2.7-7.6-4.4-.2-.2-.3-.5-.1-.7.2-.2.5-.3.7-.1 2.3 1.7 4.8 3.1 7.4 4.3.3.1.4.4.3.7-.1 0-.3.2-.5.2zm-10.9-7.1c-.1 0-.2 0-.3-.1-.5-.5-1.1-1-1.6-1.5-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 .5.5 1 1 1.6 1.5.2.2.2.5 0 .7-.1 0-.2.1-.4.1zm57.2-1.6c-.3 0-.5-.2-.5-.5 0-.1.1-.3.1-.4 2.5-2.5 4.7-5.4 6.5-8.5.1-.2.4-.3.7-.2.2.1.3.4.2.7-1.8 3.2-4.1 6.1-6.7 8.7 0 .2-.2.2-.3.2zm-63-4.9c-.2 0-.3-.1-.4-.2-2.2-3-3.9-6.2-5.3-9.6-.1-.3 0-.5.3-.6s.5 0 .6.3c1.3 3.3 3 6.5 5.1 9.4.2.2.1.5-.1.7h-.2zm72.4-9.5c-.3 0-.5-.2-.5-.5V66c.3-.7.5-1.3.7-2 .1-.3.4-.4.6-.3.3.1.4.4.3.6-.2.7-.5 1.4-.7 2.1 0 .1-.2.3-.4.3zm1.9-6.3h-.1c-.3-.1-.4-.3-.4-.6.6-2.8.9-5.7.9-8.5v-.2c0-.3.2-.5.5-.5s.5.2.5.5v.2c0 2.9-.3 5.9-.9 8.7-.1.2-.3.4-.5.4zM101 58.3c-.2 0-.5-.2-.5-.4-.3-2.2-.5-4.4-.5-6.7 0-.7 0-1.4.1-2.1 0-.3.2-.5.5-.5s.5.2.5.5c0 .7-.1 1.4-.1 2.1 0 2.2.2 4.4.5 6.5 0 .3-.2.6-.5.6zm82.3-11c-.3 0-.5-.2-.5-.4-.3-2.9-.9-5.7-1.8-8.4-.1-.3.1-.5.3-.6s.5.1.6.3c.9 2.8 1.5 5.7 1.9 8.6 0 .2-.2.4-.5.5.1 0 .1 0 0 0 .1 0 0 0 0 0zm-82.4-2c-.3 0-.5-.3-.5-.6.1-.7.2-1.5.4-2.2.1-.3.3-.4.6-.4.3.1.4.3.4.6-.1.7-.3 1.4-.4 2.1 0 .4-.2.5-.5.5zm2.3-8.4c-.3 0-.5-.2-.5-.5v-.2c1.3-3.4 3.1-6.7 5.2-9.7.2-.2.5-.3.7-.1s.3.5.1.7c-2.1 2.9-3.8 6.1-5.1 9.4 0 .3-.2.4-.4.4zm74.7-6.1c-.2 0-.3-.1-.4-.2-1.8-3.1-4-5.9-6.6-8.5-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 2.6 2.6 4.9 5.5 6.7 8.7.1.2.1.5-.2.7h-.2zm-63.8-9.9c-.3 0-.5-.2-.5-.5 0-.1.1-.3.2-.4 2.2-2 4.6-3.7 7.1-5.2.2-.1.5-.1.7.2s.1.5-.2.7c-2.5 1.4-4.8 3.1-6.9 5.1-.1.1-.3.1-.4.1zm52.2-2.8c-.1 0-.2 0-.3-.1l-1.8-1.2c-.2-.1-.3-.5-.1-.7.1-.2.5-.3.7-.1l1.8 1.2c.2.2.3.5.1.7-.1.1-.2.2-.4.2zm-5.6-3.4c-.1 0-.2 0-.2-.1-2.6-1.3-5.2-2.3-8-3.1-.3-.1-.4-.3-.4-.6.1-.3.3-.4.6-.4 2.8.8 5.6 1.8 8.2 3.1.2.1.3.4.2.7 0 .3-.2.4-.4.4zm-35.7-.9c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5.7-.3 1.3-.6 2-.8.3-.1.5 0 .6.3.1.3 0 .5-.3.6-.7.3-1.3.5-2 .8 0 .1 0 .1-.1.1zm8.2-2.7c-.3 0-.5-.2-.5-.5 0-.2.2-.4.4-.5 3.6-.8 7.3-1.1 10.9-.9.3 0 .5.2.5.5s-.2.5-.5.5c-3.6-.2-7.2.1-10.7.9h-.1z"/>
+    <animateTransform attributeName="transform" attributeType="XML" dur="10s" from="0 142 51" repeatCount="indefinite" to="-360 142 51" type="rotate"/>
+  </g>
+  <g>
+    <path fill="#eaeaee" d="M62.8 93.3c-3 0-5.9-.3-8.8-.9-.3-.1-.4-.3-.4-.6.1-.3.3-.4.6-.4 2.8.6 5.6.9 8.5.9.7 0 1.5 0 2.2-.1.3 0 .5.2.5.4 0 .3-.2.5-.5.5-.6.2-1.3.2-2.1.2zm8.6-.9c-.3 0-.5-.2-.5-.5 0-.2.2-.4.4-.5.7-.1 1.4-.3 2.1-.5.3-.1.5.1.6.4.1.3-.1.5-.4.6-.7.2-1.4.4-2.1.5h-.1zm6.3-1.8c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5 2.7-1 5.2-2.3 7.6-3.9.2-.2.5-.1.7.1s.1.5-.1.7c-2.5 1.6-5.1 2.9-7.8 4-.1.1-.2.1-.2.1zm-31.8-.8h-.2c-2.7-1.2-5.2-2.7-7.6-4.4-.2-.2-.3-.5-.1-.7.2-.2.5-.3.7-.1 2.3 1.7 4.8 3.1 7.4 4.3.3.1.4.4.3.7-.1 0-.3.2-.5.2zM35 82.7c-.1 0-.2 0-.3-.1-.5-.5-1.1-1-1.6-1.5-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 .5.5 1 1 1.6 1.5.2.2.2.5 0 .7-.1 0-.3.1-.4.1zm57.2-1.6c-.3 0-.5-.2-.5-.5 0-.1.1-.3.1-.4 2.5-2.5 4.7-5.4 6.5-8.5.1-.2.4-.3.7-.2.2.1.3.4.2.7-1.8 3.2-4.1 6.1-6.7 8.7-.1.2-.2.2-.3.2zm-63-4.9c-.2 0-.3-.1-.4-.2-2.2-3-3.9-6.2-5.3-9.6-.1-.3 0-.5.3-.6s.5 0 .6.3c1.3 3.3 3 6.5 5.1 9.4.2.2.1.5-.1.7h-.2zm72.4-9.5c-.3 0-.5-.2-.5-.5V66c.3-.7.5-1.3.7-2 .1-.3.4-.4.6-.3.3.1.4.4.3.6-.2.7-.5 1.4-.7 2.1 0 .1-.2.3-.4.3zm1.8-6.3h-.1c-.3-.1-.4-.3-.4-.6.6-2.8.9-5.7.9-8.5v-.2c0-.3.2-.5.5-.5s.5.2.5.5v.2c0 2.9-.3 5.9-.9 8.7 0 .2-.2.4-.5.4zm-81.7-2.1c-.2 0-.5-.2-.5-.4-.3-2.2-.5-4.4-.5-6.7 0-.7 0-1.4.1-2.1 0-.3.2-.5.5-.5s.5.2.5.5c0 .7-.1 1.4-.1 2.1 0 2.2.2 4.4.5 6.5.1.3-.1.6-.5.6.1 0 0 0 0 0zm82.4-11c-.3 0-.5-.2-.5-.4-.3-2.9-.9-5.7-1.8-8.4-.1-.3.1-.5.3-.6s.5.1.6.3c.9 2.8 1.5 5.7 1.9 8.6 0 .2-.2.4-.5.5zm-82.4-2s-.1 0 0 0c-.3 0-.5-.3-.5-.6.1-.7.2-1.5.4-2.2.1-.3.3-.4.6-.4.3.1.4.3.4.6-.1.7-.3 1.4-.4 2.1 0 .4-.3.5-.5.5zm2.2-8.4c-.3 0-.5-.2-.5-.5v-.2c1.3-3.4 3.1-6.7 5.2-9.7.2-.2.5-.3.7-.1s.3.5.1.7c-2.1 2.9-3.8 6.1-5.1 9.4 0 .3-.2.4-.4.4zm74.8-6.1c-.2 0-.3-.1-.4-.2-1.8-3.1-4-5.9-6.6-8.5-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 2.6 2.6 4.9 5.5 6.7 8.7.1.2.1.5-.2.7h-.2zm-63.8-9.9c-.3 0-.5-.2-.5-.5 0-.1.1-.3.2-.4 2.2-2 4.6-3.7 7.1-5.2.2-.1.5-.1.7.2s.1.5-.2.7c-2.5 1.4-4.8 3.1-6.9 5.1-.2.1-.3.1-.4.1zm52.2-2.8c-.1 0-.2 0-.3-.1L85 16.8c-.2-.1-.3-.5-.1-.7.1-.2.5-.3.7-.1l1.8 1.2c.2.2.3.5.1.7-.1.1-.3.2-.4.2zm-5.6-3.4c-.1 0-.2 0-.2-.1-2.6-1.3-5.2-2.3-8-3.1-.3-.1-.4-.3-.4-.6.1-.3.3-.4.6-.4 2.8.8 5.6 1.8 8.2 3.1.2.1.3.4.2.7 0 .3-.2.4-.4.4zm-35.7-.9c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5.7-.3 1.3-.6 2-.8.3-.1.5 0 .6.3.1.3 0 .5-.3.6-.7.3-1.3.5-2 .8 0 .1-.1.1-.1.1zm8.2-2.7c-.3 0-.5-.2-.5-.5 0-.2.2-.4.4-.5 3.6-.8 7.3-1.1 10.9-.9.3 0 .5.2.5.5s-.2.5-.5.5c-3.6-.2-7.2.1-10.7.9H54z"/>
+    <animateTransform attributeName="transform" attributeType="XML" dur="10s" from="0 62 51" repeatCount="indefinite" to="360 62 51" type="rotate"/>
+  </g>
+  <g>
+    <path fill="#eaeaee" d="M62.6 102.5c-.9 0-1.7 0-2.6-.1-.3 0-.5-.2-.5-.5s.3-.5.5-.5c3.8.2 7.6 0 11.3-.7.3 0 .5.1.6.4 0 .3-.1.5-.4.6-2.9.5-5.9.8-8.9.8zm-10.1-1h-.1c-.9-.2-1.9-.4-2.8-.7-.3-.1-.4-.3-.4-.6s.3-.4.6-.4c.9.2 1.8.5 2.8.6.3.1.4.3.4.6-.1.3-.3.5-.5.5zM46 99.7h-.2l-.9-.3c-.3-.1-.4-.4-.3-.6s.4-.4.6-.3l.9.3c.3.1.4.4.3.6 0 .2-.2.3-.4.3zm33.8-.2c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5l.9-.3c.3-.1.5 0 .6.3s0 .5-.3.6l-.9.3c0 .1 0 .1-.1.1zm4.4-1.8c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5.9-.4 1.7-.8 2.5-1.3.2-.1.5 0 .7.2s0 .5-.2.7c-.8.5-1.7.9-2.6 1.3 0 .1-.1.1-.2.1zm-46.9-2c-.1 0-.2 0-.2-.1-3.4-1.9-6.5-4.2-9.3-6.9-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 2.8 2.6 5.8 4.8 9.1 6.7.2.1.3.4.2.7-.1.3-.3.4-.5.3zm55.9-3.4c-.3 0-.5-.2-.5-.5 0-.2.1-.3.2-.4 3-2.3 5.8-4.9 8.2-7.8.2-.2.5-.2.7-.1s.2.5.1.7c-2.5 3-5.3 5.6-8.4 8-.1 0-.2.1-.3.1zm-70.3-9c-.2 0-.3-.1-.4-.2-.6-.7-1.2-1.5-1.7-2.3-.2-.2-.1-.5.1-.7.2-.2.5-.1.7.1.5.8 1.1 1.5 1.7 2.3.2.2.1.5-.1.7-.1.1-.2.1-.3.1zm-3.8-5.5c-.2 0-.3-.1-.4-.2-.2-.3-.3-.6-.5-.8-.1-.2-.1-.5.2-.7s.5-.1.7.2c.2.3.3.5.5.8.1.2.1.5-.2.7h-.3zm87.4-.5c-.3 0-.5-.2-.5-.5 0-.1 0-.2.1-.3.2-.3.3-.5.5-.8.1-.2.4-.3.7-.2.2.1.3.4.2.7-.2.3-.3.6-.5.8-.2.2-.3.3-.5.3zm2.2-4.2h-.2c-.3-.1-.4-.4-.2-.7.4-.9.8-1.7 1.1-2.6.1-.3.4-.4.7-.3.3.1.4.4.3.6-.4.9-.7 1.8-1.1 2.7-.2.2-.4.3-.6.3zM15 69.2c-.2 0-.4-.1-.5-.3-1.3-3.6-2.2-7.4-2.7-11.2 0-.3.2-.5.4-.6.3 0 .5.2.6.4.5 3.8 1.4 7.5 2.7 11 .1.3 0 .5-.3.6-.1.1-.2.1-.2.1zm97.1-6.1h-.1c-.3-.1-.4-.3-.4-.6.8-3.7 1.3-7.5 1.3-11.3V51c0-.3.2-.5.5-.5s.5.2.5.5v.2c0 3.9-.4 7.7-1.3 11.5-.1.3-.3.4-.5.4zM11.9 50.4c-.3 0-.5-.2-.5-.5 0-1 .1-1.9.2-2.9 0-.3.3-.5.5-.5.3 0 .5.3.5.5-.1.9-.1 1.9-.2 2.8 0 .4-.2.6-.5.6zm.6-6.6c-.4 0-.5-.3-.5-.6.1-.3.1-.6.2-1 0-.3.3-.5.6-.4s.5.3.4.6c-.1.3-.1.6-.2.9 0 .3-.2.5-.5.5zm100.1-.8c-.2 0-.5-.2-.5-.4-.1-.3-.1-.6-.2-.9-.1-.3.1-.5.4-.6s.5.1.6.4c.1.3.1.6.2 1 .1.2-.1.4-.5.5.1 0 .1 0 0 0 .1 0 .1 0 0 0zm-1-4.7c-.2 0-.4-.2-.5-.4-.2-.9-.5-1.8-.8-2.7-.1-.3.1-.5.3-.6.3-.1.5.1.6.3.3.9.6 1.8.8 2.8.1.3-.1.5-.4.6.1 0 0 0 0 0zm-96.7-3.8h-.2c-.3-.1-.4-.4-.3-.6 1.3-3.6 3-7.1 5.1-10.4.1-.2.5-.3.7-.1.2.1.3.5.1.7-2.1 3.2-3.8 6.6-5 10.2 0 .1-.2.2-.4.2zm92.9-6c-.2 0-.4-.1-.4-.3-1.7-3.4-3.9-6.5-6.3-9.4-.2-.2-.2-.5.1-.7s.5-.2.7.1c2.5 3 4.7 6.2 6.4 9.6.1.2 0 .5-.2.7h-.3zM24.6 18.1c-.3 0-.5-.2-.5-.5 0-.1 0-.2.1-.3.6-.7 1.3-1.4 2-2.1.2-.2.5-.2.7 0 .2.2.2.5 0 .7-.7.7-1.3 1.4-1.9 2.1-.1.1-.2.1-.4.1zm4.8-4.7c-.3 0-.5-.2-.5-.5 0-.1.1-.3.2-.4.2-.2.5-.4.7-.6.2-.2.5-.1.7.1.2.2.1.5-.1.7-.2.2-.5.4-.7.6-.1.1-.2.1-.3.1zm65.9-.5c-.1 0-.2 0-.3-.1-.2-.2-.5-.4-.7-.6-.3-.2-.3-.5-.1-.7s.5-.2.7-.1c.3.2.5.4.7.6.2.2.2.5.1.7-.1.2-.2.2-.4.2zM91.5 10c-.1 0-.2 0-.3-.1-.8-.5-1.6-1.1-2.4-1.6-.2-.1-.3-.5-.2-.7s.5-.3.7-.2c.8.5 1.6 1 2.4 1.6.2.2.3.5.1.7 0 .2-.1.3-.3.3zM37.1 7.9c-.3 0-.5-.2-.5-.5 0-.2.1-.3.2-.4 3.3-1.9 6.9-3.5 10.6-4.7.3-.1.5.1.6.3.1.3-.1.5-.3.6-3.6 1.1-7.1 2.7-10.4 4.6 0 0-.1.1-.2.1zM82.3 5h-.2c-3.5-1.5-7.2-2.5-10.9-3.2-.3 0-.5-.3-.4-.6 0-.3.3-.5.6-.4 3.8.7 7.5 1.7 11.1 3.2.3.1.4.4.3.7-.1.1-.3.3-.5.3zM55.1 1.6c-.3 0-.5-.2-.5-.5 0-.2.2-.5.4-.5.9-.1 1.9-.3 2.9-.3.3 0 .5.2.5.5s-.2.5-.5.5c-.9 0-1.8.1-2.8.3zm6.7-.6c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h.9c.3 0 .5.2.5.5s-.2.5-.5.5h-.9z"/>
+    <animateTransform attributeName="transform" attributeType="XML" dur="10s" from="0 62 51" repeatCount="indefinite" to="-360 62 51" type="rotate"/>
+  </g>
+  <g>
+    <path fill="#eaeaee" d="M142.1 102.5c-.9 0-1.7 0-2.6-.1-.3 0-.5-.2-.5-.5s.3-.5.5-.5c3.8.2 7.6 0 11.3-.7.3 0 .5.1.6.4 0 .3-.1.5-.4.6-2.9.5-5.9.8-8.9.8zm-10.2-1h-.1c-.9-.2-1.9-.4-2.8-.7-.3-.1-.4-.3-.4-.6s.3-.4.6-.4c.9.2 1.8.5 2.8.6.3.1.4.3.4.6s-.2.5-.5.5zm-6.4-1.8h-.2l-.9-.3c-.3-.1-.4-.4-.3-.6s.4-.4.6-.3l.9.3c.3.1.4.4.3.6 0 .2-.2.3-.4.3zm33.8-.2c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5l.9-.3c.3-.1.5 0 .6.3s0 .5-.3.6l-.9.3c0 .1-.1.1-.1.1zm4.4-1.8c-.3 0-.5-.2-.5-.5 0-.2.1-.4.3-.5.9-.4 1.7-.8 2.5-1.3.2-.1.5 0 .7.2s0 .5-.2.7c-.8.5-1.7.9-2.6 1.3-.1.1-.1.1-.2.1zm-46.9-2c-.1 0-.2 0-.2-.1-3.4-1.9-6.5-4.2-9.3-6.9-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 2.8 2.6 5.8 4.8 9.1 6.7.2.1.3.4.2.7-.2.2-.3.3-.5.3zm55.9-3.4c-.3 0-.5-.2-.5-.5 0-.2.1-.3.2-.4 3-2.3 5.8-4.9 8.2-7.8.2-.2.5-.2.7-.1s.2.5.1.7c-2.5 3-5.3 5.6-8.4 8-.1 0-.2.1-.3.1zm-70.3-9c-.2 0-.3-.1-.4-.2-.6-.7-1.2-1.5-1.7-2.3-.2-.2-.1-.5.1-.7.2-.2.5-.1.7.1.5.8 1.1 1.5 1.7 2.3.2.2.1.5-.1.7-.1.1-.2.1-.3.1zm-3.9-5.5c-.2 0-.3-.1-.4-.2-.2-.3-.3-.6-.5-.8-.1-.2-.1-.5.2-.7s.5-.1.7.2c.2.3.3.5.5.8.1.2.1.5-.2.7h-.3zm87.4-.5c-.3 0-.5-.2-.5-.5 0-.1 0-.2.1-.3.2-.3.3-.5.5-.8.1-.2.4-.3.7-.2.2.1.3.4.2.7-.2.3-.3.6-.5.8-.1.2-.3.3-.5.3zm2.3-4.2h-.2c-.3-.1-.4-.4-.2-.7.4-.9.8-1.7 1.1-2.6.1-.3.4-.4.7-.3.3.1.4.4.3.6-.4.9-.7 1.8-1.1 2.7-.3.2-.4.3-.6.3zm-93.8-3.9c-.2 0-.4-.1-.5-.3-1.3-3.6-2.2-7.4-2.7-11.2 0-.3.2-.5.4-.6.3 0 .5.2.6.4.5 3.8 1.4 7.5 2.7 11 .1.3 0 .5-.3.6-.1.1-.1.1-.2.1zm97.2-6.1h-.1c-.3-.1-.4-.3-.4-.6.8-3.7 1.3-7.5 1.3-11.3V51c0-.3.2-.5.5-.5s.5.2.5.5v.2c0 3.9-.4 7.7-1.3 11.5-.1.3-.3.4-.5.4zM91.4 50.4c-.3 0-.5-.2-.5-.5 0-1 .1-1.9.2-2.9 0-.3.3-.5.5-.5.3 0 .5.3.5.5-.1.9-.1 1.9-.2 2.8 0 .4-.3.6-.5.6zm.6-6.6c-.1 0-.1 0 0 0-.4 0-.5-.3-.5-.6.1-.3.1-.6.2-1 0-.3.3-.5.6-.4s.5.3.4.6c-.1.3-.1.6-.2.9-.1.3-.3.5-.5.5zm100.1-.8c-.2 0-.5-.2-.5-.4-.1-.3-.1-.6-.2-.9-.1-.3.1-.5.4-.6s.5.1.6.4c.1.3.1.6.2 1 0 .2-.1.4-.5.5.1 0 .1 0 0 0zm-1.1-4.7c-.2 0-.4-.2-.5-.4-.2-.9-.5-1.8-.8-2.7-.1-.3.1-.5.3-.6.3-.1.5.1.6.3.3.9.6 1.8.8 2.8.1.3-.1.5-.4.6.1 0 .1 0 0 0zm-96.6-3.8h-.2c-.3-.1-.4-.4-.3-.6 1.3-3.6 3-7.1 5.1-10.4.1-.2.5-.3.7-.1.2.1.3.5.1.7-2.1 3.2-3.8 6.6-5 10.2 0 .1-.2.2-.4.2zm92.8-6c-.2 0-.4-.1-.4-.3-1.7-3.4-3.9-6.5-6.3-9.4-.2-.2-.2-.5.1-.7s.5-.2.7.1c2.5 3 4.7 6.2 6.4 9.6.1.2 0 .5-.2.7h-.3zm-83.1-10.4c-.3 0-.5-.2-.5-.5 0-.1 0-.2.1-.3.6-.7 1.3-1.4 2-2.1.2-.2.5-.2.7 0 .2.2.2.5 0 .7-.7.7-1.3 1.4-1.9 2.1-.1.1-.3.1-.4.1zm4.7-4.7c-.3 0-.5-.2-.5-.5 0-.1.1-.3.2-.4.2-.2.5-.4.7-.6.2-.2.5-.1.7.1.2.2.1.5-.1.7-.2.2-.5.4-.7.6 0 .1-.2.1-.3.1zm66-.5c-.1 0-.2 0-.3-.1-.2-.2-.5-.4-.7-.6-.2-.2-.2-.5-.1-.7s.5-.2.7-.1c.3.2.5.4.7.6.2.2.2.5.1.7-.1.1-.3.2-.4.2zM171 10c-.1 0-.2 0-.3-.1-.8-.5-1.6-1.1-2.4-1.6-.2-.1-.3-.5-.2-.7s.5-.3.7-.2c.8.5 1.6 1 2.4 1.6.2.2.3.5.1.7 0 .2-.2.3-.3.3zm-54.4-2.1c-.3 0-.5-.2-.5-.5 0-.2.1-.3.2-.4 3.3-1.9 6.9-3.5 10.6-4.7.3-.1.5.1.6.3.1.3-.1.5-.3.6-3.6 1.1-7.1 2.7-10.4 4.6 0 0-.1.1-.2.1zm45.2-3h-.2c-3.5-1.5-7.2-2.5-10.9-3.2-.3 0-.5-.3-.4-.6 0-.3.3-.5.6-.4 3.8.7 7.5 1.7 11.1 3.2.3.1.4.4.3.7-.2.2-.3.3-.5.3zm-27.3-3.3c-.3 0-.5-.2-.5-.5 0-.2.2-.5.4-.5.9-.1 1.9-.3 2.9-.3.3 0 .5.2.5.5s-.2.5-.5.5c-.8 0-1.7.1-2.8.3.1 0 .1 0 0 0zm6.7-.6c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h.9c.3 0 .5.2.5.5s-.2.5-.4.5h-1z"/>
+    <animateTransform attributeName="transform" attributeType="XML" dur="10s" from="0 142 51" repeatCount="indefinite" to="360 142 51" type="rotate"/>
+  </g>
+  <path fill="#eaeaee" d="M142.1 6c12 0 23.5 4.8 32 13.3h2.8c-16.3-17.8-43.3-20.4-62.7-6.1h3.5c7.2-4.7 15.7-7.2 24.4-7.2zm0 90.5c-9.3 0-18.4-2.9-26.1-8.3h-3.3c20.3 16.2 50 12.9 66.2-7.4.1-.1.2-.2.2-.3h-2.6c-8.5 10.1-21.1 16-34.4 16zM62.6 6c8.7 0 17.2 2.5 24.5 7.2h3.5C74.5 1.3 52.7.9 36.1 12.1h3.8C46.8 8.1 54.6 6 62.6 6zm0 90.5c-10.1 0-20-3.4-27.9-9.7h-3.1c17.2 15.1 42.6 15.6 60.5 1.4h-3.3c-7.7 5.4-16.9 8.3-26.2 8.3z"/>
+  <rect width="26" height="45.5" x="170" y="25" fill="#fff" rx="2" ry="2"/>
+  <path fill="#90e8f0" d="M178.7 51.9c0 .3.1.7.4.9l.5.3 2.9-1.5 2.4 1.3c.3.2.7.2 1-.1l.5-.4-.4-3.4 2-2.1c.2-.3.3-.6.2-.9l-.2-.5-3.2-.6-1.3-2.6c-.2-.3-.5-.5-.9-.5h-.6l-1.5 3.1-2.7.5c-.3.1-.6.3-.7.6l-.1.6 2.3 2.5-.6 2.8zm2.9-5.6l1-1.9 1 1.9 2.1.4-1.5 1.6.3 2.2-1.9-1-1.9 1 .3-2.2-1.5-1.6 2.1-.4z"/>
+  <rect width="42" height="58.5" x="5" y="18" fill="#fff" rx="2" ry="2"/>
+  <path fill="#90e8f0" d="M31.7 45.3l-3.6-.6-1.4-2.8c-.2-.4-.6-.6-1-.6H25l-1.7 3.4-3 .5c-.4.1-.7.3-.8.7l-.2.6 2.6 2.8-.5 3.2c0 .4.1.8.4 1l.6.4 3.2-1.7 2.7 1.4c.4.2.8.2 1.1-.1l.5-.4-.5-3.8 2.2-2.3c.3-.3.4-.7.3-1l-.2-.7zm-4.2 3.4l.3 2.3-2-1.1-2 1.1.3-2.4-1.6-1.8 2.3-.4 1-2.1 1 2.1 2.3.4-1.6 1.9z"/>
+  <rect width="63" height="39" x="73" y="21" fill="#fff" rx="2" ry="2"/>
+  <path fill="#ccedf0" d="M195.6 21.3H170c-1.9 0-3.4 1.5-3.4 3.5V75c0 1.9 1.5 3.4 3.4 3.4h25.6c1.9 0 3.4-1.5 3.4-3.4V24.7c.1-1.9-1.5-3.4-3.4-3.4zm-8.7 52.8c0 .9-.7 1.6-1.6 1.6h-5c-.9 0-1.6-.7-1.6-1.5v-.1c0-.9.7-1.6 1.6-1.6h5c.9 0 1.6.7 1.6 1.6zm8.9-5.4c0 .9-.8 1.7-1.7 1.7h-22.3c-.9 0-1.7-.8-1.7-1.7V26.8c0-.9.8-1.7 1.7-1.7H194c.9 0 1.7.8 1.7 1.7l.1 41.9zM5.7 84.8h41c2 0 3.7-1.6 3.7-3.7V17.8c0-2-1.6-3.7-3.7-3.7h-41c-2 0-3.7 1.6-3.7 3.7v63.3c0 2.1 1.6 3.7 3.7 3.7zm14.4-4v-1.2c0-.7.6-1.3 1.3-1.3h9.5c.7 0 1.3.6 1.3 1.3v1.3c0 .7-.6 1.3-1.3 1.3h-9.5c-.7 0-1.3-.6-1.3-1.4zM5.5 20c0-1 .8-1.8 1.8-1.8H45c1 0 1.8.8 1.8 1.8v54.4c0 1-.8 1.8-1.8 1.9H7.3c-1 0-1.8-.8-1.8-1.8V20zm68.7 43h61.4c2 0 3.6-1.6 3.6-3.5V18.8c0-2-1.6-3.6-3.6-3.6H74.2c-2 0-3.6 1.6-3.6 3.5v40.7c0 2.1 1.6 3.7 3.6 3.6zm29.5-45c0-.6.5-1.1 1.2-1.1.6 0 1.2.5 1.2 1.1 0 .6-.5 1.1-1.2 1.1-.6 0-1.1-.5-1.1-1l-.1-.1zM74 23.3c0-1.2.9-2.1 2.1-2.1h57.7c1.2 0 2.1.9 2.1 2.1v34.4c0 1.2-.9 2.1-2.1 2.1H76.1c-1.2 0-2.1-.9-2.1-2.1V23.3zm70.4 62.9c1.2.1 2.2-.8 2.2-2v-1c0-.3-.1-.5-.2-.7l-7.3-16.1c-.4-.8-1.2-1.3-2.1-1.2H72.3c-.9 0-1.7.5-2.1 1.3l-6.9 16.1c-.1.2-.1.5-.1.7v1.1c.1 1.2 1 2.1 2.2 2l79-.2zm-8.5-15c.1.4.3.8.3 1.1.1.3-.4.6-.9.6h-3.7c-.3 0-.6-.1-.6-.3-.1-.4-.2-.8-.3-1.1-.1-.3.3-.6.8-.6h3.7c.3-.1.5.1.7.3zm-5.5-4h3.5c.3 0 .5.1.6.3.1.4.2.7.3 1.1.1.3-.3.6-.8.6h-3.4c-.3 0-.5-.1-.6-.3-.1-.4-.3-.7-.4-1.1-.1-.2.3-.5.8-.6zm-3.2 4l.2 1.2c.1.3-.4.6-.9.6h-3.8c-.3 0-.6-.1-.7-.3l-.3-1.2c-.1-.3.4-.7.9-.7h3.9c.4.1.7.2.7.4zm-5.2-4h3.7c.3 0 .6.1.6.3l.2 1.1c.1.3-.4.6-.9.6H122c-.3 0-.6-.1-.6-.3l-.3-1.1c-.1-.2.3-.5.9-.6zm-4.4 4c.1.5.1.7.2 1.2 0 .3-.4.6-.9.6H113c-.4 0-.7-.2-.7-.4l-.3-1.2c-.1-.3.4-.6.9-.6h4.1c.3.1.6.3.6.4zm-5-4h3.9c.4 0 .7.2.7.4l.2 1.1c0 .3-.4.6-.8.6h-3.8c-.4 0-.7-.2-.7-.4l-.2-1.1c-.2-.2.2-.5.7-.6zm-10 .5c.1-.2.4-.4.8-.4h3.5c.4 0 .7.2.7.4l.2 1.1c0 .3-.3.5-.8.5h-3.9c-.5 0-.8-.2-.8-.5.1-.4.2-.6.3-1.1zm-.2 3.7c.1-.2.4-.4.8-.4h3.7c.4 0 .8.2.8.4l.2 1.2c.1.3-.3.6-.8.6H103c-.5 0-.9-.3-.8-.6 0-.5.1-.7.2-1.2zm-8.6-4.1h3.9c.5 0 .9.3.8.6s-.2.7-.3 1.1c-.1.3-.4.4-.7.4h-3.8c-.5 0-.9-.3-.8-.6s.2-.7.3-1.1c0-.2.3-.3.6-.4zm-1.4 4.1c0-.2.3-.4.7-.4h4.1c.5 0 .9.3.8.6-.1.5-.2.7-.3 1.2-.1.3-.4.4-.7.4h-3.9c-.5 0-.9-.3-.9-.6.1-.4.1-.7.2-1.2zm-13.2.3c-.2.4-.3.8-.4 1.2-.1.2-.3.3-.6.4h-3.7c-.5 0-1-.3-.9-.7.1-.4.2-.8.4-1.1.1-.2.4-.4.7-.4h3.7c.6 0 .9.3.8.6zm.9-2.6c-.1.2-.4.4-.7.3H76c-.5 0-.8-.3-.7-.6.1-.4.3-.7.4-1.1.1-.2.3-.4.6-.3h3.5c.5 0 .9.3.8.6s-.3.7-.5 1.1zm7.8 3.8c-.1.2-.3.3-.7.3h-3.8c-.5 0-1-.3-.9-.7s.2-.7.3-1.2c.1-.2.3-.4.7-.4h3.9c.5 0 1 .3.9.7s-.3.8-.4 1.3zm.9-3.9c-.1.2-.4.4-.7.3h-3.6c-.5 0-.9-.3-.8-.6s.2-.7.3-1.1c.1-.2.4-.4.6-.3h3.7c.5 0 .9.3.8.6s-.2.8-.3 1.1zM91 80c.3-1.7.5-2.6.8-4.4 0-.2.3-.4.7-.4l25.3-.2c.4 0 .7.2.7.4.2 1.5.4 3 .4 4.5 0 .3-.4.6-.9.6H91.8c-.4 0-.8-.2-.8-.5z"/>
+  <linearGradient id="a" x1="-5.898" x2="221.772" y1="-53.462" y2="174.198" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#00c8d7"/>
+    <stop offset="1" stop-color="#0a84ff"/>
+  </linearGradient>
+  <path fill="url(#a)" d="M195.6 19.3h-.2v-.9c0-.5-.4-.9-.9-.9h-4.8c-.5 0-.9.4-.9.9v.9H170c-3 0-5.4 2.4-5.4 5.4V75c0 3 2.4 5.4 5.4 5.4h25.6c3 0 5.5-2.4 5.5-5.4V24.7c0-3-2.5-5.4-5.5-5.4zm3.5 55.7c0 1.9-1.5 3.4-3.4 3.4h-25.6c-1.9 0-3.4-1.5-3.4-3.4V24.7c0-1.9 1.5-3.4 3.4-3.5h25.6c1.9 0 3.4 1.5 3.4 3.5V75zm-12.2-.9c0 .9-.7 1.6-1.6 1.6h-5c-.9 0-1.6-.7-1.6-1.5v-.1c0-.9.7-1.6 1.6-1.6h5c.9 0 1.6.7 1.6 1.6zM40.1 86.8h6.5c3.1 0 5.7-2.5 5.7-5.7V17.8c0-3-2.3-5.4-5.3-5.6H5.7c-3.1 0-5.7 2.5-5.7 5.6v63.3c0 3.1 2.5 5.7 5.7 5.7h34.4zM2 17.8c0-2 1.6-3.7 3.7-3.7h41c2 0 3.7 1.6 3.7 3.7v63.3c0 2-1.6 3.7-3.7 3.7h-41c-2 0-3.7-1.6-3.7-3.7V17.8zm19.4 64.4c-.7 0-1.3-.6-1.3-1.3v-1.3c0-.7.6-1.3 1.3-1.3h9.5c.7 0 1.3.6 1.3 1.3v1.3c0 .7-.6 1.3-1.3 1.3h-9.5zm100.5 6h22.4c2.3.1 4.2-1.7 4.2-4v-1c0-.5-.1-1.1-.3-1.6l-7.3-16.1c-.3-.8-.9-1.4-1.6-1.8 1.2-1.1 1.9-2.6 1.9-4.2V18.8c0-3.1-2.5-5.5-5.6-5.6H74.2c-3.1 0-5.5 2.5-5.6 5.6v40.7c0 1.5.6 3 1.7 4-.9.4-1.6 1.1-2 2l-6.8 16.2c-.2.5-.3 1-.3 1.5v1.1c.1 2.3 1.9 4.1 4.2 4l56.5-.1zm-56.5-2c-1.2.1-2.2-.8-2.2-2v-1c0-.2 0-.5.1-.7l6.9-16.1c.4-.8 1.2-1.3 2.1-1.3H137c.9 0 1.7.5 2.1 1.2l7.3 16.1c.1.2.2.5.2.7v1c-.1 1.2-1 2.1-2.2 2l-79 .1zm5.2-26.7V18.8c0-2 1.6-3.6 3.6-3.6h61.4c2 0 3.6 1.6 3.6 3.5v40.7c0 2-1.6 3.5-3.6 3.5H74.2c-2 .2-3.6-1.4-3.6-3.4zM91 80c.3-1.7.5-2.6.8-4.4 0-.2.3-.4.7-.4l25.3-.2c.4 0 .7.2.7.4.2 1.5.4 3 .4 4.5 0 .3-.4.6-.9.6H91.8c-.4 0-.8-.2-.8-.5zm-2.8-8.3c-.1.5-.2.7-.3 1.2-.1.2-.3.3-.7.3h-3.8c-.5 0-1-.3-.9-.7s.2-.7.3-1.2c.1-.2.3-.4.7-.4h3.9c.5.2 1 .5.8.8zm4 .9c.1-.5.1-.7.2-1.2 0-.2.3-.4.7-.4h4.1c.5 0 .9.3.8.6-.1.5-.2.7-.3 1.2-.1.3-.4.4-.7.4h-4c-.4 0-.9-.3-.8-.6zm24.7-1.7c.4 0 .7.2.7.4.1.5.1.7.2 1.2 0 .3-.4.6-.9.6H113c-.4 0-.7-.2-.7-.4l-.3-1.2c-.1-.3.4-.6.9-.6h4zm-14.8 1.7l.2-1.2c.1-.2.4-.4.8-.4h3.7c.4 0 .8.2.8.4l.2 1.2c.1.3-.3.6-.8.6h-4.1c-.5 0-.9-.3-.8-.6zm20.6-1.7h3.9c.3 0 .6.1.6.3l.2 1.2c.1.3-.4.6-.9.6h-3.8c-.3 0-.6-.1-.7-.3l-.3-1.2c0-.3.4-.6 1-.6zM89.2 68c-.2.4-.2.7-.4 1.1-.1.2-.4.4-.7.3h-3.6c-.5 0-.9-.3-.8-.6s.2-.7.3-1.1c.1-.2.4-.4.6-.3h3.7c.5 0 1 .3.9.6zm4.6-.6h3.9c.5 0 .9.3.8.6s-.2.7-.3 1.1c-.1.3-.4.4-.7.4h-3.8c-.5 0-.9-.3-.8-.6s.2-.7.3-1.1c0-.3.3-.4.6-.4zM112 69l-.2-1.1c-.1-.3.3-.6.8-.6h3.9c.4 0 .7.2.7.4l.2 1.1c0 .3-.4.6-.8.6h-3.8c-.5-.1-.8-.2-.8-.4zm-9.7-.1c.1-.4.2-.7.3-1.1.1-.2.4-.4.8-.4h3.5c.4 0 .7.2.7.4l.2 1.1c0 .3-.3.5-.8.5h-3.9c-.5 0-.8-.3-.8-.5zm19 .1l-.3-1.1c-.1-.3.4-.6.9-.6h3.7c.3 0 .6.1.6.3l.2 1.1c.1.3-.4.6-.9.6H122c-.3 0-.6-.1-.7-.3zm-42.1 2.8c-.2.4-.3.8-.4 1.2-.1.2-.3.3-.6.4h-3.7c-.5 0-1-.3-.9-.7.1-.4.2-.8.4-1.2.1-.2.4-.4.7-.4h3.7c.6 0 .9.3.8.7zm1.4-3.8c-.2.4-.2.7-.4 1.1-.1.2-.4.4-.7.3H76c-.5 0-.8-.3-.7-.6.1-.4.3-.7.4-1.1.1-.2.3-.4.6-.3h3.5c.4 0 .9.3.8.6zm50.9 2.9h3.7c.3 0 .5.1.7.3.1.4.3.8.3 1.1.1.3-.4.6-.9.6h-3.7c-.3 0-.6-.1-.6-.3-.1-.4-.2-.8-.3-1.1-.2-.3.2-.6.8-.6zm-1.6-1.9c-.1-.4-.3-.7-.4-1.1-.1-.3.4-.6.9-.6h3.5c.3 0 .5.1.6.3.1.4.2.7.3 1.1.1.3-.3.6-.8.6h-3.4c-.3 0-.6-.1-.7-.3zm-25-49.7c-.6 0-1.2-.5-1.2-1.2 0-.6.5-1.1 1.2-1.1.6 0 1.2.5 1.2 1.1-.1.7-.6 1.2-1.2 1.2z"/>
+  <path fill="#90e8f0" d="M111.5 37.9l-.2-.6-3.6-.6-1.4-2.8c-.2-.4-.6-.6-1-.6h-.7l-1.7 3.4-3 .5c-.4.1-.7.3-.8.7l-.2.6 2.6 2.8-.4 3.2c0 .4.1.8.4 1l.6.4 3.2-1.7 2.7 1.4c.4.2.8.2 1.1-.1l.5-.4-.5-3.8 2.2-2.3c.2-.3.3-.8.2-1.1zm-4.5 2.7l.3 2.4-2-1.1-2 1.1.3-2.4-1.7-1.8 2.3-.4 1-2.1 1 2.1 2.3.4-1.5 1.8z"/>
+  <linearGradient id="b" x1="3.801" x2="219.4" y1="-49.841" y2="165.759" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#00c8d7"/>
+    <stop offset="1" stop-color="#0a84ff"/>
+  </linearGradient>
+  <path fill="url(#b)" d="M176.8 34.5c0 3.2 2.6 5.7 5.7 5.7s5.7-2.6 5.7-5.7-2.6-5.7-5.7-5.7-5.7 2.5-5.7 5.7zm5.8-4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm-.9 4.3V32c0-.3.2-.5.5-.5s.5.2.5.5v2.3h2.3c.3 0 .5.2.5.5s-.2.5-.5.5h-2.8c-.2 0-.5-.2-.5-.5zm2.2 24.8c-.5-.1-.8-.5-.8-1 0-.4.4-.7.8-.8h1c-.6-.6-1.5-1-2.4-1-1.5 0-2.8 1-3.2 2.5-.1.4-.4.7-.9.7h-.2c-.5-.1-.8-.6-.6-1 .7-2.7 3.4-4.3 6.1-3.6.8.2 1.5.6 2.1 1.1V56c.1-.5.5-.8 1-.8.4 0 .7.4.8.8v2.8c0 .5-.4.9-.9.9l-2.8-.1zm-1.3 5.5c-1.2 0-2.4-.5-3.3-1.2v.4c-.1.5-.5.8-1 .8-.4 0-.7-.4-.8-.8v-2.7c0-.5.4-.9.9-.9h2.8c.5.1.8.5.8 1 0 .4-.4.7-.8.8h-1c.6.6 1.5 1 2.4 1 1.5 0 2.8-1 3.2-2.5.2-.5.7-.7 1.1-.5.4.1.6.5.6 1-.6 2.1-2.6 3.7-4.9 3.6zm-156.8-28c3.5 0 6.3-2.8 6.3-6.3s-2.8-6.3-6.3-6.3-6.3 2.8-6.3 6.3c-.1 3.5 2.7 6.4 6.3 6.3-.1.1-.1.1 0 0zm0-10.6c2.4 0 4.3 1.9 4.3 4.3s-1.9 4.3-4.3 4.3-4.3-1.9-4.3-4.3 1.9-4.2 4.3-4.3zm-.9 4.7v-3c0-.3.2-.5.5-.5s.5.2.5.5v2.5h2.5c.3 0 .5.2.5.5s-.2.5-.5.5h-3c-.3 0-.5-.2-.5-.4v-.1zm6.4 28.3v3c0 .6-.4 1-1 1h-3c-.6 0-1-.4-1-1s.4-1 1-1h1c-.7-.7-1.6-1-2.5-1-1.6 0-3.1 1.1-3.5 2.7-.1.5-.5.8-1 .8h-.2c-.5-.1-.9-.7-.7-1.2.7-3 3.7-4.8 6.6-4.1.9.2 1.7.6 2.4 1.2v-.3c0-.6.4-1 1-1s1 .4.9.9zm-.2 5.9c-.7 3-3.7 4.8-6.6 4.1-.9-.2-1.7-.6-2.4-1.2v.3c0 .6-.4 1-1 1s-1-.4-1-1v-3c0-.6.4-1 1-1h3c.6 0 1 .4 1 1s-.4 1-1 1h-1c.7.7 1.6 1 2.5 1 1.6.1 3.1-1 3.6-2.6.2-.5.7-.8 1.2-.7.6.2.9.7.7 1.1zm57.3-19.6c3.5 0 6.3-2.8 6.3-6.3s-2.8-6.3-6.3-6.3-6.3 2.8-6.3 6.3c0 3.4 2.8 6.3 6.3 6.3zm0-10.7c2.4 0 4.3 1.9 4.3 4.3s-1.9 4.3-4.3 4.3-4.3-1.9-4.3-4.3 1.9-4.3 4.3-4.3zm-.9 4.7v-3c0-.3.2-.5.5-.5s.5.2.5.5v2.5h2.6c.3 0 .5.2.5.5s-.2.5-.5.5H88c-.3 0-.5-.2-.5-.5zm29 4.2v-3c0-.6.4-1 1-1h3c.6 0 1 .4 1 1s-.4 1-1 1h-1c.7.7 1.6 1 2.5 1 1.6 0 3.1-1.1 3.4-2.7.2-.5.7-.8 1.2-.7.5.1.8.7.7 1.2-.7 3-3.7 4.8-6.6 4.1-.9-.2-1.7-.6-2.4-1.2v.3c0 .6-.4 1-1 1s-.9-.4-.8-1zm.2-5.9c.7-3 3.7-4.8 6.6-4.1.9.2 1.7.6 2.4 1.2v-.3c0-.6.4-1 1-1s1 .4 1 1v3c0 .6-.4 1-1 1h-3c-.6 0-1-.4-1-1s.4-1 1-1h1c-.7-.7-1.6-1-2.5-1-1.6 0-3.1 1.1-3.4 2.7-.1.5-.5.8-1 .8h-.2c-.6-.2-1-.7-.9-1.3z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/graphic-mail.svg
@@ -0,0 +1,112 @@
+<!-- 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/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -129,17 +129,23 @@
   skin/classic/browser/preferences/in-content/sync.svg         (../shared/incontentprefs/sync.svg)
   skin/classic/browser/preferences/in-content/syncDisconnect.css (../shared/incontentprefs/syncDisconnect.css)
 * skin/classic/browser/preferences/in-content/containers.css   (../shared/incontentprefs/containers.css)
 * skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)
   skin/classic/browser/fxa/default-avatar.svg                  (../shared/fxa/default-avatar.svg)
   skin/classic/browser/fxa/fxa-spinner.svg                     (../shared/fxa/fxa-spinner.svg)
   skin/classic/browser/fxa/sync-illustration.svg               (../shared/fxa/sync-illustration.svg)
   skin/classic/browser/fxa/sync-illustration-issue.svg         (../shared/fxa/sync-illustration-issue.svg)
-
+  
+  skin/classic/browser/fxa/avatar.svg                          (../shared/fxa/avatar.svg)
+  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/choose-what-to-sync-devices.svg     (../shared/fxa/choose-what-to-sync-devices.svg)
 
   skin/classic/browser/accessibility.svg              (../shared/icons/accessibility.svg)
   skin/classic/browser/accessibility-active.svg       (../shared/icons/accessibility-active.svg)
   skin/classic/browser/add.svg                        (../shared/icons/add.svg)
   skin/classic/browser/arrow-left.svg                 (../shared/icons/arrow-left.svg)
   skin/classic/browser/back.svg                       (../shared/icons/back.svg)
   skin/classic/browser/back-12.svg                    (../shared/icons/back-12.svg)
   skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -76,29 +76,33 @@
 #appMenu-library-pocket-button {
   list-style-image: url("chrome://browser/skin/pocket.svg");
 }
 
 #appMenu-library-history-button {
   list-style-image: url(chrome://browser/skin/history.svg);
 }
 
+#PanelUI-fxa-menu-remotetabs-button,
 #appMenuRecentlyClosedTabs,
 #appMenu-library-remotetabs-button {
   list-style-image: url("chrome://browser/skin/tab.svg");
 }
 
+#PanelUI-fxa-menu-syncnow-button,
 #PanelUI-remotetabs-syncnow {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
+#PanelUI-fxa-menu-view-managedevices
 #PanelUI-remotetabs-view-managedevices {
   list-style-image: url("chrome://browser/skin/device-phone.svg");
 }
 
+#PanelUI-fxa-menu-view-sidebar,
 #appMenuViewHistorySidebar,
 #PanelUI-remotetabs-view-sidebar,
 #panelMenu_viewBookmarksSidebar {
   list-style-image: url("chrome://browser/skin/sidebars-right.svg");
 }
 
 #appMenuViewHistorySidebar:-moz-locale-dir(ltr):not([positionend]),
 #appMenuViewHistorySidebar:-moz-locale-dir(rtl)[positionend],
--- a/services/fxaccounts/FxAccountsConfig.jsm
+++ b/services/fxaccounts/FxAccountsConfig.jsm
@@ -48,17 +48,19 @@ var FxAccountsConfig = {
 
   async promiseEmailURI(email, entrypoint) {
     return this._buildURL("", {
       extraParams: {entrypoint, email},
     });
   },
 
   async promiseEmailFirstURI(entrypoint) {
-    return this._buildURL("", {entrypoint});
+    return this._buildURL("", {
+      extraParams: {entrypoint, action: "email"},
+    });
   },
 
   async promiseForceSigninURI(entrypoint) {
     return this._buildURL("force_auth", {
       extraParams: {entrypoint},
       addAccountIdentifiers: true,
     });
   },