From bf01395d3853c1399faae7142ef2dc40fd7fd294 Mon Sep 17 00:00:00 2001
From: "ben%netscape.com"
 <ben%netscape.com@18797224-902f-48f8-a5cc-f745e15eee43>
Date: Thu, 23 Mar 2000 02:09:03 +0000
Subject: [PATCH] more new widget styles

git-svn-id: svn://10.0.0.236/trunk@63811 18797224-902f-48f8-a5cc-f745e15eee43
---
 .../content/mac/platformDialogOverlay.xul     |   8 +-
 .../content/unix/platformDialogOverlay.xul    |   8 +-
 .../content/win/platformDialogOverlay.xul     |   8 +-
 mozilla/xpfe/global/resources/skin/button.css | 253 ++++++++++++------
 .../xpfe/global/resources/skin/checkbox.css   |  77 +++++-
 mozilla/xpfe/global/resources/skin/global.css |  72 -----
 mozilla/xpfe/global/resources/skin/radio.css  |  75 ++++--
 mozilla/xpfe/global/resources/skin/xul.css    |  16 +-
 .../global/resources/skin/xulBindings.xml     |  64 +++--
 9 files changed, 345 insertions(+), 236 deletions(-)

diff --git a/mozilla/xpfe/global/resources/content/mac/platformDialogOverlay.xul b/mozilla/xpfe/global/resources/content/mac/platformDialogOverlay.xul
index 816e5b1b912..94c9c83da08 100644
--- a/mozilla/xpfe/global/resources/content/mac/platformDialogOverlay.xul
+++ b/mozilla/xpfe/global/resources/content/mac/platformDialogOverlay.xul
@@ -11,10 +11,10 @@
 
   <box id="okCancelButtons" align="horizontal">
     <spring flex="1"/>
-    <button id="Button3" value="&cancelButton.label;" style="display: none;" oncommand="doButton3();"/>
-    <button id="Button2" value="&cancelButton.label;" style="display: none;" oncommand="doButton2();"/>
-    <button id="cancel" value="&cancelButton.label;" oncommand="doCancelButton();"/>
-    <button id="ok" default="true" value="&okButton.label;" oncommand="doOKButton();"/>
+    <button class="dialog" id="Button3" value="&cancelButton.label;" style="display: none;" oncommand="doButton3();"/>
+    <button class="dialog" id="Button2" value="&cancelButton.label;" style="display: none;" oncommand="doButton2();"/>
+    <button class="dialog" id="cancel" value="&cancelButton.label;" oncommand="doCancelButton();"/>
+    <button class="dialog right" id="ok" default="true" value="&okButton.label;" oncommand="doOKButton();"/>
   </box>
 
   <keyset id="keyset">
diff --git a/mozilla/xpfe/global/resources/content/unix/platformDialogOverlay.xul b/mozilla/xpfe/global/resources/content/unix/platformDialogOverlay.xul
index 220b20af7c9..ae56049e1eb 100644
--- a/mozilla/xpfe/global/resources/content/unix/platformDialogOverlay.xul
+++ b/mozilla/xpfe/global/resources/content/unix/platformDialogOverlay.xul
@@ -11,10 +11,10 @@
 
   <box id="okCancelButtons" align="horizontal">
 		<spring flex="1"/>
-    <button id="ok" value="&okButton.label;" default="true" class="right" onclick="doOKButton()"/>	
-    <button id="Button2" value="&cancelButton.label;" style="display:none;" onclick="doButton2()"/>	
-    <button id="Button3" value="&cancelButton.label;" style="display:none;" onclick="doButton3()"/>	
-    <button id="cancel" value="&cancelButton.label;" onclick="doCancelButton()"/>
+    <button class="right dialog" id="ok" value="&okButton.label;" default="true" onclick="doOKButton()"/>	
+    <button class="dialog" id="Button2" value="&cancelButton.label;" style="display:none;" onclick="doButton2()"/>	
+    <button class="dialog" id="Button3" value="&cancelButton.label;" style="display:none;" onclick="doButton3()"/>	
+    <button class="dialog" id="cancel" value="&cancelButton.label;" onclick="doCancelButton()"/>
     <spring flex="1"/>
   </box>
 	
