Bug 475678: content absolutely positioned at bottom of page shouldn't require scrolling, r=stuart, r=combee
authorMark Finkle <mfinkle@mozilla.com>
Thu, 04 Jun 2009 10:57:56 -0400
changeset 65243 dc2fe48863483f7bcb91a3c78038234f477809dc
parent 65242 b7fa325f271e9b445c1e04ad9eab27e6df098cb6
child 65244 d74ed0a4188158a9f60a8b283f7fea2c4f455ea5
push idunknown
push userunknown
push dateunknown
reviewersstuart, combee
bugs475678
Bug 475678: content absolutely positioned at bottom of page shouldn't require scrolling, r=stuart, r=combee
mobile/chrome/content/browser.js
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -52,16 +52,17 @@ const FINDSTATE_FIND_PREVIOUS = 2;
 
 Cu.import("resource://gre/modules/SpatialNavigation.js");
 
 function getBrowser() {
   return Browser.selectedBrowser;
 }
 
 const kDefaultTextZoom = 1.2;
+const kDefaultBrowserWidth = 1024;
 
 var ws = null;
 var ih = null;
 
 var Browser = {
   _canvasBrowser : null,
   _tabs : [],
   _browsers : [],
@@ -74,18 +75,20 @@ var Browser = {
     var self = this;
 
     // initalize the CanvasBrowser
     this._canvasBrowser = new CanvasBrowser(document.getElementById("browser-canvas"));
 
     // initialize the WidgetStack
     let browserContainer = document.getElementById("browser-container");
     ws = new WidgetStack(browserContainer);
+    
     // during startup a lot of viewportHandler calls happen due to content and window resizes
     ws.beginUpdateBatch();
+    
     // XXX this should live elsewhere
     window.gSidebarVisible = false;
     function panHandler(vr, dx, dy) {
       if (dx) {
         let visibleNow = ws.isWidgetVisible("tabs-container") || ws.isWidgetVisible("browser-controls");
         if (visibleNow && !gSidebarVisible) {
           BrowserUI.showToolbar(URLBAR_FORCE);
         }
@@ -110,25 +113,35 @@ var Browser = {
         return;
 
       let w = window.innerWidth;
       let maximize = (document.documentElement.getAttribute("sizemode") == "maximized");
       if (maximize && w > screen.width)
         return;
 
       let h = window.innerHeight;
-      // tell the UI to resize the browser controls before calling
-      // updateSize
+      
+      // Tell the UI to resize the browser controls before calling  updateSize
       BrowserUI.sizeControls(w, h);
 
-      // resize our container...
+      // Resize our container...
       let containerStyle = browserContainer.style;
       containerStyle.width = containerStyle.maxWidth = w + "px";
       containerStyle.height = containerStyle.maxHeight = h + "px";
 
+      // Resize the browsers...
+      let browsers = Browser.browsers;
+      if (browsers) {
+        let scaledH = (kDefaultBrowserWidth * (h / w));
+        for (let i=0; i<browsers.length; i++) {
+          let browserStyle = browsers[i].style;
+          browserStyle.height = scaledH + "px";
+        }
+      }
+      
       ws.updateSize(w, h);
     }
     window.addEventListener("resize", resizeHandler, false);
 
     function viewportHandler(bounds, boundsSizeChanged) {
       self._canvasBrowser.viewportHandler(bounds, boundsSizeChanged);
     }
     ws.setViewportHandler(viewportHandler);
@@ -280,59 +293,59 @@ var Browser = {
   },
 
   getTabAtIndex: function(index) {
     if (index > this._tabs.length || index < 0)
       return null;
     return this._tabs[index];
   },
 
-  getTabFromContent: function(content) {
+  getTabFromChrome: function(chromeTab) {
     for (var t = 0; t < this._tabs.length; t++) {
-      if (this._tabs[t].content == content)
+      if (this._tabs[t].chromeTab == chromeTab)
         return this._tabs[t];
     }
     return null;
   },
 
   addTab: function(uri, bringFront) {
     let newTab = new Tab();
     newTab.create(uri);
     this._tabs.push(newTab);
     this._browsers.push(newTab.browser);
 
     let event = document.createEvent("Events");
     event.initEvent("TabOpen", true, false);
-    newTab.content.dispatchEvent(event);
+    newTab.chromeTab.dispatchEvent(event);
 
     if (bringFront)
       this.selectedTab = newTab;
 
     return newTab;
   },
 
   closeTab: function(tab) {
     if (tab instanceof XULElement)
-      tab = this.getTabFromContent(tab);
+      tab = this.getTabFromChrome(tab);
 
     if (!tab)
       return;
 
     let tabIndex = this._tabs.indexOf(tab);
 
     let nextTab = this._selectedTab;
     if (this._selectedTab == tab) {
       nextTab = this.getTabAtIndex(tabIndex + 1) || this.getTabAtIndex(tabIndex - 1);
       if (!nextTab)
         return;
     }
 
     let event = document.createEvent("Events");
     event.initEvent("TabClose", true, false);
-    tab.content.dispatchEvent(event);
+    tab.chromeTab.dispatchEvent(event);
 
     this.selectedTab = nextTab;
 
     tab.destroy();
     this._tabs.splice(tabIndex, 1);
     this._browsers.splice(tabIndex, 1);
 
     // redraw the tabs
@@ -341,27 +354,27 @@ var Browser = {
   },
 
   get selectedTab() {
     return this._selectedTab;
   },
 
   set selectedTab(tab) {
     if (tab instanceof XULElement)
-      tab = this.getTabFromContent(tab);
+      tab = this.getTabFromChrome(tab);
 
     if (!tab || this._selectedTab == tab)
       return;
 
     let firstTab = this._selectedTab == null;
     this._selectedTab = tab;
 
     ws.beginUpdateBatch();
     this._canvasBrowser.setCurrentBrowser(this.selectedBrowser, firstTab);
-    document.getElementById("tabs").selectedItem = tab.content;
+    document.getElementById("tabs").selectedItem = tab.chromeTab;
 
     ws.panTo(0, -BrowserUI.toolbarH);
 
     if (!firstTab) {
       let webProgress = this.selectedBrowser.webProgress;
       let securityUI = this.selectedBrowser.securityUI;
 
       try {
@@ -370,17 +383,17 @@ var Browser = {
           tab._listener.onSecurityChange(webProgress, null, securityUI.state);
       } catch (e) {
         // don't inhibit other listeners or following code
         Components.utils.reportError(e);
       }
 
       let event = document.createEvent("Events");
       event.initEvent("TabSelect", true, false);
-      tab.content.dispatchEvent(event);
+      tab.chromeTab.dispatchEvent(event);
     }
     ws.endUpdateBatch(true);
   },
 
   supportsCommand: function(cmd) {
     var isSupported = false;
     switch (cmd) {
       case "cmd_fullscreen":
@@ -1312,70 +1325,77 @@ function Tab() {
 }
 
 Tab.prototype = {
   _id: null,
   _browser: null,
   _state: null,
   _listener: null,
   _loading: false,
-  _content: null,
+  _chromeTab: null,
 
   get browser() {
     return this._browser;
   },
 
-  get content() {
-    return this._content;
+  get chromeTab() {
+    return this._chromeTab;
   },
 
   isLoading: function() {
     return this._loading;
   },
 
   setLoading: function(b) {
     this._loading = b;
   },
 
   create: function(uri) {
-    this._content = document.createElement("richlistitem");
-    this._content.setAttribute("type", "documenttab");
-    document.getElementById("tabs").addTab(this._content);
+    this._chromeTab = document.createElement("richlistitem");
+    this._chromeTab.setAttribute("type", "documenttab");
+    document.getElementById("tabs").addTab(this._chromeTab);
 
     this._createBrowser(uri);
   },
 
   destroy: function() {
     this._destroyBrowser();
-    document.getElementById("tabs").removeTab(this._content);
+    document.getElementById("tabs").removeTab(this._chromeTab);
+    this._chromeTab = null;
   },
 
   _createBrowser: function(uri) {
     if (this._browser)
       throw "Browser already exists";
 
+    // Create the browser using the current width the dynamically size the height
+    let scaledHeight = kDefaultBrowserWidth * (window.innerHeight / window.innerWidth);
     let browser = this._browser = document.createElement("browser");
-    browser.className = "deckbrowser-browser";
-    browser.setAttribute("style", "overflow: hidden; visibility: hidden; width: 1024px; height: 800px;");
+    browser.setAttribute("style", "overflow: hidden; visibility: hidden; width: " + kDefaultBrowserWidth + "px; height: " + scaledHeight + "px;");
+    browser.setAttribute("type", "content");
+    browser.setAttribute("src", uri);
+
+    // Attach the popup contextmenu    
     let canvas = document.getElementById("browser-canvas");
     browser.setAttribute("contextmenu", canvas.getAttribute("contextmenu"));
     let autocompletepopup = canvas.getAttribute("autocompletepopup");
     if (autocompletepopup)
       browser.setAttribute("autocompletepopup", autocompletepopup);
-    browser.setAttribute("type", "content");
-    browser.setAttribute("src", uri);
 
+    // Append the browser to the document, which should start the page load
     document.getElementById("browsers").appendChild(browser);
 
+    // Attach a separate progress listener to the browser
     this._listener = new ProgressController(this);
     browser.addProgressListener(this._listener);
   },
 
   _destroyBrowser: function() {
     document.getElementById("browsers").removeChild(this._browser);
+    this._browser = null;
   },
 
   saveState: function() {
     let state = { };
 
     this._url = browser.contentWindow.location.toString();
     var browser = this.getBrowserForDisplay(display);
     var doc = browser.contentDocument;
@@ -1428,11 +1448,11 @@ Tab.prototype = {
     this._browser.contentWindow.scrollTo(state._scrollX, state._scrollY);
   },
 
   updateThumbnail: function() {
     if (!this._browser)
       return;
 
     let srcCanvas = (Browser.selectedBrowser == this._browser) ? document.getElementById("browser-canvas") : null;
-    this._content.updateThumbnail(this._browser, srcCanvas);
+    this._chromeTab.updateThumbnail(this._browser, srcCanvas);
   }
 }