Bug 598997 - Use a <deck> or other improved method to switch tabs [r=mfinkle]
--- 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>