Merge pull request mozilla#11503 from Snuffleupagus/issue-11499

Remove the unused `id` properties from page and thumbnail canvas/image DOM elements (issue 11499)
tamuratak · Jan 12, 2020 · 40f531e · 40f531e
2 parents 611ac78 + 34e7d42
commit 40f531e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 47 deletions.
diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties
@@ -148,6 +148,8 @@ thumbs_label=Thumbnails
 findbar.title=Find in Document
 findbar_label=Find
 
+# LOCALIZATION NOTE (page_canvas): "{{page}}" will be replaced by the page number.
+page_canvas=Page {{page}}
 # Thumbnails panel item (tooltip and alt text for images)
 # LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
 # number.

diff --git a/l10n/sv-SE/viewer.properties b/l10n/sv-SE/viewer.properties
@@ -148,6 +148,8 @@ thumbs_label=Miniatyrer
 findbar.title=Sök i dokument
 findbar_label=Sök
 
+# LOCALIZATION NOTE (page_canvas): "{{page}}" will be replaced by the page number.
+page_canvas=Sida {{page}}
 # Thumbnails panel item (tooltip and alt text for images)
 # LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
 # number.

diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js
@@ -559,7 +559,11 @@ class PDFPageView {
 
     const viewport = this.viewport;
     const canvas = document.createElement("canvas");
-    canvas.id = this.renderingId;
+    this.l10n
+      .get("page_canvas", { page: this.id }, "Page {{page}}")
+      .then(msg => {
+        canvas.setAttribute("aria-label", msg);
+      });
 
     // Keep the canvas hidden until the first draw callback, or until drawing
     // is complete when `!this.renderingQueue`, to prevent black flickering.

diff --git a/web/pdf_thumbnail_view.js b/web/pdf_thumbnail_view.js
@@ -125,11 +125,9 @@ class PDFThumbnailView {
 
     const anchor = document.createElement("a");
     anchor.href = linkService.getAnchorUrl("#page=" + id);
-    this.l10n
-      .get("thumb_page_title", { page: id }, "Page {{page}}")
-      .then(msg => {
-        anchor.title = msg;
-      });
+    this._thumbPageTitle.then(msg => {
+      anchor.title = msg;
+    });
     anchor.onclick = function() {
       linkService.page = id;
       return false;
@@ -258,38 +256,23 @@ class PDFThumbnailView {
     if (this.renderingState !== RenderingStates.FINISHED) {
       return;
     }
-    const id = this.renderingId;
     const className = "thumbnailImage";
 
     if (this.disableCanvasToImageConversion) {
-      this.canvas.id = id;
       this.canvas.className = className;
-      this.l10n
-        .get(
-          "thumb_page_canvas",
-          { page: this.pageId },
-          "Thumbnail of Page {{page}}"
-        )
-        .then(msg => {
-          this.canvas.setAttribute("aria-label", msg);
-        });
+      this._thumbPageCanvas.then(msg => {
+        this.canvas.setAttribute("aria-label", msg);
+      });
 
       this.div.setAttribute("data-loaded", true);
       this.ring.appendChild(this.canvas);
       return;
     }
     const image = document.createElement("img");
-    image.id = id;
     image.className = className;
-    this.l10n
-      .get(
-        "thumb_page_canvas",
-        { page: this.pageId },
-        "Thumbnail of Page {{page}}"
-      )
-      .then(msg => {
-        image.setAttribute("aria-label", msg);
-      });
+    this._thumbPageCanvas.then(msg => {
+      image.setAttribute("aria-label", msg);
+    });
 
     image.style.width = this.canvasWidth + "px";
     image.style.height = this.canvasHeight + "px";
@@ -455,8 +438,20 @@ class PDFThumbnailView {
     this._convertCanvasToImage();
   }
 
-  get pageId() {
-    return this.pageLabel !== null ? this.pageLabel : this.id;
+  get _thumbPageTitle() {
+    return this.l10n.get(
+      "thumb_page_title",
+      { page: this.pageLabel !== null ? this.pageLabel : this.id },
+      "Page {{page}}"
+    );
+  }
+
+  get _thumbPageCanvas() {
+    return this.l10n.get(
+      "thumb_page_canvas",
+      { page: this.pageLabel !== null ? this.pageLabel : this.id },
+      "Thumbnail of Page {{page}}"
+    );
   }
 
   /**
@@ -465,29 +460,21 @@ class PDFThumbnailView {
   setPageLabel(label) {
     this.pageLabel = typeof label === "string" ? label : null;
 
-    this.l10n
-      .get("thumb_page_title", { page: this.pageId }, "Page {{page}}")
-      .then(msg => {
-        this.anchor.title = msg;
-      });
+    this._thumbPageTitle.then(msg => {
+      this.anchor.title = msg;
+    });
 
     if (this.renderingState !== RenderingStates.FINISHED) {
       return;
     }
 
-    this.l10n
-      .get(
-        "thumb_page_canvas",
-        { page: this.pageId },
-        "Thumbnail of Page {{page}}"
-      )
-      .then(ariaLabel => {
-        if (this.image) {
-          this.image.setAttribute("aria-label", ariaLabel);
-        } else if (this.disableCanvasToImageConversion && this.canvas) {
-          this.canvas.setAttribute("aria-label", ariaLabel);
-        }
-      });
+    this._thumbPageCanvas.then(msg => {
+      if (this.image) {
+        this.image.setAttribute("aria-label", msg);
+      } else if (this.disableCanvasToImageConversion && this.canvas) {
+        this.canvas.setAttribute("aria-label", msg);
+      }
+    });
   }
 
   static cleanup() {