Merge pull request #18397 from calixteman/toolbar_density

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

web/app.js

@@ -393,7 +393,7 @@ const PDFViewerApplication = {
     const { appConfig, externalServices, l10n } = this;
     let eventBus;
     if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
-      eventBus = new FirefoxEventBus(
+      eventBus = this.preferences.eventBus = new FirefoxEventBus(
         await this._allowedGlobalEventsPromise,
         externalServices,
         AppOptions.get("isInAutomation")
@@ -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,11 @@ const defaultOptions = {
     value: true,
     kind: OptionKind.BROWSER,
   },
+  toolbarDensity: {
+    /** @type {number} */
+    value: 0, // 0 = "normal", 1 = "compact", 2 = "touch"
+    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,10 @@ class BasePreferences {
       return; // Invalid preference.
     }
     AppOptions.set(name, value);
+
+    if (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);