PDF Viewer Update: Support page navigation through thumbnails

Navigate to the corresponding PDF page when the thumbnail is clicked on.

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

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

@@ -18,6 +18,6 @@
   }
 </style>
 <div id="content">
-  <div id="thumbnail"></div>
+  <div id="thumbnail" on-click="onClick_"></div>
   <div id="pageNumber">[[pageNumber]]</div>
 </div>

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

@@ -20,6 +20,15 @@ export class ViewerThumbnailElement extends PolymerElement {
       pageNumber: Number,
     };
   }
+
+  /** @private */
+  onClick_() {
+    this.dispatchEvent(new CustomEvent('change-page', {
+      detail: {page: this.pageNumber - 1, origin: 'thumbnail'},
+      bubbles: true,
+      composed: true
+    }));
+  }
 }
 
 customElements.define(ViewerThumbnailElement.is, ViewerThumbnailElement);

chrome/browser/resources/pdf/pdf_viewer.js

@@ -866,6 +866,7 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     } else if (e.detail.origin === 'pageselector') {
       PDFMetrics.record(PDFMetrics.UserAction.PAGE_SELECTOR_NAVIGATE);
     }
+    // TODO(dhoss): Add metrics for thumbnails.
   }
 
   /**

chrome/test/data/pdf/viewer_thumbnail_bar_test.js

@@ -2,10 +2,13 @@
 // 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 {ViewerThumbnailBarElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail-bar.js';
 import {ViewerThumbnailElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {testAsync} from './test_util.js';
+
 /** @return {!ViewerThumbnailBarElement} */
 function createThumbnailBar() {
   document.body.innerHTML = '';
@@ -17,8 +20,9 @@ function createThumbnailBar() {
 
 // Unit tests for the viewer-thumbnail-bar element.
 const tests = [
-  // Test that the thumbnail bar has the correct number of thumbnails.
-  function testNumThumbnails() {
+  // Test that the thumbnail bar has the correct number of thumbnails and
+  // correspond to the right pages.
+  function testThumbnails() {
     const testDocLength = 10;
     const thumbnailBar = createThumbnailBar();
     thumbnailBar.docLength = testDocLength;
@@ -31,12 +35,29 @@ const tests = [
             thumbnailBar.shadowRoot.querySelectorAll('viewer-thumbnail'));
     chrome.test.assertEq(testDocLength, thumbnails.length);
 
-    // Test that each thumbnail has the correct page number.
-    thumbnails.forEach((thumbnail, i) => {
-      chrome.test.assertEq(i + 1, thumbnail.pageNumber);
-    });
+    testAsync(async () => {
+      /**
+       * @param {!ViewerThumbnailElement} thumbnail
+       * @param {number} expectedPageIndex
+       * @return {!Promise}
+       */
+      function testNavigateThumbnail(thumbnail, expectedPageIndex) {
+        const whenChanged = eventToPromise('change-page', thumbnailBar);
+        thumbnail.shadowRoot.querySelector('#thumbnail').click();
+        return whenChanged.then(e => {
+          chrome.test.assertEq(expectedPageIndex, e.detail.page);
+          chrome.test.assertEq('thumbnail', e.detail.origin);
+        });
+      }
 
-    chrome.test.succeed();
+      // Test that each thumbnail has the correct page number and navigates to
+      // the corresponding page.
+      for (let i = 0; i < thumbnails.length; i++) {
+        const thumbnail = thumbnails[i];
+        chrome.test.assertEq(i + 1, thumbnail.pageNumber);
+        await testNavigateThumbnail(thumbnail, i);
+      }
+    });
   },
 ];