Pause translation when appending the outline/attachment/layer trees to the sidebar

Also, pause translation when collapsing/expanding subtrees.

web/app.js

@@ -623,6 +623,7 @@ const PDFViewerApplication = {
       this.pdfOutlineViewer = new PDFOutlineViewer({
         container: appConfig.sidebar.outlineView,
         eventBus,
+        l10n,
         linkService: pdfLinkService,
         downloadManager,
       });
@@ -632,6 +633,7 @@ const PDFViewerApplication = {
       this.pdfAttachmentViewer = new PDFAttachmentViewer({
         container: appConfig.sidebar.attachmentsView,
         eventBus,
+        l10n,
         downloadManager,
       });
     }
@@ -640,6 +642,7 @@ const PDFViewerApplication = {
       this.pdfLayerViewer = new PDFLayerViewer({
         container: appConfig.sidebar.layersView,
         eventBus,
+        l10n,
       });
     }
 

web/base_tree_viewer.js

@@ -25,6 +25,7 @@ class BaseTreeViewer {
     }
     this.container = options.container;
     this.eventBus = options.eventBus;
+    this._l10n = options.l10n;
 
     this.reset();
   }
@@ -99,10 +100,14 @@ class BaseTreeViewer {
    * @private
    */
   _toggleTreeItem(root, show = false) {
+    // Pause translation when collapsing/expanding the subtree.
+    this._l10n.pause();
+
     this._lastToggleIsShow = show;
     for (const toggler of root.querySelectorAll(".treeItemToggler")) {
       toggler.classList.toggle("treeItemsHidden", !show);
     }
+    this._l10n.resume();
   }
 
   /**
@@ -122,7 +127,10 @@ class BaseTreeViewer {
 
       this._lastToggleIsShow = !fragment.querySelector(".treeItemsHidden");
     }
+    // Pause translation when inserting the tree into the DOM.
+    this._l10n.pause();
     this.container.append(fragment);
+    this._l10n.resume();
 
     this._dispatchEvent(count);
   }

web/interfaces.js

@@ -205,6 +205,16 @@ class IL10n {
    * @returns {Promise<void>}
    */
   async translate(element) {}
+
+  /**
+   * Pause the localization.
+   */
+  pause() {}
+
+  /**
+   * Resume the localization.
+   */
+  resume() {}
 }
 
 export { IDownloadManager, IL10n, IPDFLinkService, IRenderableView };

web/l10n.js

@@ -75,6 +75,16 @@ class L10n {
     }
   }
 
+  /** @inheritdoc */
+  pause() {
+    this.#l10n.pauseObserving();
+  }
+
+  /** @inheritdoc */
+  resume() {
+    this.#l10n.resumeObserving();
+  }
+
   static #fixupLangCode(langCode) {
     // Try to support "incompletely" specified language codes (see issue 13689).
     const PARTIAL_LANG_CODES = {

web/l10n_utils.js

@@ -74,6 +74,14 @@ const NullL10n = {
   async translate(element) {
     return ConstL10n.instance.translate(element);
   },
+
+  pause() {
+    ConstL10n.instance.pause();
+  },
+
+  resume() {
+    ConstL10n.instance.resume();
+  },
 };
 
 export { NullL10n };

web/pdf_layer_viewer.js

@@ -87,12 +87,12 @@ class PDFLayerViewer extends BaseTreeViewer {
   /**
    * @private
    */
-  _setNestedName(element, { name = null }) {
+  async _setNestedName(element, { name = null }) {
     if (typeof name === "string") {
       element.textContent = this._normalizeTextContent(name);
       return;
     }
-    element.setAttribute("data-l10n-id", "pdfjs-additional-layers");
+    element.textContent = await this._l10n.get("pdfjs-additional-layers");
     element.style.fontStyle = "italic";
   }