[PDFThumbnailView] Re-factor the canvas to image conversion such that we always render to a canvas, and then replace it with an image once rendering is done

*This is a follow-up to PRs 6299 and 6441.*

The patch also adds an option to `PDFThumbnailView`, that disables the canvas-to-image conversion entirely, which might be useful in the context of issue 7026.

web/pdf_thumbnail_view.js

@@ -26,6 +26,9 @@ var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
  * @property {PageViewport} defaultViewport - The page viewport.
  * @property {IPDFLinkService} linkService - The navigation/linking service.
  * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
+ * @property {boolean} disableCanvasToImageConversion - (optional) Don't convert
+ *   the canvas thumbnails to images. This prevents `toDataURL` calls,
+ *   but increases the overall memory usage. The default value is false.
  */
 
 /**
@@ -43,7 +46,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     tempCanvas.height = height;
 
     // Since this is a temporary canvas, we need to fill the canvas with a white
-    // background ourselves. |_getPageDrawContext| uses CSS rules for this.
+    // background ourselves. `_getPageDrawContext` uses CSS rules for this.
 //#if MOZCENTRAL || FIREFOX || GENERIC
     tempCanvas.mozOpaque = true;
 //#endif
@@ -65,6 +68,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     var defaultViewport = options.defaultViewport;
     var linkService = options.linkService;
     var renderingQueue = options.renderingQueue;
+    var disableCanvasToImageConversion =
+      options.disableCanvasToImageConversion || false;
 
     this.id = id;
     this.renderingId = 'thumbnail' + id;
@@ -79,6 +84,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
 
     this.resume = null;
     this.renderingState = RenderingStates.INITIAL;
+    this.disableCanvasToImageConversion = disableCanvasToImageConversion;
 
     this.pageWidth = this.viewport.width;
     this.pageHeight = this.viewport.height;
@@ -183,6 +189,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
     _getPageDrawContext:
         function PDFThumbnailView_getPageDrawContext(noCtxScale) {
       var canvas = document.createElement('canvas');
+      // Keep the no-thumbnail outline visible, i.e. `data-loaded === false`,
+      // until rendering/image conversion is complete, to avoid display issues.
       this.canvas = canvas;
 
 //#if MOZCENTRAL || FIREFOX || GENERIC
@@ -199,18 +207,6 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       if (!noCtxScale && outputScale.scaled) {
         ctx.scale(outputScale.sx, outputScale.sy);
       }
-
-      var image = document.createElement('img');
-      this.image = image;
-
-      image.id = this.renderingId;
-      image.className = 'thumbnailImage';
-      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;
-
       return ctx;
     },
 
@@ -221,10 +217,36 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
       if (!this.canvas) {
         return;
       }
-      this.image.src = this.canvas.toDataURL();
+      if (this.renderingState !== RenderingStates.FINISHED) {
+        return;
+      }
+      var id = this.renderingId;
+      var className = 'thumbnailImage';
+      var ariaLabel = mozL10n.get('thumb_page_canvas', { page: this.id },
+                                  'Thumbnail of Page {{page}}');
+
+      if (this.disableCanvasToImageConversion) {
+        this.canvas.id = id;
+        this.canvas.className = className;
+        this.canvas.setAttribute('aria-label', ariaLabel);
+
+        this.div.setAttribute('data-loaded', true);
+        this.ring.appendChild(this.canvas);
+        return;
+      }
+      var image = document.createElement('img');
+      image.id = id;
+      image.className = className;
+      image.setAttribute('aria-label', ariaLabel);
+
+      image.style.width = this.canvasWidth + 'px';
+      image.style.height = this.canvasHeight + 'px';
+
+      image.src = this.canvas.toDataURL();
+      this.image = image;
 
       this.div.setAttribute('data-loaded', true);
-      this.ring.appendChild(this.image);
+      this.ring.appendChild(image);
 
       // Zeroing the width and height causes Firefox to release graphics
       // resources immediately, which can greatly reduce memory consumption.

web/pdf_thumbnail_viewer.js

@@ -147,7 +147,8 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
             id: pageNum,
             defaultViewport: viewport.clone(),
             linkService: this.linkService,
-            renderingQueue: this.renderingQueue
+            renderingQueue: this.renderingQueue,
+            disableCanvasToImageConversion: false,
           });
           this.thumbnails.push(thumbnail);
         }