diff --git a/mozilla/xpfe/global/resources/content/win/platformDialogOverlay.xul b/mozilla/xpfe/global/resources/content/win/platformDialogOverlay.xul
index 220b20af7c9..ae56049e1eb 100644
--- a/mozilla/xpfe/global/resources/content/win/platformDialogOverlay.xul
+++ b/mozilla/xpfe/global/resources/content/win/platformDialogOverlay.xul
@@ -11,10 +11,10 @@
 
   <box id="okCancelButtons" align="horizontal">
 		<spring flex="1"/>
-    <button id="ok" value="&okButton.label;" default="true" class="right" onclick="doOKButton()"/>	
-    <button id="Button2" value="&cancelButton.label;" style="display:none;" onclick="doButton2()"/>	
-    <button id="Button3" value="&cancelButton.label;" style="display:none;" onclick="doButton3()"/>	
-    <button id="cancel" value="&cancelButton.label;" onclick="doCancelButton()"/>
+    <button class="right dialog" id="ok" value="&okButton.label;" default="true" onclick="doOKButton()"/>	
+    <button class="dialog" id="Button2" value="&cancelButton.label;" style="display:none;" onclick="doButton2()"/>	
+    <button class="dialog" id="Button3" value="&cancelButton.label;" style="display:none;" onclick="doButton3()"/>	
+    <button class="dialog" id="cancel" value="&cancelButton.label;" onclick="doCancelButton()"/>
     <spring flex="1"/>
   </box>
 	
diff --git a/mozilla/xpfe/global/resources/skin/button.css b/mozilla/xpfe/global/resources/skin/button.css
index 5ca0ff9b5ff..0614079b2f2 100644
--- a/mozilla/xpfe/global/resources/skin/button.css
+++ b/mozilla/xpfe/global/resources/skin/button.css
@@ -1,95 +1,184 @@
-/* NEW WIDGET LANDING: <button> */
-button {
-  border: 1px solid #CCCCCC;
-  -moz-border-radius: 3px 2px 2px 3px;
-  margin: 3px 5px 3px 5px;
-  min-width: 5em;
-}
+/* NEW WIDGET ANDING: <button> */
 
-button.small > .internal-box {
-  vertical-align: middle;
-  border: 1px outset #CCCCCC;
-  padding: 2px; 
-}
+/** Default Button Styles (apply to usage of <button> without 
+ *  any applied class).
+ **/
 
-button > .internal-box {
-  vertical-align: middle;
-  border: 1px outset #CCCCCC;
-  padding: 2px 10px 2px 10px; 
-}
+/* outer frame */
+  button 
+    {
+      border              : 1px solid #CCCCCC;
+      -moz-border-radius  : 3px 2px 2px 3px;
+      margin              : 1px 5px 2px 5px;
+    }
 
-button:active {
-  border: 1px solid #000000;
-}
+  button:hover 
+    {
+      border              : 1px solid #000000;
+    }
 
-/* button:active rules */
-button.small:active > .internal-box {
-  border: 1px inset #CCCCCC;
-  padding: 3px 1px 1px 3px; 
-}
+  button:hover:active
+    {
+      border              : 1px solid #000000;
+    }
+  
+  button[disabled="true"],
+  button[disabled="true"]:hover,
+  button[disabled="true"]:active 
+    {
+      border              : 1px solid #CCCCCC;
+    }
+    
+/* internal frame */
+  button > .internal-box 
+    {
+      vertical-align      : center;
+      text-align          : center;
+      border              : 1px outset #CCCCCC;
+      padding             : 2px;
+    }
 
-button:active > .internal-box {
-  border: 1px inset #CCCCCC;
-  padding: 3px 9px 1px 11px; 
-}
+  button:active > .internal-box 
+    {
+      border              : 1px inset #CCCCCC;
+      padding             : 3px 1px 1px 3px;  
+    }
+  
+  button[disabled="true"] > .internal-box,
+  button[disabled="true"]:hover > .internal-box,
+  button[disabled="true"]:active > .internal-box 
+    {
+      border              : 1px solid gray;
+      color               : gray;
+      padding             : 2px;
+    }
 
