From 7c9d177826958bd02fe4d337f7becb8b9fe54c17 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Tue, 1 Oct 2024 17:37:44 +0200
Subject: [PATCH] Update the `CaretBrowsingMode` toolbar-height if the
 `toolbarDensity` preference changes (PR 18786 follow-up)

Otherwise the isVisible-calculations may not work correctly.
---
 web/app.js            |  1 +
 web/caret_browsing.js | 24 +++++++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/app.js b/web/app.js
index 2f18b6049..d5d61b82b 100644
--- a/web/app.js
+++ b/web/app.js
@@ -876,6 +876,7 @@ const PDFViewerApplication = {
 
   moveCaret(isUp, select) {
     this._caretBrowsing ||= new CaretBrowsingMode(
+      this._globalAbortController.signal,
       this.appConfig.mainContainer,
       this.appConfig.viewerContainer,
       this.appConfig.toolbar?.container
diff --git a/web/caret_browsing.js b/web/caret_browsing.js
index 9fc3275be..fbbc9c959 100644
--- a/web/caret_browsing.js
+++ b/web/caret_browsing.js
@@ -19,14 +19,32 @@ const PRECISION = 1e-1;
 class CaretBrowsingMode {
   #mainContainer;
 
-  #toolBarHeight;
+  #toolBarHeight = 0;
 
   #viewerContainer;
 
-  constructor(mainContainer, viewerContainer, toolbarContainer) {
+  constructor(abortSignal, mainContainer, viewerContainer, toolbarContainer) {
     this.#mainContainer = mainContainer;
     this.#viewerContainer = viewerContainer;
-    this.#toolBarHeight = toolbarContainer?.getBoundingClientRect().height ?? 0;
+
+    if (!toolbarContainer) {
+      return;
+    }
+    this.#toolBarHeight = toolbarContainer.getBoundingClientRect().height;
+
+    const toolbarObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target === toolbarContainer) {
+          this.#toolBarHeight = Math.floor(entry.borderBoxSize[0].blockSize);
+          break;
+        }
+      }
+    });
+    toolbarObserver.observe(toolbarContainer);
+
+    abortSignal.addEventListener("abort", () => toolbarObserver.disconnect(), {
+      once: true,
+    });
   }
 
   /**