Bug 720838 - [Page Thumbnails] Use canvas.mozFetchAsStream(); r=dietrich

browser/base/content/browser-thumbnails.js

@@ -78,8 +78,9 @@ let gBrowserThumbnails = {
 
   _capture: function Thumbnails_capture(aBrowser) {
     if (this._shouldCapture(aBrowser)) {
-      let canvas = this._pageThumbs.capture(aBrowser.contentWindow);
-      this._pageThumbs.store(aBrowser.currentURI.spec, canvas);
+      this._pageThumbs.capture(aBrowser.contentWindow, function (aInputStream) {
+        this._pageThumbs.store(aBrowser.currentURI.spec, aInputStream);
+      }.bind(this));
     }
   },
 

browser/components/thumbnails/PageThumbs.jsm

@@ -72,11 +72,13 @@ let PageThumbs = {
   },
 
   /**
-   * Creates a canvas containing a thumbnail depicting the given window.
+   * Captures a thumbnail for the given window.
    * @param aWindow The DOM window to capture a thumbnail from.
-   * @return The newly created canvas containing the image data.
+   * @param aCallback The function to be called when the thumbnail has been
+   *                  captured. The first argument will be the data stream
+   *                  containing the image data.
    */
-  capture: function PageThumbs_capture(aWindow) {
+  capture: function PageThumbs_capture(aWindow, aCallback) {
     let telemetryCaptureTime = new Date();
     let [sw, sh, scale] = this._determineCropSize(aWindow);
 
@@ -94,21 +96,22 @@ let PageThumbs = {
       // We couldn't draw to the canvas for some reason.
     }
 
-    Services.telemetry.getHistogramById("FX_THUMBNAILS_CAPTURE_TIME_MS")
+    let telemetry = Services.telemetry;
+    telemetry.getHistogramById("FX_THUMBNAILS_CAPTURE_TIME_MS")
       .add(new Date() - telemetryCaptureTime);
 
-    return canvas;
+    canvas.mozFetchAsStream(aCallback, this.contentType);
   },
 
   /**
    * Stores the image data contained in the given canvas to the underlying
    * storage.
    * @param aKey The key to use for the storage.
-   * @param aCanvas The canvas containing the thumbnail's image data.
+   * @param aInputStream The input stream containing the image data.
    * @param aCallback The function to be called when the canvas data has been
    *                  stored (optional).
    */
-  store: function PageThumbs_store(aKey, aCanvas, aCallback) {
+  store: function PageThumbs_store(aKey, aInputStream, aCallback) {
     let telemetryStoreTime = new Date();
 
     function finish(aSuccessful) {
@@ -121,8 +124,6 @@ let PageThumbs = {
         aCallback(aSuccessful);
     }
 
-    let self = this;
-
     // Get a writeable cache entry.
     PageThumbsCache.getWriteEntry(aKey, function (aEntry) {
       if (!aEntry) {
@@ -130,38 +131,20 @@ let PageThumbs = {
         return;
       }
 
-      // Extract image data from the canvas.
-      self._readImageData(aCanvas, function (aData) {
-        let outputStream = aEntry.openOutputStream(0);
+      let outputStream = aEntry.openOutputStream(0);
 
-        // Write the image data to the cache entry.
-        NetUtil.asyncCopy(aData, outputStream, function (aResult) {
-          let success = Components.isSuccessCode(aResult);
-          if (success)
-            aEntry.markValid();
+      // Write the image data to the cache entry.
+      NetUtil.asyncCopy(aInputStream, outputStream, function (aResult) {
+        let success = Components.isSuccessCode(aResult);
+        if (success)
+          aEntry.markValid();
 
-          aEntry.close();
-          finish(success);
-        });
+        aEntry.close();
+        finish(success);
       });
     });
   },
 
-  /**
-   * Reads the image data from a given canvas and passes it to the callback.
-   * @param aCanvas The canvas to read the image data from.
-   * @param aCallback The function that the image data is passed to.
-   */
-  _readImageData: function PageThumbs_readImageData(aCanvas, aCallback) {
-    let dataUri = aCanvas.toDataURL(PageThumbs.contentType, "");
-    let uri = Services.io.newURI(dataUri, "UTF8", null);
-
-    NetUtil.asyncFetch(uri, function (aData, aResult) {
-      if (Components.isSuccessCode(aResult) && aData && aData.available())
-        aCallback(aData);
-    });
-  },
-
   /**
    * Determines the crop size for a given content window.
    * @param aWindow The content window.

browser/components/thumbnails/test/head.js

@@ -96,30 +96,32 @@ function whenLoaded(aElement, aCallback) {
 function captureAndCheckColor(aRed, aGreen, aBlue, aMessage) {
   let window = gBrowser.selectedTab.linkedBrowser.contentWindow;
 
-  let key = Date.now();
-  let data = PageThumbs.capture(window);
+  // Capture the screenshot.
+  PageThumbs.capture(window, function (aData) {
+    let key = Date.now();
 
-  // Store the thumbnail in the cache.
-  PageThumbs.store(key, data, function () {
-    let width = 100, height = 100;
-    let thumb = PageThumbs.getThumbnailURL(key, width, height);
+    // Store the thumbnail in the cache.
+    PageThumbs.store(key, aData, function () {
+      let width = 100, height = 100;
+      let thumb = PageThumbs.getThumbnailURL(key, width, height);
 
-    getXULDocument(function (aDocument) {
-      let htmlns = "http://www.w3.org/1999/xhtml";
-      let img = aDocument.createElementNS(htmlns, "img");
-      img.setAttribute("src", thumb);
+      getXULDocument(function (aDocument) {
+        let htmlns = "http://www.w3.org/1999/xhtml";
+        let img = aDocument.createElementNS(htmlns, "img");
+        img.setAttribute("src", thumb);
 
-      whenLoaded(img, function () {
-        let canvas = aDocument.createElementNS(htmlns, "canvas");
-        canvas.setAttribute("width", width);
-        canvas.setAttribute("height", height);
+        whenLoaded(img, function () {
+          let canvas = aDocument.createElementNS(htmlns, "canvas");
+          canvas.setAttribute("width", width);
+          canvas.setAttribute("height", height);
 
-        // Draw the image to a canvas and compare the pixel color values.
-        let ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0, width, height);
-        checkCanvasColor(ctx, aRed, aGreen, aBlue, aMessage);
+          // Draw the image to a canvas and compare the pixel color values.
+          let ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, width, height);
+          checkCanvasColor(ctx, aRed, aGreen, aBlue, aMessage);
 
-        next();
+          next();
+        });
       });
     });
   });