Fixing the XBL event handler bug and the menu accelerator bug (plus getting menus

looking normal again). r=brendan, ben a=leaf

xpfe/components/sidebar/resources/sidebarOverlay.css

@@ -141,14 +141,6 @@ box#sidebar-panels-bottom > box.texttab + box.texttab {
 	background-color: #CCCCCC;
 }
 
-*[collapsed="true"] {
-  visibility: collapsed;
-}
-
-*[hidden="true"] {
-  display: none;
-}
-
 box#title-box { 
   min-width: 10px;
 }

xpfe/global/resources/skin/global.css

@@ -84,16 +84,21 @@ toolbar {
   overflow: hidden;
 } 
 
-:toolbox-normal { 
+toolbargrippy { 
   background-color: #003366; 
   background-image: url("chrome://global/skin/taskbar-tab.gif"); 
-  background-repeat: no-repeat; 
+  background-repeat: no-repeat;
+  width: 10px;
+  height: 10px;
 } 
 
-:toolbox-rollover { 
+toolbar[collapsed="true"] > toolbargrippy {
+  width: 30px;
+}
+
+toolbargrippy:hover { 
   background-color: #99cccc; 
   background-image: url("chrome://global/skin/taskbar-tab-hover.gif"); 
-  background-repeat: no-repeat; 
 } 
 
 toolbar.standard {
@@ -514,10 +519,6 @@ splitter[state="dragging"]
    background-color: gray;
 }
 
-box > *[collapsed="true"] {
-  visibility: collapse;
-}
-
 grippy{
 	margin: 0px;
 	border: 2px solid #003366;
@@ -705,6 +706,10 @@ menubar {
   margin-bottom: 2px;
 }
 
+menubar > toolbargrippy {
+  display: none;
+}
+
 menu {
 	color: black;
 	vertical-align: middle;
@@ -856,20 +861,22 @@ popup > menuitem[menuactive="true"][disabled="true"] {
 
 .menu-right {
   padding: 0px;
-  border: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 6px;
   margin-right: 0px;
+  width: 8px;
+  text-align: center;
 }
 
 .menu-left {
   color: inherit;
   padding: 0px;
-  border: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-right: 2px;
+  width: 13px;
+  text-align: center;
 }
 
 .menubar-left {
@@ -890,6 +897,10 @@ popup > menuitem[menuactive="true"][disabled="true"] {
   margin-right: 2px;
 }
 
+.menu-accel {
+  margin-left: 4px;
+}
+
 .menubar-text {
   color: inherit;
   padding: 0px;

xpfe/global/resources/skin/xul.css

@@ -15,6 +15,10 @@
   display: block;
 }
 
+*[collapsed="true"] {
+  visibility: collapsed;
+}
+
 *[hidden="true"] {
   display: none;
 }
@@ -67,22 +71,27 @@ browser, editor, iframe {
 
 toolbox { 
   user-focus: ignore;
+  behavior: url(resource:/chrome/xulBindings.xml#toolbox);
 }
 
 toolbar, menubar {
   user-focus: ignore;
 }
 
+toolbar,menubar {
+  behavior: url(resource:/chrome/xulBindings.xml#toolbar);
+}
+
+toolbargrippy {
+  behavior: url(resource:/chrome/xulBindings.xml#toolbargrippy);
+}
+
 toolbar[collapsed="true"] {
-	display:none;
+  visibility: visible;
 }
 
-toolbar[hidden="true"] {
+box.toolbar-holder[collapsed="true"] {
-	display:none;
+  visibility: collapse;
-}
-
-toolbarseparator { 
-  display: block;
 }
 
 /****** Progress Meter ********/
@@ -91,12 +100,6 @@ toolbarseparator {
 
 /********* XP Menus ***********/
 
-menubar[collapsed="true"] {
-	display:none;
-}
-menubar[hidden="true"] {
-	display:none;
-}
 
 menubar > menu {
   behavior: url("resource:/chrome/xulBindings.xml#menusOnMenuBar");
@@ -106,14 +109,6 @@ menu,menuitem {
   behavior: url("resource:/chrome/xulBindings.xml#menus");
 }
 
-menu[hidden="true"] {
-	display:none;
-}
-
-menuitem[hidden="true"] {
-	display:none;
-}
-
 menupopup {
   /*behavior: url("resource:/chrome/xulBindings.xml#popups");*/
   display: none;
@@ -145,10 +140,6 @@ popup[menuactive="true"] {
   visibility: visible;
 }
 
-menuseparator[hidden="true"] {
-  display: none;
-}
-
 menulist {
   behavior: url("resource:/chrome/xulBindings.xml#menulist");
 }

xpfe/global/resources/skin/xulBindings.xml

@@ -42,17 +42,21 @@
 
   <binding name="menusOnMenuBar">
     <content excludes="template,observes,menupopup">
-      <xul:titledbutton class="menubar-left"/>
+      <xul:image class="menubar-left"/>
-      <xul:titledbutton class="menubar-text" inherits="value,accesskey,crop" crop="right"/>
+      <xul:text class="menubar-text" inherits="value,accesskey,crop" crop="right"/>
     </content>
   </binding>
 
   <binding name="menus">
     <content autostretch="never" excludes="template,observes,menupopup">
-      <xul:image class="menu-left"/>
+      <xul:box class="menu-left" orient="vertical" autostretch="never">
+        <xul:image/>
+      </xul:box>
       <xul:text class="menu-text" flex="1" align="left" inherits="value,accesskey,crop" crop="right"/>
       <xul:text class="menu-accel" inherits="acceltext:value"/>
-      <xul:image class="menu-right"/>
+      <xul:box orient="vertical" autostretch="never" class="menu-right">
+        <xul:image/>
+      </xul:box>
     </content>
   </binding>
 
@@ -312,6 +316,59 @@
     </content>
   </binding>
   
+  <binding name="toolbargrippy" extends="xul:image"/>
+
+  <binding name="toolbox">
+    <content orient="vertical">
+      <xul:box orient="vertical" flex="1" class="internal-box">
+        <children/>
+      </xul:box>
+      <xul:box class="collapsed-tray"/>
+    </content>
+    <interface>
+      <method name="collapseToolbar">
+        <argument name="toolbar"/>
+        <body>
+          var v = this.removeChild(toolbar);
+          this.anonymousContent[1].appendChild(v);
+        </body>
+      </method>
+      <method name="expandToolbar">
+        <argument name="toolbar"/>
+        <body>
+          var v = this.anonymousContent[1].removeChild(toolbar);
+          this.appendChild(v);
+        </body>
+      </method>
+    </interface>
+  </binding>
+
+  <binding name="toolbar">
+    <content>
+      <xul:toolbargrippy onclick="var v = parentNode;
+                                  var attr = v.getAttribute('collapsed');
+                                  if (attr == 'true') {
+                                    v.removeAttribute('collapsed');
+                                    try {
+                                      parentNode.parentNode.parentNode.expandToolbar(parentNode);
+                                    }
+                                    catch(e) {
+                                      dump('huh?' + parentNode.parentNode.parentNode + '\n');
+                                    }
+                                  }
+                                  else {
+                                    v.setAttribute('collapsed', 'true');
+                                    try {
+                                      parentNode.parentNode.collapseToolbar(parentNode);
+                                    }
+                                    catch(e) {}
+                                  }
+                                  "/>
+      <xul:box flex="1" class="toolbar-holder" inherits="collapsed">
+        <children/>
+      </xul:box>
+    </content>
+  </binding>
 
   <binding name="colorpicker" extends="xul:box">
     <interface>
@@ -319,11 +376,11 @@
                              onget="return this.getAttribute('color');"/>
       <property name="selectedItem"/>
     </interface>
-<!--
+
     <handlers>
-      <handler type="click" value="dump('handler fired\n'); this.color = event.target.getAttribute('color');"/>
+      <handler type="click" value="dump('handler fired\n');"/>
     </handlers>
--->
+
     <content>
 
       <xul:box flex="1" orient="vertical" onclick="parentNode.color = event.target.getAttribute('color');