Bug 598997 - Use a <deck> or other improved method to switch tabs [r=mfinkle]
authorWesley Johnston <wjohnston@mozilla.com>
Wed, 29 Sep 2010 13:43:00 -0400
changeset 66783 ed9d6ab1ebadf1557ef8303a9133e14cf252cfd3
parent 66782 8c9b676dfae113519caa450896833db1316e7765
child 66784 77124e7087748768e31bbf7f5ebc9aaac7ebb06f
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs598997
Bug 598997 - Use a <deck> or other improved method to switch tabs [r=mfinkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.js
mobile/chrome/content/browser.xul
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -78,16 +78,17 @@ let Elements = {};
   ["contentShowing",     "bcast_contentShowing"],
   ["urlbarState",        "bcast_urlbarState"],
   ["stack",              "stack"],
   ["tabs",               "tabs-container"],
   ["controls",           "browser-controls"],
   ["panelUI",            "panel-container"],
   ["viewBuffer",         "view-buffer"],
   ["toolbarContainer",   "toolbar-container"],
+  ["browsers",           "browsers"]
 ].forEach(function (aElementGlobal) {
   let [name, id] = aElementGlobal;
   XPCOMUtils.defineLazyGetter(Elements, name, function() {
     return document.getElementById(id);
   });
 });
 
 const TOOLBARSTATE_LOADING  = 1;
