PDF Viewer Update: Propagate number of rotations to thumbnails

In preparation for rotating the thumbnails in response to PDF content
rotations, propagate the number of clockwise rotations to the
thumbnails.

A future change will implement the rotations.

Bug: 652400
Change-Id: I89933d30edb102a31ae5381677aaf9f8874dadea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2437487
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812238}

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

@@ -153,6 +153,7 @@ js_library("viewer-pen-options") {
 js_library("viewer-thumbnail") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
   ]
 }

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

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

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

@@ -33,6 +33,8 @@ export class ViewerPdfSidenavElement extends PolymerElement {
         value: () => [],
       },
 
+      clockwiseRotations: Number,
+
       docLength: Number,
 
       /** @private */

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

@@ -19,7 +19,7 @@
 <div id="thumbnails">
   <template is="dom-repeat" items="[[pageNumbers_]]"
       on-dom-change="onDomChange_">
-    <viewer-thumbnail tabindex="0"
+    <viewer-thumbnail tabindex="0" clockwise-rotations="[[clockwiseRotations]]"
         is-active="[[isActivePage_(item, activePage)]]" page-number="[[item]]">
     </viewer-thumbnail>
   </template>

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

@@ -21,6 +21,8 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     return {
       activePage: Number,
 
+      clockwiseRotations: Number,
+
       docLength: Number,
 
       /** @private {Array<number>} */

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

@@ -4,6 +4,7 @@
 
 import './shared-css.js';
 
+import {assert} from 'chrome://resources/js/assert.m.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -26,6 +27,11 @@ export class ViewerThumbnailElement extends PolymerElement {
 
   static get properties() {
     return {
+      clockwiseRotations: {
+        type: Number,
+        observer: 'clockwiseRotationsChanged_',
+      },
+
       isActive: {
         type: Boolean,
         observer: 'isActiveChanged_',
@@ -74,6 +80,12 @@ export class ViewerThumbnailElement extends PolymerElement {
     this.toggleAttribute('pending', true);
   }
 
+  /** @private */
+  clockwiseRotationsChanged_() {
+    // TODO(crbug.com/652400): Respect the PDF content clockwiseRotation.
+    assert(this.clockwiseRotations >= 0 && this.clockwiseRotations < 4);
+  }
+
   /** @private */
   isActiveChanged_() {
     if (this.isActive) {

chrome/browser/resources/pdf/pdf_viewer.html

@@ -156,7 +156,8 @@
     load-progress="[[loadProgress_]]" has-edits="[[hasEdits_]]"
     has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
     pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
-    printing-enabled="[[printingEnabled_]]" rotated="[[rotated_]]"
+    printing-enabled="[[printingEnabled_]]"
+    rotated="[[isRotated_(clockwiseRotations_)]]"
     is-form-field-focused="[[isFormFieldFocused_]]"
     sidenav-collapsed="[[sidenavCollapsed_]]"
     two-up-view-enabled="[[twoUpViewEnabled_]]"
@@ -188,6 +189,7 @@
         hidden$="[[!toolbarEnabled_]]">
       <viewer-pdf-sidenav id="sidenav"
           active-page="[[pageNo_]]" bookmarks="[[bookmarks_]]"
+          clockwise-rotations="[[clockwiseRotations_]]"
           doc-length="[[docLength_]]" on-change-page="onChangePage_"
           on-change-page-and-xy="onChangePageAndXy_" on-navigate="onNavigate_"
           on-paint-thumbnail="onPaintThumbnail_">

chrome/browser/resources/pdf/pdf_viewer.js

@@ -116,7 +116,8 @@ export class PDFViewerElement extends PDFViewerBaseElement {
       annotationAvailable_: {
         type: Boolean,
         computed: 'computeAnnotationAvailable_(' +
-            'hadPassword_, rotated_, canSerializeDocument_, twoUpViewEnabled_)',
+            'hadPassword_, clockwiseRotations_, canSerializeDocument_,' +
+            'twoUpViewEnabled_)',
       },
 
       annotationMode_: {
@@ -128,6 +129,8 @@ export class PDFViewerElement extends PDFViewerBaseElement {
 
       bookmarks_: Array,
 
+      clockwiseRotations_: Number,
+
       documentHasFocus_: {
         type: Boolean,
         value: false,
@@ -143,8 +146,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
         value: false,
       },
 
-      rotated_: Boolean,
-
       hadPassword_: Boolean,
 
       canSerializeDocument_: Boolean,
@@ -187,6 +188,9 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     /** @private {!Array<!Bookmark>} */
     this.bookmarks_ = [];
 
+    /** @private {number} */
+    this.clockwiseRotations_ = 0;
+
     /** @private {boolean} */
     this.documentHasFocus_ = false;
 
@@ -196,9 +200,6 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     /** @private {boolean} */
     this.hasEnteredAnnotationMode_ = false;
 
-    /** @private {boolean} */
-    this.rotated_ = false;
-
     /** @private {boolean} */
     this.hadPassword_ = false;
 
@@ -489,7 +490,7 @@ export class PDFViewerElement extends PDFViewerBaseElement {
       this.currentController.setTwoUpView(false);
       this.twoUpViewEnabled_ = false;
     }
-    if (this.rotated_) {
+    if (this.isRotated_()) {
       const rotations = this.viewport.getClockwiseRotations();
       switch (rotations) {
         case 1:
@@ -503,7 +504,7 @@ export class PDFViewerElement extends PDFViewerBaseElement {
           super.rotateClockwise();
           break;
       }
-      this.rotated_ = false;
+      this.clockwiseRotations_ = 0;
     }
   }
 
@@ -1166,16 +1167,24 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     return this.canSerializeDocument_ && !this.hadPassword_;
   }
 
+  /**
+   * @return {boolean} Whether the PDF contents are rotated.
+   * @private
+   */
+  isRotated_() {
+    return this.clockwiseRotations_ !== 0;
+  }
+
   /** @override */
   rotateClockwise() {
     super.rotateClockwise();
-    this.rotated_ = this.viewport.getClockwiseRotations() !== 0;
+    this.clockwiseRotations_ = this.viewport.getClockwiseRotations();
   }
 
   /** @override */
   rotateCounterclockwise() {
     super.rotateCounterclockwise();
-    this.rotated_ = this.viewport.getClockwiseRotations() !== 0;
+    this.clockwiseRotations_ = this.viewport.getClockwiseRotations();
   }
 }