95876 - Support <button type='checkbox'/>, r=blake, sr=hyatt

dom/public/idl/xul/nsIDOMXULButtonElement.idl

@@ -51,5 +51,8 @@ interface nsIDOMXULButtonElement : nsIDOMXULLabeledControlElement {
   attribute boolean checked;
   attribute long checkState;
   attribute boolean autoCheck;
+
+  // For buttons of type="radio" only.
+  attribute DOMString group;
 };
 

editor/ui/composer/content/editor.js

@@ -2006,7 +2006,7 @@ function onButtonUpdate(button, commmandID)
   var commandNode = document.getElementById(commmandID);
   var state = commandNode.getAttribute("state");
 
-  button.setAttribute("toggled", state);
+  button.checked = state == "true";
 }
 
 //--------------------------------------------------------------------
@@ -2015,7 +2015,7 @@ function onStateButtonUpdate(button, commmandID, onState)
   var commandNode = document.getElementById(commmandID);
   var state = commandNode.getAttribute("state");
 
-  button.setAttribute("toggled", (state == onState) ? "true" : "false");
+  button.checked = state == onState;
 }
 
 
@@ -2032,7 +2032,7 @@ function onStyleChange(theStyle)
   var theButton = document.getElementById(theStyle + "Button");
   if (theButton)
   {
-    theButton.setAttribute("toggled", (isOn == "true") ? 1 : 0);
+    theButton.checked = isOn == "true";
   }
 
   var theMenuItem = document.getElementById(theStyle + "MenuItem");

editor/ui/composer/content/editorOverlay.xul

@@ -744,25 +744,25 @@
   <toolbarbutton id="IncreaseFontSizeButton" observes="cmd_increaseFont"
           tooltip="aTooltip" tooltiptext="&increaseFontSizeToolbarCmd.tooltip;"/>
 
-  <toolbarbutton id="boldButton" observes="cmd_bold"
+  <toolbarbutton id="boldButton" type="checkbox" autoCheck="false" observes="cmd_bold"
           tooltip="aTooltip" tooltiptext="&boldToolbarCmd.tooltip;">
-    <observes element="cmd_bold" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_bold')"/>
+    <observes element="cmd_bold" type="checkbox" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_bold')"/>
   </toolbarbutton>
-  <toolbarbutton id="italicButton" observes="cmd_italic"
+  <toolbarbutton id="italicButton" type="checkbox" autoCheck="false" observes="cmd_italic"
           tooltip="aTooltip" tooltiptext="&italicToolbarCmd.tooltip;">
     <observes element="cmd_italic" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_italic')"/>
   </toolbarbutton>
-  <toolbarbutton id="underlineButton" observes="cmd_underline"
+  <toolbarbutton id="underlineButton" type="checkbox" autoCheck="false" observes="cmd_underline"
           tooltip="aTooltip" tooltiptext="&underlineToolbarCmd.tooltip;">
     <observes element="cmd_underline" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_underline')"/>
   </toolbarbutton>
 
-  <toolbarbutton id="ulButton" observes="cmd_ul"
+  <toolbarbutton id="ulButton" type="radio" group="lists" autoCheck="false" observes="cmd_ul"
           tooltip="aTooltip" tooltiptext="&bulletListToolbarCmd.tooltip;">
       <observes element="cmd_ul" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ul')"/>
   </toolbarbutton>
 
-  <toolbarbutton id="olButton" observes="cmd_ol"
+  <toolbarbutton id="olButton" type="radio" group="lists" autoCheck="false" observes="cmd_ol"
           tooltip="aTooltip" tooltiptext="&numberListToolbarCmd.tooltip;">
       <observes element="cmd_ol" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ol')"/>
   </toolbarbutton>
@@ -773,25 +773,25 @@
           tooltip="aTooltip" tooltiptext="&indentToolbarCmd.tooltip;"/>
 
   <!-- alignment buttons -->
