Bug 727765 - part 2 - let Panorama use PageThumbs to draw screenshots to TabCanvases; r=jaws

browser/components/tabview/tabitems.js

@@ -715,7 +715,6 @@ let TabItems = {
   _lastUpdateTime: Date.now(),
   _eventListeners: [],
   _pauseUpdateForTest: false,
-  tempCanvas: null,
   _reconnectingPaused: false,
   tabItemPadding: {},
   _mozAfterPaintHandler: null,
@@ -744,11 +743,6 @@ let TabItems = {
       .attr('moz-opaque', '');
     $canvas.appendTo(iQ("body"));
     $canvas.hide();
-    this.tempCanvas = $canvas[0];
-    // 150 pixels is an empirical size, below which FF's drawWindow()
-    // algorithm breaks down
-    this.tempCanvas.width = 150;
-    this.tempCanvas.height = 112;
 
     let mm = gWindow.messageManager;
     this._mozAfterPaintHandler = this.onMozAfterPaint.bind(this);
@@ -1386,94 +1380,12 @@ TabCanvas.prototype = Utils.extend(new Subscribable(), {
       return;
     }
 
-    let ctx = this.canvas.getContext("2d");
-    let tempCanvas = TabItems.tempCanvas;
-    let bgColor = '#fff';
-
-    if (w < tempCanvas.width) {
-      // Small draw case where nearest-neighbor algorithm breaks down in Windows
-      // First draw to a larger canvas (150px wide), and then draw that image
-      // to the destination canvas.
-      let tempCtx = tempCanvas.getContext("2d");
-      this._drawWindow(tempCtx, tempCanvas.width, tempCanvas.height, bgColor);
-
-      // Now copy to tabitem canvas.
-      try {
-        this._fillCanvasBackground(ctx, w, h, bgColor);
-        ctx.drawImage(tempCanvas, 0, 0, w, h);
-      } catch (e) {
-        Utils.error('paint', e);
-      }
-    } else {
-      // General case where nearest neighbor algorithm looks good
-      // Draw directly to the destination canvas
-      this._drawWindow(ctx, w, h, bgColor);
-    }
+    let win = this.tab.linkedBrowser.contentWindow;
+    gPageThumbnails.captureToCanvas(win, this.canvas);
 
     this._sendToSubscribers("painted");
   },
 
-  // ----------
-  // Function: _fillCanvasBackground
-  // Draws a rectangle of <width>x<height> with color <bgColor> to the given
-  // canvas context.
-  _fillCanvasBackground: function TabCanvas__fillCanvasBackground(ctx, width, height, bgColor) {
-    ctx.fillStyle = bgColor;
-    ctx.fillRect(0, 0, width, height);
-  },
-
-  // ----------
-  // Function: _drawWindow
-  // Draws contents of the tabs' browser window to the given canvas context.
-  _drawWindow: function TabCanvas__drawWindow(ctx, width, height, bgColor) {
-    this._fillCanvasBackground(ctx, width, height, bgColor);
-
-    let rect = this._calculateClippingRect(width, height);
-    let scaler = width / rect.width;
-
-    ctx.save();
-    ctx.scale(scaler, scaler);
-
-    try {
-      let win = this.tab.linkedBrowser.contentWindow;
-      ctx.drawWindow(win, rect.left, rect.top, rect.width, rect.height,
-                     bgColor, ctx.DRAWWINDOW_DO_NOT_FLUSH);
-    } catch (e) {
-      Utils.error('paint', e);
-    }
-
-    ctx.restore();
-  },
-
-  // ----------
-  // Function: _calculateClippingRect
-  // Calculate the clipping rect that will be projected to the tab's
-  // thumbnail canvas.
-  _calculateClippingRect: function TabCanvas__calculateClippingRect(origWidth, origHeight) {
-    let win = this.tab.linkedBrowser.contentWindow;
-
-    // TODO BUG 631593: retrieve actual scrollbar width
-    // 25px is supposed to be width of the vertical scrollbar
-    let maxWidth = Math.max(1, win.innerWidth - 25);
-    let maxHeight = win.innerHeight;
-
-    let height = Math.min(maxHeight, Math.floor(origHeight * maxWidth / origWidth));
-    let width = Math.floor(origWidth * height / origHeight);
-
-    // very short pages in combination with a very wide browser window force us
-    // to extend the clipping rect and add some empty space around the thumb
-    let factor = 0.7;
-    if (width < maxWidth * factor) {
-      width = maxWidth * factor;
-      height = Math.floor(origHeight * width / origWidth);
-    }
-
-    let left = win.scrollX + Math.max(0, Math.round((maxWidth - width) / 2));
-    let top = win.scrollY;
-
-    return new Rect(left, top, width, height);
-  },
-
   // ----------
   // Function: toImageData
   toImageData: function TabCanvas_toImageData() {

browser/components/tabview/test/Makefile.in

@@ -27,7 +27,6 @@ _BROWSER_FILES = \
                  browser_tabview_bug590606.js \
                  browser_tabview_bug591706.js \
                  browser_tabview_bug593283.js \
-                 browser_tabview_bug594958.js \
                  browser_tabview_bug595191.js \
                  browser_tabview_bug595436.js \
                  browser_tabview_bug595518.js \

browser/components/tabview/test/browser_tabview_bug594958.js

@@ -1,144 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-  let win;
-  let cw;
-
-  let getGroupItem = function (index) {
-    return cw.GroupItems.groupItems[index];
-  }
-
-  let finishTest = function () {
-    win.close();
-    finish();
-  }
-
-  // very long page that produces black bars at the right
-  let html1 = '<html><body style="background-color: %2300f;">' +
-              '<div style="background: %23fff; width: 95%; height: 10000px; ' +
-              ' margin: 0 auto;"></div></body></html>';
-
-  // very short page that produces black bars at the bottom
-  let html2 = '<html><body style="background-color: %2300f;"></body></html>';
-
-  let tests = [{
-    url: 'data:text/html,' + html1,
-    colors: [
-      {right: [255, 255, 255], bottom: [255, 255, 255]},
-      {right: [255, 255, 255], bottom: [255, 255, 255]},
-      {right: [255, 255, 255], bottom: [255, 255, 255]}
-    ]
-  }, {
-    url: 'about:blank',
-    colors: [
-      {right: [255, 255, 255], bottom: [255, 255, 255]},
-      {right: [255, 255, 255], bottom: [255, 255, 255]},
-      {right: [255, 255, 255], bottom: [255, 255, 255]}
-    ]
-  }, {
-    url: 'data:text/html,' + html2,
-    colors: [
-      {right: [0, 0, 255], bottom: [0, 0, 255]},
-      {right: [0, 0, 255], bottom: [0, 0, 255]},
-      {right: [0, 0, 255], bottom: [0, 0, 255]}
-    ]
-  }];
-
-  let next = function () {
-    if (!tests.length) {
-      finishTest();
-      return;
-    }
-
-    let test = tests.shift();
-    let tab = win.gBrowser.tabs[0];
-
-    let browser = tab.linkedBrowser;
-    browser.addEventListener("load", function onLoad(event) {
-       browser.removeEventListener("load", onLoad, true);
-       
-       let tabItem = tab._tabViewTabItem;
-       tabItem.addSubscriber("updated", function onUpdated() {
-         tabItem.removeSubscriber("updated", onUpdated);
-         checkUrl(test);
-       });
-    }, true);
-    browser.loadURI(test.url);
-  }
-
-  let checkUrl = function (test) {
-    let sizes = [[-400, 0], [800, -200], [-400, 200]];
-
-    let nextSize = function () {
-      if (!sizes.length) {
-        next();
-        return;
-      }
-
-      let size = sizes.shift();
-      let colors = test.colors.shift();
-      let groupItem = getGroupItem(0);
-
-      let checkWithSmallItemSize = function () {
-        groupItem.setSize(150, 150, true);
-        groupItem.setUserSize();
-
-        afterAllTabItemsUpdated(function () {
-          checkPixelColors(test.url, colors, nextSize);
-        }, win);
-      }
-
-      let checkWithNormalItemSize = function () {
-        groupItem.setSize(300, 300, true);
-        groupItem.setUserSize();
-
-        afterAllTabItemsUpdated(function () {
-          checkPixelColors(test.url, colors, checkWithSmallItemSize);
-        }, win);
-      }
-
-      win.resizeBy.apply(win, size);
-      checkWithNormalItemSize();
-    }
-
-    nextSize();
-  }
-
-  let checkPixelColors = function (url, colors, callback) {
-    let tab = win.gBrowser.tabs[0];
-    let $canvas = tab._tabViewTabItem.$canvas;
-    // Use the direct canvas sizes instead of querying
-    // iQ bounds, which may not be current.
-    let width = $canvas[0].width;
-    let height = $canvas[0].height;
-
-    let ctx = $canvas[0].getContext("2d");
-
-    afterAllTabItemsUpdated(function () {
-      checkPixelColor(ctx, url, colors.bottom, Math.floor(width / 4), height - 1, 'bottom');
-      checkPixelColor(ctx, url, colors.right, width - 1, Math.floor(height / 4), 'right');
-      callback();
-    }, win);
-  }
-
-  let checkPixelColor = function (ctx, url, color, x, y, edge) {
-    let data = ctx.getImageData(x, y, 1, 1).data;
-    let check = (data[0] == color[0] && data[1] == color[1] && data[2] == color[2]);
-    ok(check, url + ': ' + edge + ' edge color matches pixel value');
-  }
-
-  waitForExplicitFinish();
-  newWindowWithTabView(function(newWin) {
-    win = newWin;
-
-    registerCleanupFunction(function () {
-      if (!win.closed)
-        win.close();
-    });
-
-    cw = win.TabView.getContentWindow();
-    next();
-  }, null, 800, 600);
-}
-

toolkit/components/thumbnails/PageThumbs.jsm

@@ -145,6 +145,7 @@ this.PageThumbs = {
     let ctx = aCanvas.getContext("2d");
 
     // Scale the canvas accordingly.
+    ctx.save();
     ctx.scale(scale, scale);
 
     try {
@@ -155,6 +156,8 @@ this.PageThumbs = {
       // We couldn't draw to the canvas for some reason.
     }
 
+    ctx.restore();
+
     let telemetry = Services.telemetry;
     telemetry.getHistogramById("FX_THUMBNAILS_CAPTURE_TIME_MS")
       .add(new Date() - telemetryCaptureTime);