Dynamically create/remove canvas elements for PDF thumbnails

Instead of just clearing the canvas when going out of view, remove it.
Recreate the canvas once needed again.

Bug: 1134057
Change-Id: I11131d7bf584eb51c94f4fd24484ba9f6675e75e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2451387Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814803}

chrome/browser/resources/pdf/elements/viewer-thumbnail.html

@@ -11,10 +11,12 @@
   #thumbnail {
     align-items: center;
     display: inline-flex;
+    height: 140px;
     justify-content: center;
     margin-bottom: 12px;
     margin-inline-end: auto;
     margin-inline-start: auto;
+    width: 108px;
   }
 
   :host([is-active]) #thumbnail {
@@ -49,7 +51,5 @@
     line-height: 1;
   }
 </style>
-<div id="thumbnail" on-click="onClick_">
-  <canvas width="108" height="140"></canvas>
-</div>
+<div id="thumbnail" on-click="onClick_"></div>
 <div id="pageNumber">[[pageNumber]]</div>

chrome/browser/resources/pdf/elements/viewer-thumbnail.js

@@ -33,6 +33,7 @@ export class ViewerThumbnailElement extends PolymerElement {
       clockwiseRotations: {
         type: Number,
         value: 0,
+        observer: 'clockwiseRotationsChanged_',
       },
 
       isActive: {
@@ -45,12 +46,6 @@ export class ViewerThumbnailElement extends PolymerElement {
     };
   }
 
-  static get observers() {
-    return [
-      'styleCanvas_(clockwiseRotations)',
-    ];
-  }
-
   constructor() {
     super();
 
@@ -61,7 +56,12 @@ export class ViewerThumbnailElement extends PolymerElement {
 
   /** @param {!ImageData} imageData */
   set image(imageData) {
-    const canvas = this.getCanvas_();
+    let canvas = this.getCanvas_();
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      this.shadowRoot.querySelector('#thumbnail').appendChild(canvas);
+    }
+
     canvas.width = imageData.width;
     canvas.height = imageData.height;
 
@@ -76,9 +76,12 @@ export class ViewerThumbnailElement extends PolymerElement {
       return;
     }
 
+    // `canvas` can be `null` in tests because `image` is set only in response
+    // to the plugin.
     const canvas = this.getCanvas_();
-    const ctx = canvas.getContext('2d');
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (canvas) {
+      canvas.remove();
+    }
     this.removeAttribute(PAINTED_ATTRIBUTE);
 
     // For tests
@@ -91,12 +94,19 @@ export class ViewerThumbnailElement extends PolymerElement {
         this.shadowRoot.querySelector('#thumbnail'));
   }
 
+  /** @private */
+  clockwiseRotationsChanged_() {
+    if (this.getCanvas_()) {
+      this.styleCanvas_();
+    }
+  }
+
   /**
-   * @return {!HTMLCanvasElement}
+   * @return {?HTMLCanvasElement}
    * @private
    */
   getCanvas_() {
-    return /** @type {!HTMLCanvasElement} */ (
+    return /** @type {?HTMLCanvasElement} */ (
         this.shadowRoot.querySelector('canvas'));
   }