-  <toolbarbutton id="align-left-button" 
+  <toolbarbutton id="align-left-button" type="radio" group="align" autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'left')"
                  tooltip="aTooltip" tooltiptext="&alignLeft.tooltip;" >
     <observes element="cmd_align" attribute="state" 
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'left')" />
   </toolbarbutton>
-  <toolbarbutton id="align-center-button"
+  <toolbarbutton id="align-center-button" type="radio" group="align" autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'center')"
                  tooltip="aTooltip" tooltiptext="&alignCenter.tooltip;" >
     <observes element="cmd_align" attribute="state" 
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'center')"/>
   </toolbarbutton>
-  <toolbarbutton id="align-right-button"
+  <toolbarbutton id="align-right-button" type="radio" group="align" autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'right')"
                  tooltip="aTooltip" tooltiptext="&alignRight.tooltip;" >
     <observes element="cmd_align" attribute="state"
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'right')"/>
   </toolbarbutton>
-  <toolbarbutton id="align-justify-button"
+  <toolbarbutton id="align-justify-button" type="radio" group="align" autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'justify')"
                  tooltip="aTooltip" tooltiptext="&alignJustify.tooltip;" >
     <observes element="cmd_align" attribute="state"

extensions/inspector/resources/content/toolboxOverlay.xul

@@ -36,7 +36,7 @@
   <toolbar id="tbInspectorPrimary">
 
     <hbox id="bxURLBar" flex="1">
-      <toolbarbutton id="btnSelecting" observes="cmd:selectByClick" 
+      <toolbarbutton id="btnSelecting" type="checkbox" observes="cmd:selectByClick" 
               tooltip="aTooltip" tooltiptext="&btnSelecting.tooltip;"/>
 
       <toolbarbutton id="btnFind" observes="cmd:find" 

extensions/inspector/resources/content/viewers/dom/dom.js

@@ -361,7 +361,7 @@ DOMViewer.prototype =
     for (var i = 0; i < this.mSelectDocs.length; ++i)
       this.mSelectDocs[i].addEventListener("mousedown", MouseDownListener, true);
 
-    this.mPanel.panelset.setCommandAttribute("cmd:selectByClick", "toggled", "true");
+    this.mPanel.panelset.setCommandAttribute("cmd:selectByClick", "checked", "true");
   },
 
   selectByClickOver: function(aTarget)
@@ -388,7 +388,7 @@ DOMViewer.prototype =
     for (var i = 0; i < this.mSelectDocs.length; ++i)
       this.mSelectDocs[i].removeEventListener("mousedown", MouseDownListener, true);
 
-    this.mPanel.panelset.setCommandAttribute("cmd:selectByClick", "toggled", null);
+    this.mPanel.panelset.setCommandAttribute("cmd:selectByClick", "checked", null);
   },
 
   ////////////////////////////////////////////////////////////////////////////

extensions/inspector/resources/skin/classic/inspectorWindow.css

@@ -60,7 +60,7 @@
   list-style-image: url("chrome://inspector/skin/btnSelecting.gif");
 }
 
-#btnSelecting[toggled="true"] {
+#btnSelecting[checked="true"] {
   list-style-image: url("chrome://inspector/skin/btnSelecting-act.gif");
 }
 

extensions/inspector/resources/skin/modern/inspectorWindow.css

@@ -65,7 +65,7 @@
   list-style-image: url("chrome://inspector/skin/btnSelecting.gif");
 }
 
-#btnSelecting[toggled="true"] {
+#btnSelecting[checked="true"] {
   list-style-image: url("chrome://inspector/skin/btnSelecting-act.gif");
 }
 

themes/classic/communicator/win/button.css

@@ -101,6 +101,23 @@
   border-right        : 1px solid ThreeDHighlight !important;
 } 
 
