More work on XBL radio button (bug 112715). r=jkeiser, sr=jst, a=asa.

layout/base/nsCSSFrameConstructor.cpp

@@ -1485,6 +1485,8 @@ nsCSSFrameConstructor::CreateInputFrame(nsIPresShell    *aPresShell,
       return NS_NewImageControlFrame(aPresShell, &aFrame);
     }
     else if (val.EqualsIgnoreCase("radio")) {
+      if (UseXBLForms())
+        return NS_OK;
       return ConstructRadioControlFrame(aPresShell, aPresContext, aFrame, aContent, aStyleContext);
     }
   }

layout/forms/resources/content/radio.xml

@@ -40,7 +40,7 @@
    xmlns="http://www.mozilla.org/xbl"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <binding id="radio">
+  <binding id="radio" extends="xul:button">
     <content>
       <xul:hbox class="input-radio-check-box2" flex="1">
         <xul:image class="input-radio-check"/>

layout/forms/resources/content/xbl-forms.css

@@ -267,49 +267,6 @@ input[type="file"] > input[type="button"]:-moz-focus-inner
   border: 1px dotted transparent;
 }
 
-/* radio buttons */
-input[type="radio"] {
-  border: 2px inset ThreeDFace;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  width: 12px;
-  height: 12px;
-  cursor: default;
-  vertical-align: baseline;
-  -moz-border-radius: 100%;
-  -moz-binding: none;
-  margin: 3px 3px 0px 5px;
-  padding: 0;
-}
-
-/* common features of radio buttons and check boxes */
-input[type="radio"][disabled],
-input[type="radio"][disabled]:active,
-input[type="radio"][disabled]:hover,
-input[type="radio"][disabled]:hover:active {
-  padding: 1px;
-  border: 1px inset ThreeDShadow;
-  background-color: GrayText;
-}
-
-input[type="radio"]:focus {
-  border-style: groove;
-}
-
-input[type="radio"]:hover:active {
-  border-style: inset;
-  background-color: ThreeDFace;
-}
-
-*|*:-moz-radio {
-  background-color: -moz-FieldText;
-  width: 4px;
-  height: 4px;
-  left: 6px;
-  top: 6px;
-  -moz-border-radius: 3px;
-}
-
 @media print {
   input, textarea, select, button {
     -moz-user-focus: none !important;

layout/forms/resources/skin/forms.css

@@ -44,4 +44,4 @@
 @import url("chrome://forms/skin/select-dropdown.css");
 @import url("chrome://forms/skin/checkbox.css");
 @import url("chrome://forms/skin/button.css");
-
+@import url("chrome://forms/skin/radio.css");

layout/forms/resources/skin/radio.css

@@ -26,6 +26,7 @@
   ======================================================================= */
 
 @namespace url(http://www.w3.org/1999/xhtml);
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ..... disabled state ..... */
 
@@ -48,7 +49,7 @@ input[type="radio"] {
   background-color: -moz-Field;
 }
 
-.input-radio-check-box2 {
+xul|*.input-radio-check-box2 {
   border-top: 1px solid ThreeDDarkShadow;
   border-right: 1px solid ThreeDLightShadow;
   border-bottom: 1px solid ThreeDLightShadow;
@@ -66,7 +67,7 @@ input[type="radio"]:hover:active {
 
 /* ..... selected state ..... */
 
-input[type="radio"]:checked > .input-radio-check-box2 {
+input[type="radio"]:checked > xul|*.input-radio-check-box2 {
   list-style-image: url("chrome://forms/skin/radio-check.gif");
 }
 

layout/html/forms/resources/content/radio.xml

@@ -40,7 +40,7 @@
    xmlns="http://www.mozilla.org/xbl"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <binding id="radio">
+  <binding id="radio" extends="xul:button">
     <content>
       <xul:hbox class="input-radio-check-box2" flex="1">
         <xul:image class="input-radio-check"/>

layout/html/forms/resources/content/xbl-forms.css

@@ -267,49 +267,6 @@ input[type="file"] > input[type="button"]:-moz-focus-inner
   border: 1px dotted transparent;
 }
 
-/* radio buttons */
-input[type="radio"] {
-  border: 2px inset ThreeDFace;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  width: 12px;
-  height: 12px;
-  cursor: default;
-  vertical-align: baseline;
-  -moz-border-radius: 100%;
-  -moz-binding: none;
-  margin: 3px 3px 0px 5px;
-  padding: 0;
-}
-
-/* common features of radio buttons and check boxes */
-input[type="radio"][disabled],
-input[type="radio"][disabled]:active,
-input[type="radio"][disabled]:hover,
-input[type="radio"][disabled]:hover:active {
-  padding: 1px;
-  border: 1px inset ThreeDShadow;
-  background-color: GrayText;
-}
-
-input[type="radio"]:focus {
-  border-style: groove;
-}
-
-input[type="radio"]:hover:active {
-  border-style: inset;
-  background-color: ThreeDFace;
-}
-
-*|*:-moz-radio {
-  background-color: -moz-FieldText;
-  width: 4px;
-  height: 4px;
-  left: 6px;
-  top: 6px;
-  -moz-border-radius: 3px;
-}
-
 @media print {
   input, textarea, select, button {
     -moz-user-focus: none !important;

layout/html/forms/resources/skin/forms.css

@@ -44,4 +44,4 @@
 @import url("chrome://forms/skin/select-dropdown.css");
 @import url("chrome://forms/skin/checkbox.css");
 @import url("chrome://forms/skin/button.css");
-
+@import url("chrome://forms/skin/radio.css");

layout/html/forms/resources/skin/radio.css

@@ -26,6 +26,7 @@
   ======================================================================= */
 
 @namespace url(http://www.w3.org/1999/xhtml);
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ..... disabled state ..... */
 
@@ -48,7 +49,7 @@ input[type="radio"] {
   background-color: -moz-Field;
 }
 
-.input-radio-check-box2 {
+xul|*.input-radio-check-box2 {
   border-top: 1px solid ThreeDDarkShadow;
   border-right: 1px solid ThreeDLightShadow;
   border-bottom: 1px solid ThreeDLightShadow;
@@ -66,7 +67,7 @@ input[type="radio"]:hover:active {
 
 /* ..... selected state ..... */
 
-input[type="radio"]:checked > .input-radio-check-box2 {
+input[type="radio"]:checked > xul|*.input-radio-check-box2 {
   list-style-image: url("chrome://forms/skin/radio-check.gif");
 }
 

layout/html/style/src/nsCSSFrameConstructor.cpp

@@ -1485,6 +1485,8 @@ nsCSSFrameConstructor::CreateInputFrame(nsIPresShell    *aPresShell,
       return NS_NewImageControlFrame(aPresShell, &aFrame);
     }
     else if (val.EqualsIgnoreCase("radio")) {
+      if (UseXBLForms())
+        return NS_OK;
       return ConstructRadioControlFrame(aPresShell, aPresContext, aFrame, aContent, aStyleContext);
     }
   }