Allow to change the toolbar height when changing the pref toolbar.density in Firefox (bug 1171799)

It's a first step to just dispatch the pref change to the toolbar.
The second one, to effectively use it, will come after PR #18385 is merged.

Author: calixteman

web/app.js

@@ -402,7 +402,7 @@ const PDFViewerApplication = {
     } else {
       eventBus = new EventBus();
     }
-    this.eventBus = eventBus;
+    this.eventBus = this.preferences.eventBus = eventBus;
 
     this.overlayManager = new OverlayManager();
 
@@ -569,7 +569,11 @@ const PDFViewerApplication = {
           await this._nimbusDataPromise
         );
       } else {
-        this.toolbar = new Toolbar(appConfig.toolbar, eventBus);
+        this.toolbar = new Toolbar(
+          appConfig.toolbar,
+          eventBus,
+          AppOptions.get("toolbarDensity")
+        );
       }
     }
 

web/app_options.js

@@ -95,6 +95,12 @@ const defaultOptions = {
     value: true,
     kind: OptionKind.BROWSER,
   },
+  toolbarDensity: {
+    /** @type {number} */
+    // 0 = "normal", 1 = "compact", 2 = "touch"
+    value: 0,
+    kind: OptionKind.BROWSER,
+  },
 
   annotationEditorMode: {
     /** @type {number} */

web/preferences.js

@@ -37,6 +37,8 @@ class BasePreferences {
 
   #initializedPromise = null;
 
+  static #eventToDispatch = new Set(["toolbarDensity"]);
+
   constructor() {
     if (this.constructor === BasePreferences) {
       throw new Error("Cannot initialize BasePreferences.");
@@ -73,6 +75,10 @@ class BasePreferences {
         }
       }
     );
+
+    if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
+      this.eventBus = null;
+    }
   }
 
   /**
@@ -113,6 +119,9 @@ class BasePreferences {
       return; // Invalid preference.
     }
     AppOptions.set(name, value);
+    if (this.eventBus && BasePreferences.#eventToDispatch.has(name)) {
+      this.eventBus.dispatch(name.toLowerCase(), { source: this, value });
+    }
   }
 
   /**

web/toolbar.js

@@ -50,8 +50,13 @@ class Toolbar {
   /**
    * @param {ToolbarOptions} options
    * @param {EventBus} eventBus
+   * @param {number} toolbarDensity - The toolbar density value.
+   *   The possible values are:
+   *    - 0 (default) - The regular toolbar size.
+   *    - 1 (compact) - The small toolbar size.
+   *    - 2 (touch) - The large toolbar size.
    */
-  constructor(options, eventBus) {
+  constructor(options, eventBus, toolbarDensity = 0) {
     this.#opts = options;
     this.eventBus = eventBus;
     const buttons = [
@@ -136,9 +141,14 @@ class Toolbar {
       }
     });
 
+    eventBus._on("toolbardensity", this.#updateToolbarDensity.bind(this));
+    this.#updateToolbarDensity({ value: toolbarDensity });
+
     this.reset();
   }
 
+  #updateToolbarDensity() {}
+
   #setAnnotationEditorUIManager(uiManager, parentContainer) {
     const colorPicker = new ColorPicker({ uiManager });
     uiManager.setMainHighlightColorPicker(colorPicker);