Merge pull request #20832 from calixteman/fix_labels

Fix the label and tooltip on the paste buttons

Author: calixteman

l10n/en-US/viewer.ftl

@@ -769,8 +769,11 @@ pdfjs-views-manager-status-close-button =
     .title = Close
 pdfjs-views-manager-status-close-button-label = Close
 
+pdfjs-views-manager-paste-button-label = Paste
+pdfjs-views-manager-paste-button-before =
+    .title = Paste before the first page
+
 # Variables:
 #   $page (Number) - the page number after which the paste button is.
-pdfjs-views-manager-paste-button-after-label = Paste after page { $page }
-
-pdfjs-views-manager-paste-button-before-label = Paste before the first page
+pdfjs-views-manager-paste-button-after =
+    .title = Paste after page { $page }

test/integration/reorganize_pages_spec.mjs

@@ -34,6 +34,7 @@ import {
   waitAndClick,
   waitForDOMMutation,
   waitForTextToBe,
+  waitForTooltipToBe,
 } from "./test_utils.mjs";
 
 async function waitForThumbnailVisible(page, pageNums) {
@@ -812,21 +813,27 @@ describe("Reorganize Pages View", () => {
           await waitAndClick(page, "#viewsManagerStatusActionCopy");
           await awaitPromise(handlePagesEdited);
 
-          const prevSpanText = await page.$eval(
+          await waitForTextToBe(
+            page,
             `button.thumbnailPasteButton:has(+ ${getThumbnailSelector(1)}) > span`,
-            el => el.textContent.trim()
+            "Paste"
+          );
+          await waitForTooltipToBe(
+            page,
+            `button.thumbnailPasteButton:has(+ ${getThumbnailSelector(1)})`,
+            "Paste before the first page"
           );
-          expect(prevSpanText)
-            .withContext(`In ${browserName}`)
-            .toBe("Paste before the first page");
 
-          const afterSpanText = await page.$eval(
+          await waitForTextToBe(
+            page,
             `${getThumbnailSelector(1)} + button.thumbnailPasteButton > span`,
-            el => el.textContent.trim()
+            "Paste"
+          );
+          await waitForTooltipToBe(
+            page,
+            `${getThumbnailSelector(1)} + button.thumbnailPasteButton`,
+            `Paste after page ${FSI}1${PDI}`
           );
-          expect(afterSpanText)
-            .withContext(`In ${browserName}`)
-            .toBe(`Paste after page ${FSI}1${PDI}`);
         })
       );
     });

test/integration/test_utils.mjs

@@ -899,6 +899,15 @@ function waitForTextToBe(page, selector, text) {
   );
 }
 
+function waitForTooltipToBe(page, selector, text) {
+  return page.waitForFunction(
+    (sel, str) => document.querySelector(sel)?.title === str,
+    {},
+    selector,
+    text
+  );
+}
+
 function isCanvasMonochrome(page, pageNumber, rectangle, color) {
   return page.evaluate(
     (rect, pageN, col) => {
@@ -1082,5 +1091,6 @@ export {
   waitForStorageEntries,
   waitForTextToBe,
   waitForTimeout,
+  waitForTooltipToBe,
   waitForUnselectedEditor,
 };

web/pdf_thumbnail_view.js

@@ -182,28 +182,28 @@ class PDFThumbnailView extends RenderableView {
     const pasteButton = (this.pasteButton = document.createElement("button"));
     pasteButton.classList.add("thumbnailPasteButton", "viewsManagerButton");
     pasteButton.tabIndex = 0;
-    const span = document.createElement("span");
-    span.setAttribute(
+    pasteButton.setAttribute(
       "data-l10n-id",
-      "pdfjs-views-manager-paste-button-after-label"
+      "pdfjs-views-manager-paste-button-after"
     );
-    span.setAttribute(
+    pasteButton.setAttribute(
       "data-l10n-args",
       JSON.stringify({
         page: this.pageLabel ?? this.id,
       })
     );
+    const span = document.createElement("span");
+    span.setAttribute("data-l10n-id", "pdfjs-views-manager-paste-button-label");
     pasteButton.append(span);
     pasteButton.addEventListener("click", () => {
       pasteCallback(this.id);
     });
     if (this.id === 1) {
       const prevPasteButton = (this.prevPasteButton =
         pasteButton.cloneNode(true));
-      const prevSpan = prevPasteButton.firstElementChild;
-      prevSpan.setAttribute(
+      prevPasteButton.setAttribute(
         "data-l10n-id",
-        "pdfjs-views-manager-paste-button-before-label"
+        "pdfjs-views-manager-paste-button-before"
       );
       prevPasteButton.addEventListener("click", () => {
         pasteCallback(0);