--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -346,20 +346,16 @@
             <menuitem id="appmenu_preferences"
 #ifdef XP_UNIX
                       label="&preferencesCmdUnix.label;"
 #else
                       label="&preferencesCmd2.label;"
 #endif
                       oncommand="openPreferences();"/>
             <menuseparator/>
-            <menuitem id="appmenu_socialToggle"
-                      type="checkbox"
-                      autocheck="false"
-                      command="Social:Toggle"/>
             <menuseparator id="appmenu_toggleToolbarsSeparator"/>
             <menuitem id="appmenu_toggleTabsOnTop"
                       label="&viewTabsOnTop.label;"
                       type="checkbox"
                       command="cmd_ToggleTabsOnTop"/>
             <menuitem id="appmenu_toolbarLayout"
                       label="&appMenuToolbarLayout.label;"
                       command="cmd_CustomizeToolbars"/>

--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -500,37 +500,47 @@
                         accesskey="&downloads.accesskey;"
                         key="key_openDownloads"
                         command="Tools:Downloads"/>
               <menuitem id="menu_openAddons"
                         label="&addons.label;"
                         accesskey="&addons.accesskey;"
                         key="key_openAddons"
                         command="Tools:Addons"/>
-              <menuitem id="menu_socialToggle"
-                        type="checkbox"
-                        autocheck="false"
-                        command="Social:Toggle"/>
-              <menu id="menu_socialAmbientMenu"
-                    class="show-only-for-keyboard">
-                <menupopup id="menu_socialAmbientMenuPopup">
+              <menu id="menu_socialAmbientMenu">
+                <menupopup id="menu_social-statusarea-popup">
+                  <menuitem class="social-statusarea-user menuitem-iconic" pack="start" align="center"
+                            oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
+                    <image class="social-statusarea-user-portrait"
+                           observes="socialBroadcaster_userPortrait"/>
+                    <vbox>
+                      <label class="social-statusarea-loggedInStatus"
+                             observes="socialBroadcaster_loggedInStatus"/>
+                    </vbox>
+                  </menuitem>
+#ifndef XP_WIN
+                  <menuseparator class="social-statusarea-separator"/>
+#endif
                   <menuseparator id="socialAmbientMenuSeparator"
                                  hidden="true"/>
-                  <menuitem id="social-toggle-sidebar-keyboardmenuitem"
+                  <menuitem class="social-toggle-sidebar-menuitem"
                             type="checkbox"
                             autocheck="false"
                             command="Social:ToggleSidebar"
                             label="&social.toggleSidebar.label;"
                             accesskey="&social.toggleSidebar.accesskey;"/>
-                  <menuitem id="social-toggle-notifications-keyboardmenuitem"
+                  <menuitem class="social-toggle-notifications-menuitem"
                             type="checkbox"
                             autocheck="false"
                             command="Social:ToggleNotifications"
                             label="&social.toggleNotifications.label;"
                             accesskey="&social.toggleNotifications.accesskey;"/>
+                  <menuseparator class="social-statusarea-separator"/>
+                  <menuitem class="social-toggle-menuitem" command="Social:Toggle"/>
+                  <menuitem class="social-remove-menuitem" command="Social:Remove"/>
                 </menupopup>
               </menu>
 #ifdef MOZ_SERVICES_SYNC
               <!-- only one of sync-setup or sync-menu will be showing at once -->
               <menuitem id="sync-setup"
                         label="&syncSetup.label;"
                         accesskey="&syncSetup.accesskey;"
                         observes="sync-setup-state"

--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -112,16 +112,17 @@
     <command id="History:UndoCloseTab" oncommand="undoCloseTab();"/>
     <command id="History:UndoCloseWindow" oncommand="undoCloseWindow();"/>
     <command id="Browser:ToggleAddonBar" oncommand="toggleAddonBar();"/>
     <command id="Social:SharePage" oncommand="SocialShareButton.sharePage();"/>
     <command id="Social:UnsharePage" oncommand="SocialShareButton.unsharePage();"/>
     <command id="Social:ToggleSidebar" oncommand="Social.toggleSidebar();"/>
     <command id="Social:ToggleNotifications" oncommand="Social.toggleNotifications();"/>
     <command id="Social:Toggle" oncommand="Social.toggle();" hidden="true"/>
