Merge pull request #20323 from calixteman/bug1991482

Increase the rendering quality of the detail view (bug 1991482)

Author: calixteman

test/integration/viewer_spec.mjs

@@ -364,16 +364,12 @@ describe("PDF viewer", () => {
               .toBeLessThan(originalCanvasSize * factor ** 2);
 
             expect(canvasSize)
-              .withContext(`In ${browserName}, <= MAX_CANVAS_PIXELS / 100`)
-              .toBeLessThanOrEqual(MAX_CANVAS_PIXELS.get(browserName) / 100);
+              .withContext(`In ${browserName}, <= MAX_CANVAS_PIXELS / 4`)
+              .toBeLessThanOrEqual(MAX_CANVAS_PIXELS.get(browserName) / 4);
 
             expect(canvasSize)
-              .withContext(
-                `In ${browserName}, > MAX_CANVAS_PIXELS / 100 * 0.95`
-              )
-              .toBeGreaterThan(
-                (MAX_CANVAS_PIXELS.get(browserName) / 100) * 0.95
-              );
+              .withContext(`In ${browserName}, > MAX_CANVAS_PIXELS / 4 * 0.95`)
+              .toBeGreaterThan((MAX_CANVAS_PIXELS.get(browserName) / 4) * 0.95);
           })
         );
       });
@@ -570,10 +566,10 @@ describe("PDF viewer", () => {
                 .toBe(2);
               expect(after[0].width)
                 .withContext(`In ${browserName}`)
-                .toBe(Math.floor(58.2 * pixelRatio));
+                .toBe(Math.floor(291 * pixelRatio));
               expect(after[0].height)
                 .withContext(`In ${browserName}`)
-                .toBe(Math.floor(82.3 * pixelRatio));
+                .toBe(Math.floor(411.5 * pixelRatio));
 
               // The dimensions of the detail canvas are capped to 800x600 but
               // it depends on the visible area which depends itself of the

web/pdf_page_detail_view.js

@@ -267,7 +267,10 @@ class PDFPageDetailView extends BasePDFPageView {
         canvasWrapper.prepend(newCanvas);
       }
     }, hideUntilComplete);
-    canvas.setAttribute("aria-hidden", "true");
+    canvas.ariaHidden = true;
+    if (this.enableOptimizedPartialRendering) {
+      canvas.className = "detailView";
+    }
 
     const { width, height } = viewport;
 

web/pdf_page_view.js

@@ -804,8 +804,12 @@ class PDFPageView extends BasePDFPageView {
       if (this.#needsRestrictedScaling && this.enableDetailCanvas) {
         // If we are going to have a high-res detail view, further reduce
         // the canvas resolution to improve rendering performance.
-        outputScale.sx /= 10;
-        outputScale.sy /= 10;
+        // When enableOptimizedPartialRendering is enabled the factor can be
+        // higher since less data will be rendered and it's more acceptable to
+        // have a lower quality (the canvas is exposed less time to the user).
+        const factor = this.enableOptimizedPartialRendering ? 4 : 2;
+        outputScale.sx /= factor;
+        outputScale.sy /= factor;
       }
     }
   }

web/pdf_viewer.css

@@ -99,6 +99,10 @@
       .structTree {
         contain: strict;
       }
+
+      &.detailView {
+        image-rendering: pixelated;
+      }
     }
   }
 }