Back out 314ce3068d94 (bug 855389) for browser-chrome bustage

mozilla-spidermonkey · Apr 8, 2013 · 04d3def · 04d3def
1 parent 505fe39
commit 04d3def
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 104 deletions.
diff --git a/browser/base/content/browser-social.js b/browser/base/content/browser-social.js
@@ -933,11 +933,19 @@ 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 (!toolbarButton) {
+      if (!toolbarButtonContainer) {
+        // 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);
@@ -946,15 +954,16 @@ SocialToolbar = {
             SocialToolbar.showAmbientPopup(toolbarButton);
         });
 
-        toolbarButtons.appendChild(toolbarButton);
+        toolbarButtonContainer.appendChild(toolbarButton);
+        toolbarButtons.appendChild(toolbarButtonContainer);
       }
 
       toolbarButton.style.listStyleImage = "url(" + icon.iconURL + ")";
       toolbarButton.setAttribute("label", icon.label);
       toolbarButton.setAttribute("tooltiptext", icon.label);
 
       let badge = icon.counter || "";
-      toolbarButton.setAttribute("badge", 1+badge);
+      toolbarButton.setAttribute("badge", badge);
       let ariaLabel = icon.label;
       // if there is a badge value, we must use a localizable string to insert it.
       if (badge)
@@ -1040,7 +1049,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-badge-container");
+                   document.getAnonymousElementByAttribute(aToolbarButton, "class", "toolbarbutton-icon");
     // 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() {

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
@@ -608,14 +608,10 @@ html|*#gcli-output-frame,
   transition: none;
 }
 
-.toolbarbutton-badge[badge]:not([badge=""])::after {
+.social-notification-container > .toolbarbutton-1[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");
 }

diff --git a/browser/base/content/urlbarBindings.xml b/browser/base/content/urlbarBindings.xml
@@ -1812,17 +1812,4 @@
     </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>
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
@@ -2118,20 +2118,24 @@ 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;
 }
 
-.toolbarbutton-badge-container {
-  margin: 5px 3px;
+.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;
 }
 
-toolbar[iconsize="small"] .toolbarbutton-badge-container {
-  margin: 0;
-}
-
-.toolbarbutton-badge[badge]:not([badge=""])::after {
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -2142,11 +2146,11 @@ toolbar[iconsize="small"] .toolbarbutton-badge-container {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 2px;
+  right: 2px;
 }
 
-.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: 2px;
   right: auto;
 }

diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
@@ -3601,59 +3601,40 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* === social toolbar button === */
 
-#social-toolbar-item > .toolbarbutton-1 {
-  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;
+toolbar[mode="icons"] > *|* > .social-notification-container {
+  -moz-appearance: toolbarbutton;
 }
 
-#social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr) {
-  -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-notification-container > .toolbarbutton-1 {
+  -moz-appearance: none;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-#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-toolbar-item {
+  margin: 0 4px;
 }
 
 #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;
 }
 
-.toolbarbutton-badge-container {
-  margin: 0;
-  padding: 0;
+.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;
 }
-.toolbarbutton-badge-container > .toolbarbutton-icon {
-  margin: 2px;
-}
 
-.toolbarbutton-badge[badge]:not([badge=""])::after {
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -3664,20 +3645,20 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 0;
+  top: 2px;
   right: 0;
 }
 
-.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: 0;
   right: auto;
 }
 
-toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
+toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
   right: -2px;
 }
 
-toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+toolbar[mode="icons"] > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: -2px;
 }
 

diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
@@ -690,7 +690,6 @@ 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;
@@ -706,7 +705,6 @@ 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;
 }
@@ -759,7 +757,6 @@ 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);
@@ -779,8 +776,7 @@ 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-badge-container {
+@navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
   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);
@@ -2695,25 +2691,26 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   display: none;
 }
 
-.toolbarbutton-badge-container {
-  margin: 0;
-  padding: 0;
-  position: relative;
+@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1,
+@navbarLargeIcons@ > #social-toolbar-item > .social-notification-container > .toolbarbutton-1 {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-badge-container {
-  padding: 2px 5px;
+@navbarLargeIcons@ > #social-toolbar-item {
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
-.toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-}
-.toolbarbutton-badge[badge=""] {
-  display: none;
+.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;
 }
-.toolbarbutton-badge[badge]:not([badge=""])::after {
+
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
@@ -2724,22 +2721,16 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   border-radius: 2px;
   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
   position: absolute;
-  top: 0;
-  right: 0;
-}
-
-@navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
-  top: 1px;
-  right: 5px;
+  top: 2px;
+  right: 2px;
 }
 
-.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
-  left: 0;
-  right: auto;
+@navbarLargeIcons@ > *|* > .social-notification-container > .toolbarbutton-1[badge]:not([badge=""])::after {
+  top: 7px;
 }
 
-@navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
-  left: 5px;
+.social-notification-container > .toolbarbutton-1[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+  left: 2px;
   right: auto;
 }