PDF Viewer Update: Change page with arrows when focused on thumbnails

Split the behavior of left/right from up/down when focused on
thumbnails. The behavior of up/down stay the same, and they will only
change the focus to an adjacent thumbnail when pressed.

Left/right when focused on a thumbnail now also change the page of the
contents, regardless of the presence of a horizontal zoom bar on the
contents.

Additionally, when the page of the contents change while focused on a
thumbnail, the focus is forwarded to the thumbnail of the new most
visible page.

Bug: 652400
Change-Id: I4da7caadbf6eb25899f8f4091047727b3d719daa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2438984Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812624}

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

@@ -20,7 +20,10 @@ export class ViewerThumbnailBarElement extends PolymerElement {
 
   static get properties() {
     return {
-      activePage: Number,
+      activePage: {
+        type: Number,
+        observer: 'activePageChanged_',
+      },
 
       clockwiseRotations: Number,
 
@@ -71,6 +74,29 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     FocusOutlineManager.forDocument(document);
   }
 
+  /**
+   * Changes the focus to the thumbnail of the new active page if the focus was
+   * already on a thumbnail.
+   * @private
+   */
+  activePageChanged_() {
+    if (this.shadowRoot.activeElement) {
+      this.getThumbnailForPage_(this.activePage).focusAndScroll();
+    }
+  }
+
+  /**
+   * @param {number} pageNumber
+   * @private
+   */
+  clickThumbnailForPage(pageNumber) {
+    if (pageNumber < 1 || pageNumber > this.docLength) {
+      return;
+    }
+
+    this.getThumbnailForPage_(pageNumber).getClickTarget().click();
+  }
+
   /**
    * @return {!Array<number>} The array of page numbers.
    * @private
@@ -88,6 +114,16 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     return loadTimeData.getStringF('thumbnailPageAriaLabel', pageNumber);
   }
 
+  /**
+   * @param {number} pageNumber
+   * @return {ViewerThumbnailElement}
+   * @private
+   */
+  getThumbnailForPage_(pageNumber) {
+    return /** @type {ViewerThumbnailElement} */ (this.shadowRoot.querySelector(
+        `viewer-thumbnail:nth-child(${pageNumber})`));
+  }
+
   /**
    * @param {number} page
    * @return {boolean} Whether the page is the current page.
@@ -152,6 +188,14 @@ export class ViewerThumbnailBarElement extends PolymerElement {
       this.shadowRoot.querySelector('viewer-thumbnail:last-of-type').focus({
         preventScroll: true
       });
+    } else if (keyboardEvent.key === 'ArrowRight') {
+      // Prevent default arrow scroll behavior.
+      keyboardEvent.preventDefault();
+      this.clickThumbnailForPage(this.activePage + 1);
+    } else if (keyboardEvent.key === 'ArrowLeft') {
+      // Prevent default arrow scroll behavior.
+      keyboardEvent.preventDefault();
+      this.clickThumbnailForPage(this.activePage - 1);
     }
   }
 }

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

@@ -69,6 +69,12 @@ export class ViewerThumbnailElement extends PolymerElement {
     this.removeAttribute('pending');
   }
 
+  /** @return {!HTMLElement} */
+  getClickTarget() {
+    return /** @type {!HTMLElement} */ (
+        this.shadowRoot.querySelector('#thumbnail'));
+  }
+
   /**
    * @return {!HTMLCanvasElement}
    * @private
@@ -164,13 +170,11 @@ export class ViewerThumbnailElement extends PolymerElement {
     const keyboardEvent = /** @type {!KeyboardEvent} */ (e);
     switch (keyboardEvent.key) {
       case 'ArrowDown':
-      case 'ArrowRight':
         // Prevent default arrow scroll behavior.
         keyboardEvent.preventDefault();
         this.focusThumbnailNext_();
         break;
       case 'ArrowUp':
-      case 'ArrowLeft':
         // Prevent default arrow scroll behavior.
         keyboardEvent.preventDefault();
         this.focusThumbnailPrev_();