+    <command id="Social:Remove" oncommand="SocialUI.disableWithConfirmation();"/>
   </commandset>
 
   <commandset id="placesCommands">
     <command id="Browser:ShowAllBookmarks"
              oncommand="PlacesCommandHook.showPlacesOrganizer('AllBookmarks');"/>
     <command id="Browser:ShowAllHistory"
              oncommand="PlacesCommandHook.showPlacesOrganizer('History');"/>
   </commandset>
@@ -244,16 +245,21 @@
                  command="View:PageSource"/>
     <broadcaster id="devtoolsMenuBroadcaster_ErrorConsole"
                  label="&errorConsoleCmd.label;"
                  key="key_errorConsole"
                  command="Tools:ErrorConsole"/>
     <broadcaster id="devtoolsMenuBroadcaster_GetMoreTools"
                  label="&getMoreDevtoolsCmd.label;"
                  oncommand="openUILinkIn('https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/', 'tab');"/>
+
+    <!-- SocialAPI broadcasters -->
+    <broadcaster id="socialBroadcaster_userPortrait"/>
+    <broadcaster id="socialBroadcaster_loggedInStatus"
+                 notLoggedInLabel="&social.notLoggedIn.label;"/>
   </broadcasterset>
 
   <keyset id="mainKeyset">
     <key id="key_newNavigator"
          key="&newNavigatorCmd.key;"
          command="cmd_newNavigator"
          modifiers="accel"/>
     <key id="key_newNavigatorTab" key="&tabCmd.commandkey;" modifiers="accel" command="cmd_newNavigatorTab"/>

