Bug 1524665 - Add FxA avatar toolbar menu, r=gijs,eoger
authorVijay Budhram <vbudhram@mozilla.com>
Sat, 23 Feb 2019 17:56:19 +0000
changeset 506569 a3d28922f30e7f2b4b906a3951c18f8d512f4626
parent 506567 b9a53cec8555d13272107a0e17ff52d3a093131e
child 506570 465af3e561275ab93db9b63cefe1a91ccb2250af
push id138
push usermtabara@mozilla.com
push dateWed, 20 Mar 2019 18:12:49 +0000
reviewersgijs, eoger
bugs1524665
milestone68.0a1
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,
     });
   },