Bug 1139698 - Add Firefox Account avatar in Hamburger Menu. r=markh
authorEdouard Oger <edouard.oger@gmail.com>
Mon, 29 Jun 2015 20:06:00 -0400
changeset 251120 67a4133bc5dbe5ce8a5b59524bafee03f4bbaf7d
parent 251119 bcc3546c258375cd2592a020454ddbd52f39e277
child 251121 bd08740485d0fc20513083e39f7ae2b0531649f5
push id13830
push userryanvm@gmail.com
push dateThu, 02 Jul 2015 17:58:38 +0000
treeherderfx-team@663108a1d580 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmarkh
bugs1139698
milestone42.0a1
Bug 1139698 - Add Firefox Account avatar in Hamburger Menu. r=markh
browser/base/content/browser-fxaccounts.js
browser/base/content/browser-syncui.js
browser/base/content/test/general/browser_fxa_migrate.js
browser/base/content/test/general/browser_syncui.js
browser/components/customizableui/content/panelUI.inc.xul
browser/components/uitour/UITour.jsm
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/linux/customizableui/panelUIOverlay.css
browser/themes/linux/jar.mn
browser/themes/osx/jar.mn
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/shared/fxa/default-profile-image.svg
browser/themes/shared/incontentprefs/default-profile-image.svg
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/customizableui/panelUIOverlay.css
browser/themes/windows/jar.mn
--- a/browser/base/content/browser-fxaccounts.js
+++ b/browser/base/content/browser-fxaccounts.js
@@ -31,22 +31,43 @@ let gFxAccounts = {
       "weave:service:sync:start",
       "weave:service:login:error",
       "weave:service:setup-complete",
       "weave:ui:login:error",
       "fxa-migration:state-changed",
       this.FxAccountsCommon.ONVERIFIED_NOTIFICATION,
       this.FxAccountsCommon.ONLOGOUT_NOTIFICATION,
       "weave:notification:removed",
+      this.FxAccountsCommon.ON_PROFILE_CHANGE_NOTIFICATION,
     ];
   },
 
