Merge pull request #6441 from Snuffleupagus/pr-6299-follow-up

Misc. follow-up fixes to PR 6299 (Convert canvas thumbnails to PNG)

web/pdf_thumbnail_view.js

@@ -160,6 +160,10 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
         this.canvas.height = 0;
         delete this.canvas;
       }
+      if (this.image) {
+        this.image.removeAttribute('src');
+        delete this.image;
+      }
     },
 
     update: function PDFThumbnailView_update(rotation) {
@@ -186,24 +190,48 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
 
       var ctx = canvas.getContext('2d');
       var outputScale = getOutputScale(ctx);
+
       canvas.width = (this.canvasWidth * outputScale.sx) | 0;
       canvas.height = (this.canvasHeight * outputScale.sy) | 0;
       canvas.style.width = this.canvasWidth + 'px';
       canvas.style.height = this.canvasHeight + 'px';
+
       if (!noCtxScale && outputScale.scaled) {
         ctx.scale(outputScale.sx, outputScale.sy);
       }
-      this.image = document.createElement('img');
+
-      this.image.id = this.renderingId;
+      var image = document.createElement('img');
-      this.image.style.height = canvas.style.height;
+      image.id = this.renderingId;
-      this.image.style.width = canvas.style.width;
+
-      this.image.className = 'thumbnailImage';
+      image.className = 'thumbnailImage';
-      this.image.setAttribute('aria-label', mozL10n.get('thumb_page_canvas',
+      image.setAttribute('aria-label', mozL10n.get('thumb_page_canvas',
         { page: this.id }, 'Thumbnail of Page {{page}}'));
+
+      image.style.width = canvas.style.width;
+      image.style.height = canvas.style.height;
+
+      this.image = image;
       this.ring.appendChild(this.image);
+
       return ctx;
     },
 
+    /**
+     * @private
+     */
+    _convertCanvasToImage: function PDFThumbnailView_convertCanvasToImage() {
+       if (!this.canvas) {
+         return;
+       }
+       this.image.src = this.canvas.toDataURL();
+
+       // Zeroing the width and height causes Firefox to release graphics
+       // resources immediately, which can greatly reduce memory consumption.
+       this.canvas.width = 0;
+       this.canvas.height = 0;
+       delete this.canvas;
+    },
+
     draw: function PDFThumbnailView_draw() {
       if (this.renderingState !== RenderingStates.INITIAL) {
         console.error('Must be in new state before drawing');
@@ -232,12 +260,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
           rejectRenderPromise(error);
           return;
         }
-
-        self.image.src = self.canvas.toDataURL();
-        self.canvas.width = 0;
-        self.canvas.height = 0;
-        delete self.canvas;
         self.renderingState = RenderingStates.FINISHED;
+        self._convertCanvasToImage();
 
         if (!error) {
           resolveRenderPromise(undefined);
@@ -295,6 +319,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       if (img.width <= 2 * canvas.width) {
         ctx.drawImage(img, 0, 0, img.width, img.height,
                       0, 0, canvas.width, canvas.height);
+        this._convertCanvasToImage();
         return;
       }
       // drawImage does an awful job of rescaling the image, doing it gradually.
@@ -319,10 +344,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       }
       ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight,
                     0, 0, canvas.width, canvas.height);
-      this.image.src = canvas.toDataURL();
+      this._convertCanvasToImage();
-      this.canvas.width = 0;
-      this.canvas.height = 0;
-      delete this.canvas;
     }
   };