From c550953c6d73e63ddd76cef4f848687a183fce5a Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 14 Dec 2022 18:47:59 +0100
Subject: [PATCH] Avoid to compute the client rect of the viewer

The container position and dimensions should be almost constant, hence
it's pretty useless to query them on each rescale.
Finally it avoids to trigger some reflows.
---
 web/app.js        |  7 +++----
 web/pdf_viewer.js | 34 ++++++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/web/app.js b/web/app.js
index 7d2cb8637f806..15f1b685a8d81 100644
--- a/web/app.js
+++ b/web/app.js
@@ -2363,7 +2363,6 @@ function webViewerResize() {
     // Work-around issue 15324 by ignoring "resize" events during printing.
     return;
   }
-  pdfViewer.updateContainerHeightCss();
 
   if (!pdfDocument) {
     return;
@@ -2646,9 +2645,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
index 1ee158c0189ef..e5b8b9da00c05 100644
--- 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}
    */