bug 855389 fix social toolbarbutton structure to work with themes/etc, r=felipe

browser/base/content/browser-social.js

@@ -933,19 +933,11 @@ SocialToolbar = {
         SharedFrame.updateURL(notificationFrameId, icon.contentPanel);
       }
 
-      let toolbarButtonContainerId = "social-notification-container-" + icon.name;
       let toolbarButtonId = "social-notification-icon-" + icon.name;
-      let toolbarButtonContainer = document.getElementById(toolbarButtonContainerId);
       let toolbarButton = document.getElementById(toolbarButtonId);
-      if (!toolbarButtonContainer) {
+      if (!toolbarButton) {
-        // The container is used to fix an issue with position:absolute on
-        // generated content not being constrained to the bounding box of a
-        // parent toolbarbutton that has position:relative.
-        toolbarButtonContainer = document.createElement("toolbaritem");
-        toolbarButtonContainer.classList.add("social-notification-container");
-        toolbarButtonContainer.setAttribute("id", toolbarButtonContainerId);
-
         toolbarButton = document.createElement("toolbarbutton");
+        toolbarButton.setAttribute("type", "badged");
         toolbarButton.classList.add("toolbarbutton-1");
         toolbarButton.setAttribute("id", toolbarButtonId);
         toolbarButton.setAttribute("notificationFrameId", notificationFrameId);
@@ -954,8 +946,7 @@ SocialToolbar = {
             SocialToolbar.showAmbientPopup(toolbarButton);
         });
 
-        toolbarButtonContainer.appendChild(toolbarButton);
+        toolbarButtons.appendChild(toolbarButton);
-        toolbarButtons.appendChild(toolbarButtonContainer);
       }
 
       toolbarButton.style.listStyleImage = "url(" + icon.iconURL + ")";
@@ -963,7 +954,7 @@ SocialToolbar = {
       toolbarButton.setAttribute("tooltiptext", icon.label);
 
       let badge = icon.counter || "";
-      toolbarButton.setAttribute("badge", badge);
+      toolbarButton.setAttribute("badge", 1+badge);
       let ariaLabel = icon.label;
       // if there is a badge value, we must use a localizable string to insert it.
       if (badge)
@@ -1049,7 +1040,7 @@ SocialToolbar = {
     let navBar = document.getElementById("nav-bar");
     let anchor = navBar.getAttribute("mode") == "text" ?
                    document.getAnonymousElementByAttribute(aToolbarButton, "class", "toolbarbutton-text") :
-                   document.getAnonymousElementByAttribute(aToolbarButton, "class", "toolbarbutton-icon");
+                   document.getAnonymousElementByAttribute(aToolbarButton, "class", "toolbarbutton-badge-container");
     // Bug 849216 - open the popup in a setTimeout so we avoid the auto-rollup
     // handling from preventing it being opened in some cases.
     setTimeout(function() {

browser/base/content/browser.css

@@ -608,10 +608,14 @@ html|*#gcli-output-frame,
   transition: none;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+.toolbarbutton-badge[badge]:not([badge=""])::after {
   content: attr(badge);
 }
 
+toolbarbutton[type="badged"] {
+  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged");
+}
+
 chatbox {
   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
 }

browser/base/content/urlbarBindings.xml

@@ -1812,4 +1812,17 @@
     </implementation>
   </binding>
 
+  <binding id="toolbarbutton-badged" display="xul:button"
+           extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
+    <content>
+      <children includes="observes|template|menupopup|panel|tooltip"/>
+      <xul:hbox class="toolbarbutton-badge-container" align="start" pack="end" flex="1">
+        <xul:hbox class="toolbarbutton-badge" xbl:inherits="badge"/>
+        <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
+      </xul:hbox>
+      <xul:label class="toolbarbutton-text" crop="right" flex="1"
+                 xbl:inherits="value=label,accesskey,crop"/>
+    </content>
+  </binding>
+
 </bindings>

browser/themes/linux/browser.css

@@ -2118,24 +2118,20 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
   -moz-margin-end: 2px;
 }
 
-#social-toolbar-item > .toolbarbutton-1 > .toolbarbutton-icon,
-.social-notification-container > .toolbarbutton-1 > .toolbarbutton-icon {
-  margin: 5px 3px;
-}
-
 #social-provider-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
-.social-notification-container {
+.toolbarbutton-badge-container {
-  /* position:relative on .toolbarbutton-1 does not get position:absolute
+  margin: 5px 3px;
-     to work as expected on .toolbarbutton-1 generated content. Placing a
-     simple container outside of .toolbarbutton-1 and setting position:relative
-     on the simple container however will work. */
   position: relative;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+toolbar[iconsize="small"] .toolbarbutton-badge-container {
+  margin: 0;
+}
+
+.toolbarbutton-badge[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -2146,11 +2142,11 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 2px;
+  top: 0;
-  right: 2px;
+  right: 0;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: 2px;
   right: auto;
 }

browser/themes/osx/browser.css

@@ -3601,40 +3601,59 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* === social toolbar button === */
 
-toolbar[mode="icons"] > *|* > .social-notification-container {
+#social-toolbar-item > .toolbarbutton-1 {
-  -moz-appearance: toolbarbutton;
-}
-
-.social-notification-container > .toolbarbutton-1 {
-  -moz-appearance: none;
   margin-left: 0;
   margin-right: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-#social-toolbar-item {
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr) {
-  margin: 0 4px;
+  -moz-border-end-width: 0;
+}
+#social-toolbar-item > .toolbarbutton-1:last-child:-moz-locale-dir(ltr) {
+  -moz-border-end-width: 1px;
+}
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl) {
+  -moz-border-start-width: 0;
+}
+#social-toolbar-item > .toolbarbutton-1:first-child:-moz-locale-dir(rtl) {
+  -moz-border-start-width: 1px;
+}
+
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):first-child,
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):last-child {
+  margin-left: 4px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):first-child,
+#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):last-child {
+  margin-right: 4px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 #social-provider-button {
   -moz-image-region: rect(0, 16px, 16px, 0);
