diff --git a/web/pdf_thumbnail_view.js b/web/pdf_thumbnail_view.js index 0d4752f2d057a..b8c54fe4fd54a 100644 --- a/web/pdf_thumbnail_view.js +++ b/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; - this.image.style.height = canvas.style.height; - this.image.style.width = canvas.style.width; - this.image.className = 'thumbnailImage'; - this.image.setAttribute('aria-label', mozL10n.get('thumb_page_canvas', + + var image = document.createElement('img'); + 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; + + 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.canvas.width = 0; - this.canvas.height = 0; - delete this.canvas; + this._convertCanvasToImage(); } };