#54105 - button/menulist correctness, r=andreww, sr=hangas

themes/modern/communicator/button.css

@@ -13,6 +13,7 @@
       font                  : 11px arial;
       max-width             : 10em;
       min-width             : 0px;
+      height                : 1px;
       -moz-user-focus       : ignore !important;
     }
     
@@ -236,10 +237,11 @@
       background-color : transparent;
       border				: 0px;
       margin				: 3px 7px 2px 0px;
+      height        : 22px;
       -moz-user-focus       : ignore !important;
     }
 
-  .button-toolbar-3 > box > box > .button-text-mid
+  .button-toolbar-3 > stack > box > .button-text-mid
     {
       font-family   : Arial, sans-serif;
       font-weight           : bold;
@@ -300,6 +302,7 @@
     padding               : 1px;
     margin                : 0px;
     min-width			  : 0px;
+    height                : 1px;
     border				  : 0px;
     -moz-user-focus       : ignore !important;
   }

themes/modern/global/button.css

@@ -6,9 +6,10 @@
   
   button {
     -moz-binding			: url("chrome://global/skin/globalBindings.xml#nine-slice-button");
-    margin            : 2px;
+    margin            : 3px;
     border				    : 3px solid transparent;
     min-width				  : 60px;
+    height            : 26px;
     background-color  : transparent;
     color					    : #1C1D1F;
     -moz-user-focus   : normal !important;
@@ -18,8 +19,13 @@
     font-family			    : charcoal, ms sans serif;
     font-size 			    : 12px;
     font-weight			    : normal;
+    padding-right       : 2px;
   }
     