-  get button() {
-    delete this.button;
-    return this.button = document.getElementById("PanelUI-fxa-status");
+  get panelUIFooter() {
+    delete this.panelUIFooter;
+    return this.panelUIFooter = document.getElementById("PanelUI-footer-fxa");
+  },
+
+  get panelUIStatus() {
+    delete this.panelUIStatus;
+    return this.panelUIStatus = document.getElementById("PanelUI-fxa-status");
+  },
+
+  get panelUIAvatar() {
+    delete this.panelUIAvatar;
+    return this.panelUIAvatar = document.getElementById("PanelUI-fxa-avatar");
+  },
+
+  get panelUILabel() {
+    delete this.panelUILabel;
+    return this.panelUILabel = document.getElementById("PanelUI-fxa-label");
+  },
+
+  get panelUIIcon() {
+    delete this.panelUIIcon;
+    return this.panelUIIcon = document.getElementById("PanelUI-fxa-icon");
   },
 
   get strings() {
     delete this.strings;
     return this.strings = Services.strings.createBundle(
       "chrome://browser/locale/accounts.properties"
     );
   },
@@ -130,16 +151,19 @@ let gFxAccounts = {
         // closed due to button press" vs "was closed due to click on [x]"
         let notif = subject.wrappedJSObject.object;
         if (notif.title == this.SYNC_MIGRATION_NOTIFICATION_TITLE &&
             !this._expectingNotifyClose) {
           // it's an [x] on our notification, so record telemetry.
           this.fxaMigrator.recordTelemetry(this.fxaMigrator.TELEMETRY_DECLINED);
         }
         break;
+      case this.FxAccountsCommon.ONPROFILE_IMAGE_CHANGE_NOTIFICATION:
+        this.updateUI();
+        break;
       default:
         this.updateUI();
         break;
     }
   },
 
   onSyncStart: function () {
     if (!this.isActiveWindow) {
@@ -206,91 +230,128 @@ let gFxAccounts = {
   },
 
   updateAppMenuItem: function () {
     if (this._migrationInfo) {
       this.updateAppMenuItemForMigration();
       return;
     }
 
+    let profileInfoEnabled = false;
+    try {
+      profileInfoEnabled = Services.prefs.getBoolPref("identity.fxaccounts.profile_image.enabled");
+    } catch (e) { }
+
     // Bail out if FxA is disabled.
     if (!this.weave.fxAccountsEnabled) {
       // When migration transitions from needs-verification to the null state,
       // fxAccountsEnabled is false because migration has not yet finished.  In
       // that case, hide the button.  We'll get another notification with a null
       // state once migration is complete.
-      this.button.hidden = true;
-      this.button.removeAttribute("fxastatus");
+      this.panelUIFooter.removeAttribute("fxastatus");
       return;
     }
 
-    // FxA is enabled, show the widget.
-    this.button.hidden = false;
-
     // Make sure the button is disabled in customization mode.
     if (this._inCustomizationMode) {
-      this.button.setAttribute("disabled", "true");
+      this.panelUILabel.setAttribute("disabled", "true");
+      this.panelUIAvatar.setAttribute("disabled", "true");
+      this.panelUIIcon.setAttribute("disabled", "true");
     } else {
-      this.button.removeAttribute("disabled");
+      this.panelUILabel.removeAttribute("disabled");
+      this.panelUIAvatar.removeAttribute("disabled");
+      this.panelUIIcon.removeAttribute("disabled");
     }
 
-    let defaultLabel = this.button.getAttribute("defaultlabel");
-    let errorLabel = this.button.getAttribute("errorlabel");
+    let defaultLabel = this.panelUIStatus.getAttribute("defaultlabel");
+    let errorLabel = this.panelUIStatus.getAttribute("errorlabel");
+    let signedInTooltiptext = this.panelUIStatus.getAttribute("signedinTooltiptext");
 
-    // If the user is signed into their Firefox account and we are not
-    // currently in customization mode, show their email address.
-    let doUpdate = userData => {
+    let updateWithUserData = (userData) => {
       // Reset the button to its original state.
-      this.button.setAttribute("label", defaultLabel);
-      this.button.removeAttribute("tooltiptext");
-      this.button.removeAttribute("fxastatus");
+      this.panelUILabel.setAttribute("label", defaultLabel);
+      this.panelUIStatus.removeAttribute("tooltiptext");
+      this.panelUIFooter.removeAttribute("fxastatus");
+      this.panelUIFooter.removeAttribute("fxaprofileimage");
+      this.panelUIAvatar.style.removeProperty("list-style-image");
 
-      if (!this._inCustomizationMode) {
+      if (!this._inCustomizationMode && userData) {
+        // At this point we consider the user as logged-in (but still can be in an error state)
         if (this.loginFailed) {
           let tooltipDescription = this.strings.formatStringFromName("reconnectDescription", [userData.email], 1);
-          this.button.setAttribute("fxastatus", "error");
-          this.button.setAttribute("label", errorLabel);
-          this.button.setAttribute("tooltiptext", tooltipDescription);
-        } else if (userData) {
-          this.button.setAttribute("fxastatus", "signedin");
-          this.button.setAttribute("label", userData.email);
-          this.button.setAttribute("tooltiptext", userData.email);
+          this.panelUIFooter.setAttribute("fxastatus", "error");
+          this.panelUILabel.setAttribute("label", errorLabel);
+          this.panelUIStatus.setAttribute("tooltiptext", tooltipDescription);
+        } else {
+          this.panelUIFooter.setAttribute("fxastatus", "signedin");
+          this.panelUILabel.setAttribute("label", userData.email);
+          this.panelUIStatus.setAttribute("tooltiptext", signedInTooltiptext);
+        }
+        if (profileInfoEnabled) {
+          this.panelUIFooter.setAttribute("fxaprofileimage", "enabled");
         }
       }
     }
+
+    let updateWithProfile = (profile) => {
+      if (!this._inCustomizationMode && profileInfoEnabled) {
+        if (profile.displayName) {
+          this.panelUILabel.setAttribute("label", profile.displayName);
+        }
+        if (profile.avatar) {
+          let img = new Image();
+          // Make sure the image is available before attempting to display it
+          img.onload = () => {
+            this.panelUIFooter.setAttribute("fxaprofileimage", "set");
+            this.panelUIAvatar.style.listStyleImage = "url('" + profile.avatar + "')";
+          };
+          img.src = profile.avatar;
+        }
+      }
+    }
+
+    // Calling getSignedInUserProfile() without a user logged in causes log
+    // noise that looks like an actual error...
     fxAccounts.getSignedInUser().then(userData => {
-      doUpdate(userData);
-    }).then(null, error => {
+      // userData may be null here when the user is not signed-in, but that's expected
+      updateWithUserData(userData);
+      return fxAccounts.getSignedInUserProfile();
+    }).then(profile => {
+      if (!profile) {
+        return;
+      }
+      updateWithProfile(profile);
+    }).catch(error => {
       // This is most likely in tests, were we quickly log users in and out.
       // The most likely scenario is a user logged out, so reflect that.
       // Bug 995134 calls for better errors so we could retry if we were
       // sure this was the failure reason.
-      doUpdate(null);
+      this.FxAccountsCommon.log.error("Error updating FxA profile", error);
+      updateWithUserData(null);
     });
   },
 
   updateAppMenuItemForMigration: Task.async(function* () {
     let status = null;
     let label = null;
     switch (this._migrationInfo.state) {
       case this.fxaMigrator.STATE_USER_FXA:
         status = "migrate-signup";
         label = this.strings.formatStringFromName("needUserShort",
-          [this.button.getAttribute("fxabrandname")], 1);
+          [this.panelUILabel.getAttribute("fxabrandname")], 1);
         break;
       case this.fxaMigrator.STATE_USER_FXA_VERIFIED:
         status = "migrate-verify";
         label = this.strings.formatStringFromName("needVerifiedUserShort",
                                                   [this._migrationInfo.email],
                                                   1);
         break;
     }
-    this.button.label = label;
-    this.button.hidden = false;
-    this.button.setAttribute("fxastatus", status);
+    this.panelUILabel.label = label;
+    this.panelUIFooter.setAttribute("fxastatus", status);
   }),
 
   updateMigrationNotification: Task.async(function* () {
     if (!this._migrationInfo) {
       this._expectingNotifyClose = true;
       Weave.Notifications.removeAll(this.SYNC_MIGRATION_NOTIFICATION_TITLE);
       // because this is called even when there is no such notification, we
       // set _expectingNotifyClose back to false as we may yet create a new
@@ -347,20 +408,19 @@ let gFxAccounts = {
         );
         break;
       }
     }
     note.title = this.SYNC_MIGRATION_NOTIFICATION_TITLE;
     Weave.Notifications.replaceTitle(note);
   }),
 
-  onMenuPanelCommand: function (event) {
-    let button = event.originalTarget;
+  onMenuPanelCommand: function () {
 
-    switch (button.getAttribute("fxastatus")) {
+    switch (this.panelUIFooter.getAttribute("fxastatus")) {
     case "signedin":
       this.openPreferences();
       break;
     case "error":
       this.openSignInAgainPage("menupanel");
       break;
     case "migrate-signup":
     case "migrate-verify":
--- a/browser/base/content/browser-syncui.js
+++ b/browser/base/content/browser-syncui.js
@@ -161,37 +161,44 @@ let gSyncUI = {
     } else {
       document.getElementById("sync-syncnow-state").hidden = false;
     }
 
     if (!gBrowser)
       return;
 
     let syncButton = document.getElementById("sync-button");
-    if (needsSetup && syncButton)
-      syncButton.removeAttribute("tooltiptext");
+    let statusButton = document.getElementById("PanelUI-fxa-icon");
+    if (needsSetup) {
+      if (syncButton) {
+        syncButton.removeAttribute("tooltiptext");
+      }
+      if (statusButton) {
+        statusButton.removeAttribute("tooltiptext");
+      }
+    }
 
     this._updateLastSyncTime();
   },
 
 
   // Functions called by observers
   onActivityStart() {
     if (!gBrowser)
       return;
 
     this.log.debug("onActivityStart with numActive", this._numActiveSyncTasks);
     if (++this._numActiveSyncTasks == 1) {
       let button = document.getElementById("sync-button");
       if (button) {
         button.setAttribute("status", "active");
       }
-      button = document.getElementById("PanelUI-fxa-status");
-      if (button) {
-        button.setAttribute("syncstatus", "active");
+      let container = document.getElementById("PanelUI-footer-fxa");
+      if (container) {
+        container.setAttribute("syncstatus", "active");
       }
     }
   },
 
   onActivityStop() {
     if (!gBrowser)
       return;
     this.log.debug("onActivityStop with numActive", this._numActiveSyncTasks);
@@ -205,19 +212,19 @@ let gSyncUI = {
       }
       return; // active tasks are still ongoing...
     }
 
     let syncButton = document.getElementById("sync-button");
     if (syncButton) {
       syncButton.removeAttribute("status");
     }
-    let panelHorizontalButton = document.getElementById("PanelUI-fxa-status");
-    if (panelHorizontalButton) {
-      panelHorizontalButton.removeAttribute("syncstatus");
+    let fxaContainer = document.getElementById("PanelUI-footer-fxa");
+    if (fxaContainer) {
+      fxaContainer.removeAttribute("syncstatus");
     }
   },
 
   onLoginFinish: function SUI_onLoginFinish() {
     // Clear out any login failure notifications
     let title = this._stringBundle.GetStringFromName("error.login.title");
     this.clearError(title);
   },
@@ -413,43 +420,52 @@ let gSyncUI = {
   },
 
   // Helpers
   _updateLastSyncTime: function SUI__updateLastSyncTime() {
     if (!gBrowser)
       return;
 
     let syncButton = document.getElementById("sync-button");
-    if (!syncButton)
-      return;
+    let statusButton = document.getElementById("PanelUI-fxa-icon");
 
     let lastSync;
     try {
       lastSync = new Date(Services.prefs.getCharPref("services.sync.lastSync"));
     }
     catch (e) { };
     // and reading-list time - we want whatever one is the most recent.
     try {
       let lastRLSync = new Date(Services.prefs.getCharPref("readinglist.scheduler.lastSync"));
       if (!lastSync || lastRLSync > lastSync) {
         lastSync = lastRLSync;
       }
     }
     catch (e) { };
     if (!lastSync || this._needsSetup()) {
-      syncButton.removeAttribute("tooltiptext");
+      if (syncButton) {
+        syncButton.removeAttribute("tooltiptext");
+      }
+      if (statusButton) {
+        statusButton.removeAttribute("tooltiptext");
+      }
       return;
     }
 
     // Show the day-of-week and time (HH:MM) of last sync
     let lastSyncDateString = lastSync.toLocaleFormat("%a %H:%M");
     let lastSyncLabel =
       this._stringBundle.formatStringFromName("lastSync2.label", [lastSyncDateString], 1);
 
-    syncButton.setAttribute("tooltiptext", lastSyncLabel);
+    if (syncButton) {
+      syncButton.setAttribute("tooltiptext", lastSyncLabel);
+    }
+    if (statusButton) {
+      statusButton.setAttribute("tooltiptext", lastSyncLabel);
+    }
   },
 
   clearError: function SUI_clearError(errorString) {
     Weave.Notifications.removeAll(errorString);
     this.updateUI();
   },
 
   onSyncFinish: function SUI_onSyncFinish() {
--- a/browser/base/content/test/general/browser_fxa_migrate.js
+++ b/browser/base/content/test/general/browser_fxa_migrate.js
@@ -4,74 +4,72 @@
 const STATE_CHANGED_TOPIC = "fxa-migration:state-changed";
 const NOTIFICATION_TITLE = "fxa-migration";
 
 let imports = {};
 Cu.import("resource://services-sync/FxaMigrator.jsm", imports);
 
 add_task(function* test() {
   // Fake the state where we need an FxA user.
-  let buttonPromise = promiseButtonMutation();
+  let fxaPanelUIPromise = promiseButtonMutation();
   Services.obs.notifyObservers(null, STATE_CHANGED_TOPIC,
                                imports.fxaMigrator.STATE_USER_FXA);
-  let buttonState = yield buttonPromise;
-  assertButtonState(buttonState, "migrate-signup", true);
+  let buttonState = yield fxaPanelUIPromise;
+  assertButtonState(buttonState, "migrate-signup");
   Assert.ok(Weave.Notifications.notifications.some(n => {
     return n.title == NOTIFICATION_TITLE;
   }), "Needs-user notification should be present");
 
   // Fake the state where we need a verified FxA user.
-  buttonPromise = promiseButtonMutation();
+  fxaPanelUIPromise = promiseButtonMutation();
   let email = Cc["@mozilla.org/supports-string;1"].
               createInstance(Ci.nsISupportsString);
   email.data = "foo@example.com";
   Services.obs.notifyObservers(email, STATE_CHANGED_TOPIC,
                                imports.fxaMigrator.STATE_USER_FXA_VERIFIED);
-  buttonState = yield buttonPromise;
-  assertButtonState(buttonState, "migrate-verify", true,
+  buttonState = yield fxaPanelUIPromise;
+  assertButtonState(buttonState, "migrate-verify",
                     "foo@example.com not verified");
   let note = Weave.Notifications.notifications.find(n => {
     return n.title == NOTIFICATION_TITLE;
   });
   Assert.ok(!!note, "Needs-verification notification should be present");
   Assert.ok(note.description.includes(email.data),
             "Needs-verification notification should include email");
 
   // Fake the state where no migration is needed.
-  buttonPromise = promiseButtonMutation();
+  fxaPanelUIPromise = promiseButtonMutation();
   Services.obs.notifyObservers(null, STATE_CHANGED_TOPIC, null);
-  buttonState = yield buttonPromise;
+  buttonState = yield fxaPanelUIPromise;
   // In this case, the front end has called fxAccounts.getSignedInUser() to
   // update the button label and status.  But since there isn't actually a user,
   // the button is left with no fxastatus.
-  assertButtonState(buttonState, "", true);
+  assertButtonState(buttonState, "");
   Assert.ok(!Weave.Notifications.notifications.some(n => {
     return n.title == NOTIFICATION_TITLE;
   }), "Migration notifications should no longer be present");
 });
 
-function assertButtonState(buttonState, expectedStatus, expectedVisible,
+function assertButtonState(buttonState, expectedStatus,
                            expectedLabel=undefined) {
   Assert.equal(buttonState.fxastatus, expectedStatus,
                "Button fxstatus attribute");
-  Assert.equal(!buttonState.hidden, expectedVisible, "Button visibility");
   if (expectedLabel !== undefined) {
     Assert.equal(buttonState.label, expectedLabel, "Button label");
   }
 }
 
 function promiseButtonMutation() {
   return new Promise((resolve, reject) => {
     let obs = new MutationObserver(mutations => {
       info("Observed mutations for attributes: " +
            mutations.map(m => m.attributeName));
       if (mutations.some(m => m.attributeName == "fxastatus")) {
         obs.disconnect();
         resolve({
-          fxastatus: gFxAccounts.button.getAttribute("fxastatus"),
-          hidden: gFxAccounts.button.hidden,
-          label: gFxAccounts.button.label,
+          fxastatus: gFxAccounts.panelUIFooter.getAttribute("fxastatus"),
+          label: gFxAccounts.panelUILabel.label,
         });
       }
     });
-    obs.observe(gFxAccounts.button, { attributes: true });
+    obs.observe(gFxAccounts.panelUIFooter, { attributes: true });
   });
 }
--- a/browser/base/content/test/general/browser_syncui.js
+++ b/browser/base/content/test/general/browser_syncui.js
@@ -250,23 +250,23 @@ add_task(function* testRLLoginErrorRemai
   Services.obs.notifyObservers(null, "readinglist:sync:start", null);
   Services.obs.notifyObservers(null, "readinglist:sync:finish", null);
   yield promiseNotificationRemoved;
   Assert.equal(Notifications.notifications.length, 0, "no notifications left");
 });
 
 function checkButtonsStatus(shouldBeActive) {
   let button = document.getElementById("sync-button");
-  let panelbutton = document.getElementById("PanelUI-fxa-status");
+  let fxaContainer = document.getElementById("PanelUI-footer-fxa");
   if (shouldBeActive) {
     Assert.equal(button.getAttribute("status"), "active");
-    Assert.equal(panelbutton.getAttribute("syncstatus"), "active");
+    Assert.equal(fxaContainer.getAttribute("syncstatus"), "active");
   } else {
     Assert.ok(!button.hasAttribute("status"));
-    Assert.ok(!panelbutton.hasAttribute("syncstatus"));
+    Assert.ok(!fxaContainer.hasAttribute("syncstatus"));
   }
 }
 
 function testButtonActions(startNotification, endNotification) {
   checkButtonsStatus(false);
   // pretend a sync is starting.
   Services.obs.notifyObservers(null, startNotification, null);
   checkButtonsStatus(true);
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -15,22 +15,31 @@
         <vbox id="PanelUI-contents" class="panelUI-grid"/>
       </vbox>
 
       <footer id="PanelUI-footer">
         <toolbarbutton id="PanelUI-update-status"
                        oncommand="gMenuButtonUpdateBadge.onMenuPanelCommand(event);"
                        wrap="true"
                        hidden="true"/>
-        <toolbarbutton id="PanelUI-fxa-status"
-                       defaultlabel="&fxaSignIn.label;"
-                       errorlabel="&fxaSignInError.label;"
-                       fxabrandname="&syncBrand.fxAccount.label;"
-                       oncommand="gFxAccounts.onMenuPanelCommand(event);"
-                       hidden="true"/>
+        <hbox id="PanelUI-footer-fxa">
+          <hbox id="PanelUI-fxa-status"
+                defaultlabel="&fxaSignIn.label;"
+                signedinTooltiptext="&fxaSignedIn.tooltip;"
+                errorlabel="&fxaSignInError.label;"
+                onclick="gFxAccounts.onMenuPanelCommand();">
+            <image id="PanelUI-fxa-avatar"/>
+            <toolbarbutton id="PanelUI-fxa-label"
+                           fxabrandname="&syncBrand.fxAccount.label;"/>
+          </hbox>
+          <toolbarseparator/>
+          <toolbarbutton id="PanelUI-fxa-icon"
+                         oncommand="gSyncUI.doSync();"
+                         closemenu="none"/>
+        </hbox>
 
         <hbox id="PanelUI-footer-inner">
           <toolbarbutton id="PanelUI-customize" label="&appMenuCustomize.label;"
                          exitLabel="&appMenuCustomizeExit.label;"
                          tooltiptext="&appMenuCustomize.tooltip;"
                          exitTooltiptext="&appMenuCustomizeExit.tooltip;"
                          closemenu="none"
                          oncommand="gCustomizeMode.toggle();"/>
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -91,22 +91,22 @@ this.UITour = {
   availableTargetsCache: new WeakMap(),
 
   _annotationPanelMutationObservers: new WeakMap(),
 
   highlightEffects: ["random", "wobble", "zoom", "color"],
   targets: new Map([
     ["accountStatus", {
       query: (aDocument) => {
-        let statusButton = aDocument.getElementById("PanelUI-fxa-status");
+        let statusButton = aDocument.getElementById("PanelUI-fxa-label");
         return aDocument.getAnonymousElementByAttribute(statusButton,
                                                         "class",
                                                         "toolbarbutton-icon");
       },
-      widgetName: "PanelUI-fxa-status",
+      widgetName: "PanelUI-fxa-label",
     }],
     ["addons",      {query: "#add-ons-button"}],
     ["appMenu",     {
       addTargetListener: (aDocument, aCallback) => {
         let panelPopup = aDocument.getElementById("PanelUI-popup");
         panelPopup.addEventListener("popupshown", aCallback);
       },
       query: "#PanelUI-button",
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -105,16 +105,17 @@ These should match what Safari and other
 <!ENTITY exitFullScreenCmd.accesskey "F">
 <!ENTITY fullScreenCmd.label "Full Screen">
 <!ENTITY fullScreenCmd.accesskey "F">
 <!ENTITY fullScreenCmd.macCommandKey "f">
 <!ENTITY showAllTabsCmd.label "Show All Tabs">
 <!ENTITY showAllTabsCmd.accesskey "A">
 
 <!ENTITY fxaSignIn.label "Sign in to &syncBrand.shortName.label;">
+<!ENTITY fxaSignedIn.tooltip "Open &syncBrand.shortName.label; preferences">
 <!ENTITY fxaSignInError.label "Reconnect to &syncBrand.shortName.label;">
 <!ENTITY syncStartPanel2.heading "&syncBrand.shortName.label; enabled">
 <!ENTITY syncStartPanel2.subTitle "&brandShortName; will begin syncing momentarily.">
 <!ENTITY syncErrorPanel.heading "Cannot connect to &syncBrand.shortName.label;">
 <!ENTITY syncErrorPanel.subTitle "Please sign in to resume syncing.">
 <!ENTITY syncErrorPanel.signInButton.label "Sign In">
 <!ENTITY syncErrorPanel.signInButton.accesskey "S">
 
--- a/browser/themes/linux/customizableui/panelUIOverlay.css
+++ b/browser/themes/linux/customizableui/panelUIOverlay.css
@@ -87,15 +87,16 @@ menu.subviewbutton > .menu-right:-moz-lo
   /* These need !important to override menu.css */
   margin-top: 1px !important;
   margin-bottom: 2px !important;
 }
 
 .PanelUI-subView toolbarseparator,
 .PanelUI-subView menuseparator,
 .cui-widget-panelview menuseparator,
-#PanelUI-footer-inner > toolbarseparator {
+#PanelUI-footer-inner > toolbarseparator,
+#PanelUI-footer-fxa > toolbarseparator {
   -moz-appearance: none !important;
 }
 
 .subviewradio > .radio-label-box {
   -moz-appearance: none;
 }
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -218,17 +218,17 @@ browser.jar:
   skin/classic/browser/preferences/Options-sync.png   (preferences/Options-sync.png)
 #endif
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/in-content/favicon.ico     (../shared/incontentprefs/favicon.ico)
   skin/classic/browser/preferences/in-content/icons.svg       (../shared/incontentprefs/icons.svg)
   skin/classic/browser/preferences/in-content/search.css      (../shared/incontentprefs/search.css)
-  skin/classic/browser/preferences/in-content/default-profile-image.svg   (../shared/incontentprefs/default-profile-image.svg)
+  skin/classic/browser/fxa/default-profile-image.svg   (../shared/fxa/default-profile-image.svg)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
   skin/classic/browser/preferences/search.css         (preferences/search.css)
   skin/classic/browser/social/services-16.png         (social/services-16.png)
   skin/classic/browser/social/services-64.png         (social/services-64.png)
   skin/classic/browser/social/share-button.png        (social/share-button.png)
   skin/classic/browser/social/share-button-active.png (social/share-button-active.png)
   skin/classic/browser/social/chat-icons.svg          (../shared/social/chat-icons.svg)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -294,17 +294,17 @@ browser.jar:
 #endif
   skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
 * skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/in-content/favicon.ico     (../shared/incontentprefs/favicon.ico)
   skin/classic/browser/preferences/in-content/icons.svg       (../shared/incontentprefs/icons.svg)
   skin/classic/browser/preferences/in-content/search.css      (../shared/incontentprefs/search.css)
-  skin/classic/browser/preferences/in-content/default-profile-image.svg   (../shared/incontentprefs/default-profile-image.svg)
+  skin/classic/browser/fxa/default-profile-image.svg   (../shared/fxa/default-profile-image.svg)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css     (preferences/aboutPermissions.css)
   skin/classic/browser/preferences/search.css               (preferences/search.css)
   skin/classic/browser/preferences/checkbox.png             (preferences/checkbox.png)
   skin/classic/browser/preferences/checkbox@2x.png          (preferences/checkbox@2x.png)
   skin/classic/browser/yosemite/preferences/checkbox.png    (preferences/checkbox-yosemite.png)
   skin/classic/browser/yosemite/preferences/checkbox@2x.png (preferences/checkbox-yosemite@2x.png)
   skin/classic/browser/social/services-16.png               (social/services-16.png)
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -399,18 +399,20 @@ toolbaritem[cui-areatype="menu-panel"][s
 }
 
 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
   background-color: hsla(210,4%,10%,.1);
 }
 
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
   opacity: .5;
 }
 
 /*
  * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
@@ -498,119 +500,153 @@ toolbarpaletteitem[place="palette"] > to
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   background-color: hsla(210,4%,10%,.07);
   padding: 0;
   margin: 0;
 }
 
-#PanelUI-footer-inner {
+#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
+  display: none;
+}
+
+#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
+#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
+#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+  display: none;
+}
+
+#PanelUI-fxa-status {
+  display: flex;
+  flex: 1 1 0%;
+}
+
+#PanelUI-footer-inner,
+#PanelUI-footer-fxa {
   display: flex;
   border-top: 1px solid hsla(210,4%,10%,.14);
 }
 
-#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
+#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
   position: relative;
 }
 
-#PanelUI-footer-inner > toolbarseparator {
+#PanelUI-footer-inner > toolbarseparator,
+#PanelUI-footer-fxa > toolbarseparator {
   border: 0;
   border-left: 1px solid hsla(210,4%,10%,.14);
   margin: 7px 0 7px;
   -moz-appearance: none;
 }
 
-#PanelUI-footer-inner:hover > toolbarseparator {
+#PanelUI-footer-inner:hover > toolbarseparator,
+#PanelUI-footer-fxa:hover > toolbarseparator {
   margin: 0;
 }
 
 #PanelUI-update-status,
 #PanelUI-help,
-#PanelUI-fxa-status,
+#PanelUI-fxa-label,
+#PanelUI-fxa-icon,
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
   padding: 11px 0;
   box-sizing: border-box;
   min-height: 40px;
   -moz-appearance: none;
   box-shadow: none;
   border: none;
   border-radius: 0;
   transition: background-color;
   -moz-box-orient: horizontal;
 }
 
-#PanelUI-update-status,
-#PanelUI-fxa-status {
+#PanelUI-update-status {
   border-top: 1px solid hsla(210,4%,10%,.14);
+}
+
+#PanelUI-update-status {
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
 }
 
-#PanelUI-update-status > .toolbarbutton-text,
-#PanelUI-fxa-status > .toolbarbutton-text {
+#PanelUI-update-status > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
 #PanelUI-help,
 #PanelUI-quit {
   min-width: 46px;
 }
 
 #PanelUI-update-status > .toolbarbutton-text,
-#PanelUI-fxa-status > .toolbarbutton-text,
+#PanelUI-fxa-label > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   margin: 0;
   padding: 0 6px;
   text-align: start;
 }
 
 #PanelUI-help > .toolbarbutton-text,
-#PanelUI-quit > .toolbarbutton-text {
+#PanelUI-quit > .toolbarbutton-text,
+#PanelUI-fxa-avatar > .toolbarbutton-text {
   display: none;
 }
 
 #PanelUI-update-status > .toolbarbutton-icon,
-#PanelUI-fxa-status > .toolbarbutton-icon,
+#PanelUI-fxa-label > .toolbarbutton-icon,
+#PanelUI-fxa-icon > .toolbarbutton-icon,
 #PanelUI-customize > .toolbarbutton-icon,
 #PanelUI-help > .toolbarbutton-icon,
 #PanelUI-quit > .toolbarbutton-icon {
   -moz-margin-end: 0;
 }
 
-#PanelUI-fxa-status,
+#PanelUI-fxa-icon {
+  -moz-padding-start: 15px;
+  -moz-padding-end: 15px;
+}
+
+#PanelUI-fxa-label,
 #PanelUI-customize {
   flex: 1;
   -moz-padding-start: 15px;
   -moz-border-start-style: none;
 }
 
+#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
+#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
+  -moz-padding-start: 0px;
+}
+
 #PanelUI-update-status {
   width: calc(@menuPanelWidth@ + 30px);
   -moz-padding-start: 15px;
   -moz-border-start-style: none;
 }
 
 #PanelUI-update-status {
   list-style-image: url(chrome://branding/content/icon16.png);
 }
 
-#PanelUI-fxa-status {
+#PanelUI-fxa-label,
+#PanelUI-fxa-icon {
   list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
 }
 
-#PanelUI-fxa-status[syncstatus="active"] {
+#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
   list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
 }
 
-#PanelUI-fxa-status[fxastatus="migrate-signup"],
-#PanelUI-fxa-status[fxastatus="migrate-verify"] {
-  list-style-image: url(chrome://browser/skin/warning16.png);
+#PanelUI-fxa-icon[fxastatus="migrate-signup"],
+#PanelUI-fxa-icon[fxastatus="migrate-verify"] {
+  list-style-image: url(chrome://browser/skni/warning16.png);
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 #PanelUI-customize {
   list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
 }
 
 #customization-panelHolder #PanelUI-customize {
@@ -621,23 +657,56 @@ toolbarpaletteitem[place="palette"] > to
   list-style-image: url(chrome://browser/skin/menuPanel-help.png);
 }
 
 #PanelUI-quit {
   -moz-border-end-style: none;
   list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
 }
 
-#PanelUI-fxa-status,
+#PanelUI-fxa-label,
+#PanelUI-fxa-icon,
 #PanelUI-customize,
 #PanelUI-help,
 #PanelUI-quit {
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
+#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
+  display: none;
+}
+
+#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+  display: none;
+}
+
+#PanelUI-fxa-avatar[disabled],
+#PanelUI-fxa-icon[disabled] {
+  display: none;
+}
+
+#PanelUI-fxa-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  align-self: center;
+  margin: 0px 7px;
+  padding: 0px;
+  border: 0px none;
+  -moz-margin-end: 0;
+}
+
+#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+  list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
+}
+
 #PanelUI-customize:hover,
 #PanelUI-help:not([disabled]):hover,
 #PanelUI-quit:not([disabled]):hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 #PanelUI-customize:hover:active,
 #PanelUI-help:not([disabled]):hover:active,
@@ -650,37 +719,55 @@ toolbarpaletteitem[place="palette"] > to
 }
 
 #PanelUI-help[disabled],
 #PanelUI-quit[disabled] {
   opacity: 0.4;
 }
 
 #PanelUI-fxa-status:not([disabled]):hover,
+#PanelUI-fxa-icon:not([disabled]):hover,
 #PanelUI-help:not([disabled]):hover,
 #PanelUI-customize:hover,
 #PanelUI-quit:not([disabled]):hover {
   outline: 1px solid hsla(210,4%,10%,.07);
   background-color: hsla(210,4%,10%,.07);
 }
 
 #PanelUI-fxa-status:not([disabled]):hover:active,
+#PanelUI-fxa-icon:not([disabled]):hover:active,
 #PanelUI-help:not([disabled]):hover:active,
 #PanelUI-customize:hover:active,
 #PanelUI-quit:not([disabled]):hover:active {
   outline: 1px solid hsla(210,4%,10%,.12);
   background-color: hsla(210,4%,10%,.12);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
 #PanelUI-fxa-status:not([disabled]):hover,
-#PanelUI-fxa-status:not([disabled]):hover:active {
+#PanelUI-fxa-status:not([disabled]):hover:active,
+#PanelUI-fxa-icon:not([disabled]):hover,
+#PanelUI-fxa-icon:not([disabled]):hover:active {
   outline: none;
 }
 
+#PanelUI-footer-fxa[fxastatus="error"] {
+  background-color: rgb(255, 236, 158);
+  border-top: 1px solid rgb(254, 212, 21);
+}
+
+#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
+  background-color: #F9E79A;
+}
+
+#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
+  background-color: #ECDB92;
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
 #PanelUI-update-status {
   color: black;
 }
 
 #PanelUI-update-status[update-status="succeeded"] {
   background-color: hsla(96, 65%, 75%, 0.5);
 }
 
@@ -1403,26 +1490,27 @@ menuitem[checked="true"].subviewbutton >
     background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl@2x.png),
                       linear-gradient(rgba(255,255,255,0.3), transparent);
   }
 
   #PanelUI-update-status {
     list-style-image: url(chrome://branding/content/icon32.png);
   }
 
-  #PanelUI-fxa-status {
+  #PanelUI-fxa-label,
+  #PanelUI-fxa-icon {
     list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);
   }
 
-  #PanelUI-fxa-status[syncstatus="active"] {
+  #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
     list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png);
   }
 
-  #PanelUI-fxa-status[fxastatus="migrate-signup"],
-  #PanelUI-fxa-status[fxastatus="migrate-verify"] {
+  #PanelUI-fxa-icon[fxastatus="migrate-signup"],
+  #PanelUI-fxa-icon[fxastatus="migrate-verify"] {
     list-style-image: url(chrome://browser/skin/warning16@2x.png);
     -moz-image-region: rect(0, 64px, 32px, 32px);
   }
 
   #PanelUI-customize {
     list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png);
   }
 
@@ -1433,25 +1521,27 @@ menuitem[checked="true"].subviewbutton >
   #PanelUI-help {
     list-style-image: url(chrome://browser/skin/menuPanel-help@2x.png);
   }
 
   #PanelUI-quit {
     list-style-image: url(chrome://browser/skin/menuPanel-exit@2x.png);
   }
 
-  #PanelUI-fxa-status,
+  #PanelUI-fxa-label,
+  #PanelUI-fxa-icon,
   #PanelUI-customize,
   #PanelUI-help,
   #PanelUI-quit {
     -moz-image-region: rect(0, 32px, 32px, 0);
   }
 
   #PanelUI-update-status > .toolbarbutton-icon,
-  #PanelUI-fxa-status > .toolbarbutton-icon,
+  #PanelUI-fxa-label > .toolbarbutton-icon,
+  #PanelUI-fxa-icon > .toolbarbutton-icon,
   #PanelUI-customize > .toolbarbutton-icon,
   #PanelUI-help > .toolbarbutton-icon,
   #PanelUI-quit > .toolbarbutton-icon {
     width: 16px;
   }
 
   #PanelUI-customize:hover,
   #PanelUI-help:not([disabled]):hover,
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/fxa/default-profile-image.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-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 1000 1000">
+  <path fill="#c3cfd8" d="M500-0.3c276.1,0,500,223.9,500,500s-223.9,500-500,500S0,775.8,0,499.7C0,223.5,223.9-0.3,500-0.3z"/>
+  <circle fill="#fff" cx="500" cy="317" r="139.1"/>
+  <path fill="#fff" d="M751.8,643.6L751.8,643.6c0.1-2.3,0.2-4.6,0.2-6.9c0-68-55.3-127-136.2-156.3L505.9,590.4h0 c-0.4,29.8-1.4,58.8-2.8,86.6c-1,0.1-2,0.3-3.1,0.3s-2-0.2-3.1-0.3c-1.4-27.9-2.4-56.9-2.8-86.7h0L384.3,480.4 C303.3,509.7,248,568.7,248,636.7c0,2.3,0.1,4.6,0.2,6.9l7.4,49.7c57.1,72,145.4,118.2,244.4,118.2c99,0,187.3-46.2,244.4-118.2 L751.8,643.6z"/>
+</svg>
deleted file mode 100644
--- a/browser/themes/shared/incontentprefs/default-profile-image.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-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 1000 1000">
-  <path fill="#c3cfd8" d="M500-0.3c276.1,0,500,223.9,500,500s-223.9,500-500,500S0,775.8,0,499.7C0,223.5,223.9-0.3,500-0.3z"/>
-  <circle fill="#fff" cx="500" cy="317" r="139.1"/>
-  <path fill="#fff" d="M751.8,643.6L751.8,643.6c0.1-2.3,0.2-4.6,0.2-6.9c0-68-55.3-127-136.2-156.3L505.9,590.4h0 c-0.4,29.8-1.4,58.8-2.8,86.6c-1,0.1-2,0.3-3.1,0.3s-2-0.2-3.1-0.3c-1.4-27.9-2.4-56.9-2.8-86.7h0L384.3,480.4 C303.3,509.7,248,568.7,248,636.7c0,2.3,0.1,4.6,0.2,6.9l7.4,49.7c57.1,72,145.4,118.2,244.4,118.2c99,0,187.3-46.2,244.4-118.2 L751.8,643.6z"/>
-</svg>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -216,17 +216,17 @@ description > html|a {
 }
 
 #fxaProfileImage {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border-width: 5px;
   border-color: red;
-  background-image: url(chrome://browser/skin/preferences/in-content/default-profile-image.svg);
+  background-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
   background-size: contain;
   cursor: pointer;
   -moz-margin-end: 15px;
 }
 
 #fxaProfileImage:hover {
   border-color: blue;
 }
--- a/browser/themes/windows/customizableui/panelUIOverlay.css
+++ b/browser/themes/windows/customizableui/panelUIOverlay.css
@@ -192,26 +192,26 @@ menu.subviewbutton > .menu-right:-moz-lo
   toolbarbutton.subviewbutton[disabled],
   menu.subviewbutton[disabled],
   menuitem.subviewbutton[disabled],
   .widget-overflow-list .toolbarbutton-1[disabled],
   .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] {
     text-shadow: none;
   }
 
-  #PanelUI-fxa-status,
+  #PanelUI-fxa-label,
   #PanelUI-help,
   #PanelUI-customize {
     border: 1px solid transparent;
   }
 
-  #PanelUI-fxa-status:not([disabled]):hover,
+  #PanelUI-fxa-label:not([disabled]):hover,
   #PanelUI-help:not([disabled]):hover,
   #PanelUI-customize:hover,
-  #PanelUI-fxa-status:not([disabled]):hover:active,
+  #PanelUI-fxa-label:not([disabled]):hover:active,
   #PanelUI-help:not([disabled]):hover:active,
   #PanelUI-customize:hover:active {
     border-color: ThreeDLightShadow;
     box-shadow: none;
   }
 
   #BMB_bookmarksPopup .menu-text,
   #BMB_bookmarksPopup menupopup {
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -293,17 +293,17 @@ browser.jar:
         skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
         skin/classic/browser/preferences/saveFile-XP.png             (preferences/saveFile-XP.png)
 *       skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
 *       skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
 *       skin/classic/browser/preferences/in-content/dialog.css       (preferences/in-content/dialog.css)
         skin/classic/browser/preferences/in-content/favicon.ico      (../shared/incontentprefs/favicon.ico)
         skin/classic/browser/preferences/in-content/icons.svg        (../shared/incontentprefs/icons.svg)
         skin/classic/browser/preferences/in-content/search.css       (../shared/incontentprefs/search.css)
-        skin/classic/browser/preferences/in-content/default-profile-image.svg   (../shared/incontentprefs/default-profile-image.svg)
+        skin/classic/browser/fxa/default-profile-image.svg   (../shared/fxa/default-profile-image.svg)
         skin/classic/browser/preferences/applications.css            (preferences/applications.css)
         skin/classic/browser/preferences/aboutPermissions.css        (preferences/aboutPermissions.css)
         skin/classic/browser/preferences/search.css                  (preferences/search.css)
         skin/classic/browser/preferences/checkbox.png                (preferences/checkbox.png)
         skin/classic/browser/preferences/checkbox-aero.png           (preferences/checkbox-aero.png)
         skin/classic/browser/preferences/checkbox-classic.png        (preferences/checkbox-classic.png)
         skin/classic/browser/preferences/checkbox-xp.png             (preferences/checkbox-xp.png)
         skin/classic/browser/social/services-16.png                  (social/services-16.png)