[api-minor] Move to Fluent for the localization (bug 1858715)

- For the generic viewer we use @fluent/dom and @fluent/bundle
- For the builtin pdf viewer in Firefox, we set a localization url
  and then we rely on document.l10n which is a DOMLocalization object.

src/display/annotation_layer.js

@@ -985,8 +985,7 @@ class TextAnnotationElement extends AnnotationElement {
       "annotation-" +
       this.data.name.toLowerCase() +
       ".svg";
-    image.alt = "[{{type}} Annotation]";
-    image.dataset.l10nId = "text_annotation_type";
+    image.dataset.l10nId = "pdfjs-text-annotation-type";
     image.dataset.l10nArgs = JSON.stringify({ type: this.data.name });
 
     if (!this.data.popupRef && this.hasPopupData) {
@@ -2022,8 +2021,6 @@ class PopupAnnotationElement extends AnnotationElement {
 }
 
 class PopupElement {
-  #dateTimePromise = null;
-
   #boundKeyDown = this.#keyDown.bind(this);
 
   #boundHide = this.#hide.bind(this);
@@ -2038,6 +2035,8 @@ class PopupElement {
 
   #contentsObj = null;
 
+  #dateObj = null;
+
   #elements = null;
 
   #parent = null;
@@ -2079,16 +2078,10 @@ class PopupElement {
     this.#parentRect = parentRect;
     this.#elements = elements;
 
-    const dateObject = PDFDateString.toDateObject(modificationDate);
-    if (dateObject) {
-      // The modification date is shown in the popup instead of the creation
-      // date if it is available and can be parsed correctly, which is
-      // consistent with other viewers such as Adobe Acrobat.
-      this.#dateTimePromise = parent.l10n.get("annotation_date_string", {
-        date: dateObject.toLocaleDateString(),
-        time: dateObject.toLocaleTimeString(),
-      });
-    }
+    // The modification date is shown in the popup instead of the creation
+    // date if it is available and can be parsed correctly, which is
+    // consistent with other viewers such as Adobe Acrobat.
+    this.#dateObj = PDFDateString.toDateObject(modificationDate);
 
     this.trigger = elements.flatMap(e => e.getElementsToTriggerPopup());
     // Attach the event listeners to the trigger element.
@@ -2116,9 +2109,6 @@ class PopupElement {
         if (this.#container.hidden) {
           this.#show();
         }
-        if (this.#dateTimePromise) {
-          await this.#dateTimePromise;
-        }
       });
     }
   }
