Remove the internal "toolbarreset" event and slightly re-factor the code

With modern JavaScript class features we can move the relevant event handling into private methods, and thus invoke it directly when resetting the toolbar UI-state.

*Please note:* This patch slightly reduces the size of the `web/toolbar.js` file.

web/toolbar.js

@@ -43,14 +43,16 @@ import {
  */
 
 class Toolbar {
+  #opts;
+
   /**
    * @param {ToolbarOptions} options
    * @param {EventBus} eventBus
    */
   constructor(options, eventBus) {
-    this.toolbar = options.container;
+    this.#opts = options;
     this.eventBus = eventBus;
-    this.buttons = [
+    const buttons = [
       { element: options.previous, eventName: "previouspage" },
       { element: options.next, eventName: "nextpage" },
       { element: options.zoomIn, eventName: "zoomin" },
@@ -106,22 +108,12 @@ class Toolbar {
         },
       },
     ];
-    this.items = {
-      numPages: options.numPages,
-      pageNumber: options.pageNumber,
-      scaleSelect: options.scaleSelect,
-      customScaleOption: options.customScaleOption,
-      previous: options.previous,
-      next: options.next,
-      zoomIn: options.zoomIn,
-      zoomOut: options.zoomOut,
-    };
 
     // Bind the event listeners for click and various other actions.
-    this.#bindListeners(options);
+    this.#bindListeners(buttons);
 
     if (options.editorHighlightColorPicker) {
-      this.eventBus._on(
+      eventBus._on(
         "annotationeditoruimanager",
         ({ uiManager }) => {
           this.#setAnnotationEditorUIManager(
@@ -172,18 +164,19 @@ class Toolbar {
     this.updateLoadingIndicatorState();
 
     // Reset the Editor buttons too, since they're document specific.
-    this.eventBus.dispatch("toolbarreset", { source: this });
+    this.#editorModeChanged({ mode: AnnotationEditorType.DISABLE });
   }
 
-  #bindListeners(options) {
+  #bindListeners(buttons) {
-    const { pageNumber, scaleSelect } = this.items;
+    const { eventBus } = this;
+    const { pageNumber, scaleSelect } = this.#opts;
     const self = this;
 
     // The buttons within the toolbar.
-    for (const { element, eventName, eventDetails } of this.buttons) {
+    for (const { element, eventName, eventDetails } of buttons) {
       element.addEventListener("click", evt => {
         if (eventName !== null) {
-          this.eventBus.dispatch(eventName, {
+          eventBus.dispatch(eventName, {
             source: this,
             ...eventDetails,
             // evt.detail is the number of clicks.
@@ -197,7 +190,7 @@ class Toolbar {
       this.select();
     });
     pageNumber.addEventListener("change", function () {
-      self.eventBus.dispatch("pagenumberchanged", {
+      eventBus.dispatch("pagenumberchanged", {
         source: self,
         value: this.value,
       });
@@ -207,15 +200,14 @@ class Toolbar {
       if (this.value === "custom") {
         return;
       }
-      self.eventBus.dispatch("scalechanged", {
+      eventBus.dispatch("scalechanged", {
         source: self,
         value: this.value,
       });
     });
     // Here we depend on browsers dispatching the "click" event *after* the
     // "change" event, when the <select>-element changes.
-    scaleSelect.addEventListener("click", function (evt) {
+    scaleSelect.addEventListener("click", function ({ target }) {
-      const target = evt.target;
       // Remove focus when an <option>-element was *clicked*, to improve the UX
       // for mouse users (fixes bug 1300525 and issue 4923).
       if (
@@ -228,10 +220,14 @@ class Toolbar {
     // Suppress context menus for some controls.
     scaleSelect.oncontextmenu = noContextMenu;
 
-    this.#bindEditorToolsListener(options);
+    eventBus._on(
+      "annotationeditormodechanged",
+      this.#editorModeChanged.bind(this)
+    );
   }
 
-  #bindEditorToolsListener({
+  #editorModeChanged({ mode }) {
+    const {
       editorFreeTextButton,
       editorFreeTextParamsToolbar,
       editorHighlightButton,
@@ -240,8 +236,8 @@ class Toolbar {
       editorInkParamsToolbar,
       editorStampButton,
       editorStampParamsToolbar,
-  }) {
+    } = this.#opts;
-    const editorModeChanged = ({ mode }) => {
+
     toggleCheckedBtn(
       editorFreeTextButton,
       mode === AnnotationEditorType.FREETEXT,
@@ -268,55 +264,48 @@ class Toolbar {
     editorHighlightButton.disabled = isDisable;
     editorInkButton.disabled = isDisable;
     editorStampButton.disabled = isDisable;
-    };
-    this.eventBus._on("annotationeditormodechanged", editorModeChanged);
-
-    this.eventBus._on("toolbarreset", evt => {
-      if (evt.source === this) {
-        editorModeChanged({ mode: AnnotationEditorType.DISABLE });
-      }
-    });
   }
 
   #updateUIState(resetNumPages = false) {
-    const { pageNumber, pagesCount, pageScaleValue, pageScale, items } = this;
+    const { pageNumber, pagesCount, pageScaleValue, pageScale } = this;
+    const opts = this.#opts;
 
     if (resetNumPages) {
       if (this.hasPageLabels) {
-        items.pageNumber.type = "text";
+        opts.pageNumber.type = "text";
 
-        items.numPages.setAttribute("data-l10n-id", "pdfjs-page-of-pages");
+        opts.numPages.setAttribute("data-l10n-id", "pdfjs-page-of-pages");
       } else {
-        items.pageNumber.type = "number";
+        opts.pageNumber.type = "number";
 
-        items.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages");
+        opts.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages");
-        items.numPages.setAttribute(
+        opts.numPages.setAttribute(
           "data-l10n-args",
           JSON.stringify({ pagesCount })
         );
       }
-      items.pageNumber.max = pagesCount;
+      opts.pageNumber.max = pagesCount;
     }
 
     if (this.hasPageLabels) {
-      items.pageNumber.value = this.pageLabel;
+      opts.pageNumber.value = this.pageLabel;
 
-      items.numPages.setAttribute(
+      opts.numPages.setAttribute(
         "data-l10n-args",
         JSON.stringify({ pageNumber, pagesCount })
       );
     } else {
-      items.pageNumber.value = pageNumber;
+      opts.pageNumber.value = pageNumber;
     }
 
-    items.previous.disabled = pageNumber <= 1;
+    opts.previous.disabled = pageNumber <= 1;
-    items.next.disabled = pageNumber >= pagesCount;
+    opts.next.disabled = pageNumber >= pagesCount;
 
-    items.zoomOut.disabled = pageScale <= MIN_SCALE;
+    opts.zoomOut.disabled = pageScale <= MIN_SCALE;
-    items.zoomIn.disabled = pageScale >= MAX_SCALE;
+    opts.zoomIn.disabled = pageScale >= MAX_SCALE;
 
     let predefinedValueFound = false;
-    for (const option of items.scaleSelect.options) {
+    for (const option of opts.scaleSelect.options) {
       if (option.value !== pageScaleValue) {
         option.selected = false;
         continue;
@@ -325,8 +314,8 @@ class Toolbar {
       predefinedValueFound = true;
     }
     if (!predefinedValueFound) {
-      items.customScaleOption.selected = true;
+      opts.customScaleOption.selected = true;
-      items.customScaleOption.setAttribute(
+      opts.customScaleOption.setAttribute(
         "data-l10n-args",
         JSON.stringify({
           scale: Math.round(pageScale * 10000) / 100,
@@ -336,8 +325,7 @@ class Toolbar {
   }
 
   updateLoadingIndicatorState(loading = false) {
-    const { pageNumber } = this.items;
+    const { pageNumber } = this.#opts;
-
     pageNumber.classList.toggle("loading", loading);
   }
 }