Provide the position of some elements when the dimensions of the viewport are updated (bug 1907890)

Author: calixteman

web/app.js

@@ -178,6 +178,7 @@ const PDFViewerApplication = {
   _nimbusDataPromise: null,
   _caretBrowsing: null,
   _isScrolling: false,
+  _idsToWatchOutPromise: null,
 
   // Called once when the document is loaded.
   async initialize(appConfig) {
@@ -187,6 +188,7 @@ const PDFViewerApplication = {
     if (typeof PDFJSDev !== "undefined" && !PDFJSDev.test("GENERIC")) {
       l10nPromise = this.externalServices.createL10n();
       if (PDFJSDev.test("MOZCENTRAL")) {
+        this._idsToWatchOutPromise = this.externalServices.getIdsToWatchOut();
         this._allowedGlobalEventsPromise =
           this.externalServices.getGlobalEventNames();
       }
@@ -1995,6 +1997,49 @@ const PDFViewerApplication = {
     }
     addWindowResolutionChange();
 
+    if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
+      // We want to track the position of some elements in order to display a
+      // positioned callout.
+      // If the viewer has its dimensions in some specific range, some elements
+      // are either hidden or made visible (for example the print button is
+      // moved from the main toolbar to the secondary one).
+      this._idsToWatchOutPromise?.then(ids => {
+        if (!ids) {
+          return;
+        }
+        const callback = () => {
+          const detail = Object.create(null);
+          for (const id of ids) {
+            detail[id] = document.getElementById(id).getBoundingClientRect();
+          }
+          eventBus.dispatch("updateviewermaxwidth", {
+            source: this,
+            detail,
+          });
+        };
+
+        // The list of sizes is based on the ones we've in viewer.css.
+        const sizes = [900, 840, 750, 690, 560];
+        for (let i = 0, ii = sizes.length; i < ii; i++) {
+          let mediaQueryList;
+          const size = sizes[i];
+          if (i === 0) {
+            mediaQueryList = window.matchMedia(`(width > ${size}px)`);
+          } else if (i === ii - 1) {
+            mediaQueryList = window.matchMedia(`(width <= ${size}px)`);
+          } else {
+            mediaQueryList = window.matchMedia(
+              `(width > ${sizes[i + 1]}px) and (width <= ${size}px)`
+            );
+          }
+          mediaQueryList.addEventListener("change", callback, {
+            signal,
+          });
+        }
+        callback();
+      });
+    }
+
     window.addEventListener("wheel", webViewerWheel, {
       passive: false,
       signal,

web/external_services.js

@@ -52,6 +52,8 @@ class BaseExternalServices {
   }
 
   dispatchGlobalEvent(_event) {}
+
+  async getIdsToWatchOut() {}
 }
 
 export { BaseExternalServices };

web/firefoxcom.js

@@ -425,6 +425,10 @@ class ExternalServices extends BaseExternalServices {
   dispatchGlobalEvent(event) {
     FirefoxCom.request("dispatchGlobalEvent", event);
   }
+
+  async getIdsToWatchOut() {
+    return FirefoxCom.requestAsync("getIdsToWatchOut", null);
+  }
 }
 
 export { DownloadManager, ExternalServices, initCom, MLManager, Preferences };

web/viewer.css

@@ -1484,6 +1484,12 @@ dialog :link {
   display: none;
 }
 
+/*
+  In order to correctly display the potential callouts in Firefox we want to
+  track the positions of some elements.
+  So the different dimensions used here are also used in app.js (see
+  bindWindowEvents)
+*/
 @media all and (max-width: 900px) {
   #toolbarViewerMiddle {
     display: table;