Bug 790112: fix social toolbar button styling so that separate "sub-buttons" are visually distinct, patch by Shane and Jared, r=felipe
authorShane Caraveo
Thu, 27 Sep 2012 16:57:37 -0700
changeset 108637 abf5f7d054889ffe003afc7cabe06d90ae84900a
parent 108636 5d87924d4760e35036358db5740da0f85850814f
child 108638 d927bdcfd2e458d1f23479fa86fa5a0a12d95edb
push id82
push usershu@rfrn.org
push dateFri, 05 Oct 2012 13:20:22 +0000
reviewersfelipe
bugs790112
milestone18.0a1
Bug 790112: fix social toolbar button styling so that separate "sub-buttons" are visually distinct, patch by Shane and Jared, r=felipe
browser/base/content/browser-social.js
browser/base/content/browser.xul
browser/themes/gnomestripe/browser.css
browser/themes/pinstripe/browser.css
browser/themes/winstripe/browser.css
--- a/browser/base/content/browser-social.js
+++ b/browser/base/content/browser-social.js
@@ -526,43 +526,31 @@ let SocialShareButton = {
     }
     shareButton.style.backgroundImage = 'url("' + encodeURI(imageURL) + '")';
   }
 };
 
 var SocialToolbar = {
   // Called once, after window load, when the Social.provider object is initialized
   init: function SocialToolbar_init() {
-    document.getElementById("social-provider-image").setAttribute("image", Social.provider.iconURL);
-
-    let statusAreaPopup = document.getElementById("social-statusarea-popup");
-    statusAreaPopup.addEventListener("popupshown", function(e) {
-      this.button.setAttribute("open", "true");
-    }.bind(this));
-    statusAreaPopup.addEventListener("popuphidden", function(e) {
-      this.button.removeAttribute("open");
-    }.bind(this));
-
+    document.getElementById("social-provider-button").setAttribute("image", Social.provider.iconURL);
     this.updateButton();
     this.updateProfile();
   },
 
-  get button() {
-    return document.getElementById("social-toolbar-button");
-  },
-
   updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() {
-    this.button.hidden = !Social.uiVisible;
+    let tbi = document.getElementById("social-toolbar-item");
+    tbi.hidden = !Social.uiVisible;
     if (!SocialUI.haveLoggedInUser()) {
-      ["social-notification-box",
-       "social-status-iconbox"].forEach(function removeChildren(parentId) {
-        let parent = document.getElementById(parentId);
-        while(parent.hasChildNodes())
-          parent.removeChild(parent.firstChild);
-      });
+      let parent = document.getElementById("social-notification-box");
+      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 || {};
@@ -580,17 +568,17 @@ var SocialToolbar = {
       userNameBtn.hidden = true;
     }
   },
 
   updateButton: function SocialToolbar_updateButton() {
     this.updateButtonHiddenState();
     let provider = Social.provider;
     let iconNames = Object.keys(provider.ambientNotificationIcons);
-    let iconBox = document.getElementById("social-status-iconbox");
+    let iconBox = document.getElementById("social-toolbar-item");
     let notifBox = document.getElementById("social-notification-box");
     let panel = document.getElementById("social-notification-panel");
     panel.hidden = false;
     let notificationFrames = document.createDocumentFragment();
     let iconContainers = document.createDocumentFragment();
 
     let command = document.getElementById("Social:ToggleNotifications");
     command.setAttribute("checked", Services.prefs.getBoolPref("social.toast-notifications.enabled"));
@@ -608,54 +596,67 @@ var SocialToolbar = {
         notificationFrame.setAttribute("mozbrowser", "true");
         notificationFrames.appendChild(notificationFrame);
       }
       notificationFrame.setAttribute("origin", provider.origin);
       if (notificationFrame.getAttribute("src") != icon.contentPanel)
         notificationFrame.setAttribute("src", icon.contentPanel);
 
       let iconId = "social-notification-icon-" + icon.name;
-      let iconContainer = document.getElementById(iconId);
-      let iconImage, iconCounter;
-      if (iconContainer) {
-        iconImage = iconContainer.getElementsByClassName("social-notification-icon-image")[0];
-        iconCounter = iconContainer.getElementsByClassName("social-notification-icon-counter")[0];
+      let imageId = iconId + "-image";
+      let labelId = iconId + "-label";
+      let stackId = iconId + "-stack";
+      let stack = document.getElementById(stackId);
+      let image, label;
+      if (stack) {
+        image = document.getElementById(imageId);
+        label = document.getElementById(labelId);
       } else {
-        iconContainer = document.createElement("box");
-        iconContainer.setAttribute("id", iconId);
-        iconContainer.classList.add("social-notification-icon-container");
-        iconContainer.addEventListener("click", function (e) { SocialToolbar.showAmbientPopup(iconContainer); }, false);
+        let box = document.createElement("box");
+        box.classList.add("toolbarbutton-1");
+        box.setAttribute("id", iconId);
+        box.addEventListener("mousedown", function (e) { SocialToolbar.showAmbientPopup(box); }, false);
+        box.setAttribute("notificationFrameId", notificationFrameId);
+        stack = document.createElement("stack");
+        stack.setAttribute("id", stackId);
+        stack.classList.add("social-notification-icon-stack");
+        stack.classList.add("toolbarbutton-icon");
+        image = document.createElement("image");
+        image.setAttribute("id", imageId);
+        image = stack.appendChild(image);
+        label = document.createElement("label");
+        label.setAttribute("id", labelId);
+        label.classList.add("social-notification-icon-label");
+        let hbox = document.createElement("hbox");
+        hbox.classList.add("social-notification-icon-hbox");
+        hbox.setAttribute("align", "start");
+        hbox.setAttribute("pack", "end");
+        label = hbox.appendChild(label);
+        stack.appendChild(hbox);
+        box.appendChild(stack);
+        iconContainers.appendChild(box);
+      }
 
-        iconImage = document.createElement("image");
-        iconImage.classList.add("social-notification-icon-image");
-        iconImage = iconContainer.appendChild(iconImage);
-
-        iconCounter = document.createElement("box");
-        iconCounter.classList.add("social-notification-icon-counter");
-        iconCounter.appendChild(document.createTextNode(""));
-        iconCounter = iconContainer.appendChild(iconCounter);
+      let labelValue = icon.counter || "";
+      // Only update the value attribute if it has changed to reduce layout changes.
+      if (!label.hasAttribute("value") || label.getAttribute("value") != labelValue)
+        label.setAttribute("value", labelValue);
 
-        iconContainers.appendChild(iconContainer);
-      }
-      if (iconImage.getAttribute("src") != icon.iconURL)
-        iconImage.setAttribute("src", icon.iconURL);
-      iconImage.setAttribute("notificationFrameId", notificationFrameId);
-
-      iconCounter.collapsed = !icon.counter;
-      iconCounter.firstChild.textContent = icon.counter || "";
+      if (image.getAttribute("src") != icon.iconURL)
+        image.setAttribute("src", icon.iconURL);
     }
     notifBox.appendChild(notificationFrames);
     iconBox.appendChild(iconContainers);
   },
 
-  showAmbientPopup: function SocialToolbar_showAmbientPopup(iconContainer) {
-    let iconImage = iconContainer.firstChild;
+  showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButtonBox) {
     let panel = document.getElementById("social-notification-panel");
     let notifBox = document.getElementById("social-notification-box");
-    let notificationFrame = document.getElementById(iconImage.getAttribute("notificationFrameId"));
+    let notificationFrameId = aToolbarButtonBox.getAttribute("notificationFrameId");
+    let notificationFrame = document.getElementById(notificationFrameId);
 
     // Clear dimensions on all browsers so the panel size will
     // only use the selected browser.
     let frameIter = notifBox.firstElementChild;
     while (frameIter) {
       frameIter.collapsed = (frameIter != notificationFrame);
       frameIter = frameIter.nextElementSibling;
     }
@@ -663,24 +664,24 @@ var SocialToolbar = {
     function dispatchPanelEvent(name) {
       let evt = notificationFrame.contentDocument.createEvent("CustomEvent");
       evt.initCustomEvent(name, true, true, {});
       notificationFrame.contentDocument.documentElement.dispatchEvent(evt);
     }
 
     panel.addEventListener("popuphidden", function onpopuphiding() {
       panel.removeEventListener("popuphidden", onpopuphiding);
-      SocialToolbar.button.removeAttribute("open");
+      aToolbarButtonBox.removeAttribute("open");
       notificationFrame.docShell.isActive = false;
       dispatchPanelEvent("socialFrameHide");
     });
 
     panel.addEventListener("popupshown", function onpopupshown() {
       panel.removeEventListener("popupshown", onpopupshown);
-      SocialToolbar.button.setAttribute("open", "true");
+      aToolbarButtonBox.setAttribute("open", "true");
       notificationFrame.docShell.isActive = true;
       notificationFrame.docShell.isAppTab = true;
       if (notificationFrame.contentDocument.readyState == "complete") {
         setupDynamicPanelResizer(notificationFrame);
         dispatchPanelEvent("socialFrameShow");
       } else {
         // first time load, wait for load and dispatch after load
         notificationFrame.addEventListener("load", function panelBrowserOnload(e) {
@@ -688,17 +689,19 @@ var SocialToolbar = {
           setupDynamicPanelResizer(notificationFrame);
           setTimeout(function() {
             dispatchPanelEvent("socialFrameShow");
           }, 0);
         }, true);
       }
     });
 
-    panel.openPopup(iconImage, "bottomcenter topleft", 0, 0, false, false);
+    let imageId = aToolbarButtonBox.getAttribute("id") + "-image";
+    let toolbarButtonImage = document.getElementById(imageId);
+    panel.openPopup(toolbarButtonImage, "bottomcenter topleft", 0, 0, false, false);
   }
 }
 
 var SocialSidebar = {
   // Called once, after window load, when the Social.provider object is initialized
   init: function SocialSidebar_init() {
     let sbrowser = document.getElementById("social-sidebar-browser");
     // setting isAppTab causes clicks on untargeted links to open new tabs
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -655,51 +655,42 @@
                      label="&homeButton.label;"
                      ondragover="homeButtonObserver.onDragOver(event)"
                      ondragenter="homeButtonObserver.onDragOver(event)"
                      ondrop="homeButtonObserver.onDrop(event)"
                      ondragexit="homeButtonObserver.onDragExit(event)"
                      onclick="BrowserGoHome(event);"
                      aboutHomeOverrideTooltip="&abouthome.pageTitle;"/>
 
-      <toolbaritem id="social-toolbar-button"
-                   class="toolbarbutton-1 chromeclass-toolbar-additional"
+      <toolbaritem id="social-toolbar-item"
+                   class="chromeclass-toolbar-additional"
                    removable="false"
-                   pack="center"
                    title="&socialToolbar.title;"
                    hidden="true">
-        <hbox id="social-toolbar-button-box" class="social-statusarea-container">
-          <button id="social-provider-image" type="menu">
-            <menupopup id="social-statusarea-popup">
-              <hbox id="social-statusarea-user" pack="left" align="center">
-                <image id="social-statusarea-user-portrait"/>
-                <vbox>
-                  <label id="social-statusarea-notloggedin"
-                         value="&social.notLoggedIn.label;"/>
-                  <button id="social-statusarea-username"
-                          oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
-                </vbox>
-              </hbox>
-              <menuitem id="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"
-                        type="checkbox"
-                        autocheck="false"
-                        command="Social:ToggleNotifications"
-                        label="&social.toggleNotifications.label;"
-                        accesskey="&social.toggleNotifications.accesskey;"/>
-            </menupopup>
-          </button>
-          <hbox id="social-status-iconbox" flex="1">
-          </hbox>
-        </hbox>
+        <toolbarbutton id="social-provider-button"
+                       class="toolbarbutton-1"
+                       type="menu">
+          <menupopup id="social-statusarea-popup">
+            <hbox id="social-statusarea-user" pack="left" align="center">
+              <image id="social-statusarea-user-portrait"/>
+              <vbox>
+                <label id="social-statusarea-notloggedin"
+                       value="&social.notLoggedIn.label;"/>
+                <button id="social-statusarea-username"
+                        oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
+              </vbox>
+            </hbox>
+            <menuitem id="social-toggle-sidebar-menuitem"
+                      type="checkbox"
+                      autocheck="false"
+                      command="Social:ToggleSidebar"
+                      label="&social.toggleSidebar.label;"
+                      accesskey="&social.toggleSidebar.accesskey;"/>
+          </menupopup>
+        </toolbarbutton>
       </toolbaritem>
 
       <toolbaritem id="bookmarks-menu-button-container"
                    class="chromeclass-toolbar-additional"
                    removable="true"
                    title="&bookmarksMenuButton.label;">
         <toolbarbutton id="bookmarks-menu-button"
                        type="menu"
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -2604,86 +2604,69 @@ html|*#gcli-output-frame {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;
   -moz-margin-end: 2px;
 }
 
-#social-toolbar-button {
-  -moz-appearance: toolbarbutton;
-}
-
-/* favicon for the service */
-#social-provider-image {
-  -moz-appearance: none;
-  border: none;
-  min-width: 20px;
-  min-height: 20px;
-  padding: 2px 5px;
-  margin: 0;
-  background: transparent;
-  list-style-image: url("chrome://browser/skin/social/social.png");
-}
-
-#social-provider-image > .button-box > .box-inherit > .button-icon {
-  max-height: 16px;
-  max-width: 16px;
-}
-
-#social-provider-image > .button-box {
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-}
-
-#social-provider-image > .button-box > .button-menu-dropmarker {
-  display: none;
-}
-
-/* hbox that hold notification icons */
-#social-status-iconbox {
+#social-toolbar-item {
+  -moz-box-orient: horizontal;
+}
+
+#social-toolbar-item > .toolbarbutton-1 {
   margin: 0;
   padding: 0;