--- a/browser/base/content/browser-social.js
+++ b/browser/base/content/browser-social.js
@@ -100,43 +100,38 @@ let SocialUI = {
   // Called once Social.jsm's provider has been set
   _providerReady: function SocialUI_providerReady() {
     // If we couldn't find a provider, nothing to do here.
     if (!Social.provider)
       return;
 
     this.updateToggleCommand();
 
-    let toggleCommand = this.toggleCommand;
-    let brandShortName = document.getElementById("bundle_brand").getString("brandShortName");
-    let label = gNavigatorBundle.getFormattedString("social.toggle.label",
-                                                    [Social.provider.name,
-                                                     brandShortName]);
-    let accesskey = gNavigatorBundle.getString("social.toggle.accesskey");
-    toggleCommand.setAttribute("label", label);
-    toggleCommand.setAttribute("accesskey", accesskey);
-
-    let kbMenuitem = document.getElementById("menu_socialAmbientMenu");
-    kbMenuitem.hidden = !Social.enabled;
-    kbMenuitem.setAttribute("label", label);
-    kbMenuitem.setAttribute("accesskey", accesskey);
-
-    // The View->Sidebar menu.
-    document.getElementById("menu_socialSidebar").setAttribute("label", Social.provider.name);
+    // The View->Sidebar and Menubar->Tools menu.
+    for (let id of ["menu_socialSidebar", "menu_socialAmbientMenu"])
+      document.getElementById(id).setAttribute("label", Social.provider.name);
 
     SocialToolbar.init();
     SocialShareButton.init();
     SocialSidebar.init();
     SocialMenu.populate();
   },
 
   updateToggleCommand: function SocialUI_updateToggleCommand() {
+    if (!Social.provider)
+      return;
+
     let toggleCommand = this.toggleCommand;
     // We only need to update the command itself - all our menu items use it.
-    toggleCommand.setAttribute("checked", Services.prefs.getBoolPref("social.enabled"));
+    let enabled = Services.prefs.getBoolPref("social.enabled");
+    let label = gNavigatorBundle.getFormattedString(enabled ? "social.turnOff.label" : "social.turnOn.label",
+                                                    [Social.provider.name]);
+    let accesskey = gNavigatorBundle.getString(enabled ? "social.turnOff.accesskey" : "social.turnOn.accesskey");
+    toggleCommand.setAttribute("label", label);
+    toggleCommand.setAttribute("accesskey", accesskey);
     toggleCommand.setAttribute("hidden", Social.active ? "false" : "true");
   },
 
   // This handles "ActivateSocialFeature" events fired against content documents
   // in this window.
   _activationEventHandler: function SocialUI_activationHandler(e) {
     // Nothing to do if Social is already enabled, or we don't have a provider
     // to enable yet.
@@ -596,17 +591,17 @@ let SocialShareButton = {
     }
     shareButton.src = imageURL;
   }
 };
 
 var SocialMenu = {
   populate: function SocialMenu_populate() {
     // This menu is only accessible through keyboard navigation.
-    let submenu = document.getElementById("menu_socialAmbientMenuPopup");
+    let submenu = document.getElementById("menu_social-statusarea-popup");
     let ambientMenuItems = submenu.getElementsByClassName("ambient-menuitem");
     while (ambientMenuItems.length)
       submenu.removeChild(ambientMenuItems.item(0));
 
     let separator = document.getElementById("socialAmbientMenuSeparator");
     separator.hidden = true;
     let provider = Social.provider;
     if (Social.active && provider) {
@@ -628,64 +623,67 @@ var SocialMenu = {
   }
 };
 
 var SocialToolbar = {
   // Called once, after window load, when the Social.provider object is initialized
   init: function SocialToolbar_init() {
     this.button.setAttribute("image", Social.provider.iconURL);
 
-    let removeItem = document.getElementById("social-remove-menuitem");
     let brandShortName = document.getElementById("bundle_brand").getString("brandShortName");
     let label = gNavigatorBundle.getFormattedString("social.remove.label",
                                                     [brandShortName]);
     let accesskey = gNavigatorBundle.getString("social.remove.accesskey");
-    removeItem.setAttribute("label", label);
-    removeItem.setAttribute("accesskey", accesskey);
+
+    let removeCommand = document.getElementById("Social:Remove");
+    removeCommand.setAttribute("label", label);
+    removeCommand.setAttribute("accesskey", accesskey);
 
     this.updateButton();
     this.updateProfile();
     this._dynamicResizer = new DynamicResizeWatcher();
   },
 
   get button() {
     return document.getElementById("social-provider-button");
   },
 
   updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() {
     let tbi = document.getElementById("social-toolbar-item");
-    tbi.hidden = !Social.uiVisible;
-    if (!SocialUI.haveLoggedInUser()) {
+    tbi.hidden = !Social.active;
+    let socialEnabled = Social.enabled;
+    for (let className of ["social-statusarea-separator", "social-statusarea-user"]) {
+      for (let element of document.getElementsByClassName(className))
+        element.hidden = !socialEnabled;
+    }
+    let toggleNotificationsCommand = document.getElementById("Social:ToggleNotifications");
+    toggleNotificationsCommand.setAttribute("hidden", !socialEnabled);
+
+    if (!SocialUI.haveLoggedInUser() || !socialEnabled) {
       let parent = document.getElementById("social-notification-panel");
       while (parent.hasChildNodes())
         parent.removeChild(parent.firstChild);
 
       while (tbi.lastChild != tbi.firstChild)
         tbi.removeChild(tbi.lastChild);
     }
   },
 
   updateProfile: function SocialToolbar_updateProfile() {
     // Profile may not have been initialized yet, since it depends on a worker
     // response. In that case we'll be called again when it's available, via
     // social:profile-changed
     let profile = Social.provider.profile || {};
     let userPortrait = profile.portrait || "chrome://global/skin/icons/information-32.png";
-    document.getElementById("social-statusarea-user-portrait").setAttribute("src", userPortrait);
+    document.getElementById("socialBroadcaster_userPortrait").setAttribute("src", userPortrait);
 
-    let notLoggedInLabel = document.getElementById("social-statusarea-notloggedin");
-    let userNameBtn = document.getElementById("social-statusarea-username");
-    if (profile.userName) {
-      notLoggedInLabel.hidden = true;
-      userNameBtn.hidden = false;
-      userNameBtn.value = profile.userName;
-    } else {
-      notLoggedInLabel.hidden = false;
-      userNameBtn.hidden = true;
-    }
+    let loggedInStatusBroadcaster = document.getElementById("socialBroadcaster_loggedInStatus");
+    let notLoggedInString = loggedInStatusBroadcaster.getAttribute("notLoggedInLabel");
+    let loggedInStatusValue = profile.userName ? profile.userName : notLoggedInString;
+    loggedInStatusBroadcaster.setAttribute("value", loggedInStatusValue);
   },
 
   updateButton: function SocialToolbar_updateButton() {
     this.updateButtonHiddenState();
     let provider = Social.provider;
     let icons = provider.ambientNotificationIcons;
     let iconNames = Object.keys(icons);
     let iconBox = document.getElementById("social-toolbar-item");

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -662,43 +662,43 @@
                    class="chromeclass-toolbar-additional"
                    removable="false"
                    title="&socialToolbar.title;"
                    hidden="true">
         <toolbarbutton id="social-provider-button"
                        class="toolbarbutton-1"
                        type="menu">
           <menupopup id="social-statusarea-popup">
-            <menuitem id="social-statusarea-user" pack="start" align="center" class="menuitem-iconic"
-                  onclick="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
-              <image id="social-statusarea-user-portrait"/>
+            <menuitem class="social-statusarea-user menuitem-iconic" pack="start" align="center"
+                      oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();">
+              <image class="social-statusarea-user-portrait"
+                     observes="socialBroadcaster_userPortrait"/>
               <vbox>
-                <label id="social-statusarea-notloggedin"
-                       value="&social.notLoggedIn.label;"/>
-                <label id="social-statusarea-username"/>
+                <label class="social-statusarea-loggedInStatus"
+                       observes="socialBroadcaster_loggedInStatus"/>
               </vbox>
             </menuitem>
 #ifndef XP_WIN
-            <menuseparator/>
+            <menuseparator class="social-statusarea-separator"/>
 #endif
-            <menuitem id="social-toggle-sidebar-menuitem"
+            <menuitem class="social-toggle-sidebar-menuitem"
                       type="checkbox"
                       autocheck="false"
                       command="Social:ToggleSidebar"
                       label="&social.toggleSidebar.label;"
                       accesskey="&social.toggleSidebar.accesskey;"/>
-            <menuitem id="social-toggle-notifications-menuitem"
+            <menuitem class="social-toggle-notifications-menuitem"
                       type="checkbox"
                       autocheck="false"
                       command="Social:ToggleNotifications"
                       label="&social.toggleNotifications.label;"
                       accesskey="&social.toggleNotifications.accesskey;"/>
-            <menuseparator/>
-            <menuitem id="social-remove-menuitem"
-                      oncommand="SocialUI.disableWithConfirmation();"/>
+            <menuseparator class="social-statusarea-separator"/>
+            <menuitem class="social-toggle-menuitem" command="Social:Toggle"/>
+            <menuitem class="social-remove-menuitem" command="Social:Remove"/>
           </menupopup>
         </toolbarbutton>
       </toolbaritem>
 
       <toolbaritem id="bookmarks-menu-button-container"
                    class="chromeclass-toolbar-additional"
                    removable="true"
                    title="&bookmarksMenuButton.label;">

--- a/browser/base/content/test/browser_social_toolbar.js
+++ b/browser/base/content/test/browser_social_toolbar.js
@@ -21,19 +21,19 @@ var tests = {
     let profile = {
       portrait: "https://example.com/portrait.jpg",
       userName: "trickster",
       displayName: "Kuma Lisa",
       profileURL: "http://en.wikipedia.org/wiki/Kuma_Lisa"
     }
     Social.provider.updateUserProfile(profile);
     // check dom values
-    let portrait = document.getElementById("social-statusarea-user-portrait").getAttribute("src");
+    let portrait = document.getElementsByClassName("social-statusarea-user-portrait")[0].getAttribute("src");
     is(profile.portrait, portrait, "portrait is set");
-    let userButton = document.getElementById("social-statusarea-username");
+    let userButton = document.getElementsByClassName("social-statusarea-loggedInStatus")[0];
     ok(!userButton.hidden, "username is visible");
     is(userButton.value, profile.userName, "username is set");
     next();
   },
   testNoAmbientNotificationsIsNoKeyboardMenu: function(next) {
     // The menu bar isn't as easy to instrument on Mac.
     if (navigator.platform.contains("Mac")) {
       info("Skipping checking the menubar on Mac OS");
@@ -41,17 +41,17 @@ var tests = {
     }
 
     // Test that keyboard accessible menuitem doesn't exist when no ambient icons specified.
     let toolsPopup = document.getElementById("menu_ToolsPopup");
     toolsPopup.addEventListener("popupshown", function ontoolspopupshownNoAmbient() {
       toolsPopup.removeEventListener("popupshown", ontoolspopupshownNoAmbient);
       let socialToggleMore = document.getElementById("menu_socialAmbientMenu");
       ok(socialToggleMore, "Keyboard accessible social menu should exist");
-      is(socialToggleMore.querySelectorAll("menuitem").length, 2, "The minimum number of menuitems is two when there are no ambient notifications.");
+      is(socialToggleMore.querySelectorAll("menuitem").length, 5, "The minimum number of menuitems is two when there are no ambient notifications.");
       is(socialToggleMore.hidden, false, "Menu should be visible since we show some non-ambient notifications in the menu.");
       toolsPopup.hidePopup();
       next();
     }, false);
     document.getElementById("menu_ToolsPopup").openPopup();
   },
   testAmbientNotifications: function(next) {
     let ambience = {
@@ -99,46 +99,41 @@ var tests = {
         next();
 
       // Test that keyboard accessible menuitem was added.
       let toolsPopup = document.getElementById("menu_ToolsPopup");
       toolsPopup.addEventListener("popupshown", function ontoolspopupshownAmbient() {
         toolsPopup.removeEventListener("popupshown", ontoolspopupshownAmbient);
         let socialToggleMore = document.getElementById("menu_socialAmbientMenu");
         ok(socialToggleMore, "Keyboard accessible social menu should exist");
-        is(socialToggleMore.querySelectorAll("menuitem").length, 5, "The number of menuitems is minimum plus three ambient notification menuitems.");
+        is(socialToggleMore.querySelectorAll("menuitem").length, 8, "The number of menuitems is minimum plus three ambient notification menuitems.");
         is(socialToggleMore.hidden, false, "Menu is visible when ambient notifications have label & menuURL");
-        let menuitem = socialToggleMore.querySelector("menuitem");
+        let menuitem = socialToggleMore.querySelector(".ambient-menuitem");
         is(menuitem.getAttribute("label"), "Test Ambient 1", "Keyboard accessible ambient menuitem should have specified label");
         toolsPopup.hidePopup();
         next();
       }, false);
       document.getElementById("menu_ToolsPopup").openPopup();
     }, "statusIcon was never found");
   },
   testProfileUnset: function(next) {
     Social.provider.updateUserProfile({});
     // check dom values
-    let userButton = document.getElementById("social-statusarea-username");
-    ok(userButton.hidden, "username is not visible");
     let ambientIcons = document.querySelectorAll("#social-toolbar-item > box");
     for (let ambientIcon of ambientIcons) {
       ok(ambientIcon.collapsed, "ambient icon (" + ambientIcon.id + ") is collapsed");
     }
     
     next();
   },
-  testShowSidebarMenuitemExists: function(next) {
-    let toggleSidebarMenuitem = document.getElementById("social-toggle-sidebar-menuitem");
-    ok(toggleSidebarMenuitem, "Toggle Sidebar menuitem exists");
-    let toggleSidebarKeyboardMenuitem = document.getElementById("social-toggle-sidebar-keyboardmenuitem");
-    ok(toggleSidebarKeyboardMenuitem, "Toggle Sidebar keyboard menuitem exists");
-    next();
-  },
-  testShowDesktopNotificationsMenuitemExists: function(next) {
-    let toggleDesktopNotificationsMenuitem = document.getElementById("social-toggle-notifications-menuitem");
-    ok(toggleDesktopNotificationsMenuitem, "Toggle notifications menuitem exists");
-    let toggleDesktopNotificationsKeyboardMenuitem = document.getElementById("social-toggle-notifications-keyboardmenuitem");
-    ok(toggleDesktopNotificationsKeyboardMenuitem, "Toggle notifications keyboard menuitem exists");
+  testMenuitemsExist: function(next) {
+    let toggleSidebarMenuitems = document.getElementsByClassName("social-toggle-sidebar-menuitem");
+    is(toggleSidebarMenuitems.length, 2, "Toggle Sidebar menuitems exist");
+    let toggleDesktopNotificationsMenuitems = document.getElementsByClassName("social-toggle-notifications-menuitem");
+    is(toggleDesktopNotificationsMenuitems.length, 2, "Toggle notifications menuitems exist");
+    let toggleSocialMenuitems = document.getElementsByClassName("social-toggle-menuitem");
+    is(toggleSocialMenuitems.length, 2, "Toggle Social menuitems exist");
+    let removeSocialMenuitems = document.getElementsByClassName("social-remove-menuitem");
+    is(removeSocialMenuitems.length, 2, "Remove Social menuitems exist");
     next();
   }
 }
 

--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -397,31 +397,35 @@ webapps.install.success = Application In
 # brandFullName, and %2$S by the value of the toolkit.telemetry.server_owner preference.
 telemetryOptOutPrompt = %1$S sends information about performance, hardware, usage and customizations back to %2$S to help improve %3$S.
 
 # LOCALIZATION NOTE (fullscreen.entered): displayed when we enter HTML5 fullscreen mode, %S is the domain name of the focused website (e.g. mozilla.com).
 fullscreen.entered=%S is now fullscreen.
 # LOCALIZATION NOTE (fullscreen.rememberDecision): displayed when we enter HTML5 fullscreen mode, %S is the domain name of the focused website (e.g. mozilla.com).
 fullscreen.rememberDecision=Remember decision for %S
 
-# LOCALIZATION NOTE (social.toggle.label): %1$S is the name of the social provider, %2$S is brandShortName (e.g. Firefox)
-social.toggle.label=%1$S for %2$S
-social.toggle.accesskey=f
-
 # LOCALIZATION NOTE (social.activated.description): %1$S is the name of the social provider, %2$S is brandShortName (e.g. Firefox)
 social.activated.description=You've turned on %1$S for %2$S.
 
 # LOCALIZATION NOTE (social.remove.label): %S = brandShortName
 social.remove.label=Remove from %S
 social.remove.accesskey=R
 # LOCALIZATION NOTE (social.remove.confirmationLabel): %1$S is the name of the social provider, %2$S is brandShortName (e.g. Firefox)
 social.remove.confirmationLabel=Are you sure you want to remove %1$S for %2$S?
 # LOCALIZATION NOTE (social.remove.confirmationOK): %S is the name of the social provider
 social.remove.confirmationOK=Remove %S
 
+
+# LOCALIZATION NOTE (social.turnOff.label): %S is the name of the social provider
+social.turnOff.label=Turn off %S
+social.turnOff.accesskey=T
+# LOCALIZATION NOTE (social.turnOn.label): %S is the name of the social provider
+social.turnOn.label=Turn on %S
+social.turnOn.accesskey=T
+
 # LOCALIZATION NOTE (social.error.message): %1$S is brandShortName (e.g. Firefox), %2$S is the name of the social provider
 social.error.message=%1$S is unable to connect with %2$S right now.
 social.error.tryAgain.label=Try Again
 social.error.tryAgain.accesskey=T
 social.error.ok.label=OK
 social.error.ok.accesskey=O
 social.error.closeSidebar.label=Close This Sidebar
 social.error.closeSidebar.accesskey=C

--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2676,17 +2676,17 @@ html|*#gcli-output-frame {
 
 /* social toolbar provider menu */
 #social-statusarea-popup {
   margin-top: 0;
   margin-left: -12px;
   margin-right: -12px;
 }
 
-#social-statusarea-user-portrait {
+.social-statusarea-user-portrait {
   width: 32px;
   height: 32px;
   border-radius: 2px;
   margin: 10px;
 }
 
 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;

--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -4103,17 +4103,17 @@ html|*#gcli-output-frame {
 .social-notification-icon-image {
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 /* === end of social toolbar button === */
 
 /* === social toolbar provider menu  === */
 
-#social-statusarea-user-portrait {
+.social-statusarea-user-portrait {
   width: 32px;
   height: 32px;
   margin: 4px;
   -moz-margin-start: 0;
 }
 
 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;

--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -3348,50 +3348,48 @@ html|*#gcli-output-frame {
   display: none;
 }
 
 .social-notification-icon-image {
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 /* social toolbar provider menu */
-#social-statusarea-popup {
+.social-statusarea-popup {
   margin-top: 0;
   margin-left: -12px;
   margin-right: -12px;
 }
 
-#social-statusarea-user {
+.social-statusarea-user {
   -moz-appearance: none;
   border-bottom: 1px solid rgb(221,221,221);
   background-color: -moz-Dialog;
   position: relative;
   cursor: pointer;
 }
 
-#social-statusarea-user-portrait {
+.social-statusarea-user-portrait {
   width: 32px;
   height: 32px;
   border-radius: 2px;
   margin: 10px;
 }
 
-#social-statusarea-user > vbox > #social-statusarea-notloggedin,
-#social-statusarea-user > vbox > #social-statusarea-username {
+.social-statusarea-loggedInStatus {
   -moz-appearance: none;
   background: transparent;
   border: none;
   color: -moz-nativehyperlinktext;
   min-width: 0;
   margin: 0 6px;
   list-style-image: none;
 }
 
-#social-statusarea-user[_moz-menuactive] > vbox > #social-statusarea-notloggedin,
-#social-statusarea-user[_moz-menuactive] > vbox > #social-statusarea-username {
+.social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
   text-decoration: underline;
 }
 
 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
 
 .social-panel-frame {