Bug 456870: Fennec panel UI button acts differently than other buttons, r=gavin

mobile/chrome/content/browser-ui.js

@@ -207,54 +207,6 @@ var BrowserUI = {
     }
   },
 
-  _showPanel : function(aMode) {
-    let tabbar = document.getElementById("tabs-container");
-    let sidebar = document.getElementById("browser-controls");
-    let panelUI = document.getElementById("panel-container");
-    let toolbar = document.getElementById("toolbar-main");
-    let canvas = document.getElementById("browser-canvas");
-
-    let tabbarW = tabbar.boxObject.width;
-    let sidebarW = sidebar.boxObject.width;
-    let contentW = canvas.width;
-
-    let newLeft = -tabbarW;
-    switch (aMode) {
-      case UIMODE_NONE:
-        Shortcuts.deinit();
-        break;
-      case UIMODE_PANEL:
-        newLeft = -contentW;
-        this._initPanel();
-        break;
-      case UIMODE_CONTROLS:
-        newLeft = -(tabbarW + sidebarW);
-        break;
-      case UIMODE_TABS:
-        newLeft = 0;
-        break;
-    }
-
-// XXX some form of this code should be in Browser.panHandler so the UIMODE is
-// set correctly when panning.
-// OR maybe we should try to removing as much of UIMODE as possible
-/*
-      tabbar.left = newLeft;
-
-      let newToolbarLeft = newLeft;
-      if (newToolbarLeft < 0 && aMode != UIMODE_PANEL)
-        newToolbarLeft = 0;
-      else if (newToolbarLeft < 0 && aMode == UIMODE_PANEL)
-        newToolbarLeft += tabbarW + sidebarW;
-      toolbar.left = newToolbarLeft;
-
-      this._setContentPosition("left", newLeft + tabbarW);
-      sidebar.left = newLeft + tabbarW + contentW;
-      panelUI.left = newLeft + tabbarW + contentW + sidebarW;
-      panelUI.width = contentW;
-*/
-  },
-
   _initPanel : function() {
     let addons = document.getElementById("addons-container");
     if (!addons.hasAttribute("src"))
@@ -471,10 +423,11 @@ var BrowserUI = {
 
     this.mode = aMode;
 
-    var toolbar = document.getElementById("toolbar-main");
-    var bookmark = document.getElementById("bookmark-container");
-    var urllist = document.getElementById("urllist-container");
-    var container = document.getElementById("browser-container");
+    let toolbar = document.getElementById("toolbar-main");
+    let bookmark = document.getElementById("bookmark-container");
+    let urllist = document.getElementById("urllist-container");
+    let container = document.getElementById("browser-container");
+    let panelUI = document.getElementById("panel-container");
 
     if (aMode == UIMODE_URLVIEW) {
       this._showToolbar(true);
@@ -482,8 +435,7 @@ var BrowserUI = {
 
       bookmark.hidden = true;
       urllist.hidden = true;
-
-      this._showPanel(UIMODE_NONE);
+      panelUI.hidden = true;
     }
     else if (aMode == UIMODE_URLEDIT) {
       this._showToolbar(true);
@@ -491,18 +443,16 @@ var BrowserUI = {
 
       bookmark.hidden = true;
       urllist.hidden = true;
-
-      this._showPanel(UIMODE_NONE);
+      panelUI.hidden = true;
     }
     else if (aMode == UIMODE_BOOKMARK) {
       this._showToolbar(true);
       this._editToolbar(false);
 
       urllist.hidden = true;
+      panelUI.hidden = true;
       bookmark.hidden = false;
       bookmark.width = container.boxObject.width;
-
-      this._showPanel(UIMODE_NONE);
     }
     else if (aMode == UIMODE_BOOKMARKLIST) {
       this._showToolbar(false);
@@ -511,29 +461,31 @@ var BrowserUI = {
       window.addEventListener("keypress", this.closePopup, false);
 
       bookmark.hidden = true;
+      panelUI.hidden = true;
       urllist.hidden = false;
       urllist.width = container.boxObject.width;
       urllist.height = container.boxObject.height;
-
-      this._showPanel(UIMODE_NONE);
     }
     else if (aMode == UIMODE_PANEL) {
       this._showToolbar(true);
       this._editToolbar(false);
 
       bookmark.hidden = true;
-
-      this._showPanel(aMode);
+      urllist.hidden = true;
+      panelUI.hidden = false;
+      panelUI.width = container.boxObject.width;
+      panelUI.height = container.boxObject.height;
+      this._initPanel();
     }
     else if (aMode == UIMODE_TABS || aMode == UIMODE_CONTROLS) {
-      this._showPanel(aMode);
+      panelUI.hidden = true;
     }
     else if (aMode == UIMODE_NONE) {
       this._showToolbar(false);
       this._edit.reallyClosePopup();
       urllist.hidden = true;
       bookmark.hidden = true;
-      this._showPanel(aMode);
+      panelUI.hidden = true;
     }
   },
 

mobile/chrome/content/browser.xul

@@ -238,7 +238,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" class="browser-control-button" command="cmd_panel" type="checkbox"/>
+      <toolbarbutton id="tool-panel-open" class="browser-control-button" command="cmd_panel"/>
     </vbox>
     <!-- end: right bar -->
 
@@ -278,14 +278,14 @@
     <!-- end: Main Toolbar -->
 
     <!-- barrier to the left of the right bar -->
-    <spacer style="-moz-stack-sizing: ignore; width: 1px; height: 1px;" barriertype="vertical" size="10" left="881" constraint="vp-relative"/>
-    <hbox id="panel-container" style="-moz-stack-sizing: ignore; width: 600px; height: 480px;" top="0" left="880" constraint="ignore-y,vp-relative">
+    <hbox id="panel-container" hidden="true" style="-moz-stack-sizing: ignore;" top="0" left="0">
       <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
         <toolbarspring/>
         <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-shortcuts" type="radio" group="1" class="panel-button" linkedpanel="shortcuts-container" hidden="true"/>
+        <toolbarbutton id="tool-panel-close" class="browser-control-button" command="cmd_panel"/>
       </vbox>
       <deck id="panel-items" flex="1">
         <iframe id="addons-container" flex="1"/>

mobile/chrome/skin/browser.css

@@ -294,18 +294,10 @@ toolbarbutton.panel-button {
   -moz-image-region: rect(160px 96px 208px 48px);
 }
 
-#tool-panel {
+#tool-panel-open, #tool-panel-close {
   -moz-image-region: rect(208px 48px 256px 0px);
 }
 
-#tool-panel:hover:active, #tool-panel[checked] {
-  -moz-image-region: rect(208px 96px 256px 48px);
-
-  /* override checked style */
-  background: none !important;
-  border-color: transparent !important;
-}
-
 /* "extras" panel UI   ----------------------------------------------------- */
 #panel-controls {
   /* match #browser-controls end padding */