From ac75a05cd4013bb57b0d038a55f432100c5845a3 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 25 Aug 2024 16:55:44 +0200
Subject: [PATCH] [Editor] Utilize Fluent "better" when localizing the resizer
 DOM-elements

Currently we manually localize and update the DOM-elements of the editor-resizers, and it seems nicer to utilize Fluent for that task.
This can be achieved by updating the l10n-strings to directly target the `aria-label` and then just setting the `data-l10n-id` on the DOM-elements.
---
 l10n/en-US/viewer.ftl        | 24 ++++++++++++++++--------
 src/display/editor/editor.js | 36 +++++++++++++++++-------------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
index bd7bb4ac0fa44..67be5cd587d21 100644
--- a/l10n/en-US/viewer.ftl
+++ b/l10n/en-US/viewer.ftl
@@ -379,14 +379,22 @@ pdfjs-editor-alt-text-textarea =
 ## Editor resizers
 ## This is used in an aria label to help to understand the role of the resizer.
 
-pdfjs-editor-resizer-label-top-left = Top left corner — resize
-pdfjs-editor-resizer-label-top-middle = Top middle — resize
-pdfjs-editor-resizer-label-top-right = Top right corner — resize
-pdfjs-editor-resizer-label-middle-right = Middle right — resize
-pdfjs-editor-resizer-label-bottom-right = Bottom right corner — resize
-pdfjs-editor-resizer-label-bottom-middle = Bottom middle — resize
-pdfjs-editor-resizer-label-bottom-left = Bottom left corner — resize
-pdfjs-editor-resizer-label-middle-left = Middle left — resize
+pdfjs-editor-resizer-top-left =
+    .aria-label = Top left corner — resize
+pdfjs-editor-resizer-top-middle =
+    .aria-label = Top middle — resize
+pdfjs-editor-resizer-top-right =
+    .aria-label = Top right corner — resize
+pdfjs-editor-resizer-middle-right =
+    .aria-label = Middle right — resize
+pdfjs-editor-resizer-bottom-right =
+    .aria-label = Bottom right corner — resize
+pdfjs-editor-resizer-bottom-middle =
+    .aria-label = Bottom middle — resize
+pdfjs-editor-resizer-bottom-left =
+    .aria-label = Bottom left corner — resize
+pdfjs-editor-resizer-middle-left =
+    .aria-label = Middle left — resize
 
 ## Color picker
 
diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
index dfee06d90d48c..877d2e1b66db1 100644
--- a/src/display/editor/editor.js
+++ b/src/display/editor/editor.js
@@ -86,7 +86,9 @@ class AnnotationEditor {
 
   _focusEventsAllowed = true;
 
-  _l10nPromise = null;
+  static _l10nPromise = null;
+
+  static _l10nResizer = null;
 
   #isDraggable = false;
 
@@ -206,6 +208,17 @@ class AnnotationEditor {
    * @param {Object} l10n
    */
   static initialize(l10n, _uiManager, options) {
+    AnnotationEditor._l10nResizer ||= Object.freeze({
+      topLeft: "pdfjs-editor-resizer-top-left",
+      topMiddle: "pdfjs-editor-resizer-top-middle",
+      topRight: "pdfjs-editor-resizer-top-right",
+      middleRight: "pdfjs-editor-resizer-middle-right",
+      bottomRight: "pdfjs-editor-resizer-bottom-right",
+      bottomMiddle: "pdfjs-editor-resizer-bottom-middle",
+      bottomLeft: "pdfjs-editor-resizer-bottom-left",
+      middleLeft: "pdfjs-editor-resizer-middle-left",
+    });
+
     AnnotationEditor._l10nPromise ||= new Map(
       [
         "pdfjs-editor-alt-text-button-label",
@@ -214,18 +227,7 @@ class AnnotationEditor {
         "pdfjs-editor-new-alt-text-added-button-label",
         "pdfjs-editor-new-alt-text-missing-button-label",
         "pdfjs-editor-new-alt-text-to-review-button-label",
-        "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()}`)),
-      ])
+      ].map(str => [str, l10n.get(str)])
     );
 
     // The string isn't in the above list because the string has a parameter
@@ -1480,9 +1482,7 @@ class AnnotationEditor {
         div.addEventListener("focus", this.#resizerFocus.bind(this, name), {
           signal,
         });
-        AnnotationEditor._l10nPromise
-          .get(`pdfjs-editor-resizer-label-${name}`)
-          .then(msg => div.setAttribute("aria-label", msg));
+        div.setAttribute("data-l10n-id", AnnotationEditor._l10nResizer[name]);
       }
     }
 
@@ -1517,9 +1517,7 @@ class AnnotationEditor {
       for (const child of children) {
         const div = this.#allResizerDivs[i++];
         const name = div.getAttribute("data-resizer-name");
-        AnnotationEditor._l10nPromise
-          .get(`pdfjs-editor-resizer-label-${name}`)
-          .then(msg => child.setAttribute("aria-label", msg));
+        child.setAttribute("data-l10n-id", AnnotationEditor._l10nResizer[name]);
       }
     }