PDF Viewer: Optimize and cleanup password dialog

Wrap around a dom-if template, which is a thriftier use of resources
since the password dialog should only be shown at the beginning of a
PDF viewing session. More importantly, only a small portion of PDFs
require the dialog.

Rename the element from viewer-password-screen to
viewer-password-dialog.

Fetch password dialog screens before the page is served instead of
using load time data.

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

chrome/browser/resources/pdf/BUILD.gn

@@ -60,7 +60,7 @@ preprocess_if_expr("preprocess_generated") {
     "elements/viewer-download-controls.js",
     "elements/viewer-error-screen.js",
     "elements/viewer-page-selector.js",
-    "elements/viewer-password-screen.js",
+    "elements/viewer-password-dialog.js",
     "elements/viewer-pdf-sidenav.js",
     "elements/viewer-pdf-toolbar.js",
     "elements/viewer-pdf-toolbar-new.js",
@@ -319,7 +319,7 @@ js_library("pdf_viewer") {
     ":pdf_viewer_utils",
     ":toolbar_manager",
     "elements:viewer-error-screen",
-    "elements:viewer-password-screen",
+    "elements:viewer-password-dialog",
     "elements:viewer-pdf-sidenav",
     "elements:viewer-pdf-toolbar",
     "elements:viewer-pdf-toolbar-new",

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

@@ -15,7 +15,7 @@ js_type_check("closure_compile") {
     ":viewer-error-screen",
     ":viewer-page-indicator",
     ":viewer-page-selector",
-    ":viewer-password-screen",
+    ":viewer-password-dialog",
     ":viewer-pdf-sidenav",
     ":viewer-pdf-toolbar",
     ":viewer-pdf-toolbar-new",
@@ -110,10 +110,11 @@ js_library("viewer-page-indicator") {
 js_library("viewer-page-selector") {
 }
 
-js_library("viewer-password-screen") {
+js_library("viewer-password-dialog") {
   deps = [
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
     "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
-    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 
@@ -211,7 +212,7 @@ html_to_js("web_components") {
     "viewer-error-screen.js",
     "viewer-page-indicator.js",
     "viewer-page-selector.js",
-    "viewer-password-screen.js",
+    "viewer-password-dialog.js",
     "viewer-pdf-sidenav.js",
     "viewer-pdf-toolbar.js",
     "viewer-pdf-toolbar-new.js",

chrome/browser/resources/pdf/elements/viewer-password-screen.html → chrome/browser/resources/pdf/elements/viewer-password-dialog.html

@@ -3,14 +3,12 @@
         margin-top: var(--cr-form-field-bottom-spacing);
       }
     </style>
-    <cr-dialog id="dialog" no-cancel>
+    <cr-dialog id="dialog" no-cancel show-on-attach>
       <div slot="title">$i18n{passwordDialogTitle}</div>
       <div slot="body">
         <div id="message">$i18n{passwordPrompt}</div>
-        <cr-input id="password"
-            type="password"
-            error-message="[[getErrorMessage_(invalid)]]"
-            invalid="[[invalid]]"
+        <cr-input id="password" type="password"
+            error-message="$i18n{passwordInvalid}" invalid="[[invalid]]"
             autofocus>
         </cr-input>
       </div>

chrome/browser/resources/pdf/elements/viewer-password-screen.js → chrome/browser/resources/pdf/elements/viewer-password-dialog.js

@@ -8,11 +8,10 @@ import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
-  is: 'viewer-password-screen',
+  is: 'viewer-password-dialog',
 
   _template: html`{__html_template__}`,
 
@@ -20,18 +19,8 @@ Polymer({
     invalid: Boolean,
   },
 
-  get active() {
-    return this.$.dialog.open;
-  },
-
-  show() {
-    this.$.dialog.showModal();
-  },
-
   close() {
-    if (this.active) {
     this.$.dialog.close();
-    }
   },
 
   deny() {
@@ -51,14 +40,4 @@ Polymer({
     this.$.submit.disabled = true;
     this.fire('password-submitted', {password: password.value});
   },
-
-  /**
-   * Returns |message| if input is invalid, otherwise empty string.
-   * This avoids setting the error message (which announces to screen readers)
-   * when there is no error.
-   * @return {string}
-   */
-  getErrorMessage_() {
-    return this.invalid ? loadTimeData.getString('passwordInvalid') : '';
-  }
 });

chrome/browser/resources/pdf/pdf_viewer.html

@@ -221,9 +221,11 @@
   <div id="sizer"></div>
 </template>
 
-<viewer-password-screen id="password-screen"
+<template is="dom-if" if="[[showPasswordDialog_]]" restamp>
+  <viewer-password-dialog id="password-dialog" on-close="onPasswordDialogClose_"
       on-password-submitted="onPasswordSubmitted_">
-</viewer-password-screen>
+  </viewer-password-dialog>
+</template>
 
 <template is="dom-if" if="[[showPropertiesDialog_]]" restamp>
   <viewer-properties-dialog id="properties-dialog"

chrome/browser/resources/pdf/pdf_viewer.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import './elements/viewer-error-screen.js';
-import './elements/viewer-password-screen.js';
+import './elements/viewer-password-dialog.js';
 import './elements/viewer-pdf-toolbar.js';
 import './elements/viewer-properties-dialog.js';
 import './elements/viewer-zoom-toolbar.js';
@@ -253,6 +253,12 @@ export class PDFViewerElement extends PDFViewerBaseElement {
         value: false,
       },
 
+      /** @private */
+      showPasswordDialog_: {
+        type: Boolean,
+        value: false,
+      },
+
       /** @private */
       showPropertiesDialog_: {
         type: Boolean,
@@ -810,11 +816,7 @@ export class PDFViewerElement extends PDFViewerBaseElement {
   setLoadState(loadState) {
     super.setLoadState(loadState);
     if (loadState === LoadState.FAILED) {
-      const passwordScreen = this.$$('#password-screen');
-      if (passwordScreen && passwordScreen.active) {
-        passwordScreen.deny();
-        passwordScreen.close();
-      }
+      this.closePasswordDialog_();
     }
   }
 
@@ -829,9 +831,22 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     }
   }
 
+  /** @private */
+  closePasswordDialog_() {
+    const passwordDialog = this.shadowRoot.querySelector('#password-dialog');
+    if (passwordDialog) {
+      passwordDialog.close();
+    }
+  }
+
+  /** @private */
+  onPasswordDialogClose_() {
+    this.showPasswordDialog_ = false;
+  }
+
   /**
    * An event handler for handling password-submitted events. These are fired
-   * when an event is entered into the password screen.
+   * when an event is entered into the password dialog.
    * @param {!CustomEvent<{password: string}>} event a password-submitted event.
    * @private
    */
@@ -997,12 +1012,10 @@ export class PDFViewerElement extends PDFViewerBaseElement {
   /** @override */
   setDocumentDimensions(documentDimensions) {
     super.setDocumentDimensions(documentDimensions);
-    // If we received the document dimensions, the password was good so we
-    // can dismiss the password screen.
-    const passwordScreen = this.$$('#password-screen');
-    if (passwordScreen && passwordScreen.active) {
-      passwordScreen.close();
-    }
+
+    // If the document dimensions are received, the password was correct and the
+    // password dialog can be dismissed.
+    this.closePasswordDialog_();
 
     if (this.toolbarEnabled_) {
       this.docLength_ = this.documentDimensions.pageDimensions.length;
@@ -1023,15 +1036,14 @@ export class PDFViewerElement extends PDFViewerBaseElement {
    * @private
    */
   handlePasswordRequest_() {
-    // If the password screen isn't up, put it up. Otherwise we're
-    // responding to an incorrect password so deny it.
-    const passwordScreen = this.$$('#password-screen');
-    assert(passwordScreen);
-    if (!passwordScreen.active) {
-      this.hadPassword_ = true;
-      passwordScreen.show();
+    // Show the password dialog if it is not already shown. Otherwise, respond
+    // to an incorrect password.
+    if (!this.showPasswordDialog_) {
+      this.showPasswordDialog_ = true;
     } else {
-      passwordScreen.deny();
+      const passwordDialog = this.shadowRoot.querySelector('#password-dialog');
+      assert(passwordDialog);
+      passwordDialog.deny();
     }
   }
 

chrome/test/data/pdf/basic_test.js

@@ -13,7 +13,7 @@ const tests = [
   function testHasElements() {
     const viewer = /** @type {!PDFViewerElement} */ (
         document.body.querySelector('pdf-viewer'));
-    const commonElements = ['viewer-password-screen', 'viewer-error-screen'];
+    const commonElements = ['viewer-error-screen'];
     const elementNames =
         document.documentElement.hasAttribute('pdf-viewer-update-enabled') ?
         ['viewer-pdf-toolbar-new', 'viewer-pdf-sidenav', ...commonElements] :