Bug 500280 - clicking the preferences button takes a few seconds to switch screens [r=gavin.sharp]

mobile/chrome/content/Util.js

@@ -185,6 +185,7 @@ let Elements = {};
   ["browserBundle",      "bundle_browser"],
   ["contentShowing",     "bcast_contentShowing"],
   ["stack",              "stack"],
+  ["panelUI",            "panel-container"],
 ].forEach(function (elementGlobal) {
   let [name, id] = elementGlobal;
   Elements.__defineGetter__(name, function () {

mobile/chrome/content/browser-ui.js

@@ -325,7 +325,7 @@ var BrowserUI = {
   
   _isEventInsidePopup: function _isEventInsidePopup(aEvent) {
     if (!this._popup)
-      return;
+      return false;
     let elements = this._popup.elements;
     let targetNode = aEvent ? aEvent.target : null;
     while (targetNode && elements.indexOf(targetNode) == -1)
@@ -333,11 +333,13 @@ var BrowserUI = {
     return targetNode ? true : false;
   },
 
-  switchPane : function(id) {
+  switchPane : function switchPane(id) {
     let button = document.getElementsByAttribute("linkedpanel", id)[0];
     if (button)
       button.checked = true;
-    document.getElementById("panel-items").selectedPanel = document.getElementById(id);
+
+    let pane = document.getElementById(id);
+    document.getElementById("panel-items").selectedPanel = pane;
   },
 
   get toolbarH() {
@@ -406,10 +408,16 @@ var BrowserUI = {
     // listening escape to dismiss dialog on VK_ESCAPE
     window.addEventListener("keypress", this, true);
 
-    ExtensionsView.init();
-    DownloadsView.init();
-    PreferencesView.init();
-    ConsoleView.init();
+    // Push the panel initialization out of the startup path
+    // (Using a timeout because we have no good way to delay-init [Bug 535366])
+    setTimeout(function() {
+      // We unhide the panelUI so the XBL and settings can initialize
+      Elements.panelUI.hidden = false;
+      ExtensionsView.init();
+      DownloadsView.init();
+      PreferencesView.init();
+      ConsoleView.init();
+    }, 1000);
   },
 
   uninit : function() {
@@ -609,11 +617,10 @@ var BrowserUI = {
   },
 
   showPanel: function showPanel(aPage) {
-    let panelUI = document.getElementById("panel-container");
-
-    panelUI.hidden = false;
-    panelUI.width = window.innerWidth;
-    panelUI.height = window.innerHeight;
+    Elements.panelUI.left = 0;
+    Elements.panelUI.hidden = false;
+    Elements.panelUI.width = window.innerWidth;
+    Elements.panelUI.height = window.innerHeight;
 
     Elements.contentShowing.setAttribute("disabled", "true");
 
@@ -622,12 +629,14 @@ var BrowserUI = {
   },
 
   hidePanel: function hidePanel() {
-    let panelUI = document.getElementById("panel-container");
-    panelUI.hidden = true;
-
+    Elements.panelUI.hidden = true;
     Elements.contentShowing.removeAttribute("disabled");
   },
-  
+
+  isPanelVisible: function isPanelVisible() {
+    return (!Elements.panelUI.hidden && Elements.panelUI.left == 0);
+  },
+
   switchTask: function switchTask() {
     try {
       let phone = Cc["@mozilla.org/phone/support;1"].createInstance(Ci.nsIPhoneSupport);
@@ -814,11 +823,10 @@ var BrowserUI = {
       }
       case "cmd_panel":
       {
-        let panelUI = document.getElementById("panel-container");
-        if (panelUI.hidden)
-          this.showPanel();
-        else
+        if (BrowserUI.isPanelVisible())
           this.hidePanel();
+        else
+          this.showPanel();
         break;
       }
       case "cmd_zoomin":

mobile/chrome/content/browser.js

@@ -545,8 +545,8 @@ var Browser = {
 
     // JavaScript Error Console
     if (gPrefService.getBoolPref("browser.console.showInPanel")){
-      let tool_console = document.getElementById("tool-console");
-      tool_console.hidden = false;
+      let button = document.getElementById("tool-console");
+      button.hidden = false;
     }
 
     bv.commitBatchOperation();

mobile/chrome/content/browser.xul

@@ -331,7 +331,7 @@
       </hbox>
     </vbox>
 
-    <box id="panel-container" hidden="true" class="panel-dark">
+    <box id="panel-container" class="panel-dark" style="-moz-stack-sizing: ignore" left="10000" hidden="true">
       <box id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
         <toolbarbutton id="tool-panel-close" class="page-button button-image" command="cmd_panel"/>
         <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button button-image" linkedpanel="addons-container"/>

mobile/chrome/content/downloads.js

@@ -118,9 +118,8 @@ var DownloadsView = {
   },
 
   get visible() {
-    let panel = document.getElementById("panel-container");
     let items = document.getElementById("panel-items");
-    if (panel.hidden == false && items.selectedPanel.id == "downloads-container")
+    if (BrowserUI.isPanelVisible() && items.selectedPanel.id == "downloads-container")
       return true;
     return false;
   },

mobile/chrome/content/extensions.js

@@ -212,9 +212,8 @@ var ExtensionsView = {
   },
 
   get visible() {
-    let panel = document.getElementById("panel-container");
     let items = document.getElementById("panel-items");
-    if (panel.hidden == false && items.selectedPanel.id == "addons-container")
+    if (BrowserUI.isPanelVisible() && items.selectedPanel.id == "addons-container")
       return true;
     return false;
   },