Bug 456870: Right panel buttons act different than other buttons, r=gavin

mobile/chrome/content/browser.xul

@@ -227,7 +227,7 @@
       <toolbarbutton id="tool-forward" class="browser-control-button" command="cmd_forward"/>
       <toolbarspring/>
       <toolbarbutton id="tool-actions" class="browser-control-button" command="cmd_actions" hidden="true"/>
-      <toolbarbutton id="tool-panel-open" class="browser-control-button" command="cmd_panel"/>
+      <toolbarbutton id="tool-panel-open" class="page-button" command="cmd_panel"/>
     </vbox>
     <!-- end: right bar -->
 
@@ -271,7 +271,7 @@
         <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button" linkedpanel="addons-container"/>
         <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button" linkedpanel="downloads-container"/>
         <toolbarbutton id="tool-preferences" type="radio" group="1" class="panel-button" linkedpanel="prefs-container"/>
-        <toolbarbutton id="tool-panel-close" class="browser-control-button" command="cmd_panel"/>
+        <toolbarbutton id="tool-panel-close" class="page-button" command="cmd_panel"/>
       </vbox>
       <deck id="panel-items" flex="1">
         <iframe id="addons-container" flex="1"/>

mobile/chrome/jar.mn

@@ -61,3 +61,4 @@ classic.jar:
   images/navigation_background.png     (skin/images/navigation_background.png)
   images/navigation_search_caps.png    (skin/images/navigation_search_caps.png)
   images/navigation_magnifier.gif      (skin/images/navigation_magnifier.gif)
+  images/page_buttons.png              (skin/images/page_buttons.png)

mobile/chrome/skin/browser.css

@@ -240,7 +240,8 @@ toolbarbutton.browser-control-button {
 }
 
 toolbarbutton.browser-control-button,
-toolbarbutton.panel-button {
+toolbarbutton.panel-button,
+toolbarbutton.page-button {
   /* space out the buttons a bit vertically */
   padding: 0;
   padding-top: 8px;
@@ -294,8 +295,19 @@ toolbarbutton.panel-button {
   -moz-image-region: rect(160px 96px 208px 48px);
 }
 
-#tool-panel-open, #tool-panel-close {
-  -moz-image-region: rect(208px 48px 256px 0px);
+
+toolbarbutton.page-button {
+  list-style-image: url("chrome://browser/skin/images/page_buttons.png");
+}
+
+#tool-panel-open {
+  -moz-image-region: rect(0px 62px 48px 0px);
+  margin-right: -14px;
+}
+
+#tool-panel-close {
+  -moz-image-region: rect(48px 62px 96px 0px);
+  margin-left: -14px;
 }
 
 /* "extras" panel UI   ----------------------------------------------------- */