PDF Viewer Update: Style thumbnail of active page

Change the color of the thumbnail of the active page. This CL sets the
plumbing for a thumbnail to know it is active. More styling will be
added after the painting of the thumbnails is implemented.

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

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

@@ -80,7 +80,7 @@
 </div>
 <div id="content">
   <viewer-thumbnail-bar id="thumbnail-bar" hidden="[[!thumbnailView_]]"
-      doc-length="[[docLength]]">
+      active-page="[[activePage]]" doc-length="[[docLength]]">
   </viewer-thumbnail-bar>
   <viewer-document-outline id="outline" hidden="[[thumbnailView_]]"
       bookmarks="[[bookmarks]]">

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

@@ -25,6 +25,8 @@ export class ViewerPdfSidenavElement extends PolymerElement {
 
   static get properties() {
     return {
+      activePage: Number,
+
       /** @type {!Array<!Bookmark>} */
       bookmarks: {
         type: Array,

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

@@ -9,6 +9,8 @@
 </style>
 <div id="thumbnails">
   <template is="dom-repeat" items="[[pageNumbers_]]">
-    <viewer-thumbnail page-number="[[item]]"></viewer-thumbnail>
+    <viewer-thumbnail is-active="[[isActivePage_(item, activePage)]]"
+        page-number="[[item]]">
+    </viewer-thumbnail>
   </template>
 </div>

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

@@ -17,6 +17,8 @@ export class ViewerThumbnailBarElement extends PolymerElement {
 
   static get properties() {
     return {
+      activePage: Number,
+
       docLength: Number,
 
       /** @private {Array<number>} */
@@ -34,6 +36,15 @@ export class ViewerThumbnailBarElement extends PolymerElement {
   computePageNumbers_() {
     return Array.from({length: this.docLength}, (_, i) => i + 1);
   }
+
+  /**
+   * @param {number} page
+   * @return {boolean} Whether the page is the current page.
+   * @private
+   */
+  isActivePage_(page) {
+    return this.activePage === page;
+  }
 }
 
 customElements.define(ViewerThumbnailBarElement.is, ViewerThumbnailBarElement);

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

 <style>
-  #content {
-    margin-top: 24px;
-  }
-
-  #pageNumber {
-    line-height: 1;
-  }
-
   #thumbnail {
-    /* TODO(crbug.com/652400): Remove background color and div size. */
-    background-color: white;
+    /**
+     * TODO(crbug.com/652400): Remove div size and change inactive background
+     * color.
+     */
+    --inactive-background-color: black;
+    background-color: var(--inactive-background-color);
     height: 140px;
     margin-bottom: 12px;
     margin-inline-end: auto;
     margin-inline-start: auto;
+    margin-top: 24px;
     width: 108px;
   }
+
+  :host([is-active]) #thumbnail {
+    --active-background-color: white;
+    background-color: var(--active-background-color);
+  }
+
+  #pageNumber {
+    line-height: 1;
+  }
 </style>
 <div id="content">
   <div id="thumbnail" on-click="onClick_"></div>

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

@@ -17,6 +17,11 @@ export class ViewerThumbnailElement extends PolymerElement {
 
   static get properties() {
     return {
+      isActive: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       pageNumber: Number,
     };
   }

chrome/browser/resources/pdf/pdf_viewer.html

@@ -174,8 +174,8 @@
     <div id="sidenav-container" closed$="[[sidenavCollapsed_]]"
         hidden$="[[!toolbarEnabled_]]">
       <viewer-pdf-sidenav id="sidenav"
-          bookmarks="[[bookmarks_]]" doc-length="[[docLength_]]"
-          on-change-page="onChangePage_"
+          active-page="[[pageNo_]]" bookmarks="[[bookmarks_]]"
+          doc-length="[[docLength_]]" on-change-page="onChangePage_"
           on-change-page-and-xy="onChangePageAndXy_"
           on-navigate="onNavigate_">
       </viewer-pdf-sidenav>