[api-major] Apply the userUnit using CSS, to fix the text/annotation layers (bug 1947248)

Rather than modifying the "raw" dimensions of the page, we'll instead apply the `userUnit` as an *additional* scale-factor via CSS.

*Please note:* It's not clear to me if this solution is fully correct either, or if there's other problems with it, but it at least *appears* to work.

---

With these changes, the following CSS variables are now assumed to be available/set as necessary: `--total-scale-factor`, `--scale-factor`, `--user-unit`, `--scale-round-x`, and `--scale-round-y`.

web/annotation_editor_layer_builder.css

@@ -123,7 +123,7 @@
   background: transparent;
   position: absolute;
   inset: 0;
-  font-size: calc(100px * var(--scale-factor));
+  font-size: calc(100px * var(--total-scale-factor));
   transform-origin: 0 0;
   cursor: auto;
 
@@ -512,7 +512,7 @@
 }
 
 .annotationEditorLayer .freeTextEditor {
-  padding: calc(var(--freetext-padding) * var(--scale-factor));
+  padding: calc(var(--freetext-padding) * var(--total-scale-factor));
   width: auto;
   height: auto;
   touch-action: none;

web/annotation_layer_builder.css

@@ -50,7 +50,7 @@
     }
 
     .popupAnnotation .popup {
-      outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+      outline: calc(1.5px * var(--total-scale-factor)) solid CanvasText !important;
       background-color: ButtonFace !important;
       color: ButtonText !important;
     }
@@ -67,7 +67,7 @@
     }
 
     .popupAnnotation.focused .popup {
-      outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+      outline: calc(3px * var(--total-scale-factor)) solid Highlight !important;
     }
   }
 
@@ -169,7 +169,7 @@
     background-image: var(--annotation-unfocused-field-background);
     border: 2px solid var(--input-unfocused-border-color);
     box-sizing: border-box;
-    font: calc(9px * var(--scale-factor)) sans-serif;
+    font: calc(9px * var(--total-scale-factor)) sans-serif;
     height: 100%;
     margin: 0;
     vertical-align: top;
@@ -296,7 +296,7 @@
 
   .popupAnnotation {
     position: absolute;
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
     pointer-events: none;
     width: max-content;
     max-width: 45%;
@@ -305,11 +305,11 @@
 
   .popup {
     background-color: rgb(255 255 153);
-    box-shadow: 0 calc(2px * var(--scale-factor))
-      calc(5px * var(--scale-factor)) rgb(136 136 136);
-    border-radius: calc(2px * var(--scale-factor));
+    box-shadow: 0 calc(2px * var(--total-scale-factor))
+      calc(5px * var(--total-scale-factor)) rgb(136 136 136);
+    border-radius: calc(2px * var(--total-scale-factor));
     outline: 1.5px solid rgb(255 255 74);
-    padding: calc(6px * var(--scale-factor));
+    padding: calc(6px * var(--total-scale-factor));
     cursor: pointer;
     font: message-box;
     white-space: normal;
@@ -323,7 +323,7 @@
   }
 
   .popup * {
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
   }
 
   .popup > .header {
@@ -336,19 +336,19 @@
 
   .popup > .header .popupDate {
     display: inline-block;
-    margin-left: calc(5px * var(--scale-factor));
+    margin-left: calc(5px * var(--total-scale-factor));
     width: fit-content;
   }
 
   .popupContent {
     border-top: 1px solid rgb(51 51 51);
-    margin-top: calc(2px * var(--scale-factor));
-    padding-top: calc(2px * var(--scale-factor));
+    margin-top: calc(2px * var(--total-scale-factor));
+    padding-top: calc(2px * var(--total-scale-factor));
   }
 
   .richText > * {
     white-space: pre-wrap;
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
   }
 
   .popupTriggerArea {

web/pdf_page_view.js

@@ -147,6 +147,8 @@ class PDFPageView {
 
   #textLayerMode = TextLayerMode.ENABLE;
 
+  #userUnit = 1;
+
   #useThumbnailCanvas = {
     directDrawing: true,
     initialOptionalContent: true,
@@ -314,7 +316,16 @@ class PDFPageView {
   }
 
   #setDimensions() {
-    const { viewport } = this;
+    const { div, viewport } = this;
+
+    if (viewport.userUnit !== this.#userUnit) {
+      if (viewport.userUnit !== 1) {
+        div.style.setProperty("--user-unit", viewport.userUnit);
+      } else {
+        div.style.removeProperty("--user-unit");
+      }
+      this.#userUnit = viewport.userUnit;
+    }
     if (this.pdfPage) {
       if (this.#previousRotation === viewport.rotation) {
         return;
@@ -323,7 +334,7 @@ class PDFPageView {
     }
 
     setLayerDimensions(
-      this.div,
+      div,
       viewport,
       /* mustFlip = */ true,
       /* mustRotate = */ false

web/pdf_viewer.css

@@ -100,6 +100,8 @@
 }
 
 .pdfViewer .page {
+  --user-unit: 1;
+  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
   --scale-round-x: 1px;
   --scale-round-y: 1px;
 

web/struct_tree_layer_builder.js

@@ -204,7 +204,7 @@ class StructTreeLayerBuilder {
     img.setAttribute("aria-label", removeNullCharacters(alt));
 
     const { pageHeight, pageX, pageY } = this.#rawDims;
-    const calc = "calc(var(--scale-factor)*";
+    const calc = "calc(var(--total-scale-factor) *";
     const { style } = img;
     style.width = `${calc}${bbox[2] - bbox[0]}px)`;
     style.height = `${calc}${bbox[3] - bbox[1]}px)`;