#54105 - [Modern] focus/widget cleanup, r=andreww, a=ben

themes/modern/communicator/button.css

@@ -232,17 +232,18 @@
  **/  
   button.button-toolbar-3 
     {
-	  -moz-binding			: url("chrome://global/skin/globalBindings.xml#three-slice-button");
+	  -moz-binding			: url("chrome://global/skin/globalBindings.xml#nine-slice-button");
       background-color : transparent;
       border				: 0px;
       margin				: 3px 7px 2px 0px;
-      font-family   : Arial, sans-serif;
       -moz-user-focus       : ignore !important;
     }
 
-  .button-toolbar-3 > box > box > .button-text-box {
+  .button-toolbar-3 > box > box > .button-text-mid
+    {
+      font-family   : Arial, sans-serif;
       font-weight           : bold;
-  }
+    }
 
   button.button-toolbar-3[disabled="true"], .button-toolbar-3[disabled="true"]:hover, .button-toolbar-3[disabled="true"]:hover:active
     {
@@ -331,4 +332,20 @@ menubutton.button-toolbar-4
   {
     border                : 0px !important;
     padding               : 0px !important;
-  }  
+  } 
+  
+  /* text wrapping frame (hack because <text> does not support alignment) */
+  .button-text-container {
+      text-align          : center;
+      vertical-align      : middle;
+    }
+
+/* text frame */
+  .button-text  {
+      padding             : 0px 2px 0px 2px;
+    }
+  
+  button[orient="vertical"] > .button-internal-box > .button-text-container > .button-text {
+      padding             : 2px 2px 0px 2px;
+    }
+  

themes/modern/global/button.css

