Merge pull request #15830 from calixteman/dont_compute_rect

Avoid to compute the client rect of the viewer
mozilla · Dec 17, 2022 · 1ab711e · 1ab711e
2 parents 65a476a + c550953
commit 1ab711e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/web/app.js b/web/app.js
@@ -2366,7 +2366,6 @@ function webViewerResize() {
     // Work-around issue 15324 by ignoring "resize" events during printing.
     return;
   }
-  pdfViewer.updateContainerHeightCss();
 
   if (!pdfDocument) {
     return;
@@ -2649,9 +2648,9 @@ function webViewerWheel(evt) {
       // left corner is restored. When the mouse wheel is used, the position
       // under the cursor should be restored instead.
       const scaleCorrectionFactor = currentScale / previousScale - 1;
-      const rect = pdfViewer.container.getBoundingClientRect();
-      const dx = evt.clientX - rect.left;
-      const dy = evt.clientY - rect.top;
+      const [top, left] = pdfViewer.containerTopLeft;
+      const dx = evt.clientX - left;
+      const dy = evt.clientY - top;
       pdfViewer.container.scrollLeft += dx * scaleCorrectionFactor;
       pdfViewer.container.scrollTop += dy * scaleCorrectionFactor;
     }

diff --git a/web/pdf_viewer.js b/web/pdf_viewer.js
@@ -227,10 +227,14 @@ class PDFViewer {
 
   #annotationMode = AnnotationMode.ENABLE_FORMS;
 
+  #containerTopLeft = null;
+
   #enablePermissions = false;
 
   #previousContainerHeight = 0;
 
+  #resizeObserver = new ResizeObserver(this.#resizeObserverCallback.bind(this));
+
   #scrollModePageState = null;
 
   #onVisibilityChange = null;
@@ -247,6 +251,8 @@ class PDFViewer {
       );
     }
     this.container = options.container;
+    this.#resizeObserver.observe(this.container);
+
     this.viewer = options.viewer || options.container.firstElementChild;
 
     if (
@@ -330,7 +336,8 @@ class PDFViewer {
     if (this.removePageBorders) {
       this.viewer.classList.add("removePageBorders");
     }
-    this.updateContainerHeightCss();
+
+    this.#updateContainerHeightCss();
   }
 
   get pagesCount() {
@@ -1137,7 +1144,6 @@ class PDFViewer {
     if (this.defaultRenderingQueue) {
       this.update();
     }
-    this.updateContainerHeightCss();
   }
 
   /**
@@ -2186,16 +2192,32 @@ class PDFViewer {
     this.currentScaleValue = newScale;
   }
 
-  updateContainerHeightCss() {
-    const height = this.container.clientHeight;
-
+  #updateContainerHeightCss(height = this.container.clientHeight) {
     if (height !== this.#previousContainerHeight) {
       this.#previousContainerHeight = height;
-
       docStyle.setProperty("--viewer-container-height", `${height}px`);
     }
   }
 
+  #resizeObserverCallback(entries) {
+    for (const entry of entries) {
+      if (entry.target === this.container) {
+        this.#updateContainerHeightCss(
+          Math.floor(entry.borderBoxSize[0].blockSize)
+        );
+        this.#containerTopLeft = null;
+        break;
+      }
+    }
+  }
+
+  get containerTopLeft() {
+    return (this.#containerTopLeft ||= [
+      this.container.offsetTop,
+      this.container.offsetLeft,
+    ]);
+  }
+
   /**
    * @type {number}
    */