bug 451373 — code cleanup: merge with theme changes

mobile/chrome/content/browser.xul

@@ -237,21 +237,21 @@
       <toolbarbutton id="tool-forward" class="browser-control-button" command="cmd_forward"/>
       <toolbarspring/>
       <toolbarbutton id="tool-actions" class="browser-control-button" command="cmd_actions"/>
-      <toolbarbutton id="tool-stuff" class="browser-control-button" command="cmd_panel"/>
+      <toolbarbutton id="tool-panel" class="browser-control-button" command="cmd_panel"/>
     </vbox>
 
     <hbox id="panel-container" style="-moz-stack-sizing: ignore;" top="0" left="0">
-      <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('paneid'));">
+      <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
-        <toolbarbutton id="tool-addons" class="browser-control-button" paneid="addons-container"/>
+        <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button" linkedpanel="addons-container"/>
-        <toolbarbutton id="tool-downloads" class="browser-control-button" paneid="downloads-container"/>
+        <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button" linkedpanel="downloads-container"/>
-        <toolbarbutton id="tool-preferences" class="browser-control-button" paneid="prefs-container"/>
+        <toolbarbutton id="tool-preferences" type="radio" group="1" class="panel-button" linkedpanel="prefs-container"/>
-        <toolbarbutton id="tool-shortcuts" class="browser-control-button" paneid="shortcuts-container"/>
+        <toolbarbutton id="tool-shortcuts" type="radio" group="1" class="panel-button" linkedpanel="shortcuts-container"/>
       </vbox>
       <deck id="panel-items" flex="1">
         <iframe id="addons-container" flex="1"/>
         <iframe id="downloads-container" flex="1"/>
 
-        <vbox id="prefs-container">
+        <vbox id="prefs-container" flex="1">
           <hbox pack="center" id="buttons"/>
           <scrollbox orient="vertical" id="pref-list" seltype="single" flex="1">
             <vbox class="prefsection">
@@ -283,7 +283,7 @@
           </scrollbox>
         </vbox>
 
-        <vbox id="shortcuts-container">
+        <vbox id="shortcuts-container" flex="1">
           <tree id="shortcuts" flex="1" seltype="cell" hidecolumnpicker="true" editable="true" textboxtype="clearable">
             <treecols>
               <treecol id="name" flex="5" hideheader="true"/>

mobile/chrome/jar.mn

@@ -53,6 +53,8 @@ classic.jar:
   images/right_sidebar_middle.png      (skin/images/right_sidebar_middle.png)
   images/right_sidebar_bottom.png      (skin/images/right_sidebar_bottom.png)
   images/right_buttons.png             (skin/images/right_buttons.png)
+  images/panel_buttons.png             (skin/images/panel_buttons.png)
+  images/panel_background.png          (skin/images/panel_background.png)
 
 @AB_CD@.jar:
 % locale browser @AB_CD@ %

mobile/chrome/skin/browser.css

@@ -179,31 +179,11 @@ toolbarbutton.browser-control-button {
   -moz-image-region: rect(160px 96px 208px 48px);
 }
 
-#tool-stuff {
+#tool-panel {
   -moz-image-region: rect(208px 48px 256px 0px);
 }
 
-#tool-stuff:hover:active {
+#tool-panel:hover:active {
-  -moz-image-region: rect(208px 96px 256px 48px);
-}
-
-#tool-addons {
-  -moz-image-region: rect(2px 151px 39px 113px);
-}
-
-#tool-downloads {
-  -moz-image-region: rect(2px 151px 39px 113px);
-}
-
-#tool-preferences {
-  -moz-image-region: rect(2px 151px 39px 113px);
-}
-
-#tool-shortcuts {
-  -moz-image-region: rect(208px 48px 256px 0px);
-}
-
-#tool-shortcuts:hover:active {
   -moz-image-region: rect(208px 96px 256px 48px);
 }
 
@@ -378,6 +358,49 @@ richlistitem[type="documenttab"][selected="true"] {
   -moz-image-region: rect(48px 96px 96px 48px);
 }
 
+/* panel UI */
+#panel-container {
+  background: url("images/panel_background.png") transparent top left repeat-x;
+}
+
+toolbarbutton.panel-button {
+  list-style-image: url("chrome://browser/skin/images/panel_buttons.png");
+  background: none !important;            /* override checked style */
+  border-color: transparent !important;   /* override checked style */
+}
+
+#tool-addons {
+  -moz-image-region: rect(48px 48px 96px 0px);
+}
+
+#tool-addons:hover:active, #tool-addons[checked] {
+  -moz-image-region: rect(48px 96px 96px 48px);
+}
+
+#tool-downloads {
+  -moz-image-region: rect(96px 48px 144px 0px);
+}
+
+#tool-downloads:hover:active, #tool-downloads[checked] {
+  -moz-image-region: rect(96px 96px 144px 48px);
+}
+
+#tool-preferences {
+  -moz-image-region: rect(0px 48px 48px 0px);
+}
+
+#tool-preferences:hover:active, #tool-preferences[checked] {
+  -moz-image-region: rect(0px 96px 48px 48px);
+}
+
+#tool-shortcuts {
+  -moz-image-region: rect(0px 48px 48px 0px);
+}
+
+#tool-shortcuts:hover:active, #tool-shortcuts[checked] {
+  -moz-image-region: rect(0px 96px 48px 48px);
+}
+
 /* autocomplete */
 
 #popup_autocomplete {