@@ -2167,11 +2157,13 @@ class PopupElement {
     ({ dir: title.dir, str: title.textContent } = this.#titleObj);
     popup.append(header);
 
-    if (this.#dateTimePromise) {
+    if (this.#dateObj) {
       const modificationDate = document.createElement("span");
       modificationDate.classList.add("popupDate");
-      this.#dateTimePromise.then(localized => {
-        modificationDate.textContent = localized;
+      modificationDate.dataset.l10nId = "pdfjs-annotation-date-string";
+      modificationDate.dataset.l10nArgs = JSON.stringify({
+        date: this.#dateObj.toLocaleDateString(),
+        time: this.#dateObj.toLocaleTimeString(),
       });
       header.append(modificationDate);
     }
@@ -3022,7 +3014,13 @@ class AnnotationLayer {
 
     this.#setAnnotationCanvasMap();
 
-    await this.l10n.translate(layer);
+    if (
+      typeof PDFJSDev !== "undefined" &&
+      PDFJSDev.test("GENERIC && !TESTING") &&
+      this.l10n instanceof NullL10n
+    ) {
+      await this.l10n.translate(layer);
+    }
   }
 
   /**

src/display/editor/editor.js

@@ -198,18 +198,21 @@ class AnnotationEditor {
   static initialize(l10n, options = null) {
     AnnotationEditor._l10nPromise ||= new Map(
       [
-        "editor_alt_text_button_label",
-        "editor_alt_text_edit_button_label",
-        "editor_alt_text_decorative_tooltip",
-        "editor_resizer_label_topLeft",
-        "editor_resizer_label_topMiddle",
-        "editor_resizer_label_topRight",
-        "editor_resizer_label_middleRight",
-        "editor_resizer_label_bottomRight",
-        "editor_resizer_label_bottomMiddle",
-        "editor_resizer_label_bottomLeft",
-        "editor_resizer_label_middleLeft",
-      ].map(str => [str, l10n.get(str)])
+        "pdfjs-editor-alt-text-button-label",
+        "pdfjs-editor-alt-text-edit-button-label",
+        "pdfjs-editor-alt-text-decorative-tooltip",
+        "pdfjs-editor-resizer-label-topLeft",
+        "pdfjs-editor-resizer-label-topMiddle",
+        "pdfjs-editor-resizer-label-topRight",
+        "pdfjs-editor-resizer-label-middleRight",
+        "pdfjs-editor-resizer-label-bottomRight",
+        "pdfjs-editor-resizer-label-bottomMiddle",
+        "pdfjs-editor-resizer-label-bottomLeft",
+        "pdfjs-editor-resizer-label-middleLeft",
+      ].map(str => [
+        str,
+        l10n.get(str.replaceAll(/([A-Z])/g, c => `-${c.toLowerCase()}`)),
+      ])
     );
     if (options?.strings) {
       for (const str of options.strings) {
@@ -914,7 +917,7 @@ class AnnotationEditor {
     const altText = (this.#altTextButton = document.createElement("button"));
     altText.className = "altText";
     const msg = await AnnotationEditor._l10nPromise.get(
-      "editor_alt_text_button_label"
+      "pdfjs-editor-alt-text-button-label"
     );
     altText.textContent = msg;
     altText.setAttribute("aria-label", msg);
@@ -960,7 +963,7 @@ class AnnotationEditor {
     button.classList.add("done");
 
     AnnotationEditor._l10nPromise
-      .get("editor_alt_text_edit_button_label")
+      .get("pdfjs-editor-alt-text-edit-button-label")
       .then(msg => {
         button.setAttribute("aria-label", msg);
       });
@@ -999,7 +1002,7 @@ class AnnotationEditor {
     }
     tooltip.innerText = this.#altTextDecorative
       ? await AnnotationEditor._l10nPromise.get(
-          "editor_alt_text_decorative_tooltip"
+          "pdfjs-editor-alt-text-decorative-tooltip"
         )
       : this.#altText;
 
@@ -1434,7 +1437,7 @@ class AnnotationEditor {
         div.addEventListener("blur", boundResizerBlur);
         div.addEventListener("focus", this.#resizerFocus.bind(this, name));
         AnnotationEditor._l10nPromise
-          .get(`editor_resizer_label_${name}`)
+          .get(`pdfjs-editor-resizer-label-${name}`)
           .then(msg => div.setAttribute("aria-label", msg));
       }
     }
@@ -1471,7 +1474,7 @@ class AnnotationEditor {
         const div = this.#allResizerDivs[i++];
         const name = div.getAttribute("data-resizer-name");
         AnnotationEditor._l10nPromise
-          .get(`editor_resizer_label_${name}`)
+          .get(`pdfjs-editor-resizer-label-${name}`)
           .then(msg => child.setAttribute("aria-label", msg));
       }
     }

src/display/editor/freetext.js

@@ -146,7 +146,7 @@ class FreeTextEditor extends AnnotationEditor {
   /** @inheritdoc */
   static initialize(l10n) {
     AnnotationEditor.initialize(l10n, {
-      strings: ["free_text2_default_content", "editor_free_text2_aria_label"],
+      strings: ["pdfjs-free-text-default-content"],
     });
     const style = getComputedStyle(document.documentElement);
 
@@ -542,14 +542,11 @@ class FreeTextEditor extends AnnotationEditor {
     this.editorDiv.className = "internal";
 
     this.editorDiv.setAttribute("id", this.#editorDivId);
+    this.editorDiv.setAttribute("data-l10n-id", "pdfjs-free-text");
     this.enableEditing();
 
     AnnotationEditor._l10nPromise
-      .get("editor_free_text2_aria_label")
-      .then(msg => this.editorDiv?.setAttribute("aria-label", msg));
-
-    AnnotationEditor._l10nPromise
-      .get("free_text2_default_content")
+      .get("pdfjs-free-text-default-content")
       .then(msg => this.editorDiv?.setAttribute("default-content", msg));
     this.editorDiv.contentEditable = true;
 

src/display/editor/ink.js

@@ -85,9 +85,7 @@ class InkEditor extends AnnotationEditor {
 
   /** @inheritdoc */
   static initialize(l10n) {
-    AnnotationEditor.initialize(l10n, {
-      strings: ["editor_ink_canvas_aria_label", "editor_ink2_aria_label"],
-    });
+    AnnotationEditor.initialize(l10n);
   }
 
   /** @inheritdoc */
@@ -737,10 +735,8 @@ class InkEditor extends AnnotationEditor {
     this.canvas = document.createElement("canvas");
     this.canvas.width = this.canvas.height = 0;
     this.canvas.className = "inkEditorCanvas";
+    this.canvas.setAttribute("data-l10n-id", "pdfjs-ink-canvas");
 
-    AnnotationEditor._l10nPromise
-      .get("editor_ink_canvas_aria_label")
-      .then(msg => this.canvas?.setAttribute("aria-label", msg));
     this.div.append(this.canvas);
     this.ctx = this.canvas.getContext("2d");
   }
@@ -777,9 +773,7 @@ class InkEditor extends AnnotationEditor {
 
     super.render();
 
-    AnnotationEditor._l10nPromise
-      .get("editor_ink2_aria_label")
-      .then(msg => this.div?.setAttribute("aria-label", msg));
+    this.div.setAttribute("data-l10n-id", "pdfjs-ink");
 
     const [x, y, w, h] = this.#getInitialBBox();
     this.setAt(x, y, 0, 0);