Immediately show annotations in PDF thumbnails

Collapsing the sidebar does not trigger the thumbnail bar's intersection
observer. Therefore, toggling annotation mode does not cause the
thumbnails to regenerate to reflect the updated PDF contents.

Hide the thumbnails to trigger the intersection observer when annotation
mode is turned on.

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

chrome/browser/resources/pdf/controller.js

@@ -135,6 +135,7 @@ export class ContentController {
  * @enum {string}
  */
 export const PluginControllerEventType = {
+  IS_ACTIVE_CHANGED: 'PluginControllerEventType.IS_ACTIVE_CHANGED',
   PLUGIN_MESSAGE: 'PluginControllerEventType.PLUGIN_MESSAGE',
 };
 
@@ -146,6 +147,11 @@ export const PluginControllerEventType = {
  * @implements {ContentController}
  */
 export class PluginController {
+  constructor() {
+    /** @private {!EventTarget} */
+    this.eventTarget_ = new EventTarget();
+  }
+
   /**
    * @param {!HTMLEmbedElement} plugin
    * @param {!Viewport} viewport
@@ -173,9 +179,6 @@ export class PluginController {
     this.plugin_.addEventListener(
         'message', e => this.handlePluginMessage_(e), false);
 
-    /** @private {!EventTarget} */
-    this.eventTarget_ = new EventTarget();
-
     /**
      * Counter for use with createUid
      * @private {number}
@@ -200,7 +203,14 @@ export class PluginController {
    * @override
    */
   set isActive(isActive) {
+    const wasActive = this.isActive;
     this.isActive_ = isActive;
+    if (this.isActive === wasActive) {
+      return;
+    }
+
+    this.eventTarget_.dispatchEvent(new CustomEvent(
+        PluginControllerEventType.IS_ACTIVE_CHANGED, {detail: this.isActive}));
   }
 
   /**

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

@@ -166,6 +166,7 @@ js_library("viewer-thumbnail-bar") {
     "..:controller",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:event_tracker.m",
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
   ]

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

@@ -16,7 +16,7 @@
     padding-top: 24px;
   }
 </style>
-<div id="thumbnails">
+<div id="thumbnails" hidden$="[[!isPluginActive_]]">
   <template is="dom-repeat" items="[[pageNumbers_]]"
       on-dom-change="onDomChange_">
     <viewer-thumbnail tabindex="0" role="button"

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

@@ -4,10 +4,11 @@
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
+import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 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 {PluginController, PluginControllerEventType} from '../controller.js';
 import {ViewerThumbnailElement} from './viewer-thumbnail.js';
 
 export class ViewerThumbnailBarElement extends PolymerElement {
@@ -30,6 +31,8 @@ export class ViewerThumbnailBarElement extends PolymerElement {
 
       docLength: Number,
 
+      isPluginActive_: Boolean,
+
       /** @private {Array<number>} */
       pageNumbers_: {
         type: Array,
@@ -38,6 +41,31 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     };
   }
 
+  constructor() {
+    super();
+
+    // TODO(dhoss): Remove `this.inTest` when implemented a mock plugin
+    // controller.
+    /** @type {boolean} */
+    this.inTest = false;
+
+    /** @private {!PluginController} */
+    this.pluginController_ = PluginController.getInstance();
+
+    /** @private {boolean} */
+    this.isPluginActive_ = this.pluginController_.isActive;
+
+    /** @private {!EventTracker} */
+    this.tracker_ = new EventTracker();
+
+    // Listen to whether the plugin is active. Thumbnails should be hidden
+    // when the plugin is inactive.
+    this.tracker_.add(
+        this.pluginController_.getEventTarget(),
+        PluginControllerEventType.IS_ACTIVE_CHANGED,
+        e => this.isPluginActive_ = e.detail);
+  }
+
   ready() {
     super.ready();
 
@@ -62,12 +90,11 @@ export class ViewerThumbnailBarElement extends PolymerElement {
         }
         thumbnail.setPainted();
 
-        const pluginController = PluginController.getInstance();
-        if (!pluginController.isActive) {
+        if (!this.isPluginActive_ || this.inTest) {
           return;
         }
 
-        pluginController.requestThumbnail(thumbnail.pageNumber)
+        this.pluginController_.requestThumbnail(thumbnail.pageNumber)
             .then(response => {
               const array = new Uint8ClampedArray(response.imageData);
               const imageData = new ImageData(array, response.width);

chrome/test/data/pdf/viewer_thumbnail_bar_test.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {eventToPromise, whenAttributeIs} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
+import {eventToPromise, waitAfterNextRender, 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 {PAINTED_ATTRIBUTE, ViewerThumbnailElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail.js';
@@ -17,12 +17,8 @@ function createThumbnailBar() {
   document.body.innerHTML = '';
   const thumbnailBar = /** @type {!ViewerThumbnailBarElement} */ (
       document.createElement('viewer-thumbnail-bar'));
+  thumbnailBar.inTest = true;
   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;
 }
 
@@ -294,7 +290,46 @@ const tests = [
 
           chrome.test.succeed();
         });
-  }
+  },
+  function testReactToNoPlugin() {
+    const thumbnailBar = createThumbnailBar();
+    thumbnailBar.docLength = 1;
+
+    // Deactivate the PluginController, causing the thumbnails to hide.
+    const pluginController = PluginController.getInstance();
+    pluginController.isActive = false;
+
+    flush();
+
+    const scroller = thumbnailBar.shadowRoot.querySelector('#thumbnails');
+    chrome.test.assertTrue(scroller.hidden);
+
+    const thumbnail =
+        /** @type {!ViewerThumbnailElement} */ (
+            thumbnailBar.shadowRoot.querySelector('viewer-thumbnail'));
+
+    testAsync(async () => {
+      const whenPaintTriggered = whenThumbnailPainted(thumbnail).then(() => {
+        // The thumbnail shouldn't paint when the controller is inactive.
+        if (!pluginController.isActive) {
+          chrome.test.fail();
+        }
+      });
+
+      // Give the test a chance to fail.
+      await waitAfterNextRender(thumbnailBar);
+
+      // The thumbnail should paint when reactivating the plugin.
+      pluginController.isActive = true;
+      chrome.test.assertFalse(scroller.hidden);
+      await whenPaintTriggered;
+
+      // The thumbnail should clear when deactivating the plugin.
+      pluginController.isActive = false;
+      chrome.test.assertTrue(scroller.hidden);
+      await whenThumbnailCleared(thumbnail);
+    });
+  },
 ];
 
 chrome.test.runTests(tests);