PDF Viewer Update: Add loading progress in new toolbar.

Unlike the old implementation, this one leverages Polymer bindings
to hide/show toolbar children, while the document transitions from
loading to loaded.

Fixed: 1100430
Change-Id: I0d54c69c45687295ad309c9215a6b7d38dcbfd05
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2274861
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784226}

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html

@@ -63,6 +63,38 @@
     text-align: center;
     width: 5ch;
   }
+
+  paper-progress {
+    --paper-progress-active-color: var(--google-blue-refresh-300);
+    --paper-progress-container-color: transparent;
+    --paper-progress-height: 3px;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  paper-progress,
+  #center,
+  #end {
+    transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  paper-progress,
+  :host([loading_]) #menuButton,
+  :host([loading_]) #center,
+  :host([loading_]) #end {
+    opacity: 0;
+    /* Ensure UI is not interactable while hidden */
+    visibility: hidden;
+  }
+
+  :host([loading_]) paper-progress,
+  #menuButton,
+  #center,
+  #end {
+    opacity: 1;
+    visibility: visible;
+  }
 </style>
 <!-- TODO(dpapad): Add aria-label and title for all buttons -->
 <!-- TODO(dpapad): Replace with the final icons provided by UX -->
@@ -91,3 +123,5 @@
   <cr-icon-button id="actionMenuTrigger"
       iron-icon="cr:more-vert"></cr-icon-button>
 </div>
+<paper-progress id="progress" value="[[loadProgress]]" hidden="[[!loading_]]">
+</paper-progress>

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js

@@ -4,6 +4,8 @@
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 
 import './icons.js';
 import './viewer-page-selector.js';
@@ -23,8 +25,30 @@ class ViewerPdfToolbarNewElement extends PolymerElement {
     return {
       docLength: Number,
       pageNo: Number,
+
+      loadProgress: {
+        type: Number,
+        observer: 'loadProgressChanged_',
+      },
+
+      loading_: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
     };
   }
+
+  constructor() {
+    super();
+
+    /** @private {boolean} */
+    this.loading_ = true;
+  }
+
+  /** @private */
+  loadProgressChanged_() {
+    this.loading_ = this.loadProgress < 100;
+  }
 }
 customElements.define(
     ViewerPdfToolbarNewElement.is, ViewerPdfToolbarNewElement);

chrome/browser/resources/pdf/pdf_viewer.html

@@ -27,6 +27,7 @@
       has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
       is-form-field-focused="[[isFormFieldFocused_]]"
       doc-length="[[docLength_]]" page-no="[[pageNo_]]"
+      load-progress="[[loadProgress_]]"
       on-save="onToolbarSave_" on-print="onPrint_"
       on-annotation-mode-toggled="onAnnotationModeToggled_"
       on-annotation-tool-changed="onAnnotationToolChanged_"
@@ -36,7 +37,8 @@
 </template>
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <viewer-pdf-toolbar-new id="toolbar"
-      doc-length="[[docLength_]]" page-no="[[pageNo_]]" hidden>
+      doc-length="[[docLength_]]" page-no="[[pageNo_]]"
+      load-progress="[[loadProgress_]]" hidden>
   </viewer-pdf-toolbar-new>
 </template>
 

chrome/browser/resources/pdf/pdf_viewer.js

@@ -138,6 +138,7 @@ class PDFViewerElement extends PDFViewerBaseElement {
       },
 
       docLength_: Number,
+      loadProgress_: Number,
       pageNo_: Number,
     };
   }
@@ -213,6 +214,12 @@ class PDFViewerElement extends PDFViewerBaseElement {
      */
     this.pageNo_;
 
+    /**
+     * The current loading progress of the PDF document (0 - 100).
+     * @private {number}
+     */
+    this.loadProgress_;
+
     /** @private {boolean} */
     this.pdfViewerUpdateEnabled_;
   }
@@ -557,7 +564,7 @@ class PDFViewerElement extends PDFViewerBaseElement {
   /** @override */
   updateProgress(progress) {
     if (this.toolbarEnabled_) {
-      this.getToolbar_().loadProgress = progress;
+      this.loadProgress_ = progress;
     }
     super.updateProgress(progress);
     if (progress === 100 && !this.pdfViewerUpdateEnabled_) {