Render high-res partial page views when falling back to CSS zoom

When rendering big PDF pages at high zoom levels, we currently fall back
to CSS zoom to avoid rendering canvases with too many pixels. This
causes zoomed in PDF to look blurry, and the text to be potentially
unreadable.

This commit adds support for rendering _part_ of a page (called
`PDFPageDetailView` in the code), so that we can render portion of a
page in a smaller canvas without hiting the maximun canvas size limit.

Specifically, we render an area of that page that is slightly larger
than the area that is visible on the screen (100% larger in each
direction, unless we have to limit it due to the maximum canvas size).
As the user scrolls around the page, we re-render a new area centered
around what is currently visible.

test/unit/ui_utils_spec.js

@@ -279,25 +279,35 @@ describe("ui_utils", function () {
           viewTop < scrollBottom &&
           viewBottom > scrollTop
         ) {
-          const hiddenHeight =
-            Math.max(0, scrollTop - viewTop) +
-            Math.max(0, viewBottom - scrollBottom);
-          const hiddenWidth =
-            Math.max(0, scrollLeft - viewLeft) +
-            Math.max(0, viewRight - scrollRight);
+          const minY = Math.max(0, scrollTop - viewTop);
+          const minX = Math.max(0, scrollLeft - viewLeft);
+
+          const hiddenHeight = minY + Math.max(0, viewBottom - scrollBottom);
+          const hiddenWidth = minX + Math.max(0, viewRight - scrollRight);
 
           const fractionHeight =
             (div.clientHeight - hiddenHeight) / div.clientHeight;
           const fractionWidth =
             (div.clientWidth - hiddenWidth) / div.clientWidth;
           const percent = (fractionHeight * fractionWidth * 100) | 0;
 
+          let visibleArea = null;
+          if (percent < 100) {
+            visibleArea = {
+              minX,
+              minY,
+              maxX: Math.min(viewRight, scrollRight) - viewLeft,
+              maxY: Math.min(viewBottom, scrollBottom) - viewTop,
+            };
+          }
+
           views.push({
             id: view.id,
             x: viewLeft,
             y: viewTop,
             view,
             percent,
+            visibleArea,
             widthPercent: (fractionWidth * 100) | 0,
           });
           ids.add(view.id);