Bug 980115 [Australis] social buttons make other buttons squished, r=Gijs
authorShane Caraveo <scaraveo@mozilla.com>
Mon, 10 Mar 2014 17:28:42 -0700
changeset 191199 86aebfb124f685bfe929e337ef21422ffe3a27a5
parent 191198 54edfc4fa73ba55ff25264225fae32efc1963b04
child 191200 997a18bcc2d626af6417ed085a0def5753007e47
push id474
push userasasaki@mozilla.com
push dateMon, 02 Jun 2014 21:01:02 +0000
treeherdermozilla-release@967f4cf1b31c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs980115
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 980115 [Australis] social buttons make other buttons squished, r=Gijs
browser/base/content/browser.css
browser/base/content/socialmarks.xml
browser/base/content/urlbarBindings.xml
browser/themes/osx/browser.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -763,32 +763,26 @@ html|*#gcli-output-frame,
 .toolbarbutton-badge[badge]:not([badge=""])::after {
   content: attr(badge);
 }
 
 toolbarbutton[type="badged"] {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged");
 }
 
-toolbarpaletteitem[place="palette"] > toolbarbutton[type="badged"] > .toolbarbutton-badge-container {
-  padding: 5px;
-}
-
 toolbarbutton[type="socialmark"] {
   -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
 }
 
 toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
   max-width: 16px;
-  max-height: 16px;
 }
 toolbarpaletteitem[place="palette"] > toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
   max-width: 32px;
-  max-height: 32px;
 }
 
 panelview > .social-panel-frame {
   width: auto;
   height: auto;
 }
 
 /* Note the chatbox 'width' values are duplicated in socialchat.xml */
--- a/browser/base/content/socialmarks.xml
+++ b/browser/base/content/socialmarks.xml
@@ -7,17 +7,19 @@
 
 
   <binding id="toolbarbutton-marks" display="xul:button"
            extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
     <content disabled="true">
       <xul:panel anonid="panel" hidden="true" type="arrow" class="social-panel"/>
       <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label"/>
       <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop"/>
+                 xbl:inherits="value=label,accesskey,crop,wrap"/>
+      <xul:label class="toolbarbutton-multiline-text" flex="1"
+                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
     </content>
     <implementation implements="nsIDOMEventListener, nsIObserver">
       <field name="inMenuPanel">false</field>
 
       <property name="panel">
         <getter>
           let widgetGroup = CustomizableUI.getWidget(this.getAttribute("id"));
           let widget = widgetGroup.forWindow(window);
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -2191,18 +2191,20 @@
       </method>
     </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-container" align="start" pack="end">
         <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"/>
+                 xbl:inherits="value=label,accesskey,crop,wrap"/>
+      <xul:label class="toolbarbutton-multiline-text" flex="1"
+                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
     </content>
   </binding>
 
 </bindings>
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3991,17 +3991,17 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 .toolbarbutton-badge-container {
   margin: 0;
   padding: 0;
   position: relative;
 }
 .toolbarbutton-badge-container > .toolbarbutton-icon {
-  margin: 7px 2px;
+  margin: 4px 2px;
 }
 
 .toolbarbutton-badge[badge]:not([badge=""]) {
   /* The |content| property is set in the content stylesheet. */
   font-size: 9px;
   font-weight: bold;
   padding: 0 1px;
   color: #fff;
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -290,16 +290,17 @@ toolbaritem[cui-areatype="menu-panel"][s
 }
 
 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
   text-align: center;
 }
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .panel-customization-placeholder-child > .toolbarbutton-icon {
   min-width: 32px;
   min-height: 32px;
   /* Explanation for the below formula (A / B - C)
@@ -312,16 +313,26 @@ toolbaritem[cui-areatype="menu-panel"][s
        The button has 12px of horizontal padding (6 on each side).
        The button has 2px of horizontal border (1 on each side).
        Total width of button's icon + button padding should therefore be 46px,
        which means each horizontal margin should be the half the button's width - (46/2) px.
   */
   margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
 }
 
+/* above we treat the container as the icon for the margins, that is so the
+/* badge itself is positioned correctly. Here we make sure that the icon itself
+/* has the minum size we want, but no padding/margin. */
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
+  min-width: 32px;
+  min-height: 32px;
+  margin: 0;
+  padding: 0;
+}
+
 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-flex: 1;
 }
 
 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
   -moz-box-flex: 1;
 }