@@ -1606,17 +1607,17 @@ var FindHelperUI = {
     this._cmdNext = document.getElementById(this.commands.next);
 
     // Listen for form assistant messages from content
     messageManager.addMessageListener("FindAssist:Show", this);
     messageManager.addMessageListener("FindAssist:Hide", this);
 
     // Listen for events where form assistant should be closed
     document.getElementById("tabs").addEventListener("TabSelect", this, true);
-    document.getElementById("browsers").addEventListener("URLChanged", this, true);
+    Elements.browsers.addEventListener("URLChanged", this, true);
   },
 
   receiveMessage: function findHelperReceiveMessage(aMessage) {
     let json = aMessage.json;
     switch(aMessage.name) {
       case "FindAssist:Show":
         if (json.rect)
           this._zoom(Rect.fromRect(json.rect));
@@ -1707,17 +1708,17 @@ var FormHelperUI = {
     messageManager.addMessageListener("FormAssist:Show", this);
     messageManager.addMessageListener("FormAssist:Hide", this);
     messageManager.addMessageListener("FormAssist:Update", this);
     messageManager.addMessageListener("FormAssist:Resize", this);
     messageManager.addMessageListener("FormAssist:AutoComplete", this);
 
     // Listen for events where form assistant should be closed
     document.getElementById("tabs").addEventListener("TabSelect", this, true);
-    document.getElementById("browsers").addEventListener("URLChanged", this, true);
+    Elements.browsers.addEventListener("URLChanged", this, true);
 
     // Listen for modal dialog to show/hide the UI
     messageManager.addMessageListener("DOMWillOpenModalDialog", this);
     messageManager.addMessageListener("DOMModalDialogClosed", this);
 
     Services.obs.addObserver(this, "softkb-change", false);
   },
 
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -182,34 +182,33 @@ var Browser = {
       messageManager.loadFrameScript("chrome://browser/content/Util.js", true);
       messageManager.loadFrameScript("chrome://browser/content/forms.js", true);
       messageManager.loadFrameScript("chrome://browser/content/content.js", true);
     } catch (e) {
       // XXX whatever is calling startup needs to dump errors!
       dump("###########" + e + "\n");
     }
 
-    let container = document.getElementById("browsers");
     // XXX change
 
     /* handles dispatching clicks on browser into clicks in content or zooms */
     let inputHandlerOverlay = document.getElementById("inputhandler-overlay");
     inputHandlerOverlay.customDragger = new Browser.MainDragger();
 
     let keySender = new ContentCustomKeySender(inputHandlerOverlay);
     let mouseModule = new MouseModule();
     let gestureModule = new GestureModule();
     let scrollWheelModule = new ScrollwheelModule(inputHandlerOverlay);
 
     ContentTouchHandler.init();
 
     // Warning, total hack ahead. All of the real-browser related scrolling code
     // lies in a pretend scrollbox here. Let's not land this as-is. Maybe it's time
     // to redo all the dragging code.
-    this.contentScrollbox = container;
+    this.contentScrollbox = Elements.browsers;
     this.contentScrollboxScroller = {
       scrollBy: function(x, y) {
         getBrowser().scrollBy(x, y);
       },
 
       scrollTo: function(x, y) {
         getBrowser().scrollTo(x, y);
       },
@@ -272,18 +271,19 @@ var Browser = {
       for (let i = Browser.tabs.length - 1; i >= 0; i--)
         Browser.tabs[i].updateViewportSize(w / oldWidth);
 
       // XXX page scrollbox jumps to a strange value on resize. Scrolling it will
       // bound it to a sane place, but not where we were when the resize began :(
       Browser.hideTitlebar();
 
       // XXX Hack. Browser also behaves badly on resize.
-      getBrowser().style.display = "none";
-      getBrowser().style.display = "block";
+      let browser = getBrowser();
+      browser.style.display = "none";
+      browser.style.display = "block";
 
       // We want to keep the current focused element into view if possible
       let currentElement = document.activeElement;
       let [scrollbox, scrollInterface] = ScrollUtils.getScrollboxFromElement(currentElement);
       if (currentElement && (currentElement.id != "inputhandler-overlay") && scrollbox && currentElement != scrollbox) {
         // retrieve the direct child of the scrollbox
         while (currentElement.parentNode != scrollbox)
           currentElement = currentElement.parentNode;
@@ -321,19 +321,18 @@ var Browser = {
     // clear out tabs the user hasn't touched lately on memory crunch
     os.addObserver(MemoryObserver, "memory-pressure", false);
 
     // search engine changes
     os.addObserver(BrowserSearch, "browser-search-engine-modified", false);
 
     window.QueryInterface(Ci.nsIDOMChromeWindow).browserDOMWindow = new nsBrowserAccess();
 
-    let browsers = document.getElementById("browsers");
-    browsers.addEventListener("command", this._handleContentCommand, true);
-    browsers.addEventListener("DOMUpdatePageReport", gPopupBlockerObserver.onUpdatePageReport, false);
+    Elements.browsers.addEventListener("command", this._handleContentCommand, true);
+    Elements.browsers.addEventListener("DOMUpdatePageReport", gPopupBlockerObserver.onUpdatePageReport, false);
 
     // Login Manager and Form History initialization
     Cc["@mozilla.org/login-manager;1"].getService(Ci.nsILoginManager);
     Cc["@mozilla.org/satchel/form-history;1"].getService(Ci.nsIFormHistory2);
 
     // Make sure we're online before attempting to load
     Util.forceOnline();
 
@@ -478,24 +477,22 @@ var Browser = {
   
   // cmd_scrollBottom does not work in Fennec (Bug 590535).
   scrollContentToBottom: function scrollContentToBottom() {
     this.contentScrollboxScroller.scrollTo(0, Number.MAX_VALUE);
     this.pageScrollboxScroller.scrollTo(0, Number.MAX_VALUE);
   },
 
   hideSidebars: function scrollSidebarsOffscreen() {
-    let container = document.getElementById("browsers");
-    let rect = container.getBoundingClientRect();
+    let rect = Elements.browsers.getBoundingClientRect();
     this.controlsScrollboxScroller.scrollBy(Math.round(rect.left), 0);
   },
 
   hideTitlebar: function hideTitlebar() {
-    let container = document.getElementById("browsers");
-    let rect = container.getBoundingClientRect();
+    let rect = Elements.browsers.getBoundingClientRect();
     this.pageScrollboxScroller.scrollBy(0, Math.round(rect.top));
     this.tryUnfloatToolbar();
   },
 
   /**
    * Load a URI in the current tab, or a new tab if necessary.
    * @param aURI String
    * @param aParams Object with optional properties that will be passed to loadURIWithFlags:
@@ -639,23 +636,22 @@ var Browser = {
     this._selectedTab = tab;
 
     // Lock the toolbar if the new tab is still loading
     if (this._selectedTab.isLoading())
       BrowserUI.lockToolbar();
 
     if (oldBrowser) {
       oldBrowser.setAttribute("type", "content");
-      oldBrowser.style.display = "none";
       oldBrowser.messageManager.sendAsyncMessage("Browser:Blur", {});
     }
 
     if (browser) {
       browser.setAttribute("type", "content-primary");
-      browser.style.display = "";
+      Elements.browsers.selectedPanel = browser;
       browser.messageManager.sendAsyncMessage("Browser:Focus", {});
     }
 
     document.getElementById("tabs").selectedTab = tab.chromeTab;
 
     if (!isFirstTab) {
       // Update all of our UI to reflect the new tab's location
       BrowserUI.updateURI();
@@ -1497,17 +1493,17 @@ function IdentityHandler() {
   this._staticStrings[this.IDENTITY_MODE_IDENTIFIED] = {
     encryption_label: Elements.browserBundle.getString("identity.encrypted2")
   };
   this._staticStrings[this.IDENTITY_MODE_UNKNOWN] = {
     encryption_label: Elements.browserBundle.getString("identity.unencrypted2")
   };
 
   // Close the popup when reloading the page
-  document.getElementById("browsers").addEventListener("URLChanged", this, true);
+  Elements.browsers.addEventListener("URLChanged", this, true);
 
   this._cacheElements();
 }
 
 IdentityHandler.prototype = {
   // Mode strings used to control CSS display
   IDENTITY_MODE_IDENTIFIED       : "verifiedIdentity", // High-quality identity information
   IDENTITY_MODE_DOMAIN_VERIFIED  : "verifiedDomain",   // Minimal SSL CA-signed domain verification
@@ -2463,18 +2459,17 @@ Tab.prototype = {
 
     browser.setAttribute("type", "content");
 
     let useRemote = Services.prefs.getBoolPref("browser.tabs.remote");
     let useLocal = Util.isLocalScheme(aURI);
     browser.setAttribute("remote", (!useLocal && useRemote) ? "true" : "false");
 
     // Append the browser to the document, which should start the page load
-    document.getElementById("browsers").appendChild(browser);
-    browser.style.display = "none";
+    Elements.browsers.appendChild(browser);
 
     // stop about:blank from loading
     browser.stop();
 
 
     let self = this;
     browser.messageManager.addMessageListener("MozScrolledAreaChanged", function() {
       self.updateDefaultZoomLevel();
@@ -2488,17 +2483,17 @@ Tab.prototype = {
       var browser = this._browser;
       browser.removeProgressListener(this._listener);
 
       this._browser = null;
       this._listener = null;
       this._loading = false;
 
       Util.executeSoon(function() {
-        document.getElementById("browsers").removeChild(browser);
+        Elements.browsers.removeChild(browser);
       });
     }
   },
 
   clampZoomLevel: function clampZoomLevel(zl) {
     let browser = this._browser;
     let bounded = Math.min(Math.max(ZoomManager.MIN, zl), ZoomManager.MAX);
 
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -270,17 +270,17 @@
 
             <notificationbox id="notifications" class="window-width"/>
 
             <!-- Content viewport -->
             <vbox id="content-viewport" class="window-width window-height">
               <stack id="content-stack" class="window-width" flex="1">
               <!-- Content viewport -->
                 <html:div>
-                  <html:div id="browsers" class="window-width window-height"/>
+                  <deck id="browsers" class="window-width window-height"/>
                   <html:canvas id="content-overlay" style="display: none; position: absolute; z-index: 1000; left: 0; top: 0;"/>
                 </html:div>
                 <html:div id="inputhandler-overlay" style="z-index: 1001" tabindex="-1"/>
               </stack>
               <box id="content-navigator-spacer" hidden="true"/>
             </vbox>
           </vbox>
         </scrollbox>