-button:hover {
-  border: 1px solid #000000;
-}
+/* text wrapping frame (hack because <text> does not support alignment) */
+  button > .internal-box > .text-container
+    {
+      text-align          : center;
+      vertical-align      : middle;
+    }
 
-/* disabled rules */
-button[disabled]:hover, 
-button[disabled]:active {
-  border: 1px solid #CCCCCC;
-}
+/* text frame */
+  button > .internal-box > .text-container > text 
+    {
+      padding             : 0px 2px 0px 2px;
+    }
+  
+  button[orient="vertical"] > .internal-box > .text-container > text
+    {
+      padding             : 2px 2px 0px 2px;
+    }
 
-button[disabled] > .internal-box,
-button[disabled]:hover > .internal-box,
-button[disabled]:active > .internal-box {
-  border: 1px solid #999999;
-  color: #999999;
-  padding: 2px 10px 2px 10px; 
-}
+/** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs. 
+ *  To activate, set 'default' attribute on button.
+ **/
+ 
+/* outer frame */  
+  button[default] 
+    {
+      /* XXX this is a HACK until 'orient' is supported in CSS! XXX */
+      /* strictly speaking not necessary because default for buttonright is 
+       * to lay image out horizontally, but leaving here as a reminder to
+       * implement this feature */
+      behavior            : url(resource:/chrome/xulBindings.xml#buttonright);
+      font-weight         : bold;
+	    list-style-image    : url("chrome://global/skin/return.gif");
+    }
+    
+/** 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') 
+ *  look less silly.
+ **/
 
-/* align text in standard buttons to center in the available space */
-button > .internal-box > .text-container,
-button.right > .internal-box > .text-container,
-button.left > .internal-box > .text-container {
-  text-align: center;
-}
+/* internal frame */
+  button.dialog > .internal-box
+    {
+      padding             : 2px 10px 2px 10px;
+    }
+  
+  button.dialog:hover:active > .internal-box 
+    {
+      padding             : 3px 9px 1px 11px;
+    }
 
-button.top > .internal-box > .text-container,
-button.bottom > .internal-box > .text-container {
-  vertical-align: middle;
-}
+/** Styles for grey toolbar buttons. These buttons are used in places like
+ *  editor's formatting toolbar or toolbars wanting a button similar to a command
+ *  button but without an initial outset frame.
+ **/ 
+  button.borderless > .internal-box 
+    {
+      border              : 1px solid #CCCCCC;
+    }
+  
+  button.borderless:hover > .internal-box 
+    {
+      border              : 1px outset #CCCCCC;
+    }
+  
+  button.borderless:active > .internal-box 
+    {
+      border              : 1px inset #CCCCCC;
+    }
 
-/* special classes for buttons where the text is aligned to one side */
-button.text-left {
-  text-align: left;
-}
+/** Styles for the largest type of toolbar buttons. In the Seamonkey implementation, 
+ *  these are only used in the navigation toolbar in the navigator package.
+ **/
+ 
+  /* outer frame */
+  button.large-toolbar 
+    {
+      background-repeat   : no-repeat;
+      background-position : 50% 0px;
+      background-color    : transparent;
+      background-image    : url("chrome://global/skin/button32-bg.gif");
+      color               : #CCFFFF;
+      min-width           : 36px;
+      min-height          : 36px;
+      margin              : 6px 6px 1px 1px;
+      font-size           : smaller;
+      border              : none;
+    }
+    
+  button.large-toolbar:hover 
+    {
+      background-image    : url("chrome://global/skin/button32-bg-hover.gif");
+      border              : none;
+    } 
 
-button.text-right {
-  text-align: right;
-}
+  button.large-toolbar:active
+    {
+      margin              : 7px 5px 0px 2px;
+      border              : none;
+    }
 
-/* button text formatting rules */
-button > .internal-box > .text-container > text,
-button.left > .internal-box > .text-container > text,
-button.right > .internal-box > .text-container > text {
-  padding: 0px 0px 0px 0px;
-}
-
-button.top > .internal-box > .text-container > text,
-button.bottom > .internal-box > .text-container > text {
-  padding: 2px 0px 2px 0px;
-}
-
-button[default] {
-  behavior: url(resource:/chrome/xulBindings.xml#buttonright);
-  font-weight: bold;
-	list-style-image: url("chrome://global/skin/return.gif");
-}
-
-button[default] > .internal-box > image {
-  margin-left: 3px;
-}
\ No newline at end of file
+  button.large-toolbar[disabled="true"],
+  button.large-toolbar[disabled="true"]:hover,
+  button.large-toolbar[disabled="true"]:active
+    {
+      background-image    : url("chrome://global/skin/button32-bg-disabled.gif");
+      margin              : 6px 6px 1px 1px;
+      border              : none;
+    }
+    
+/* internal frame */
+  button.large-toolbar[disabled="true"] > .internal-box,
+  button.large-toolbar[disabled="true"]:hover > .internal-box,
+  button.large-toolbar[disabled="true"]:active > .internal-box
+    {
+      border              : none;
+    }
+      
+  button.large-toolbar > .internal-box,
+  button.large-toolbar:hover > .internal-box,
+  button.large-toolbar:active > .internal-box
+    {
+      border              : none;
+    }
+    
+  button.large-toolbar > .internal-box > .text-container 
+    {
+      display             : none;
+    }
\ No newline at end of file
diff --git a/mozilla/xpfe/global/resources/skin/checkbox.css b/mozilla/xpfe/global/resources/skin/checkbox.css
index d199b6f5dcb..07c52a9854c 100644
--- a/mozilla/xpfe/global/resources/skin/checkbox.css
+++ b/mozilla/xpfe/global/resources/skin/checkbox.css
@@ -1,36 +1,85 @@
-/* NEW WIDGET LANDING: <checkbox> */
+/* stylesheet for XUL <checkbox> element */
+
+/* default checkbox for dialogs */
 checkbox {
-}
-checkbox[checked="true"] {
-  list-style-image: url(chrome://global/skin/check-check.gif);
+  margin: 3px 5px 3px 5px;
 }
 
 checkbox > .internal-box > .checkmark-box {
   border: 1px solid #CCCCCC;
+  -moz-border-radius: 3px 2px 2px 3px;
 }
 checkbox > .internal-box > .checkmark-box > image {
   border: 1px outset #CCCCCC;
   width: 8px;
   height: 8px;
-}
-checkbox > .internal-box > html {
-  margin-left: 5px;
-  /*border: 1px solid #CCCCCC;*/
+  -moz-border-radius: 3px 2px 2px 3px;
 }
 
+checkbox[checked="true"] > .internal-box > .checkmark-box > image {
+  list-style-image: url(chrome://global/skin/check-check.gif);
+}
+
+checkbox[value] > .internal-box > html,
+checkbox.iconic > .internal-box > .icon {
+  margin-left: 4px;
+  padding: 0px;
+}
+
+checkbox.iconic > .internal-box > html {
+  margin-left: 4px;
+}
 
-/* mouseover rules */
 checkbox:hover > .internal-box > .checkmark-box {
   border: 1px solid #000000;
 }
 
-/* mousedown rules */
+checkbox:hover > .internal-box > .checkmark-box > image {
+  -moz-border-radius: 0px;
+}
+
 checkbox:hover:active > .internal-box > .checkmark-box > image {
   border: 1px inset #CCCCCC;
 }
 
-/* focus rules 
-checkbox:focus > .internal-box > html {
-  border: 1px dotted #000000;
-}*/
+/* checkbox for trees/lists */
+checkbox.tree {
+  margin: 1px 5px 1px 5px;
+}
 
+checkbox.tree > .internal-box > .checkmark-box {
+  border: 1px solid #000000;
+  background-color: #CCCCCC;
+  -moz-border-radius: 3px 2px 2px 3px;
+}
+
+checkbox.tree > .internal-box > .checkmark-box > image {
+  border: 1px solid inherit;
+  width: 8px;
+  height: 8px;
+  -moz-border-radius: 0px;
+}
+
+checkbox.tree[checked="true"] > .checkmark-box > image {
+  list-style-image: url(chrome://global/skin/check-check.gif);
+}
+
+checkbox.tree:hover:active > .internal-box > .checkmark-box > image {
+  border: 1px solid inherit;
+}
+
+/* disabled checkboxes */
+checkbox[disabled="true"] > .internal-box > .checkmark-box > image,
+checkbox[disabled="true"]:active > .internal-box > .checkmark-box > image {
+  border: 1px solid gray;
+  -moz-border-radius: 3px 2px 2px 3px;
+}
+
+checkbox[disabled="true"] > .internal-box > .checkmark-box,
+checkbox[disabled="true"]:hover > .internal-box > .checkmark-box {
+  border: 1px solid #CCCCCC;
+}
+
+checkbox[disabled="true"][value] > .internal-box > html {
+  color: gray;
+}
diff --git a/mozilla/xpfe/global/resources/skin/global.css b/mozilla/xpfe/global/resources/skin/global.css
index cddaf0ec660..8fd61c876e9 100644
--- a/mozilla/xpfe/global/resources/skin/global.css
+++ b/mozilla/xpfe/global/resources/skin/global.css
@@ -293,78 +293,6 @@ menu:active > .other28[disabled="true"] {
 	text-decoration: none;
 }
 
-/**
- * 32px round buttons (used in Navigation Toolbar)
- */
-/* have to explicitly set the border and padding to ensure that more specific rules 
-   for disabled and active titledbuttons don't apply */
-titledbutton.button32 {
-	background-repeat: no-repeat;
-	background-position: 50% 0px;
-	background-color: transparent;
-	color: #CCFFFF;
-	min-width: 36px;
-	min-height: 36px;
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-left: 1px;
-	margin-bottom: 1px;
-	margin-top: 6px;
-	margin-right: 6px;
-	font-size: smaller;
-	background-image:url("chrome://global/skin/button32-bg.gif");
-}
-
-titledbutton.button32:hover {
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-left: 1px;
-	margin-bottom: 1px;
-	margin-top: 6px;
-	margin-right: 6px;
-	background-image:url("chrome://global/skin/button32-bg-hover.gif");
-}
-
-titledbutton.button32:hover:active {
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-top: 7px;
-	margin-left: 2px;
-	margin-bottom: 0px;
-	margin-right: 5px;
-	background-image:url("chrome://global/skin/button32-bg-active.gif");
-}
-
-titledbutton.button32[disabled="true"] {
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-left: 1px;
-	margin-bottom: 1px;
-	margin-top: 6px;
-	margin-right: 6px;
-	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
-}
-
-titledbutton.button32[disabled="true"]:hover {
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-left: 1px;
-	margin-bottom: 1px;
-	margin-top: 6px;
-	margin-right: 6px;
-	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
-}
-
-titledbutton.button32[disabled="true"]:active {
-	border: 1px solid transparent;
-	padding: 0px;
-	margin-left: 1px;
-	margin-bottom: 1px;
-	margin-top: 6px;
-	margin-right: 6px;
-	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
-}
-
 /* non-iconic toolbar button (e.g. search) */
 titledbutton.toolbar-non-iconic { 
   background-color: #99CCCC;
diff --git a/mozilla/xpfe/global/resources/skin/radio.css b/mozilla/xpfe/global/resources/skin/radio.css
index c5b8494a197..9aa4a7b4b76 100644
--- a/mozilla/xpfe/global/resources/skin/radio.css
+++ b/mozilla/xpfe/global/resources/skin/radio.css
@@ -1,41 +1,78 @@
+/* stylesheet for XUL <radio> element */
 
-/* NEW WIDGET LANDING: <radio> */
+/* default radio for dialogs */
 radio {
-  margin: 0px 5px 0px 5px;
-}
-radio[checked="true"] > .internal-box > .checkmark-box > image {
-  list-style-image: url(chrome://global/skin/check-radio.gif);
+  margin: 3px 5px 3px 5px;
 }
 
 radio > .internal-box > .checkmark-box {
   border: 1px solid #CCCCCC;
-  -moz-border-radius: 8px;
+  -moz-border-radius: 50%;
 }
 radio > .internal-box > .checkmark-box > image {
   border: 1px outset #CCCCCC;
-  width: 10px;
-  height: 10px;
-  -moz-border-radius: 8px;
-}
-radio > .internal-box > html {
-  margin-left: 5px;
-  /*border: 1px solid #CCCCCC;*/
+  width: 8px;
+  height: 8px;
+  -moz-border-radius: 50%;
 }
 
+radio[checked="true"] > .internal-box > .checkmark-box > image {
+  list-style-image: url(chrome://global/skin/check-radio.gif);
+}
+
+radio[value] > .internal-box > html,
+radio.iconic > .internal-box > .icon {
+  margin-left: 4px;
+  padding: 0px;
+}
+
+radio.iconic > .internal-box > html {
+  margin-left: 4px;
+}
 
-/* mouseover rules */
 radio:hover > .internal-box > .checkmark-box {
   border: 1px solid #000000;
 }
 
-/* mousedown rules */
 radio:hover:active > .internal-box > .checkmark-box > image {
   border: 1px inset #CCCCCC;
 }
 
-/* focus rules 
-radio:focus > .internal-box > html {
-  border: 1px dotted #000000;
-}*/
+/* radio for trees/lists */
+radio.tree {
+  margin: 1px 5px 1px 5px;
+}
 
+radio.tree > .internal-box > .checkmark-box {
+  border: 1px solid #000000;
+  background-color: #CCCCCC;
+}
 
+radio.tree > .internal-box > .checkmark-box > image {
+  border: 1px solid inherit;
+  width: 8px;
+  height: 8px;
+}
+
+radio.tree[checked="true"] > .checkmark-box > image {
+  list-style-image: url(chrome://global/skin/check-radio.gif);
+}
+
+radio.tree:hover:active > .internal-box > .checkmark-box > image {
+  border: 1px solid inherit;
+}
+
+/* disabled radioes */
+radio[disabled="true"] > .internal-box > .checkmark-box > image,
+radio[disabled="true"]:active > .internal-box > .checkmark-box > image {
+  border: 1px solid gray;
+}
+
+radio[disabled="true"] > .internal-box > .checkmark-box,
+radio[disabled="true"]:hover > .internal-box > .checkmark-box {
+  border: 1px solid #CCCCCC;
+}
+
+radio[disabled="true"][value] > .internal-box > html {
+  color: gray;
+}
diff --git a/mozilla/xpfe/global/resources/skin/xul.css b/mozilla/xpfe/global/resources/skin/xul.css
index 79762239569..c0ff73801fb 100644
--- a/mozilla/xpfe/global/resources/skin/xul.css
+++ b/mozilla/xpfe/global/resources/skin/xul.css
@@ -230,10 +230,18 @@ checkbox {
   behavior: url(resource:/chrome/xulBindings.xml#checkbox);
 }
 
+checkbox.iconic {
+  behavior: url(resource:/chrome/xulBindings.xml#checkbox-iconic);
+}
+
 radio {
   behavior: url(resource:/chrome/xulBindings.xml#radio);
 }
 
+radio.iconic {
+  behavior: url(resource:/chrome/xulBindings.xml#radio-iconic);
+}
+
 radiogroup {
   behavior: url(resource:/chrome/xulBindings.xml#radiogroup);
 }
@@ -242,18 +250,10 @@ button, button.left {
   behavior: url(resource:/chrome/xulBindings.xml#buttonleft);
 }
 
-button.top {
-  behavior: url(resource:/chrome/xulBindings.xml#buttontop);
-}
-
 button.right {
   behavior: url(resource:/chrome/xulBindings.xml#buttonright);
 }
 
-button.bottom {
-  behavior: url(resource:/chrome/xulBindings.xml#buttonbottom);
-}
-
 separator {
   behavior: url(resource:/chrome/xulBindings.xml#separator);
 }
diff --git a/mozilla/xpfe/global/resources/skin/xulBindings.xml b/mozilla/xpfe/global/resources/skin/xulBindings.xml
index 346239e21c0..e3c1f65ae54 100644
--- a/mozilla/xpfe/global/resources/skin/xulBindings.xml
+++ b/mozilla/xpfe/global/resources/skin/xulBindings.xml
@@ -118,7 +118,7 @@
     </content>
   </binding>
   
-    <binding name="checkbox">
+  <binding name="checkbox">
     <content>
       <xul:box flex="1" class="internal-box" autostretch="never">
         <xul:box class="checkmark-box" autostretch="never">
@@ -133,6 +133,22 @@
     </handlers>
   </binding>
 
+  <binding name="checkbox-iconic">
+    <content>
+      <xul:box flex="1" class="internal-box" autostretch="never">
+        <xul:box class="checkmark-box" autostretch="never">
+          <xul:image/>
+        </xul:box>
+        <xul:image inherits="src" class="icon" />
+        <xul:html flex="1" inherits="value"/>
+      </xul:box>
+    </content>
+    <handlers>
+      <handler type="mouseup" value="this.checked = !this.checked;"/>
+      <handler type="keypress" key=" " value="this.checked = !this.checked;"/>
+    </handlers>
+  </binding>
+  
   <binding name="radio">
     <content>
       <xul:box flex="1" class="internal-box" autostretch="never">
@@ -143,6 +159,18 @@
       </xul:box>
     </content>  
   </binding>
+  
+  <binding name="radio-iconic">
+    <content>
+      <xul:box flex="1" class="internal-box" autostretch="never">
+        <xul:box class="checkmark-box" autostretch="never">
+          <xul:image/>
+        </xul:box>
+        <xul:image inherits="src" class="icon"/>
+        <xul:html flex="1" inherits="value"/>
+      </xul:box>
+    </content>  
+  </binding>  
 
   <binding name="radiogroup">
   	<handlers>
@@ -151,9 +179,9 @@
 	  </handlers>
   </binding>
 
-  <binding name="buttonleft" excludes="observes,template">
-    <content>
-  	  <xul:box class="internal-box" autostretch="never" flex="1">
+  <binding name="buttonleft">
+    <content excludes="observes,template">
+  	  <xul:box class="internal-box" inherits="orient" autostretch="never" flex="1">
         <xul:image inherits="src"/>
         <xul:box orient="vertical" class="text-container" autostretch="never" flex="1">
           <xul:text inherits="value,accesskey,crop"/>
@@ -162,20 +190,9 @@
     </content>
   </binding>
   
-  <binding name="buttontop" excludes="observes,template">
-    <content>
-	    <xul:box orient="vertical" autostretch="never" class="internal-box" flex="1">
-        <xul:image inherits="src"/>
-        <xul:box orient="vertical" class="text-container" autostretch="never" flex="1">
-          <xul:text inherits="value,accesskey,crop"/>
-        </xul:box>
-	    </xul:box>
-	  </content>
-  </binding>
-
-  <binding name="buttonright" excludes="observes,template">
-    <content>
-	    <xul:box autostretch="never" class="internal-box" flex="1">
+  <binding name="buttonright">
+    <content excludes="observes,template">
+	    <xul:box autostretch="never" inherits="orient" class="internal-box" flex="1">
         <xul:box orient="vertical" class="text-container" autostretch="never" flex="1">
   	      <xul:text inherits="value,accesskey,crop"/>
         </xul:box>
@@ -184,17 +201,6 @@
 	  </content>
   </binding>
 
-  <binding name="buttonbottom" excludes="observes,template">
-    <content>
-	    <xul:box orient="vertical" autostretch="never" class="internal-box" flex="1">
-        <xul:box orient="vertical" class="text-container" autostretch="never" flex="1">
-  	      <xul:text inherits="value,accesskey,crop"/>
-        </xul:box>
-        <xul:image inherits="src"/>
-	    </xul:box>
-	  </content>
-  </binding>
-
   <binding name="separator" extends="xul:spring"/>
 
   <!-- appending to the end so we don't make hyatt cry -->