Better canvas panning

Added canvas updating during the pan Removed deckbrowser.loadURI --HG-- branch : mobile
2008-05-08 17:59:16 -05:00 · 2008-05-08 17:59:16 -05:00 · 4847e14a18
--- a/mobile/app/mobile.js
+++ b/mobile/app/mobile.js
@ -41,7 +41,6 @@ pref("general.useragent.extra.mobile", "@APP_UA_NAME@/@APP_VERSION@");

 pref("browser.startup.homepage", "http://www.mozilla.org/");
 pref("browser.ui.cursor", false);
-pref("general.smoothScroll", false);

 /* cache prefs */
 pref("browser.cache.disk.enable", false);
--- a/mobile/chrome/content/bookmarks.js
+++ b/mobile/chrome/content/bookmarks.js
@ -125,7 +125,7 @@ var Bookmarks = {

  open : function(aItem) {
    var bookmarkURI = this.bookmarks.getBookmarkURI(aItem);
-    Browser.content.loadURI(bookmarkURI.spec, null, null, false);
+    getBrowser().loadURI(bookmarkURI.spec, null, null, false);
    this.close();
  },

--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@ -541,6 +541,7 @@ MouseController.prototype = {

    if (100 > delta || (8 > Math.abs(x) && 8 > Math.abs(y)))
      return;
+
    dump("##: " + delta + " [" + x + ", " + y + "]\n");
    if (this._contextID) {
      clearTimeout(this._contextID);
@ -554,7 +555,7 @@ MouseController.prototype = {
        y: y
      };
    }
-    //this._browser.contentWindow.scrollBy(-x, -y);
+
    this._browser.doPan(aEvent, -x, -y);
    this.lastEvent = aEvent;

--- a/mobile/chrome/content/deckbrowser.xml
+++ b/mobile/chrome/content/deckbrowser.xml
@ -21,11 +21,13 @@

  <binding id="deckbrowser">
    <content>
-      <xul:deck anonid="container" class="deckbrowser-container" flex="1">
-      </xul:deck>
-      <xul:scrollbox anonid="renderspace" class="deckbrowser-renderspace" collapsed="true" flex="1">
-        <html:canvas anonid="canvas"/>
-      </xul:scrollbox>
+      <xul:stack flex="1">
+        <xul:deck anonid="container" class="deckbrowser-container" flex="1">
+        </xul:deck>
+        <xul:scrollbox anonid="renderspace" class="deckbrowser-renderspace" style="visibility: hidden" flex="1">
+          <html:canvas anonid="canvas"/>
+        </xul:scrollbox>
+      </xul:stack>
      <xul:vbox anonid="tabspace" class="deckbrowser-tabspace" collapsed="true" align="center" flex="1">
        <xul:description anonid="title" class="deckbrowser-title" crop="end"/>
        <xul:description anonid="uri" class="deckbrowser-uri" crop="center"/>
@ -96,7 +98,7 @@

            if (aURI != "about:blank") {
              b.stop();
-              this.loadURI(aURI, aReferrer, aPostData, aFixup);
+              b.loadURI(aURI, aReferrer, aPostData, aFixup);
            }

            // Broadcast creation
@ -166,24 +168,6 @@
        </body>
      </method>

-      <method name="loadURI">
-        <parameter name="aURI"/>
-        <parameter name="aReferrer"/>
-        <parameter name="aPostData"/>
-        <parameter name="aFixUp"/>
-        <body>
-          <![CDATA[
-            if (aPostData === undefined)
-              aPostData = null;
-            var flags = Ci.nsIWebNavigation.LOAD_FLAGS_NONE;
-            if (aFixUp)
-              flags = Ci.nsIWebNavigation.LOAD_FLAGS_ALLOW_THIRD_PARTY_FIXUP;
-
-            this.browser.loadURIWithFlags(aURI, flags, aReferrer, null, aPostData);
-          ]]>
-        </body>
-      </method>
-
      <method name="select">
        <body>
          <![CDATA[
@ -250,20 +234,27 @@
        </body>
      </method>

+      <field name="_updateTimer">
+        null
+      </field>
+
      <method name="_updateCanvas">
+        <parameter name="aOffsetX"/>
+        <parameter name="aOffsetY"/>
        <body>
          <![CDATA[
+            var posX = aOffsetX;
+            var posY = aOffsetY;
+
            var canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
            var domWin = this.browser.contentWindow;
-            var canvasW = domWin.innerWidth + domWin.scrollMaxX;
-            var canvasH = domWin.innerHeight + domWin.scrollMaxY;
-            canvas.width = canvasW;
-            canvas.height = canvasH;
-
            var ctx = canvas.getContext("2d");
-            ctx.clearRect(0, 0, canvasW, canvasH);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
            var stime = Date.now();
-            ctx.drawWindow(domWin, domWin.scrollX, domWin.scrollY, domWin.innerWidth, domWin.innerHeight, "rgba(0,0,0,0)");
+            ctx.save();
+            ctx.translate(posX, posY);
+            ctx.drawWindow(domWin, posX, posY, domWin.innerWidth, domWin.innerHeight, "rgba(0,0,0,0)");
+            ctx.restore();
            var etime = Date.now();
            dump("drawWindow: " + (etime - stime) + " ms\n");
          ]]>
@ -274,14 +265,24 @@
        <parameter name="aEvent"/>
        <body>
          <![CDATA[
-            this._updateCanvas();
+            var canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
+            var domWin = this.browser.contentWindow;
+            var canvasW = domWin.innerWidth + domWin.scrollMaxX;
+            var canvasH = domWin.innerHeight + domWin.scrollMaxY;
+            canvas.width = canvasW;
+            canvas.height = canvasH;
+
+            this._updateCanvas(domWin.scrollX, domWin.scrollY);
+            this._updateTimer = null;
+
+            // Must uncollapse the scroller before scrolling it into position.
+            // It fails to scroll otherwise.
+            this._container.style.visibility = "hidden";
+            this._renderspace.style.visibility = "visible";

            var domWin = this.browser.contentWindow;
            var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
-            scroller.scrollTo(domWin.scrollMaxX, domWin.scrollMaxY);
-
-            this._container.collapsed = true;
-            this._renderspace.collapsed = false;
+            scroller.scrollTo(domWin.scrollX, domWin.scrollY);
          ]]>
        </body>
      </method>
@ -294,6 +295,15 @@
          <![CDATA[
            var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
            scroller.scrollBy(aDeltaX, aDeltaY);
+            var sx = {}; var sy = {};
+            scroller.getPosition(sx, sy);
+
+            if (this._updateTimer) {
+              clearTimeout(this._updateTimer);
+              this._updateTimer = null;
+            }
+            var self = this;
+            this._updateTimer = setTimeout(function() { self._updateCanvas(sx.value, sy.value); }, 250);
          ]]>
        </body>
      </method>
@ -302,14 +312,22 @@
        <parameter name="aEvent"/>
        <body>
          <![CDATA[
+            if (this._updateTimer) {
+              clearTimeout(this._updateTimer);
+              this._updateTimer = null;
+            }
+
            var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
            var sx = {}; var sy = {};
            scroller.getPosition(sx, sy);
-            var domWin = this.browser.contentWindow;
-            domWin.scrollBy(sx.value, sy.value);

-            this._renderspace.collapsed = true;
-            this._container.collapsed = false;
+            var domWin = this.browser.contentWindow;
+            domWin.scrollTo(sx.value, sy.value);
+
+            scroller.scrollTo(0, 0);
+
+            this._renderspace.style.visibility = "hidden";
+            this._container.style.visibility = "visible";
          ]]>
        </body>
      </method>
--- a/mobile/chrome/content/toolbar.js
+++ b/mobile/chrome/content/toolbar.js
@ -165,12 +165,12 @@ var LocationBar = {
  },

  goToURI : function() {
-    Browser.content.loadURI(this._urlbar.value, null, null, false);
+    getBrowser().loadURI(this._urlbar.value, null, null, false);
  },

  search : function() {
    var queryURI = "http://www.google.com/search?q=" + this._urlbar.value + "&hl=en&lr=&btnG=Search";
-    Browser.content.loadURI(queryURI, null, null, false);
+    getBrowser().loadURI(queryURI, null, null, false);
  },

  getURLBar : function() {
--- a/mobile/chrome/skin/browser.css
+++ b/mobile/chrome/skin/browser.css
@ -237,7 +237,7 @@ toolbarbutton[open="true"] {
  height: 24px;
 }

-.deckbrowser-tabspace {
+.deckbrowser-tabs {
  background-color: #9c9a9c;
 }