@@ -1,4 +1,360 @@
-/* NEW WIDGET ANDING: <button> */
+/********************************/
+/* nine slice button - This is the default style used for all buttons.
+ * This style is fully scalable in 2 dimensions.  It supports normal and default buttons in 
+ * both active and disabled states, which includes 6 sets of sliced images.
+ ********************************/
+  
+  button {
+    -moz-binding			: url("chrome://global/skin/globalBindings.xml#nine-slice-button");
+    margin            : 2px;
+    border				    : 3px solid transparent;
+    min-width				  : 60px;
+    background-color  : transparent;
+    color					    : #1C1D1F;
+    -moz-user-focus   : normal !important;
+  }
+  
+  .button-text-mid {
+    font-family			    : charcoal, ms sans serif;
+    font-size 			    : 12px;
+    font-weight			    : normal;
+  }
+    
+  /* .......... focused state .......... */
+
+  button:focus {
+    border-color: #8C9EB5;
+    -moz-border-radius: 10px;
+  }
+    
+  /* .......... normal state .......... */
+  
+  .button-box-left {
+    width           : 9px;
+  }
+    
+  .button-left-top {
+    background			: url("chrome://global/skin/button-left-top.gif") no-repeat;
+    height          : 9px;
+  }
+
+  .button-left-mid {
+    background			: url("chrome://global/skin/button-left-mid.gif") repeat-y;
+  }
+
+  .button-left-btm {
+    background			  : url("chrome://global/skin/button-left-btm.gif") no-repeat;
+    height            : 8px;
+  }
+
+  .button-box-mid {
+    background-color  : #A5BABD;
+  }
+  
+  .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-box-right {
+    width           : 7px;
+  }
+  
+  .button-right-top {
+  	background			: url("chrome://global/skin/button-right-top.gif") no-repeat;
+  	height          : 9px;
+  }
+
+  .button-right-mid {
+  	background			: url("chrome://global/skin/button-right-mid.gif") repeat-y;
+  }
+
+  .button-right-btm {
+    background			  : url("chrome://global/skin/button-right-btm.gif") no-repeat;
+    height            : 8px;
+  }
+  
+  /* .......... active state .......... */
+
+  button:hover:active > .button-box-left > .button-left-top {
+    background-image    : url("chrome://global/skin/button-active-left-top.gif");
+   }
+
+  button:hover:active > .button-box-left > .button-left-mid {
+    background-image    : url("chrome://global/skin/button-active-left-mid.gif");
+  }
+
+  button:hover:active > .button-box-left > .button-left-btm {
+    background-image    : url("chrome://global/skin/button-active-left-btm.gif");
+  }
+
+  button:hover:active > .button-box-mid {
+    background-color    : #84969C;
+  }
+  
+  button:hover:active > .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 {
+  	background-image    : url("chrome://global/skin/button-active-mid-mid.gif");
+    color               : #ffffff;
+  }
+
+  button:hover:active > .button-box-mid > .button-mid-btm {
+    background-image    : url("chrome://global/skin/button-active-mid-btm.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-top {
+  	background-image    : url("chrome://global/skin/button-active-right-top.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-mid {
+  	background-image    : url("chrome://global/skin/button-active-right-mid.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-btm {
+    background-image    : url("chrome://global/skin/button-active-right-btm.gif");
+  }
+
+  /* .......... disabled state .......... */
+
+  button[disabled="true"], 
+  button[disabled="true"]:hover, 
+  button[disabled="true"]:hover:active {
+    color					: #595F61;
+  }
+
+  
+  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");
+   }
+
+  button:hover:active > .button-box-left > .button-left-mid[disabled="true"],
+  .button-left-mid[disabled="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-mid.gif");
+  }
+
+  button:hover:active > .button-box-left > .button-left-btm[disabled="true"],
+  .button-left-btm[disabled="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-btm.gif");
+  }
+
+  button:hover:active > .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-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-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-mid-btm[disabled="true"] {
+    background-image    : url("chrome://global/skin/button-dis-mid-btm.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-top[disabled="true"],
+  .button-right-top[disabled="true"] {
+  	background-image    : url("chrome://global/skin/button-dis-right-top.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-mid[disabled="true"],
+  .button-right-mid[disabled="true"] {
+  	background-image    : url("chrome://global/skin/button-dis-right-mid.gif");
+  }
+
+  button:hover:active > .button-box-right > .button-right-btm[disabled="true"],
+  .button-right-btm[disabled="true"] {
+    background-image    : url("chrome://global/skin/button-dis-right-btm.gif");
+  }
+  
+  /* .......... default normal state .......... */
+
+  .button-box-left[default="true"] {
+    width           : 10px;
+  }
+    
+  .button-left-top[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-left-top.gif");
+    height            : 10px;
+  }
+
+  .button-left-mid[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-left-mid.gif");
+  }
+
+  .button-left-btm[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-left-btm.gif");
+    height            : 9px;
+  }
+
+  .button-mid-top[default="true"] {
+  	background-image  : url("chrome://global/skin/button-def-mid-top.gif");
+  	height            : 4px;
+  }
+
+  .button-mid-mid[default="true"] {
+  	background-image  : url("chrome://global/skin/button-def-mid-mid.gif");
+  }
+
+  .button-mid-btm[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-mid-btm.gif");
+    height            : 5px;
+  }
+
+  .button-box-right[default="true"] {
+    width             : 8px;
+  }
+  
+  .button-right-top[default="true"] {
+  	background-image   : url("chrome://global/skin/button-def-right-top.gif");
+  	height             : 10px;
+  }
+
+  .button-right-mid[default="true"] {
+  	background-image  : url("chrome://global/skin/button-def-right-mid.gif");
+  }
+
+  .button-right-btm[default="true"] {
+    background-image   : url("chrome://global/skin/button-def-right-btm.gif");
+    height             : 9px;
+  }
+
+  /* .......... default active state .......... */
+
+  :hover:active > .button-box-left > .button-left-top[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-active-left-top.gif");
+  }
+
+  :hover:active > .button-box-left > .button-left-mid[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-active-left-mid.gif");
+  }
+
+  :hover:active > .button-box-left > .button-left-btm[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-active-left-btm.gif");
+  }
+
+  :hover:active > .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"] {
+  	background-image  : url("chrome://global/skin/button-def-active-mid-mid.gif");
+  }
+
+  :hover:active > .button-box-mid > .button-mid-btm[default="true"] {
+    background-image  : url("chrome://global/skin/button-def-active-mid-btm.gif");
+  }
+
+  :hover:active > .button-box-right > .button-right-top[default="true"] {
+  	background-image   : url("chrome://global/skin/button-def-active-right-top.gif");
+  }
+
+  :hover:active > .button-box-right > .button-right-mid[default="true"] {
+  	background-image  : url("chrome://global/skin/button-def-active-right-mid.gif");
+  }
+
+  :hover:active > .button-box-right > .button-right-btm[default="true"] {
+    background-image   : url("chrome://global/skin/button-def-active-right-btm.gif");
+  }
+  
+  /* .......... default disabled state (the same as normal disabled) .......... */
+
+  button[default="true"][disabled="true"] {
+    margin-top          : 3px;
+    margin-bottom       : 3px;
+  }
+
+  :hover:active > .button-box-left > .button-left-top[disabled="true"][default="true"],
+  .button-left-top[disabled="true"][default="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-top.gif");
+    height              : 9px;
+  }
+
+  .button-box-left[disabled="true"][default="true"] {
+    width               : 9px;
+  }
+
+  :hover:active > .button-box-left > .button-left-top[disabled="true"][default="true"],
+  .button-left-top[disabled="true"][default="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-top.gif");
+    height              : 9px;
+  }
+
+  :hover:active > .button-box-left > .button-left-mid[disabled="true"][default="true"],
+  .button-left-mid[disabled="true"][default="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-mid.gif");
+  }
+
+  :hover:active > .button-box-left > .button-left-btm[disabled="true"][default="true"],
+  .button-left-btm[disabled="true"][default="true"] {
+    background-image    : url("chrome://global/skin/button-dis-left-btm.gif");
+    height              : 8px;
+  }
+
+  :hover:active > .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"],
+  .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"],
+  .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"],
+  .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;
+  }
+
+  :hover:active > .button-box-right > .button-right-top[disabled="true"][default="true"],
+  .button-right-top[disabled="true"][default="true"] {
+  	background-image    : url("chrome://global/skin/button-dis-right-top.gif");
+    height              : 9px;
+  }
+
+  :hover:active > .button-box-right > .button-right-mid[disabled="true"][default="true"],
+  .button-right-mid[disabled="true"][default="true"] {
+  	background-image    : url("chrome://global/skin/button-dis-right-mid.gif");
+  }
+
+  :hover:active > .button-box-right > .button-right-btm[disabled="true"][default="true"],
+  .button-right-btm[disabled="true"][default="true"] {
+    background-image    : url("chrome://global/skin/button-dis-right-btm.gif");
+    height              : 8px;
+  }
 
 /** plain (raw) buttons, class="plain" **/
   button.plain, button.plain:hover, button.plain:hover:active,