+.button-toolbar[checked="true"] > .button-box {
+  border-left         : 1px solid ThreeDShadow;
+  border-top          : 1px solid ThreeDShadow;
+  border-right        : 1px solid ThreeDHighlight;
+  border-bottom       : 1px solid ThreeDHighlight;
+  background-color	  : ThreeDHighlight;
+}
+    
+.button-toolbar[checked="true"]:hover > .button-box {
+  border-left         : 1px solid ThreeDShadow;
+  border-top          : 1px solid ThreeDShadow;
+  border-right        : 1px solid ThreeDHighlight;
+  border-bottom       : 1px solid ThreeDHighlight;
+  background-color	  : -moz-Dialog;
+  background-image    : none;
+}
+
 .button-toolbar > .button-box > .button-box-2,
 .button-toolbar > .button-box > .button-box-2 > .button-box-text {
   margin: none;

themes/classic/global/mac/toolbarbutton.css

@@ -99,9 +99,9 @@ toolbarbutton[disabled="true"][buttondown="true"] > .toolbarbutton-box {
   background-color    : transparent;
 }
 
-/* ..... toggled state ..... */
+/* ..... checked state ..... */
 
-toolbarbutton[toggled="true"] > .toolbarbutton-box {
+toolbarbutton[checked="true"] > .toolbarbutton-box {
   border-left         : 1px solid #9D9D9D;
   border-top          : 1px solid #9D9D9D;
   border-right        : 1px solid #FFFFFF;
@@ -109,7 +109,7 @@ toolbarbutton[toggled="true"] > .toolbarbutton-box {
   background-color	  : #FFFFFF;
 }
     
-toolbarbutton[toggled="true"]:hover > .toolbarbutton-box {
+toolbarbutton[checked="true"]:hover > .toolbarbutton-box {
   border-left         : 1px solid #9D9D9D;
   border-top          : 1px solid #9D9D9D;
   border-right        : 1px solid #FFFFFF;

themes/classic/global/win/button.css

@@ -48,12 +48,15 @@
     }
   
   button:hover:active,
-  button[open="true"]
+  button[open="true"],
+  button[checked="true"]
     {
       border              : 1px solid ThreeDDarkShadow;
     }
 
   button:hover:active > .button-box,
+  button[checked="true"] > .button-box,
+  button[checked="true"]:focus > .button-box,
   button[open="true"] > .button-box,
   button[open="true"]:focus > .button-box
     {
@@ -61,6 +64,8 @@
     }
 
   button:hover:active > .button-box > .button-box-2,
+  button[checked="true"] > .button-box > .button-box-2,
+  button[checked="true"]:focus> .button-box > .button-box-2,
   button[open="true"] > .button-box > .button-box-2,
   button[open="true"]:focus > .button-box > .button-box-2
     {

themes/classic/global/win/toolbarbutton.css

@@ -96,9 +96,9 @@ toolbarbutton[disabled="true"][buttondown="true"] > .toolbarbutton-box {
   padding             : 2px;
 }
 
-/* ..... toggled state ..... */
+/* ..... checked state ..... */
 
-toolbarbutton[toggled="true"] > .toolbarbutton-box {
+toolbarbutton[checked="true"] > .toolbarbutton-box {
   border-left         : 1px solid ThreeDShadow;
   border-top          : 1px solid ThreeDShadow;
   border-right        : 1px solid ThreeDHighlight;
@@ -106,7 +106,7 @@ toolbarbutton[toggled="true"] > .toolbarbutton-box {
   background-color	  : ThreeDHighlight;
 }
     
-toolbarbutton[toggled="true"]:hover > .toolbarbutton-box {
+toolbarbutton[checked="true"]:hover > .toolbarbutton-box {
   border-left         : 1px solid ThreeDShadow;
   border-top          : 1px solid ThreeDShadow;
   border-right        : 1px solid ThreeDHighlight;

themes/modern/editor/editorFormatToolbar.css

@@ -29,7 +29,7 @@
   border: none !important;
 }
 
-#FormatToolbar > toolbarbutton[toggled="true"] {
+#FormatToolbar > toolbarbutton[checked="true"] {
   background-color: transparent;
 }
 
@@ -41,8 +41,8 @@
   list-style-image: url("chrome://editor/skin/btn2/dec-font-size-hov.gif");
 }
 
-#DecreaseFontSizeButton[toggled="true"],
+#DecreaseFontSizeButton[checked="true"],
-#DecreaseFontSizeButton[toggled="true"]:hover,
+#DecreaseFontSizeButton[checked="true"]:hover,
 #DecreaseFontSizeButton:hover:active {
   list-style-image: url("chrome://editor/skin/btn2/dec-font-size-act.gif");
 }
@@ -60,8 +60,8 @@
   list-style-image: url("chrome://editor/skin/btn2/inc-font-size-hov.gif");
 }
 
-#IncreaseFontSizeButton[toggled="true"],
+#IncreaseFontSizeButton[checked="true"],
-#IncreaseFontSizeButton[toggled="true"]:hover,
+#IncreaseFontSizeButton[checked="true"]:hover,
 #IncreaseFontSizeButton:hover:active {
   list-style-image: url("chrome://editor/skin/btn2/inc-font-size-act.gif");
 }
@@ -83,7 +83,7 @@
   list-style-image: url("chrome://editor/skin/btn2/bold-act.gif");
 }
 
-#boldButton[toggled="true"] {
+#boldButton[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/bold-sel.gif");
 }
 
@@ -104,7 +104,7 @@
   list-style-image: url("chrome://editor/skin/btn2/italic-act.gif");
 }
 