+  .button-icon-mid {
+    padding-right: 2px;
+  }
+
   /* .......... focused state .......... */
 
   button:focus {
@@ -54,23 +60,25 @@
   .button-mid-top {
   	background			: url("chrome://global/skin/button-mid-top.gif") repeat-x;
   	height          : 3px;
-    vertical-align  : top;
   }
 
   .button-mid-mid {
   	background			  : url("chrome://global/skin/button-mid-mid.gif") repeat-x;
-    vertical-align    : middle;
-  	text-align        : center;
   }
 
   .button-mid-btm {
     background			  : url("chrome://global/skin/button-mid-btm.gif") repeat-x;
     height            : 4px;
-    vertical-align    : bottom;
+  }
+
+  .button-text-box {
+    vertical-align    : middle;
+  	text-align        : center;
+    padding           : 1px 0px 1px 0px;
   }
 
   .button-box-right {
-    width           : 7px;
+    width           : 9px;
   }
   
   .button-right-top {
@@ -101,20 +109,23 @@
     background-image    : url("chrome://global/skin/button-active-left-btm.gif");
   }
 
-  button:hover:active > .button-box-mid {
+  button:hover:active > .button-stack > .button-box-mid {
     background-color    : #84969C;
   }
   
-  button:hover:active > .button-box-mid > .button-mid-top {
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-top {
   	background-image    : url("chrome://global/skin/button-active-mid-top.gif");
   }
 
-  button:hover:active > .button-box-mid > .button-mid-mid {
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-mid {
   	background-image    : url("chrome://global/skin/button-active-mid-mid.gif");
+  }
+
+  button:hover:active > .button-stack > .button-text-box > .button-text-mid {
     color               : #ffffff;
   }
 
-  button:hover:active > .button-box-mid > .button-mid-btm {
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-btm {
     background-image    : url("chrome://global/skin/button-active-mid-btm.gif");
   }
 
@@ -132,13 +143,12 @@
 
   /* .......... disabled state .......... */
 
-  button[disabled="true"], 
-  button[disabled="true"]:hover, 
-  button[disabled="true"]:hover:active {
-    color					: #595F61;
+  button[disabled="true"] > .button-stack > .button-text-box > .button-text-mid, 
+  button[disabled="true"]:hover > .button-stack > .button-text-box > .button-text-mid, 
+  button[disabled="true"]:hover:active > .button-stack > .button-text-box > .button-text-mid {
+    color					: #7F8997;
   }
 
-  
   button:hover:active > .button-box-left > .button-left-top[disabled="true"],
   .button-left-top[disabled="true"] {
     background-image    : url("chrome://global/skin/button-dis-left-top.gif");
@@ -154,22 +164,22 @@
     background-image    : url("chrome://global/skin/button-dis-left-btm.gif");
   }
 
-  button:hover:active > .button-box-mid[disabled="true"],
+  button:hover:active > .button-stack > .button-box-mid[disabled="true"],
   .button-box-mid[disabled="true"] {
     background-color    : #ADBEC6;
   }
   
-  button:hover:active > .button-box-mid > .button-mid-top[disabled="true"],
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-top[disabled="true"],
   .button-mid-top[disabled="true"] {
   	background-image    : url("chrome://global/skin/button-dis-mid-top.gif");
   }
 
-  button:hover:active > .button-box-mid > .button-mid-mid[disabled="true"],
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-mid[disabled="true"],
   .button-mid-mid[disabled="true"] {
   	background-image    : url("chrome://global/skin/button-dis-mid-mid.gif");
   }
 
-  button:hover:active > .button-box-mid > .button-mid-btm[disabled="true"],
+  button:hover:active > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"],
   .button-mid-btm[disabled="true"] {
     background-image    : url("chrome://global/skin/button-dis-mid-btm.gif");
   }
@@ -191,6 +201,10 @@
   
   /* .......... default normal state .......... */
 
+  button[default="true"] {
+    margin          : 2px;
+  }
+
   .button-box-left[default="true"] {
     width           : 10px;
   }
@@ -224,7 +238,7 @@
   }
 
   .button-box-right[default="true"] {
-    width             : 8px;
+    width             : 10px;
   }
   
   .button-right-top[default="true"] {
@@ -255,15 +269,15 @@
     background-image  : url("chrome://global/skin/button-def-active-left-btm.gif");
   }
 
-  :hover:active > .button-box-mid > .button-mid-top[default="true"] {
+  :hover:active > .button-stack > .button-box-mid > .button-mid-top[default="true"] {
   	background-image  : url("chrome://global/skin/button-def-active-mid-top.gif");
   }
 
-  :hover:active > .button-box-mid > .button-mid-mid[default="true"] {
+  :hover:active > .button-stack > .button-box-mid > .button-mid-mid[default="true"] {
   	background-image  : url("chrome://global/skin/button-def-active-mid-mid.gif");
   }
 
-  :hover:active > .button-box-mid > .button-mid-btm[default="true"] {
+  :hover:active > .button-stack > .button-box-mid > .button-mid-btm[default="true"] {
     background-image  : url("chrome://global/skin/button-def-active-mid-btm.gif");
   }
 
@@ -313,30 +327,30 @@
     height              : 8px;
   }
 
-  :hover:active > .button-box-mid[disabled="true"][default="true"],
+  :hover:active > .button-stack > .button-box-mid[disabled="true"][default="true"],
   .button-box-mid[disabled="true"][default="true"] {
     background-color    : #ADBEC6;
   }
 
-  :hover:active > .button-box-mid > .button-mid-top[disabled="true"][default="true"],
+  :hover:active > .button-stack > .button-box-mid > .button-mid-top[disabled="true"][default="true"],
   .button-mid-top[disabled="true"][default="true"] {
   	background-image    : url("chrome://global/skin/button-dis-mid-top.gif");
     height              : 3px;
   }
 
-  :hover:active > .button-box-mid > .button-mid-mid[disabled="true"][default="true"],
+  :hover:active > .button-stack > .button-box-mid > .button-mid-mid[disabled="true"][default="true"],
   .button-mid-mid[disabled="true"][default="true"] {
   	background-image    : url("chrome://global/skin/button-dis-mid-mid.gif");
   }
 
-  :hover:active > .button-box-mid > .button-mid-btm[disabled="true"][default="true"],
+  :hover:active > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"][default="true"],
   .button-mid-btm[disabled="true"][default="true"] {
     background-image    : url("chrome://global/skin/button-dis-mid-btm.gif");
     height              : 4px;
   }
 
   .button-box-right[disabled="true"][default="true"] {
-    width               : 7px;
+    width               : 9px;
   }
 
   :hover:active > .button-box-right > .button-right-top[disabled="true"][default="true"],

themes/modern/global/globalBindings.xml

@@ -120,14 +120,18 @@
         <xul:spring class="button-left-btm" inherits="default,disabled"/>
       </xul:box>
       
-    	<xul:box class="button-box-mid" inherits="default,disabled" orient="vertical" flex="1">
-    	  <xul:spring class="button-mid-top" inherits="default,disabled"/>
-    	  <xul:box class="button-mid-mid" inherits="default,disabled" flex="1" autostretch="never">
-    	  	<xul:image class="button-icon" inherits="src"/>
-		      <xul:text class="button-text-mid" inherits="default,disabled,value,crop,accesskey"/>
-    	  </xul:box>
-    	  <xul:spring class="button-mid-btm" inherits="default,disabled"/>
-    	</xul:box>
+      <xul:stack class="button-stack" flex="1">
+        <xul:box class="button-box-mid" inherits="default,disabled" orient="vertical">
+           <xul:spring class="button-mid-top" inherits="default,disabled"/>
+           <xul:box class="button-mid-mid" inherits="default,disabled" flex="1"/>
+           <xul:spring class="button-mid-btm" inherits="default,disabled"/>
+        </xul:box>
+
+        <xul:box class="button-text-box" autostretch="never">
+         <xul:image class="button-icon-mid" inherits="src"/>
+         <xul:text class="button-text-mid" inherits="default,disabled,value,crop,accesskey"/>
+       </xul:box>
+     </xul:stack>
       
       <xul:box class="button-box-right" inherits="default,disabled" orient="vertical">
         <xul:spring class="button-right-top" inherits="default,disabled"/>
@@ -145,15 +149,19 @@
         <xul:spring class="menulist-left-btm" inherits="disabled"/>
       </xul:box>
 
-    	<xul:box class="menulist-box-mid" inherits="disabled" flex="1" orient="vertical">
-    	  <xul:spring class="menulist-mid-top" inherits="disabled"/>
-    		<xul:box class="menulist-mid-mid" inherits="disabled" flex="1" autostretch="never">
-        		<xul:image class="menulist-icon" inherits="src"/>
-		      	<xul:text class="menulist-text-mid" flex="1" inherits="disabled,value,crop,accesskey"/>
+      <xul:stack class="menulist-stack" flex="1">
+        <xul:box class="menulist-box-mid" inherits="disabled" orient="vertical">
+           <xul:spring class="menulist-mid-top" inherits="disabled"/>
+           <xul:box class="menulist-mid-mid" inherits="disabled" flex="1"/>
+           <xul:spring class="menulist-mid-btm" inherits="disabled"/>
         </xul:box>
-    	  <xul:spring class="menulist-mid-btm" inherits="disabled"/>
-    	</xul:box>
 
+        <xul:box class="menulist-text-box" autostretch="never">
+         <xul:image class="menulist-icon-mid" inherits="src"/>
+         <xul:text class="menulist-text-mid" inherits="disabled,value,crop,accesskey"/>
+       </xul:box>
+     </xul:stack>
+      
       <xul:box class="menulist-box-right" inherits="disabled" orient="vertical">
     		<xul:box class="menulist-right-mid" inherits="disabled" flex="1">
       		<xul:box class="menulist-right-mid2" inherits="disabled" flex="1" autostretch="never">
@@ -252,5 +260,5 @@
       </xul:box>
   	</content>
   </binding>
-
+  
 </bindings>

themes/modern/global/menulist.css

@@ -9,6 +9,7 @@
     margin			      : 0px 1px 0px 1px;
     border            : 3px solid transparent;
     padding           : 0px;
+    min-height        : 19px;
   }
 
   .menulist-text-mid {
@@ -63,8 +64,6 @@
 
   .menulist-mid-mid {
   	background			  : url("chrome://global/skin/menulist-mid-mid.gif") repeat-x;
-  	text-align        : center;
-    vertical-align    : middle;
   }
 
   .menulist-mid-btm {
@@ -73,6 +72,12 @@
     vertical-align    : bottom;
   }
 
+  .menulist-text-box {
+    vertical-align    : middle;
+  	text-align        : left;
+    padding           : 1px 0px 2px 0px;
+  }
+
   .menulist-box-right {
     width           : 22px;
   }
@@ -112,28 +117,28 @@
     background-image   : url("chrome://global/skin/menulist-active-left-btm.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid,
-  menulist[open="true"] > .menulist-box-mid {
+  menulist:hover:active > .menulist-stack > .menulist-box-mid,
+  menulist[open="true"] > .menulist-stack > .menulist-box-mid {
     background-color  : #84969C;
   }
   
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-top,
-  menulist[open="true"] > .menulist-box-mid > .menulist-mid-top {
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-top,
+  menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-top {
   	background-image  : url("chrome://global/skin/menulist-active-mid-top.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-mid,
-  menulist[open="true"] > .menulist-box-mid > .menulist-mid-mid {
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-mid,
+  menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-mid {
   	background-image  : url("chrome://global/skin/menulist-active-mid-mid.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-mid > .menulist-text-mid,
-  menulist[open="true"] > .menulist-box-mid > .menulist-mid-mid > .menulist-text-mid {
+  menulist:hover:active > .menulist-stack > .menulist-text-box > .menulist-text-mid,
+  menulist[open="true"] > .menulist-stack > .menulist-text-box > .menulist-text-mid {
     color: #ffffff;
   }
 
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-btm,
-  menulist[open="true"] > .menulist-box-mid > .menulist-mid-btm {
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-btm,
+  menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-btm {
     background-image  : url("chrome://global/skin/menulist-active-mid-btm.gif");
   }
 
@@ -169,22 +174,22 @@
     background-image   : url("chrome://global/skin/menulist-dis-left-btm.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid[disabled="true"],
-  .menulist-box-mid[disabled="true"] {
+  menulist:hover:active > .menulist-stack > .menulist-text-box > .menulist-text-mid[disabled="true"],
+  .menulist-text-mid[disabled="true"] {
     background-color  : #84969C;
   }
   
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-top[disabled="true"],
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-top[disabled="true"],
   .menulist-mid-top[disabled="true"] {
   	background-image  : url("chrome://global/skin/menulist-dis-mid-top.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-mid[disabled="true"],
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-mid[disabled="true"],
   .menulist-mid-mid[disabled="true"] {
   	background-image  : url("chrome://global/skin/menulist-dis-mid-mid.gif");
   }
 
-  menulist:hover:active > .menulist-box-mid > .menulist-mid-btm[disabled="true"],
+  menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-btm[disabled="true"],
   .menulist-mid-btm[disabled="true"] {
     background-image  : url("chrome://global/skin/menulist-dis-mid-btm.gif");
   }