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 251260 67a4133bc5dbe5ce8a5b59524bafee03f4bbaf7d
parent 251259 bcc3546c258375cd2592a020454ddbd52f39e277
child 251261 bd08740485d0fc20513083e39f7ae2b0531649f5
push id61806
push userkwierso@gmail.com
push dateFri, 03 Jul 2015 00:29:54 +0000
treeherdermozilla-inbound@0bad42d89c72 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmarkh
bugs1139698
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 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)