Merge pull request #18831 from Snuffleupagus/toolbar-container

Fix `toolbarViewer`/`toolbarContainer` regressions (PR 18385, 18786 follow-up)
mozilla · Oct 2, 2024 · e25832c · e25832c
2 parents 0308b80 + 07e8afb
commit e25832c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/web/app.js b/web/app.js
@@ -376,18 +376,16 @@ const PDFViewerApplication = {
   async _initializeViewerComponents() {
     const { appConfig, externalServices, l10n } = this;
 
-    let eventBus;
-    if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
-      eventBus = AppOptions.eventBus = new FirefoxEventBus(
-        AppOptions.get("allowedGlobalEvents"),
-        externalServices,
-        AppOptions.get("isInAutomation")
-      );
-    } else {
-      eventBus = new EventBus();
-    }
+    const eventBus =
+      typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")
+        ? new FirefoxEventBus(
+            AppOptions.get("allowedGlobalEvents"),
+            externalServices,
+            AppOptions.get("isInAutomation")
+          )
+        : new EventBus();
+    this.eventBus = AppOptions.eventBus = eventBus;
     this.mlManager?.setEventBus(eventBus, this._globalAbortController.signal);
-    this.eventBus = eventBus;
 
     this.overlayManager = new OverlayManager();
 
@@ -876,6 +874,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
@@ -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,
+    });
   }
 
   /**

diff --git a/web/viewer.js b/web/viewer.js
@@ -41,7 +41,7 @@ function getViewerConfiguration() {
     mainContainer: document.getElementById("viewerContainer"),
     viewerContainer: document.getElementById("viewer"),
     toolbar: {
-      container: document.getElementById("toolbarViewer"),
+      container: document.getElementById("toolbarContainer"),
       numPages: document.getElementById("numPages"),
       pageNumber: document.getElementById("pageNumber"),
       scaleSelect: document.getElementById("scaleSelect"),