@@ -10,8 +366,7 @@
   button.plain > .button-internal-box > .button-text-container > .button-text, 
   button.plain > .button-internal-box > .button-text-container > .button.text:hover:active,
   button.plain > .button-internal-box > .button-icon, 
-  button.plain > .button-internal-box > .button.icon:hover:active
-    {
+  button.plain > .button-internal-box > .button.icon:hover:active {
       -moz-binding		  : url(chrome://global/content/xulBindings.xml#buttonleft);
       border              : 0px !important;
       margin              : 0px;
@@ -30,173 +385,6 @@
 
 button.plain-extended {}
 
-
-/** Default Button Styles (apply to usage of <button> without 
- *  any applied class).
- **/
-
-/* outer frame */
-  button 
-    {
-	  -moz-binding			: url("chrome://global/skin/globalBindings.xml#three-slice-button");
-      background-color      : transparent;
-      border				: 3px solid transparent;
-      margin        : 2px;
-      color					: #1C1D1F;
-      min-width				: 60px;
-      -moz-user-focus: normal !important;
-    }
-
-  button:focus 
-    {
-      border-color: #73869C;
-      -moz-border-radius: 10px;
-    }
-    
-  button[disabled="true"], button[disabled="true"]:hover, button[disabled="true"]:hover:active
-    {
-      border				: 0px;
-      color					: #595F61;
-    }
-
-  .button-image-left {
-	background			: url(chrome://global/skin/button-left.gif) no-repeat;
-	width				: 9px;
-	height				: 19px;
-  }
-
-  .button-image-middle {
-	background			: url(chrome://global/skin/button-middle.gif) repeat-x;
-  }
-
-  .button-text-box {
-	text-align          : center;
-    vertical-align      : middle;
-    padding				: 0px;
-    font-size 			: 12px;
-    font-family			: charcoal, ms sans serif;
-    font-weight			: normal;
-    margin-right		: 2px;
-    margin-bottom		: 2px;
-  }
-
-  .button-image-right {
-	background			: url(chrome://global/skin/button-right.gif) no-repeat;
-	width				: 7px;
-	height				: 19px;
-  }
-
-  .button-top-spring {
-	height				: 2px;
-  }
-
-  .button-bottom-spring {
-	height				: 1px;
-  }
-  
-  button:hover:active {
-  	color				: #1C1D1F;
-  }
-  
-  button:hover:active > .button-image-left {
-	background			: url(chrome://global/skin/button-clicked-left.gif) no-repeat;
-  }
-
-  button:hover:active > .button-image-middle {
-	background			: url(chrome://global/skin/button-clicked-middle.gif) repeat-x;
-  }
-
-  button:hover:active > .button-image-right {
-	background			: url(chrome://global/skin/button-clicked-right.gif) no-repeat;
-  }
-
-  button[disabled="true"] > .button-image-left,
-  button[disabled="true"]:hover:active > .button-image-left {
-	background			: url(chrome://global/skin/button-disabled-left.gif) no-repeat;
-  }
-
-  button[disabled="true"] > .button-image-middle,
-  button[disabled="true"]:hover:active > .button-image-middle {
-	background			: url(chrome://global/skin/button-disabled-middle.gif) repeat-x;
-  }
-
-  button[disabled="true"] > .button-image-right,
-  button[disabled="true"]:hover:active > .button-image-right {
-	background			: url(chrome://global/skin/button-disabled-right.gif) no-repeat;
-  }
-
-
-/* Default Button States */
-
-  button[default="true"] {
-    margin        : 1px;
-  }
-
-  button[default="true"]:focus {
-    -moz-border-radius: 12px;
-  }
-
-  .button-image-left[default="true"] {
-	background	: url(chrome://global/skin/button-def-left.gif) no-repeat;
-	width: 10px;
-	height: 21px;
-  }
-
-  .button-image-middle[default="true"] {
-	background	: url(chrome://global/skin/button-def-middle.gif) repeat-x;
-  }
-
-  .button-image-right[default="true"] {
-	background	: url(chrome://global/skin/button-def-right.gif) no-repeat;
-	width: 8px;
-	height: 21px;
-  }
-
-  button:hover:active > .button-image-left[default="true"] {
-	background	: url(chrome://global/skin/button-def-clicked-left.gif) no-repeat;
-  }
-
-  button:hover:active > .button-image-middle[default="true"] {
-	background	: url(chrome://global/skin/button-def-clicked-middle.gif) repeat-x;
-  }
-
-  button:hover:active > .button-image-right[default="true"] {
-	background	: url(chrome://global/skin/button-def-clicked-right.gif) no-repeat;
-  }
-
-  .button-image-left[default="true"][disabled="true"],
-  button[default="true"][disabled="true"]:hover:active > .button-image-left {
-	background	: url(chrome://global/skin/button-def-disabled-left.gif) no-repeat;
-  }
-
-  .button-image-middle[default="true"][disabled="true"],
-  button[default="true"][disabled="true"]:hover:active > .button-image-middle {
-	background	: url(chrome://global/skin/button-def-disabled-mid.gif) repeat-x;
-  }
-
-  .button-image-right[default="true"][disabled="true"],
-  button[default="true"][disabled="true"]:hover:active > .button-image-right {
-	background	: url(chrome://global/skin/button-def-disabled-right.gif) no-repeat;
-  }
-  
-/* text wrapping frame (hack because <text> does not support alignment) */
-  .button-text-container
-    {
-      text-align          : center;
-      vertical-align      : middle;
-    }
-
-/* text frame */
-  .button-text 
-    {
-      padding             : 0px 2px 0px 2px;
-    }
-  
-  button[orient="vertical"] > .button-internal-box > .button-text-container > .button-text
-    {
-      padding             : 2px 2px 0px 2px;
-    }
-  
 /** Styles for 'dialog' buttons (usually any command button in a dialog)
  *  This class gives buttons 10px of padding on each side to increase the
  *  strike area and make buttons with small amounts of text (e.g. 'OK') 
@@ -205,13 +393,11 @@ button.plain-extended {}
 
 /* internal frame */
   .button-dialog > .button-internal-box,
-  .button-dialog:hover > .button-internal-box
-    {
+  .button-dialog:hover > .button-internal-box {
       padding             : 2px 10px 2px 10px;
     }
   
-  .button-dialog:hover:hover:active > .button-internal-box 
-    {
+  .button-dialog:hover:hover:active > .button-internal-box  {
       padding             : 3px 9px 1px 11px;
     }
 
@@ -219,28 +405,23 @@ button.plain-extended {}
  *  editor's formatting toolbar or toolbars wanting a button similar to a command
  *  button but without an initial outset frame.
  **/ 
-  .button-borderless 
-    {
+  .button-borderless  {
       border              : 1px solid #CCCCCC;
     }
   
-  .button-borderless:hover
-    {
+  .button-borderless:hover {
       border              : 1px solid #000000;
     }
     
-  .button-borderless > .button-internal-box 
-    {
+  .button-borderless > .button-internal-box  {
       border              : 1px solid #CCCCCC;
     }
   
-  .button-borderless:hover > .button-internal-box 
-    {
+  .button-borderless:hover > .button-internal-box  {
       border              : 1px outset #CCCCCC;
     }
   
-  .button-borderless:hover:active > .button-internal-box 
-    {
+  .button-borderless:hover:active > .button-internal-box  {
       border              : 1px inset #CCCCCC;
     }
 
@@ -258,21 +439,18 @@ button.plain-extended {}
  * Reorder buttons 
  **/
    
-  .reorder-up
-    {
+  .reorder-up {
       min-width           : 0px;
       list-style-image    : url("chrome://global/skin/simple-arrow-up.gif");
     }    
     
-  .reorder-down
-    {
+  .reorder-down {
       min-width           : 0px;
       list-style-image    : url("chrome://global/skin/simple-arrow-down.gif");
     }    
     
   .reorder-up > .button-internal-box > .button-icon,
-  .reorder-down > .button-internal-box > .button-icon
-    {
+  .reorder-down > .button-internal-box > .button-icon {
       margin              : 0;
       padding             : 0;
     }

themes/modern/global/checkbox.css

@@ -7,8 +7,8 @@
     {
       border        : 2px solid transparent;
       margin			  : 0px 2px 0px 2px;
-      padding-left: 1px;
-      padding-right: 1px;
+      padding-left  : 1px;
+      padding-right : 1px;
     }
 
   checkbox > .internal-box
@@ -34,7 +34,8 @@
       list-style-image: url(chrome://global/skin/check-cb-check.gif);
     }
     
-  checkbox[checked="true"][disabled="true"] > .internal-box > .checkmark-box > .checkbox-check
+  checkbox[checked="true"][disabled="true"] > .internal-box > .checkmark-box > .checkbox-check,
+  checkbox[checked="true"][disabled="true"]:hover:active > .internal-box > .checkmark-box > .checkbox-check
     {
       list-style-image: url(chrome://global/skin/check-cb-check-disabled.gif);
     }  
@@ -44,7 +45,8 @@
       list-style-image: url(chrome://global/skin/check-cb-pressed.gif);  
     }
   
-  checkbox[disabled="true"] > .internal-box > .checkmark-box > .checkbox-check
+  checkbox[disabled="true"] > .internal-box > .checkmark-box > .checkbox-check,
+  checkbox[disabled="true"]:hover:active > .internal-box > .checkmark-box > .checkbox-check
     {
   	  list-style-image: url(chrome://global/skin/check-cb-disabled.gif);  
     }
@@ -66,13 +68,14 @@
       padding: 1px;
     }
 
-  checkbox[disabled="true"][value] > .internal-box > html 
+  checkbox[disabled="true"][value] > .internal-box > html,
+  checkbox[disabled="true"][value]:hover:active > .internal-box > html
     {
       color: #999999;
     }
     
   checkbox:focus
     {
-      border-color: #73869C;
+      border-color        : #8C9EB5;
       -moz-border-radius  : 4px 5px 4px 5px;
     }

themes/modern/global/menubutton.css

@@ -1,5 +1,8 @@
-
-/* outermost frame */
+/*********************************
+ * Regular menubutton
+ *   Shows a caption and brings up a popup menu which executes a command.
+ *********************************/    
+   
   menubutton
     {
       border              : 1px solid #000000;
@@ -20,66 +23,42 @@
       vertical-align      : middle;
     }
     
-  menubutton:active > .menubutton-internal-box,
-  menubutton[open="true"] > .menubutton-internal-box
-    {
-      /*border              : 1px inset #CCCCCC;*/
-      padding             : 2px 1px 0px 3px;
-    }
-
   .menubutton-single-icon
     {
       margin-left		  : 3px;
     }
-    
-/** "Dual Functionality" menubutton
- *  Has a popup spawning button and a command invoking button, e.g. back/forward
- *  class="menubutton-dual"
- **/    
+
+/*********************************
+ * "Dual Functionality" menubutton
+ *   Has a popup spawning button and a command invoking button, e.g. back/forward
+ *   class="menubutton-dual"
+ *********************************/    
   
-/* inner button */
-  menubutton.menubutton-dual > .menubutton-dual-button,
-  menubutton.menubutton-dual:hover > .menubutton-dual-button,
-  menubutton.menubutton-dual:active > .menubutton-dual-button
+  .menubutton-dual,
+  .menubutton-dual > .menubutton-internal-box,
+  .menubutton-dual:hover > .menubutton-dual-button,
+  .menubutton-dual:active > .menubutton-dual-button
     {
       border              : none;
       margin              : 0px;
       -moz-border-radius  : 0px;
     }
 
-  menubutton.menubutton-dual[open="true"] > .menubutton-dual-button > .button-internal-box
+  .menubutton-dual-dropmarker-box
     {
-      border              : 1px inset #CCCCCC;
-      padding             : 3px 1px 1px 3px;  
-    }
-    
-/* inner dropmarker */
-  menubutton.menubutton-dual > .menubutton-dropmarker
-    {
-      border              : 1px outset #CCCCCC;
       list-style-image    : url("chrome://global/skin/simple-arrow-down.gif");
-      padding             : 0px 2px 0px 2px;
     }
     
-  menubutton.menubutton-dual[disabled="true"] > .menubutton-dropmarker
-    {
-      list-style-image    : url("chrome://global/skin/simple-arrow-down-disabled.gif");
-    }
-
-  menubutton.menubutton-dual[open="true"] > .menubutton-dropmarker
-    {
-      border              : 1px inset #CCCCCC;
-      padding             : 1px 1px 0 3px; /* negatives not allowed -LDB */
-    }
-
-  menubutton.menubutton-dual > menupopup
+  .menubutton-dual > menupopup
     {
       min-width           : 0px;
     }
     
-/** Icon only menubutton.menubutton-duals
- *  class="menubutton.menubutton-dual-icon"
- **/
+/**************
+ * Icon only menubutton.menubutton-duals
+ * class="menubutton.menubutton-dual-icon"
+ ***************/
+ 
   .menubutton.menubutton-dual-icon 
     {
       border              : 1px solid #000000;

themes/modern/global/menulist.css

@@ -1,80 +1,208 @@
+/********************************/
+/* nine slice menulist - This is the default style used for all menulists.
+ * This style is fully scalable in 2 dimensions.  It supports menulists in
+ * both active and disabled states, which includes 3 sets of sliced images.
+ ********************************/
 
-/**
- * XXX - The style rules in this file are very old and very bad.
- *       They need to be given a similar upgrade as classic-win has had.
- **/
- 
-/* NEW WIDGET LANDING: <menulist> popup */
+  menulist {
+    -moz-binding		  : url(chrome://global/skin/globalBindings.xml#nine-slice-menulist);
+    margin			      : 0px 1px 0px 1px;
+    border            : 3px solid transparent;
+    padding           : 0px;
+  }
 
-/* outer frame */
-  menulist 
-    {
-      -moz-binding		  : url(chrome://global/skin/globalBindings.xml#menulist);
-      padding             : 0px;
-      margin			  : 3px 4px 3px 4px;
-      font-size 		  : 10px;
-      font-family		  : geneva, arial;
-    }
+  .menulist-text-mid {
+    font-family		    : charcoal, ms sans serif;
+    font-size 		    : 12px;
+    color             : #000000;
+    padding-right     : 2px;
+  }
 
-  .menulist-text-box
-    {
-   	  margin-top		  : 2px;
-   	  margin-right		  : 2px;
-    }
+  .menulist-dropmarker {
+    list-style-image  : url("chrome://global/skin/menulist-arrow.gif");
+    width				      : 9px;
+    height			      : 6px;
+  }
 
-  .menulist-spring-left 
-  	{
-  	  background		  : url(chrome://global/skin/menulist-leftcap.gif) no-repeat;	
-	  height			  : 18px;
-	  width				  : 8px;
-  	}
+  /* .......... focused state .......... */
 
-  .menulist-box-middle
-    {
-      background		  : url(chrome://global/skin/menulist-middle.gif) repeat-x;
-      height			  : 18px;
-    }
+  menulist:focus {
+    border-color        : #8C9EB5;
+    -moz-border-radius  : 10px 7px 11px 10px;
+  }
+
+  /* .......... normal state .......... */
+
+  .menulist-box-left {
+    width           : 8px;
+  }
+    
+  .menulist-left-top {
+    background			: url("chrome://global/skin/menulist-left-top.gif") no-repeat;
+    height          : 10px;
+  }
+
+  .menulist-left-mid {
+    background			: url("chrome://global/skin/menulist-left-mid.gif") repeat-y;
+  }
+
+  .menulist-left-btm {
+    background			  : url("chrome://global/skin/menulist-left-btm.gif") no-repeat;
+    height            : 7px;
+  }
+
+  .menulist-box-mid {
+    background-color  : #A5BABD;
+  }
   
-  .menulist-dropmarker-right
-    {
-      background		  : url(chrome://global/skin/menulist-rightcap.gif) no-repeat;
-      height			  : 18px;
-      width				  : 22px;
-    }
+  .menulist-mid-top {
+  	background			: url("chrome://global/skin/menulist-mid-top.gif") repeat-x;
+  	height          : 3px;
+    vertical-align  : top;
+  }
 
-/* Clicked States */
+  .menulist-mid-mid {
+  	background			  : url("chrome://global/skin/menulist-mid-mid.gif") repeat-x;
+  	text-align        : center;
+    vertical-align    : middle;
+  }
 
-  menulist:hover:active > .menulist-spring-left, menulist[open="true"]> .menulist-spring-left
-  	{
-  	  background		  : url(chrome://global/skin/menulist-clicked-leftcap.gif) no-repeat;	
-  	}
+  .menulist-mid-btm {
+    background			  : url("chrome://global/skin/menulist-mid-btm.gif") repeat-x;
+    height            : 4px;
+    vertical-align    : bottom;
+  }
 
-  menulist:hover:active > .menulist-box-middle, menulist[open="true"]> .menulist-box-middle
-    {
-      background		  : url(chrome://global/skin/menulist-clicked-middle.gif) repeat-x;
-    }
+  .menulist-box-right {
+    width           : 22px;
+  }
   
-  menulist:hover:active > .menulist-dropmarker-right, menulist[open="true"] > .menulist-dropmarker-right
-    {
-      background		  : url(chrome://global/skin/menulist-clicked-rightcap.gif) no-repeat;
-    }
+  .menulist-right-mid {
+  	background			: url("chrome://global/skin/menulist-right-mid.gif") repeat-y;
+  }
 
-/* Disabled States */
+  .menulist-right-mid2 {
+  	background			: url("chrome://global/skin/menulist-right-top.gif") no-repeat;
+    padding-left    : 3px;
+    padding-right   : 2px;
+    padding-top     : 6px;
+    text-align      : center;
+    vertical-align  : middle;
+  }
 
-  .menulist-spring-left[disabled="true"], menulist:hover:active > .menulist-spring-left[disabled="true"]
-  	{
-  	  background		  : url(chrome://global/skin/menulist-disabled-leftcap.gif) no-repeat;	
-  	}
+  .menulist-right-btm {
+    background			  : url("chrome://global/skin/menulist-right-btm.gif") no-repeat;
+    height            : 7px;
+  }
 
-  .menulist-box-middle[disabled="true"], menulist:hover:active > .menulist-box-middle[disabled="true"]
-    {
-      background		  : url(chrome://global/skin/menulist-disabled-middle.gif) repeat-x;
-    }
+  /* .......... active state .......... */
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-top,
+  menulist[open="true"] > .menulist-box-left > .menulist-left-top {
+    background-image   : url("chrome://global/skin/menulist-active-left-top.gif");
+  }
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-mid,
+  menulist[open="true"] > .menulist-box-left > .menulist-left-mid {
+    background-image   : url("chrome://global/skin/menulist-active-left-mid.gif");
+  }
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-btm,
+  menulist[open="true"] > .menulist-box-left > .menulist-left-btm {
+    background-image   : url("chrome://global/skin/menulist-active-left-btm.gif");
+  }
+
+  menulist:hover:active > .menulist-box-mid,
+  menulist[open="true"] > .menulist-box-mid {
+    background-color  : #84969C;
+  }
   
-  .menulist-dropmarker-right[disabled="true"], menulist:hover:active > .menulist-dropmarker-right[disabled="true"]
-    {
-      background		  : url(chrome://global/skin/menulist-disabled-rightcap.gif) no-repeat;
-    }
+  menulist:hover:active > .menulist-box-mid > .menulist-mid-top,
+  menulist[open="true"] > .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 {
+  	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 {
+    color: #ffffff;
+  }
+
+  menulist:hover:active > .menulist-box-mid > .menulist-mid-btm,
+  menulist[open="true"] > .menulist-box-mid > .menulist-mid-btm {
+    background-image  : url("chrome://global/skin/menulist-active-mid-btm.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-mid,
+  menulist[open="true"] > .menulist-box-right > .menulist-right-mid {
+  	background-image  : url("chrome://global/skin/menulist-active-right-mid.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2,
+  menulist[open="true"] > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2 {
+  	background-image  : url("chrome://global/skin/menulist-active-right-top.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-btm,
+  menulist[open="true"] > .menulist-box-right > .menulist-right-btm {
+    background-image  : url("chrome://global/skin/menulist-active-right-btm.gif");
+  }
+
+  /* .......... disabled state .......... */
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-top[disabled="true"],
+  .menulist-left-top[disabled="true"] {
+    background-image   : url("chrome://global/skin/menulist-dis-left-top.gif");
+  }
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-mid[disabled="true"],
+  .menulist-left-mid[disabled="true"] {
+    background-image   : url("chrome://global/skin/menulist-dis-left-mid.gif");
+  }
+
+  menulist:hover:active > .menulist-box-left > .menulist-left-btm[disabled="true"],
+  .menulist-left-btm[disabled="true"] {
+    background-image   : url("chrome://global/skin/menulist-dis-left-btm.gif");
+  }
+
+  menulist:hover:active > .menulist-box-mid[disabled="true"],
+  .menulist-box-mid[disabled="true"] {
+    background-color  : #84969C;
+  }
+  
+  menulist:hover:active > .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-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-mid-btm[disabled="true"] {
+    background-image  : url("chrome://global/skin/menulist-dis-mid-btm.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-mid[disabled="true"],
+  .menulist-right-mid[disabled="true"] {
+  	background-image  : url("chrome://global/skin/menulist-dis-right-mid.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2[disabled="true"],
+  .menulist-right-mid2[disabled="true"] {
+  	background-image  : url("chrome://global/skin/menulist-dis-right-top.gif");
+  }
+
+  menulist:hover:active > .menulist-box-right > .menulist-right-btm[disabled="true"],
+  .menulist-right-btm[disabled="true"] {
+    background-image  : url("chrome://global/skin/menulist-dis-right-btm.gif");
+  }
 
 /** rules for EDITABLE menulists (aka 'comboboxes'). 
  **/
@@ -119,13 +247,14 @@
     }
 
 /* rules for popups and separators associated with menulists */
-  menulist > menupopup 
-    {
-      border			  : 1px solid #313948;
-      min-width           : 0px;
-      padding             : 0px;
-      background-color	  : #C2D0D0;
-    }
+  menulist > menupopup {
+    border              : 1px solid #313948;
+    padding             : 0px;
+    min-width           : 0px;
+    background-color	  : #C2D0D0;
+    font-family		      : charcoal, ms sans serif;
+    font-size 		      : 12px;
+  }
     
   menulist > menupopup > .popup-internal-box
     {
@@ -140,10 +269,12 @@
 
   menulist > menupopup > menuitem 
     {
-      padding             : 0px;
+      padding-right       : 12px;
+      padding-top         : 1px;
+      padding-bottom      : 1px;
       min-width           : 0px;
       max-width           : none;
-      color				  : #000000;
+      color				        : #000000;
     }
 
   menulist > menupopup > menuitem[menuactive="true"]
@@ -162,10 +293,3 @@
       list-style-image    : url(chrome://global/skin/menu-check-hover.gif);
     }
   
- menulist:focus
-   {
-      border              : 3px solid #73869C;
-      margin			  : 0px 1px 0px 1px;
-      -moz-border-radius  : 10px 9px 11px 10px;
-   }
-  

themes/modern/global/radio.css

@@ -6,15 +6,17 @@
     {
       border: 2px solid transparent;
       margin: 0px 3px 0px 3px;
+      -moz-user-focus: normal !important;
     }
 
   radio > .internal-box
     {
+      -moz-user-focus: ignore;
     }
 
-  #radio:focus 
+  radio:focus 
     {
-      border-color: #73869C;
+      border-color: #8C9EB5;
       -moz-border-radius  : 4px 5px 4px 5px;
     }
     
@@ -87,3 +89,8 @@
       color: #999999;
     }
   
+    radiogroup 
+    {
+      -moz-user-focus : ignore;
+    }
+  

themes/modern/global/textfield.css

@@ -7,10 +7,9 @@
 /* outer frame */
   textfield
     {
+      margin              : 1px;
+      border              : 3px solid transparent;
       padding             : 0px;
-      border              : 0px;
-      margin              : 4px;
-      background-color    : #FFFFFF;
       font                : inherit;
       color               : #000000;
       cursor              : text;
@@ -23,8 +22,7 @@
   
   textfield[focused="true"]
     {
-      border              : 3px solid #73869C;
-      margin              : 1px;
+      border-color        : #8C9EB5;
       -moz-border-radius  : 6px;
     }
    
@@ -45,7 +43,7 @@
       border              : 1px inset #B4C3D4;
       padding             : 1px 2px 1px 2px;
       cursor              : text;
-      background-color    : inherit;
+      background-color    : #FFFFFF;
       color               : inherit;
     }
   

xpfe/global/resources/content/xul.css

@@ -16,6 +16,10 @@
   display: block;
 }
 
+*, *[disabled="true"] {
+  -moz-user-focus: ignore;
+}
+
 /**
  * Hide the content, but don't destroy the frames. 
  * DO NOT USE "_collapsed" IN YOUR XUL!