PDF Viewer Update: Thumbnail scrolling polishes

1) Use a new method focusAndScroll() on thumbnails that disables the
default scrolling behavior of focus() and uses scrollIntoView() instead.
That way the scrolling behavior of focused and active thumbnails are
unified.

2) Add a top padding to the first thumbnail so the box shadow is shown
when the thumbnail is scrolled into view.

3) Remove the opacity transition on thumbnails, which was causing some
flashing to occur while scrolling through the active thumbnail quickly
using the keyboard.

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

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

@@ -7,12 +7,12 @@
     box-sizing: border-box;
     height: 100%;
     overflow: auto;
-    padding: 24px 0;
+    padding-bottom: 24px;
     padding-inline-end: var(--viewer-thumbnail-bar-padding-inline-end);
     text-align: center;
   }
 
-  viewer-thumbnail + viewer-thumbnail {
+  viewer-thumbnail {
     padding-top: 24px;
   }
 </style>

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

@@ -34,7 +34,6 @@
   canvas {
     display: block;
     opacity: 0.5;
-    transition: opacity 100ms ease-out;
   }
 
   :host([is-active]) canvas {

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

@@ -104,6 +104,17 @@ export class ViewerThumbnailElement extends PolymerElement {
     return {width: cssWidth, height: cssHeight};
   }
 
+  /**
+   * Focuses and scrolls the element into view.
+   * The default scroll behavior of focus() acts differently than
+   * scrollIntoView(), which is called in isActiveChanged_(). This method
+   * unifies the behavior.
+   */
+  focusAndScroll() {
+    this.scrollIntoView({block: 'nearest'});
+    this.focus({preventScroll: true});
+  }
+
   /** @return {boolean} */
   isPending() {
     return this.hasAttribute('pending');
@@ -122,15 +133,17 @@ export class ViewerThumbnailElement extends PolymerElement {
 
   /** @private */
   focusThumbnailNext_() {
-    if (this.nextElementSibling) {
-      this.nextElementSibling.focus();
+    if (this.nextElementSibling &&
+        this.nextElementSibling.matches('viewer-thumbnail')) {
+      this.nextElementSibling.focusAndScroll();
     }
   }
 
   /** @private */
   focusThumbnailPrev_() {
-    if (this.previousElementSibling) {
-      this.previousElementSibling.focus();
+    if (this.previousElementSibling &&
+        this.previousElementSibling.matches('viewer-thumbnail')) {
+      this.previousElementSibling.focusAndScroll();
     }
   }