-  /* Needed to make the adjacent buttons combine */
-  margin-left: 0;
-  margin-right: 0;
 }
 
 #social-provider-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
-.social-notification-container {
+.toolbarbutton-badge-container {
-  /* position:relative on .toolbarbutton-1 does not get position:absolute
+  margin: 0;
-     to work as expected on .toolbarbutton-1 generated content. Placing a
+  padding: 0;
-     simple container outside of .toolbarbutton-1 and setting position:relative
-     on the simple container however will work. */
   position: relative;
 }
+.toolbarbutton-badge-container > .toolbarbutton-icon {
+  margin: 2px;
+}
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+.toolbarbutton-badge[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -3645,20 +3664,20 @@ toolbar[mode="icons"] > *|* > .social-notification-container {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 2px;
+  top: 0;
   right: 0;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: 0;
   right: auto;
 }
 
-toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
   right: -2px;
 }
 
-toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: -2px;
 }
 

browser/themes/windows/browser.css

@@ -690,6 +690,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 }
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-badge-container,
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   padding: 2px 6px;
@@ -705,6 +706,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 }
 
 @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
 @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   padding: 3px 7px;
 }
@@ -757,6 +759,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
 @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
   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);
@@ -776,7 +779,8 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 
 @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active > .toolbarbutton-icon,
 @navbarLargeIcons@ .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
-@navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
+@navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
+@navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-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);
@@ -2691,26 +2695,25 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   display: none;
 }
 
-@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1,
+.toolbarbutton-badge-container {
-@navbarLargeIcons@ > #social-toolbar-item > .social-notification-container > .toolbarbutton-1 {
+  margin: 0;
-  padding-left: 0;
+  padding: 0;
-  padding-right: 0;
-}
-
-@navbarLargeIcons@ > #social-toolbar-item {
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-.social-notification-container {
-  /* position:relative on .toolbarbutton-1 does not get position:absolute
-     to work as expected on .toolbarbutton-1 generated content. Placing a
-     simple container outside of .toolbarbutton-1 and setting position:relative
-     on the simple container however will work. */
   position: relative;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-badge-container {
+  padding: 2px 5px;
+}
+
+.toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+.toolbarbutton-badge[badge=""] {
+  display: none;
+}
+.toolbarbutton-badge[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -2721,16 +2724,22 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 2px;
+  top: 0;
-  right: 2px;
+  right: 0;
 }
 
-@navbarLargeIcons@ > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+@navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
-  top: 7px;
+  top: 1px;
+  right: 5px;
 }
 
-.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
-  left: 2px;
+  left: 0;
+  right: auto;
+}
+
+@navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+  left: 5px;
   right: auto;
 }