-#italicButton[toggled="true"] {
+#italicButton[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/italic-sel.gif");
 }
 
@@ -125,7 +125,7 @@
   list-style-image: url("chrome://editor/skin/btn2/underline-act.gif");
 }
 
-#underlineButton[toggled="true"] {
+#underlineButton[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/underline-sel.gif");
 }
 
@@ -146,7 +146,7 @@
   list-style-image: url("chrome://editor/skin/btn2/bullets-act.gif");
 }
 
-#ulButton[toggled="true"] {
+#ulButton[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/bullets-sel.gif");
 }
 
@@ -167,7 +167,7 @@
   list-style-image: url("chrome://editor/skin/btn2/numbers-act.gif");
 }
 
-#olButton[toggled="true"] {
+#olButton[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/numbers-sel.gif");
 }
 
@@ -184,8 +184,8 @@
   list-style-image: url("chrome://editor/skin/btn2/outdent-hov.gif");
 }
 
-#outdentButton[toggled="true"],
+#outdentButton[checked="true"],
-#outdentButton[toggled="true"]:hover,
+#outdentButton[checked="true"]:hover,
 #outdentButton:hover:active {
   list-style-image: url("chrome://editor/skin/btn2/outdent-act.gif");
 }
@@ -203,8 +203,8 @@
   list-style-image: url("chrome://editor/skin/btn2/indent-hov.gif");
 }
 
-#indentButton[toggled="true"],
+#indentButton[checked="true"],
-#indentButton[toggled="true"]:hover,
+#indentButton[checked="true"]:hover,
 #indentButton:hover:active {
   list-style-image: url("chrome://editor/skin/btn2/indent-act.gif");
 }
@@ -336,7 +336,7 @@
   list-style-image: url("chrome://editor/skin/btn2/left-act.gif");
 }
 
-#align-left-button[toggled="true"] {
+#align-left-button[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/left-sel.gif");
 }
 
@@ -357,7 +357,7 @@
   list-style-image: url("chrome://editor/skin/btn2/center-act.gif");
 }
 
-#align-center-button[toggled="true"] {
+#align-center-button[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/center-sel.gif");
 }
 
@@ -378,7 +378,7 @@
   list-style-image: url("chrome://editor/skin/btn2/right-act.gif");
 }
 
-#align-right-button[toggled="true"] {
+#align-right-button[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/right-sel.gif");
 }
 
@@ -399,7 +399,7 @@
   list-style-image: url("chrome://editor/skin/btn2/justify-act.gif");
 }
 
