Bug 1139698 - Add Firefox Account avatar in Hamburger Menu. r=markh

--HG--
rename : browser/themes/shared/incontentprefs/default-profile-image.svg => browser/themes/shared/fxa/default-profile-image.svg

browser/base/content/browser-fxaccounts.js

@@ -36,12 +36,28 @@ let gFxAccounts = {
       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() {
+    return document.getElementById("PanelUI-footer-fxa");
+  },
+
+  get panelUIStatus() {
+    return document.getElementById("PanelUI-fxa-status");
+  },
+
+  get panelUIAvatar() {
+    return document.getElementById("PanelUI-fxa-avatar");
+  },
+
+  get panelUILabel() {
+    return document.getElementById("PanelUI-fxa-label");
+  },
+
+  get panelUIIcon() {
+    return document.getElementById("PanelUI-fxa-icon");
   },
 
   get strings() {
@@ -135,6 +151,9 @@ let gFxAccounts = {
           this.fxaMigrator.recordTelemetry(this.fxaMigrator.TELEMETRY_DECLINED);
         }
         break;
+      case this.FxAccountsCommon.ONPROFILE_IMAGE_CHANGE_NOTIFICATION:
+        this.updateUI();
+        break;
       default:
         this.updateUI();
         break;
@@ -211,59 +230,96 @@ let gFxAccounts = {
       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 doUpdate = (profile, 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.panelUILabel.removeAttribute("tooltiptext");
+      this.panelUIAvatar.removeAttribute("tooltiptext");
+      this.panelUIFooter.removeAttribute("fxastatus");
+      this.panelUIFooter.removeAttribute("fxaprofileimage");
+      this.panelUIAvatar.style.removeProperty("background-image");
 
       if (!this._inCustomizationMode) {
         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);
+          this.panelUIAvatar.setAttribute("tooltiptext", tooltipDescription);
+        } else {
+          let label = profile && profile.displayName ? profile.displayName : userData.email;
+          this.panelUIFooter.setAttribute("fxastatus", "signedin");
+          this.panelUILabel.setAttribute("label", label);
+          this.panelUIStatus.setAttribute("tooltiptext", signedInTooltiptext);
+          this.panelUIAvatar.setAttribute("tooltiptext", signedInTooltiptext);
+        }
+        if (profileInfoEnabled) {
+          this.panelUIFooter.setAttribute("fxaprofileimage", "enabled");
+          if (profile && 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.backgroundImage = "url('" + profile.avatar + "')";
+            };
+            img.src = profile.avatar;
+          }
         }
       }
     }
-    fxAccounts.getSignedInUser().then(userData => {
-      doUpdate(userData);
-    }).then(null, error => {
+    let userData, profile;
+    // Calling getSignedInUserProfile() without a user logged in causes log
+    // noise that looks like an actual error...
+    fxAccounts.getSignedInUser().then(data => {
+      userData = data;
+      if (!userData) {
+        return null;
+      }
+      return fxAccounts.getSignedInUserProfile();
+    }).then(data => {
+      profile = data;
+      // profile may be null here, but that's expected.
+      doUpdate(profile, userData);
+    }).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);
+      doUpdate(profile, userData);
     });
   },
 
@@ -274,7 +330,7 @@ let gFxAccounts = {
       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";
@@ -283,9 +339,8 @@ let gFxAccounts = {
                                                   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* () {
@@ -352,10 +407,9 @@ let gFxAccounts = {
     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;

browser/base/content/browser-syncui.js

@@ -166,8 +166,15 @@ let gSyncUI = {
       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();
   },
@@ -184,9 +191,9 @@ let gSyncUI = {
       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");
       }
     }
   },
@@ -210,9 +217,9 @@ let gSyncUI = {
     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");
     }
   },
 
@@ -418,8 +425,7 @@ let gSyncUI = {
       return;
 
     let syncButton = document.getElementById("sync-button");
-    if (!syncButton)
-      return;
+    let statusButton = document.getElementById("PanelUI-fxa-icon");
 
     let lastSync;
     try {
@@ -435,7 +441,12 @@ let gSyncUI = {
     }
     catch (e) { };
     if (!lastSync || this._needsSetup()) {
-      syncButton.removeAttribute("tooltiptext");
+      if (syncButton) {
+        syncButton.removeAttribute("tooltiptext");
+      }
+      if (statusButton) {
+        statusButton.removeAttribute("tooltiptext");
+      }
       return;
     }
 
@@ -444,7 +455,12 @@ let gSyncUI = {
     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) {

browser/base/content/test/general/browser_fxa_migrate.js

@@ -9,24 +9,24 @@ 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;
@@ -36,23 +36,22 @@ add_task(function* test() {
             "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");
   }
@@ -66,12 +65,11 @@ function promiseButtonMutation() {
       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 });
   });
 }

browser/base/content/test/general/browser_syncui.js

@@ -255,13 +255,13 @@ add_task(function* testRLLoginErrorRemains() {
 
 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"));
   }
 }
 

browser/components/customizableui/content/panelUI.inc.xul

@@ -20,12 +20,21 @@
                        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;"

browser/components/uitour/UITour.jsm

@@ -96,12 +96,12 @@ this.UITour = {
   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",     {

browser/locales/en-US/chrome/browser/browser.dtd

@@ -110,6 +110,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!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.">

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -92,7 +92,8 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
 .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;
 }
 

browser/themes/linux/jar.mn

@@ -220,7 +220,7 @@ browser.jar:
   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)

browser/themes/osx/jar.mn

@@ -296,7 +296,7 @@ browser.jar:
   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)

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -404,8 +404,10 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 
 #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"]) {
@@ -503,29 +505,49 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   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;
@@ -540,15 +562,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -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. */
 }
 
@@ -558,7 +581,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-update-status > .toolbarbutton-text,
-#PanelUI-fxa-status > .toolbarbutton-text,
+#PanelUI-fxa-label > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   margin: 0;
   padding: 0 6px;
@@ -566,25 +589,37 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #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;
@@ -595,17 +630,18 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   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);
 }
 
@@ -626,13 +662,46 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   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 {
@@ -655,6 +724,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #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 {
@@ -663,6 +733,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #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 {
@@ -672,10 +743,26 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #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;
 }
@@ -1408,16 +1495,17 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
     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);
   }
@@ -1438,7 +1526,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
     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 {
@@ -1446,7 +1535,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   }
 
   #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 {

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -221,7 +221,7 @@ description > html|a {
   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;

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -197,16 +197,16 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
     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;

browser/themes/windows/jar.mn

@@ -292,7 +292,7 @@ browser.jar:
         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)