-}
-
-/* hbox that surrounds an image and its counter */
-.social-notification-icon-container {
+  -moz-appearance: toolbarbutton;
+}
+
+.social-notification-icon-hbox {
+  pointer-events: none;
+}
+
+.social-status-button {
+  list-style-image: none;
+}
+
+#social-provider-button > image {
+  margin: 5px 3px;
+}
+
+#social-provider-button > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
+.social-notification-icon-stack {
   padding: 0;
-  margin: 0;
-  position: relative;
-}
-
-/* notification counter box */
-.social-notification-icon-counter {
+}
+
+.social-notification-icon-stack > image {
+  margin: 5px 3px;
+  max-height: 16px;
+}
+
+.social-notification-icon-hbox {
+  padding: 0;
+}
+
+.social-notification-icon-label {
   background-color: rgb(240,61,37);
   border: 1px solid rgb(216,55,34);
   box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
   padding-right: 1px;
   padding-left: 1px;
   color: white;
   font-size: 9px;
   font-weight: bold;
-  position: absolute;
-  right: -3px;
-  top: -4px;
-  z-index: 1;
-  text-align: center;
-}
-
-/* notification image */
-.social-notification-icon-image {
-  padding: 2px;
   margin: 0;
-  min-width: 20px;
-  max-width: 32px;
-  max-height: 20px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+}
+
+.social-notification-icon-label[value=""] {
+  display: none;
 }
 
 /* social toolbar provider menu */
 #social-statusarea-popup {
   margin-top: 0;
   margin-left: -12px;
   margin-right: -12px;
 }
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -3319,58 +3319,69 @@ html|*#gcli-output-frame {
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;
 }
 
 /* === social toolbar button === */
 
 /* button icon for the service */