-#align-justify-button[toggled="true"] {
+#align-justify-button[checked="true"] {
   list-style-image: url("chrome://editor/skin/btn2/justify-sel.gif");
 }
 

themes/modern/global/button.css

@@ -115,54 +115,64 @@ button[default]:focus {
   height: 8px;
 }
   
-/* .......... active/open state .......... */
+/* .......... active/open/checked state .......... */
 
 button:hover:active,
+button[checked="true"],
 button[open="true"] {
   color: #FFFFFF;
 }
   
 button:hover:active > .box-inherit > .button-box-left > .button-left-top,
+button[checked="true"] > .box-inherit > .button-box-left > .button-left-top,
 button[open="true"] > .box-inherit > .button-box-left > .button-left-top {
   background-image: url("chrome://global/skin/button/btn-act-lft-top.gif");
 }
 
 button:hover:active > .box-inherit > .button-box-left > .button-left-mid,
+button[checked="true"] > .box-inherit > .button-box-left > .button-left-mid,
 button[open="true"] > .box-inherit > .button-box-left > .button-left-mid {
   background-image: url("chrome://global/skin/button/btn-act-lft-mid.gif");
 }
 
 button:hover:active > .box-inherit > .button-box-left > .button-left-btm,
+button[checked="true"] > .box-inherit > .button-box-left > .button-left-btm,
 button[open="true"] > .box-inherit > .button-box-left > .button-left-btm {
   background-image: url("chrome://global/skin/button/btn-act-lft-btm.gif");
 }
 
 button:hover:active > .box-inherit > .button-stack > .button-box-mid,
+button[checked="true"] > .box-inherit > .button-stack > .button-box-mid,
 button[open="true"] > .box-inherit > .button-stack > .button-box-mid {
   background-color: #90A1B3;
 }
   
 button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-top,
