clean up various code, improve getting of the visible rect, add the checkerboard back in

mobile/chrome/content/InputHandler.js

@@ -112,7 +112,7 @@ function InputHandler() {
   window.addEventListener("click", this, true);
   window.addEventListener("DOMMouseScroll", this, true);
 
-  let browserCanvas = document.getElementById("tile_container");
+  let browserCanvas = document.getElementById("tile-container");
   browserCanvas.addEventListener("keydown", this, true);
   browserCanvas.addEventListener("keyup", this, true);
 
@@ -190,9 +190,10 @@ InputHandler.prototype = {
  * Drag Data is used by both chrome and content input modules
  */
 
-function DragData(owner, dragRadius, dragStartTimeoutLength) {
+function DragData(owner, dragRadius, dragger, dragStartTimeoutLength) {
   this._owner = owner;
   this._dragRadius = dragRadius;
+  this._dragger = dragger;
   this.reset();
 }
 
@@ -315,7 +316,6 @@ ChromeInputModule.prototype = {
       this._targetScrollFunction.call(null, dragData.sX - sX, dragData.sY - sY);
     this._targetScrollFunction = null;
 
-
     // XXX
     Browser._browserView.resumeRendering();
   },

mobile/chrome/content/TileManager.js

@@ -361,7 +361,6 @@ TileManager.prototype = {
       this._tileCache.holdTile(tile);
     }
 
-    debugger;
     this._tileCache.forEachIntersectingRect(rect, true, renderAppendHoldTile, this);
   },
 

mobile/chrome/content/browser.js

@@ -68,11 +68,14 @@ function debug() {
 		.boxObject
 		.QueryInterface(Components.interfaces.nsIScrollBoxObject);
 
+  let x = {};
+  let y = {};
   let w = {};
   let h = {};
+  scrollbox.getPosition(x, y);
   scrollbox.getScrolledSize(w, h);
-  let container = document.getElementById("tile_container");
+  let container = document.getElementById("tile-container");
-  let [x, y] = getScrollboxPosition();
+  let [x, y] = [x.value, y.value];
   let [w, h] = [w.value, h.value];
   if (bv) {
     dump('----------------------DEBUG!-------------------------\n');
@@ -83,7 +86,7 @@ function debug() {
     let cr = bv._tileManager._criticalRect;
     dump('criticalRect from BV: ' + (cr ? cr.toString() : null) + endl);
     dump('visibleRect from BV : ' + bv._visibleRect.toString() + endl);
-    dump('visibleRect from foo: ' + scrollboxToViewportRect(getVisibleRect()) + endl);
+    dump('visibleRect from foo: ' + getVisibleRect() + endl);
 
     dump('batch depth:          ' + bv._batchOps.length + endl);
 
@@ -99,6 +102,13 @@ function debug() {
     dump('scrollbox position    : ' + x + ', ' + y + endl);
     dump('scrollbox scrolledsize: ' + w + ', ' + h + endl);
 
+
+    let sb = document.getElementById("scrollbox");
+    dump('container location:     ' + Math.round(container.getBoundingClientRect().left) + " " +
+                                      Math.round(container.getBoundingClientRect().top) + endl);
+
+
+
     dump(endl);
 
     dump('tilecache capacity: ' + bv._tileManager._tileCache.getCapacity() + endl);
@@ -149,9 +159,13 @@ function onKeyPress(e) {
   const i = 105;  // toggle info click mode
   const l = 108;  // restart lazy crawl
   const m = 109;  // fix mouseout
+  const r = 114;  // reset visible rect
   const t = 116;  // debug given list of tiles separated by space
 
   switch (e.charCode) {
+  case r:
+    bv.setVisibleRect(getVisibleRect());
+
   case d:
     debug();
 
@@ -206,47 +220,22 @@ function onKeyPress(e) {
   }
 }
 
-
+// Return the visible rect in terms of the tile container
-
-function getScrollboxPosition() {
-  let scrollbox = document.getElementById("scrollbox")
-		.boxObject
-		.QueryInterface(Components.interfaces.nsIScrollBoxObject);
-  let x = {};
-  let y = {};
-  scrollbox.getPosition(x, y);
-  return [x.value, y.value];
-}
-
 function getVisibleRect() {
+  let container = document.getElementById("tile-container");
+  let containerBCR = container.getBoundingClientRect();
+
+  let x = Math.round(-containerBCR.left);
+  let y = Math.round(-containerBCR.top);
   let w = window.innerWidth;
   let h = window.innerHeight;
 
-  let [x, y] = getScrollboxPosition();
-
   return new wsRect(x, y, w, h);
 }
 
-function scrollboxToViewportRect(rect) {
-  let leftbar  = document.getElementById("tabs-container");
-  let rightbar = document.getElementById("browser-controls");
-  let topbar   = document.getElementById("toolbar-main");
-
-  let leftbarcr = leftbar.getBoundingClientRect();
-  let topbarcr  = topbar.getBoundingClientRect();
-
-  let xtrans = -leftbarcr.width;
-  let ytrans = -topbarcr.height;
-
-  rect.translate(xtrans, ytrans);
-
-  return rect;
-}
-
 var ih = null;
 
 var Browser = {
-  _canvasBrowser : null,
   _tabs : [],
   _browsers : [],
   _selectedTab : null,
@@ -257,8 +246,8 @@ var Browser = {
   startup: function() {
     var self = this;
 
-    let container = document.getElementById("tile_container");
+    let container = document.getElementById("tile-container");
-    let bv = this._browserView = new BrowserView(container, scrollboxToViewportRect(getVisibleRect()));
+    let bv = this._browserView = new BrowserView(container, getVisibleRect());
 
     let scrollbox = document.getElementById("scrollbox");
     let scrollBoxObject = scrollbox.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
@@ -292,9 +281,6 @@ var Browser = {
         }
       }
 
-      // move checkerboard
-      browserContainer.style.backgroundPosition = -vr.left + "px " + -vr.top + "px";
-
       // this is really only necessary for maemo, where we don't
       // always repaint fast enough.
       self.windowUtils.processUpdates();
@@ -329,7 +315,7 @@ var Browser = {
         }
       }
 
-      bv.setVisibleRect(scrollboxToViewportRect(getVisibleRect()));
+      bv.setVisibleRect(getVisibleRect());
       bv.zoomToPage();
       bv.commitBatchOperation();
     }
@@ -377,7 +363,7 @@ var Browser = {
       if (!aElement)
         return;
 
-      canvasBrowser.ensureElementIsVisible(aElement);
+      //canvasBrowser.ensureElementIsVisible(aElement);
     }
     // Init it with the "browsers" element, which will receive keypress events
     // for all of our <browser>s
@@ -1595,7 +1581,7 @@ Tab.prototype = {
     browser.setAttribute("type", "content");
 
     // Attach the popup contextmenu
-    let container = document.getElementById("tile_container");
+    let container = document.getElementById("tile-container");
     browser.setAttribute("contextmenu", container.getAttribute("contextmenu"));
     let autocompletepopup = container.getAttribute("autocompletepopup");
     if (autocompletepopup)
@@ -1673,6 +1659,7 @@ Tab.prototype = {
     if (!this._browser)
       return;
 
+    // XXX draw from the tiles in to the source
     let srcCanvas = (Browser.selectedBrowser == this._browser) ? document.getElementById("browser-canvas") : null;
     this._chromeTab.updateThumbnail(this._browser, srcCanvas);
   }

mobile/chrome/content/browser.xul

@@ -181,7 +181,7 @@
 
 
 
-  <scrollbox id="scrollbox" style="-moz-box-orient: vertical; overflow: scroll;" flex="1">
+  <scrollbox id="scrollbox" style="-moz-box-orient: vertical; overflow: scroll;" top="0" left="0" flex="1">
     <!-- Main Toolbar -->
     <toolbar id="toolbar-main" class="panel-dark" style="width: 800px;">
       <hbox id="urlbar-container" flex="1">
@@ -228,7 +228,7 @@
 
       <!-- Content Area -->
       <box>
-        <html:div id="tile_container" style="position: relative; width: 800px; height: 480px; overflow: -moz-hidden-unscrollable;"
+        <html:div id="tile-container" style="position: relative; width: 800px; height: 480px; overflow: -moz-hidden-unscrollable;"
                   onnewtab="CommandUpdater.doCommand('cmd_newTab');"/> <!-- do we want this new tab thing? -->
       </box>
 
@@ -244,13 +244,6 @@
     </hbox>
   </scrollbox>
 
-  <box>
-    <html:div style="position: relative; overflow: hidden; max-width: 0px; max-height: 0px; visibility: hidden;">
-      <html:div id="browsers" style="position: absolute;"/>
-    </html:div>
-  </box>
-
-
   <stack>
     <notificationbox id="notifications" top="0" left="0"/>
 
@@ -451,4 +444,11 @@
     </hbox>
   </stack>
 
+
+  <box>
+    <html:div style="position: relative; overflow: hidden; max-width: 0px; max-height: 0px; visibility: hidden;">
+      <html:div id="browsers" style="position: absolute;"/>
+    </html:div>
+  </box>
+
 </window>

mobile/themes/hildon/browser.css

@@ -36,7 +36,7 @@
  * ***** END LICENSE BLOCK ***** */
 
 /* browser area -------------------------------------------------- */
-#browser-container {
+#tile-container {
   background-image: url("chrome://browser/content/checkerboard.png");
 }
 

mobile/themes/wince/browser.css

@@ -40,7 +40,7 @@
 @import url("chrome://browser/skin/browser-low.css");
 
 /* browser area -------------------------------------------------- */
-#browser-container {
+#tile-container {
   background-image: url("chrome://browser/content/checkerboard.png");
 }