Use PluginController singleton in ViewerThumbnailBarElement

Currently an event is fired to the top-level PDFViewerElement to make
requests to the plugin for painting thumbnails. Now that the
PluginController is a singleton accessible throughout the PDF Viewer's
UI code, make the plugin requests directly inside
ViewerThumbnailBarElement.

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

chrome/browser/resources/pdf/BUILD.gn

@@ -167,7 +167,6 @@ js_library("pdf_viewer") {
     "elements:viewer-pdf-sidenav",
     "elements:viewer-pdf-toolbar",
     "elements:viewer-pdf-toolbar-new",
-    "elements:viewer-thumbnail",
     "elements:viewer-zoom-toolbar",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:event_tracker.m",

chrome/browser/resources/pdf/elements/BUILD.gn

@@ -163,6 +163,7 @@ js_library("viewer-thumbnail") {
 js_library("viewer-thumbnail-bar") {
   deps = [
     ":viewer-thumbnail",
+    "..:controller",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:load_time_data.m",

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

@@ -7,6 +7,7 @@ import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_man
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {PluginController} from '../controller.js';
 import {ViewerThumbnailElement} from './viewer-thumbnail.js';
 
 export class ViewerThumbnailBarElement extends PolymerElement {
@@ -59,11 +60,19 @@ export class ViewerThumbnailBarElement extends PolymerElement {
         if (thumbnail.isPainted()) {
           return;
         }
-
         thumbnail.setPainted();
-        this.dispatchEvent(new CustomEvent(
-            'paint-thumbnail',
-            {detail: thumbnail, bubbles: true, composed: true}));
+
+        const pluginController = PluginController.getInstance();
+        if (!pluginController.isActive) {
+          return;
+        }
+
+        pluginController.requestThumbnail(thumbnail.pageNumber)
+            .then(response => {
+              const array = new Uint8ClampedArray(response.imageData);
+              const imageData = new ImageData(array, response.width);
+              thumbnail.image = imageData;
+            });
       });
     }, {
       root: thumbnailsDiv,

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

@@ -17,7 +17,7 @@ const PORTRAIT_WIDTH = 108;
 const LANDSCAPE_WIDTH = 140;
 
 /** @type {string} */
-const PAINTED_ATTRIBUTE = 'painted';
+export const PAINTED_ATTRIBUTE = 'painted';
 
 export class ViewerThumbnailElement extends PolymerElement {
   static get is() {
@@ -83,9 +83,6 @@ export class ViewerThumbnailElement extends PolymerElement {
       canvas.remove();
     }
     this.removeAttribute(PAINTED_ATTRIBUTE);
-
-    // For tests
-    this.dispatchEvent(new CustomEvent('clear-thumbnail-for-testing'));
   }
 
   /** @return {!HTMLElement} */

chrome/browser/resources/pdf/pdf_viewer.html

@@ -191,8 +191,7 @@
           active-page="[[pageNo_]]" bookmarks="[[bookmarks_]]"
           clockwise-rotations="[[clockwiseRotations_]]"
           doc-length="[[docLength_]]" on-change-page="onChangePage_"
-          on-change-page-and-xy="onChangePageAndXy_" on-navigate="onNavigate_"
-          on-paint-thumbnail="onPaintThumbnail_">
+          on-change-page-and-xy="onChangePageAndXy_" on-navigate="onNavigate_">
       </viewer-pdf-sidenav>
     </div>
     <div id="main">

chrome/browser/resources/pdf/pdf_viewer.js

@@ -27,7 +27,6 @@ import {Attachment, FittingType, Point, SaveRequestType} from './constants.js';
 import {PluginController} from './controller.js';
 import {ViewerPdfSidenavElement} from './elements/viewer-pdf-sidenav.js';
 import {ViewerPdfToolbarNewElement} from './elements/viewer-pdf-toolbar-new.js';
-import {ViewerThumbnailElement} from './elements/viewer-thumbnail.js';
 // <if expr="chromeos">
 import {InkController} from './ink_controller.js';
 //</if>
@@ -1087,22 +1086,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     this.navigator_.navigate(e.detail.uri, disposition);
   }
 
-  /**
-   * @param {!CustomEvent<!ViewerThumbnailElement>} e
-   * @private
-   */
-  onPaintThumbnail_(e) {
-    assert(this.pluginController_.isActive);
-    assert(!this.annotationMode_);
-    const thumbnail = e.detail;
-    this.pluginController_.requestThumbnail(thumbnail.pageNumber)
-        .then(response => {
-          const array = new Uint8ClampedArray(response.imageData);
-          const imageData = new ImageData(array, response.width);
-          thumbnail.image = imageData;
-        });
-  }
-
   /** @private */
   onSidenavToggleClick_() {
     assert(this.pdfViewerUpdateEnabled_);

chrome/test/data/pdf/BUILD.gn

@@ -195,6 +195,7 @@ js_library("viewer_thumbnail_bar_test") {
   deps = [
     ":test_util",
     "../webui:test_util.m",
+    "//chrome/browser/resources/pdf:controller",
     "//chrome/browser/resources/pdf/elements:viewer-thumbnail",
     "//chrome/browser/resources/pdf/elements:viewer-thumbnail-bar",
     "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",

chrome/test/data/pdf/viewer_thumbnail_bar_test.js

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {eventToPromise} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
+import {eventToPromise, whenAttributeIs} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
+import {PluginController} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/controller.js';
 import {ViewerThumbnailBarElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail-bar.js';
-import {ViewerThumbnailElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail.js';
+import {PAINTED_ATTRIBUTE, ViewerThumbnailElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -17,6 +18,11 @@ function createThumbnailBar() {
   const thumbnailBar = /** @type {!ViewerThumbnailBarElement} */ (
       document.createElement('viewer-thumbnail-bar'));
   document.body.appendChild(thumbnailBar);
+
+  // Deactivate the PluginController, because the plugin element's references
+  // are dangling now that it has been removed from the DOM.
+  PluginController.getInstance().isActive = false;
+
   return thumbnailBar;
 }
 
@@ -40,6 +46,22 @@ function keydown(element, key) {
   keyDownOn(element, 0, [], key);
 }
 
+/**
+ * @param {!ViewerThumbnailElement} thumbnail
+ * @return {!Promise}
+ */
+function whenThumbnailPainted(thumbnail) {
+  return whenAttributeIs(thumbnail, PAINTED_ATTRIBUTE, '');
+}
+
+/**
+ * @param {!ViewerThumbnailElement} thumbnail
+ * @return {!Promise}
+ */
+function whenThumbnailCleared(thumbnail) {
+  return whenAttributeIs(thumbnail, PAINTED_ATTRIBUTE, null);
+}
+
 // Unit tests for the viewer-thumbnail-bar element.
 const tests = [
   // Test that the thumbnail bar has the correct number of thumbnails and
@@ -104,27 +126,11 @@ const tests = [
         /** @type {!NodeList<!ViewerThumbnailElement>} */ (
             thumbnailBar.shadowRoot.querySelectorAll('viewer-thumbnail'));
 
-    /**
-     * @param {!ViewerThumbnailElement} thumbnail
-     * @return {!Promise}
-     */
-    function paintThumbnailToPromise(thumbnail) {
-      return new Promise(resolve => {
-        const eventType = 'paint-thumbnail';
-        thumbnailBar.addEventListener(eventType, function f(e) {
-          if (e.detail === thumbnail) {
-            thumbnailBar.removeEventListener(eventType, f);
-            resolve(e);
-          }
-        });
-      });
-    }
-
     testAsync(async () => {
       // Only two thumbnails should be "painted" upon load.
       const whenRequestedPaintingFirst = [
-        paintThumbnailToPromise(thumbnails[0]),
-        paintThumbnailToPromise(thumbnails[1]),
+        whenThumbnailPainted(thumbnails[0]),
+        whenThumbnailPainted(thumbnails[1]),
       ];
       await Promise.all(whenRequestedPaintingFirst);
 
@@ -139,7 +145,7 @@ const tests = [
       // of the 500% top and 100% bottom root margins.
       const whenRequestedPaintingNext = [];
       for (let i = 2; i < 7; i++) {
-        whenRequestedPaintingNext.push(paintThumbnailToPromise(thumbnails[i]));
+        whenRequestedPaintingNext.push(whenThumbnailPainted(thumbnails[i]));
       }
       scroller.scrollTop = 5 * thumbnailBarHeight;
       await Promise.all(whenRequestedPaintingNext);
@@ -153,9 +159,9 @@ const tests = [
       // thumbnails outside the root margin, namely the first two. A paint
       // should also be triggered for the eighth thumbnail.
       const whenRequestedPaintingLast = [
-        paintThumbnailToPromise(thumbnails[7]),
-        eventToPromise('clear-thumbnail-for-testing', thumbnails[0]),
-        eventToPromise('clear-thumbnail-for-testing', thumbnails[1]),
+        whenThumbnailPainted(thumbnails[7]),
+        whenThumbnailCleared(thumbnails[0]),
+        whenThumbnailCleared(thumbnails[1]),
       ];
       scroller.scrollTop = 7 * thumbnailBarHeight;
       await Promise.all(whenRequestedPaintingLast);