A page is rendered two times when its thumbnail is visible

[calixteman]

For visible pages, we should use a downscaled version of the canvas we've for a page in order to render the thumbnail.

[Snuffleupagus]

But we already do this, please see:

• pdf.js/web/app.js

  Lines 2288 to 2299 in 36967fc

  	// Use the rendered page to set the corresponding thumbnail image.
  	if (PDFViewerApplication.pdfSidebar.visibleView === SidebarView.THUMBS) {
  	const pageView = PDFViewerApplication.pdfViewer.getPageView(
  	/* index = */ pageNumber - 1
  	);
  	const thumbnailView = PDFViewerApplication.pdfThumbnailViewer.getThumbnail(
  	/* index = */ pageNumber - 1
  	);
  	if (pageView && thumbnailView) {
  	thumbnailView.setImage(pageView);
  	}
  	}

• pdf.js/web/pdf_sidebar.js

  Lines 294 to 307 in 36967fc

  	#updateThumbnailViewer() {
  	const { pdfViewer, pdfThumbnailViewer } = this;
  	// Use the rendered pages to set the corresponding thumbnail images.
  	const pagesCount = pdfViewer.pagesCount;
  	for (let pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
  	const pageView = pdfViewer.getPageView(pageIndex);
  	if (pageView?.renderingState === RenderingStates.FINISHED) {
  	const thumbnailView = pdfThumbnailViewer.getThumbnail(pageIndex);
  	thumbnailView.setImage(pageView);
  	}
  	}
  	pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
  	}

• pdf.js/web/pdf_thumbnail_view.js

  Lines 351 to 368 in 36967fc

  	setImage(pageView) {
  	if (this.renderingState !== RenderingStates.INITIAL) {
  	return;
  	}
  	const { thumbnailCanvas: canvas, pdfPage, scale } = pageView;
  	if (!canvas) {
  	return;
  	}
  	if (!this.pdfPage) {
  	this.setPdfPage(pdfPage);
  	}
  	if (scale < this.scale) {
  	// Avoid upscaling the image, since that makes the thumbnail look blurry.
  	return;
  	}
  	this.renderingState = RenderingStates.FINISHED;
  	this._convertCanvasToImage(canvas);
  	}

[calixteman]

My bad, I saw two calls to beginDrawing, probably because of a page resize... and I wrongly attributed the second call to the thumbnail rendering.
So to reproduce, just load this one page pdf:
tracemonkey_page1.pdf
then open the thumbnail view and reload to open the page and the thumbnail at the same time.

If you put a console.log in beginDrawing you can see it is called two times.

[calixteman]

And it's likely because devtools is in the same window, which reduces the viewport size.

[Snuffleupagus]

My bad, I saw two calls to beginDrawing, probably because of a page resize...

Yes, that sounds like the correct explanation here.

If you put a console.log in beginDrawing you can see it is called two times.

To reproduce this I also need to to set page-width as the scale, since otherwise I'm not triggering the two calls (this issue thus depends on things like document dimensions, browser window dimensions, and screen dimensions).

---

Please note that there's actually a few cases where we don't use the page canvas for the thumbnail:

• Pages that are smaller than the thumbnail, to prevent blurriness; see PR Ignore too small page-canvases in PDFThumbnailView.setImage #15251.
• Pages with non-default optional content, which is behaviour similar to e.g. Adobe Reader; see PR [api-minor] Improve how we disable PDFThumbnailView.setImage for documents with Optional Content #15215.
• Pages with form fields, to prevent the thumbnail from being partially/completely blank; see PR [api-minor] Improve thumbnail handling in documents that contain interactive forms #15246.