+button[checked="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-top,
 button[open="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-top {
   background-image: url("chrome://global/skin/button/btn-act-mid-top.gif");
 }
 
 button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm,
+button[checked="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm,
 button[open="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm {
   background-image: url("chrome://global/skin/button/btn-act-mid-btm.gif");
 }
 
 button:hover:active > .box-inherit > .button-box-right > .button-right-top,
+button[checked="true"] > .box-inherit > .button-box-right > .button-right-top,
 button[open="true"] > .box-inherit > .button-box-right > .button-right-top {
   background-image: url("chrome://global/skin/button/btn-act-rit-top.gif");
 }
 
 button:hover:active > .box-inherit > .button-box-right > .button-right-mid,
+button[checked="true"] > .box-inherit > .button-box-right > .button-right-mid,
 button[open="true"] > .box-inherit > .button-box-right > .button-right-mid {
   background-image: url("chrome://global/skin/button/btn-act-rit-mid.gif");
 }
 
 button:hover:active > .box-inherit > .button-box-right > .button-right-btm,
+button[checked="true"] > .box-inherit > .button-box-right > .button-right-btm,
 button[open="true"] > .box-inherit > .button-box-right > .button-right-btm {
   background-image: url("chrome://global/skin/button/btn-act-rit-btm.gif");
 }

themes/modern/global/toolbarbutton.css

@@ -84,11 +84,11 @@ toolbarbutton[open="true"] > .toolbarbutton-box {
   padding: 2px 1px 0px 3px;
 }
 
-/* ..... toggled state ..... */
+/* ..... checked state ..... */
   
-toolbarbutton[toggled="true"],
+toolbarbutton[checked="true"],
-toolbarbutton[toggled="true"]:hover,
+toolbarbutton[checked="true"]:hover,
-toolbarbutton[toggled="true"]:hover:active {
+toolbarbutton[checked="true"]:hover:active {
   border-top: 1px solid #454C55;
   border-right: 1px solid #7D848D;
   border-bottom: 1px solid #7D848D;
@@ -97,7 +97,7 @@ toolbarbutton[toggled="true"]:hover:active {
   color: #EFF1F4;
 }
 
-toolbarbutton[toggled="true"]:hover:active > .toolbarbutton-box {
+toolbarbutton[checked="true"]:hover:active > .toolbarbutton-box {
   padding: 1px 2px 1px 2px;
 }
 

xpfe/components/console/resources/content/console.js

@@ -66,7 +66,6 @@ function changeMode(aMode)
   }
   
   document.persist("ConsoleBox", "mode");
-  updateModeCommand(aMode);
 }
 
 function clearConsole()
@@ -97,13 +96,8 @@ function updateSortCommand(aOrder)
 
 function updateModeCommand(aMode)
 {
-  var bcset = document.getElementById("ModeBroadcasters");
-  for (var i = 0; i < bcset.childNodes.length; i++) {
-    bcset.childNodes[i].removeAttribute("toggled");
-  }
-  
   var bc = document.getElementById("Console:mode" + aMode);
-  bc.setAttribute("toggled", "true");
+  bc.setAttribute("checked", true);
 }
 
 function toggleToolbar(aEl)

xpfe/components/console/resources/content/console.xul

@@ -65,12 +65,10 @@ Contributor(s): Joe Hewitt <hewitt@netscape.com>
                oncommand="changeSortOrder(-1);"/>
 
   <broadcaster id="Console:toggleToolbarMode" label="&toolbarMode.label;" 
-               oncommand="toggleToolbar(this);"
+               oncommand="toggleToolbar(this);" checked="true" 
-               type="checkbox" checked="true" 
                _toolbar="ToolbarMode"/>
   <broadcaster id="Console:toggleToolbarEval" label="&toolbarEval.label;"
-               oncommand="toggleToolbar(this);"
+               oncommand="toggleToolbar(this);" checked="true" 
-               type="checkbox" checked="true" 
                _toolbar="ToolbarEval"/>
 
 <broadcasterset id="ModeBroadcasters">
@@ -118,8 +116,8 @@ Contributor(s): Joe Hewitt <hewitt@netscape.com>
       <menupopup>
        <menu label="&toolbarsCmd.label;" accesskey="&toolbarsCmd.accesskey;">
           <menupopup> 
-            <menuitem observes="Console:toggleToolbarMode"/>
+            <menuitem type="checkbox" observes="Console:toggleToolbarMode"/>
-            <menuitem observes="Console:toggleToolbarEval"/>
+            <menuitem type="checkbox" observes="Console:toggleToolbarEval"/>
           </menupopup>
         </menu>
         <menuseparator/>
@@ -136,10 +134,10 @@ Contributor(s): Joe Hewitt <hewitt@netscape.com>
   </menubar>
 
   <toolbar id="ToolbarMode" grippytooltip="aTooltip" grippytooltiptext="&modeToolbar.tooltip;">
-    <toolbarbutton observes="Console:modeAll"/>
+    <toolbarbutton type="radio" group="mode" observes="Console:modeAll"/>
-    <toolbarbutton observes="Console:modeErrors"/>
+    <toolbarbutton type="radio" group="mode" observes="Console:modeErrors"/>
-    <toolbarbutton observes="Console:modeWarnings"/>
+    <toolbarbutton type="radio" group="mode" observes="Console:modeWarnings"/>
-    <toolbarbutton observes="Console:modeMessages"/>
+    <toolbarbutton type="radio" group="mode" observes="Console:modeMessages"/>
     <toolbarseparator/>
     <toolbarbutton observes="Console:clear"/>
   </toolbar>

xpfe/components/search/resources/internetresults.js

@@ -77,12 +77,7 @@ function loadResultsTree( aSearchURL )
 
 function doEngineClick( event, aNode )
 {
-  // do toggling
+  event.target.checked = true;
-  var engineTabBox = document.getElementById("engineTabs");
-  var toggledEls = engineTabBox.getElementsByAttribute("toggled", "true");
-  for (var i = 0; i < toggledEls.length; i++)
-    toggledEls[i].removeAttribute("toggled");
-  event.target.setAttribute("toggled", "true");
 
   var html = null;
 

xpfe/components/search/resources/internetresults.xul

@@ -30,15 +30,15 @@
         ref="NC:SearchResultsSitesRoot" datasources="rdf:internetsearch" 
         style="overflow: none; min-width: 1px;">
     <template>
-      <button class="engineTabs button-toolbar button-slimline" uri="..." 
+      <button type="radio" group="engineButton" class="engineTabs button-toolbar" uri="..." 
               oncommand="doEngineClick(event, this);" crop="right" 
               src="rdf:http://home.netscape.com/NC-rdf#StatusIcon" 
               label="rdf:http://home.netscape.com/NC-rdf#Name" 
               loading="rdf:http://home.netscape.com/NC-rdf#loading" />
     </template>
-    <button class="engineTabs button-toolbar button-slimline" id="allEngines" 
+    <button type="radio" group="engineButton" class="engineTabs button-toolbar" id="allEngines" 
             oncommand="doEngineClick(event, this);" label="&allresults.title.label;"
-            toggled="true"/>
+            checked="true"/>
     <separator orient="vertical"/>
     <text value="&viewbyprovider.label;"/>
     <separator orient="vertical" class="thin"/>

xpfe/global/resources/content/bindings/button.xml

@@ -29,10 +29,80 @@
           ]]>
         </getter>
       </property>
+
+      <property name="type"
+                onget="return this.getAttribute('type');"
+                onset="this.setAttribute('type', val); return val;"/>
+
+      <property name="dlgType"
+                onget="return this.getAttribute('dlgType');"
+                onset="this.setAttribute('dlgType', val); return val;"/>
+
+      <property name="group"
+                onget="return this.getAttribute('group');"
+                onset="this.setAttribute('group', val); return val;"/>
+
+      <property name="open"
+                onget="return this.getAttribute('open') == 'true';"
+                onset="this.setAttribute('open', val); return val;"/>
+
+      <property name="checked" onget="return this.getAttribute('checked') == 'true';">
+        <setter><![CDATA[
+          if (this.type == "checkbox") {
+            this.checkState = val ? 1 : 0;
+          } else if (this.type == "radio" && val) {
+            var sibs = this.parentNode.getElementsByAttribute("group", this.group);
+            for (var i = 0; i < sibs.length; ++i)
+              if (sibs[i].checked)
+                sibs[i].checked = false;
+          }
+
+          if (val)
+            this.setAttribute("checked", "true");
+          else
+            this.removeAttribute("checked");
+          
+          return val;
+        ]]></setter>
+      </property>
+      
+      <property name="checkState">
+        <getter><![CDATA[
+          var state = this.getAttribute("checkState");
+          if (state == "")
+            return this.checked ? 1 : 0;
+          else
+            return state == "0" ? 0 : (state == "2" ? 2 : 1);
+        ]]></getter>
+        <setter><![CDATA[
+          this.setAttribute("checkState", val);
+          return val;
+        ]]></setter>
+      </property>
+      
+      <property name="autoCheck"
+                onget="return this.getAttribute('autoCheck') == 'true';"
+                onset="this.setAttribute('autoCheck', val); return val;"/>
     </implementation>
+
+    <handlers>
+      <handler event="command">
+      <![CDATA[
+        if (this.autoCheck || !this.hasAttribute("autoCheck")) {
+          if (this.type == "checkbox") {
+            this.checked = !this.checked;
+          } else if (this.type == "radio") {
+            this.checked = true;
+          }
+        }
+      ]]>
+      </handler>
+
+    </handlers>
   </binding>
 
-  <binding id="button" extends="chrome://global/content/bindings/button.xml#button-base">
+  <binding id="button" display="xul:button"
+           extends="chrome://global/content/bindings/button.xml#button-base">
     <resources>
       <stylesheet src="chrome://global/skin/button.css"/>
     </resources>