-#social-provider-image {
-  -moz-appearance: none;
+#social-toolbar-item {
+  -moz-box-orient: horizontal;
+}
+
+#social-toolbar-item > .toolbarbutton-1 {
+  margin: 0px;
+}
+
+.social-notification-icon-hbox {
+  pointer-events: none;
+}
+
+.social-status-button {
+  list-style-image: none;
+}
+
+#social-provider-button > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
+.social-notification-icon-stack {
+  padding: 0;
+}
+
+.social-notification-icon-stack > image {
+  max-height: 16px;
+}
+
+.social-notification-icon-hbox {
+  padding: 0;
+}
+.social-notification-icon-label {
+  text-align: end;
+  font-size: 9px;
+  font-weight: bold;
+  padding: 0 1px;
+  color: white;
   margin: 0;
-  padding: 2px;
-  min-width: 0;
-  max-height: 20px;
-  list-style-image: url("chrome://browser/skin/social/social.png");
-}
-
-/* hbox that surrounds an image and its counter */
-.social-notification-icon-container {
-  cursor: pointer;
-  padding: 0px;
-  margin: 0px;
-  position: relative;
-}
-
-/* notification counter box */
-.social-notification-icon-counter {
   background-color: rgb(240,61,37);
   border: 1px solid rgb(216,55,34);
-  box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
-  padding-right: 1px;
-  padding-left: 1px;
-  color: white;
-  font-size: 9px;
-  font-weight: bold;
-  position: absolute;
-  right: -3px;
-  top: -4px;
-  z-index: 1;
-  text-align: center;
-}
-
-/* notification image */
-.social-notification-icon-image {
-  padding: 2px;
-  margin: 0px;
-  min-width: 20px;
-  max-width: 32px;
-  max-height: 20px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+  box-shadow: 0 1px 0 rgba(0,39,121,0.77);
+  -moz-margin-end: -4px;
+  margin-top: -4px;
+}
+
+.social-notification-icon-label[value=""] {
+  display: none;
+}
+
+@media (-moz-mac-lion-theme) {
+  .social-notification-icon-stack > image:-moz-window-inactive {
+    opacity: .5;
+  }
 }
 
 /* === end of social toolbar button === */
 
 /* === social toolbar provider menu  === */
 
 #social-statusarea-user {
   cursor: default;
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -665,17 +665,17 @@ toolbar[mode=full] .toolbarbutton-1 > .t
 
 @navbarLargeIcons@ .toolbarbutton-1:not([type=menu-button]),
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding: 5px 2px;
   -moz-box-pack: center;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) {
+@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) {
   padding-left: 5px;
   padding-right: 5px;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > menupopup {
   margin-top: -3px;
 }
 
@@ -703,40 +703,45 @@ toolbar[mode=full] .toolbarbutton-1 > .t
   transition-duration: 150ms;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   padding: 3px 7px;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
   -moz-padding-end: 17px;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
   -moz-margin-start: -15px;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   -moz-border-end: none;
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   padding: 8px 3px 7px;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:not(:first-child)::before {
   content: "";
   display: -moz-box;
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background: hsla(210,54%,20%,.2) padding-box;
+  background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
+  background-clip: padding-box;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1px 18px;
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -3281,98 +3286,54 @@ html|*#gcli-output-frame {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;
   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
   border-radius: 1px;
   -moz-margin-end: 5px;
 }
 
-
-/* social toolbar button */
-.social-statusarea-container {
-  -moz-appearance: none;
-  margin: 2px; /* make sure we have the correct platform spacing*/
+/* Social toolbar item */
+
+#social-provider-button > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1 {
+  padding: 5px 0;
+}
+
+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:first-child {
+  -moz-padding-start: 5px;
+}
+
+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:last-child {
+  -moz-padding-end: 5px;
+}
+
+.social-notification-icon-hbox {
+  pointer-events: none;
+  margin-top: -5px;
+  -moz-margin-end: -12px;
+}
+
+.social-notification-icon-label {
+  text-align: end;
+  font-size: 9px;
+  font-weight: bold;
   padding: 0 1px;
-  border: 1px solid transparent;
-  border-radius: 2px;
-}
-
-.social-statusarea-container:hover {
-  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
-  box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
-              0 1px hsla(210,54%,20%,.03),
-              0 0 2px hsla(210,54%,20%,.1);
-}
-
-#social-toolbar-button[open="true"] > .social-statusarea-container {
-  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
-  background-color: hsla(210,54%,20%,.15);
-  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
-  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
-              0 0 1px hsla(210,54%,20%,.2) inset;
-}
-
-/* favicon for the service */
-#social-provider-image {
-  -moz-appearance: none;
-  border: none;
-  min-width: 20px;
-  min-height: 16px;
-  padding: 2px 5px;
-  margin: 0;
-  background: transparent;
-  list-style-image: url("chrome://browser/skin/social/social.png");
-}
-
-#social-provider-image > .button-box > .box-inherit > .button-icon {
-  max-height: 16px;
-  max-width: 16px;
-}
-
-#social-provider-image > .button-box {
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-}
-
-#social-provider-image > .button-box > .button-menu-dropmarker {
-  display: none;
-}
-
-/* hbox that hold notification icons */
-#social-status-iconbox {
-  margin: 0;
-  padding: 0;
-}
-
-/* hbox that surrounds an image and its counter */
-.social-notification-icon-container {
-  padding: 0;
-  margin: 0;
-  position: relative;
-}
-
-/* notification counter box */
-.social-notification-icon-counter {
+  color: white;
   background-color: rgb(240,61,37);
   border: 1px solid rgb(216,55,34);
-  box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
-  padding-right: 1px;
-  padding-left: 1px;
-  color: white;
-  font-size: 9px;
-  font-weight: bold;
-  position: absolute;
-  right: -3px;
-  top: -4px;
-  z-index: 1;
-  text-align: center;
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0,39,121,0.77);
+}
+
+.social-notification-icon-label[value=""] {
+  display: none;
 }
 
 /* notification image */
 .social-notification-icon-image {
   padding: 2px;
   margin: 0;
   min-width: 20px;
   max-width: 32px;