PDF Viewer Update: Add document properties dialog

Add a skeleton document properties dialog element containing the fields
when the document properties will get populated.

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

chrome/browser/pdf/pdf_extension_test.cc

@@ -914,6 +914,11 @@ IN_PROC_BROWSER_TEST_F(PDFExtensionJSUpdatesEnabledTest, ViewerPdfSidenav) {
   RunTestsInJsModule("viewer_pdf_sidenav_test.js", "test.pdf");
 }
 
+IN_PROC_BROWSER_TEST_F(PDFExtensionJSUpdatesEnabledTest,
+                       ViewerPropertiesDialogTest) {
+  RunTestsInJsModule("viewer_properties_dialog_test.js", "test.pdf");
+}
+
 IN_PROC_BROWSER_TEST_F(PDFExtensionJSUpdatesEnabledTest, ViewerThumbnailBar) {
   // Although this test file does not require a PDF to be loaded, loading the
   // elements without loading a PDF is difficult.

chrome/browser/pdf/pdf_extension_util.cc

@@ -65,6 +65,22 @@ void AddPdfViewerStrings(base::Value* dict) {
     {"passwordPrompt", IDS_PDF_NEED_PASSWORD},
     {"passwordSubmit", IDS_PDF_PASSWORD_SUBMIT},
     {"present", IDS_PDF_PRESENT},
+    {"propertiesApplication", IDS_PDF_PROPERTIES_APPLICATION},
+    {"propertiesAuthor", IDS_PDF_PROPERTIES_AUTHOR},
+    {"propertiesCreated", IDS_PDF_PROPERTIES_CREATED},
+    {"propertiesDialogClose", IDS_CLOSE},
+    {"propertiesDialogTitle", IDS_PDF_PROPERTIES_DIALOG_TITLE},
+    {"propertiesFastWebView", IDS_PDF_PROPERTIES_FAST_WEB_VIEW},
+    {"propertiesFileName", IDS_PDF_PROPERTIES_FILE_NAME},
+    {"propertiesFileSize", IDS_PDF_PROPERTIES_FILE_SIZE},
+    {"propertiesKeywords", IDS_PDF_PROPERTIES_KEYWORDS},
+    {"propertiesModified", IDS_PDF_PROPERTIES_MODIFIED},
+    {"propertiesPageCount", IDS_PDF_PROPERTIES_PAGE_COUNT},
+    {"propertiesPageSize", IDS_PDF_PROPERTIES_PAGE_SIZE},
+    {"propertiesPdfProducer", IDS_PDF_PROPERTIES_PDF_PRODUCER},
+    {"propertiesPdfVersion", IDS_PDF_PROPERTIES_PDF_VERSION},
+    {"propertiesSubject", IDS_PDF_PROPERTIES_SUBJECT},
+    {"propertiesTitle", IDS_PDF_PROPERTIES_TITLE},
     {"thumbnailPageAriaLabel", IDS_PDF_THUMBNAIL_PAGE_ARIA_LABEL},
     {"tooltipDocumentOutline", IDS_PDF_TOOLTIP_DOCUMENT_OUTLINE},
     {"tooltipDownload", IDS_PDF_TOOLTIP_DOWNLOAD},

chrome/browser/resources/pdf/BUILD.gn

@@ -169,6 +169,7 @@ js_library("pdf_viewer") {
     "elements:viewer-pdf-sidenav",
     "elements:viewer-pdf-toolbar",
     "elements:viewer-pdf-toolbar-new",
+    "elements:viewer-properties-dialog",
     "elements:viewer-zoom-toolbar",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:event_tracker.m",

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

@@ -19,6 +19,7 @@ js_type_check("closure_compile") {
     ":viewer-pdf-sidenav",
     ":viewer-pdf-toolbar",
     ":viewer-pdf-toolbar-new",
+    ":viewer-properties-dialog",
     ":viewer-thumbnail",
     ":viewer-thumbnail-bar",
     ":viewer-toolbar-dropdown",
@@ -154,6 +155,13 @@ js_library("viewer-pdf-toolbar-new") {
 js_library("viewer-pen-options") {
 }
 
+js_library("viewer-properties-dialog") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+  ]
+}
+
 js_library("viewer-thumbnail") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -206,6 +214,7 @@ html_to_js("web_components") {
     "viewer-pdf-sidenav.js",
     "viewer-pdf-toolbar.js",
     "viewer-pdf-toolbar-new.js",
+    "viewer-properties-dialog.js",
     "viewer-thumbnail.js",
     "viewer-thumbnail-bar.js",
     "viewer-toolbar-dropdown.js",

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

@@ -294,14 +294,21 @@
     $i18n{annotationsShowToggle}
   </button>
 
+  <hr>
+
   <template is="dom-if" if="[[presentationModeEnabled]]">
-    <hr>
     <button id="present-button" class="dropdown-item"
         on-click="onPresentClick_">
       <span class="check-container" aria-hidden="true"></span>
       $i18n{present}
     </button>
   </template>
+
+  <button id="properties-button" class="dropdown-item"
+      on-click="onPropertiesClick_">
+    <span class="check-container" aria-hidden="true"></span>
+    $i18n{propertiesDialogTitle}
+  </button>
 </cr-action-menu>
 
 <if expr="chromeos">

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

@@ -225,6 +225,12 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     this.dispatchEvent(new CustomEvent('present-click'));
   }
 
+  /** @private */
+  onPropertiesClick_() {
+    this.getMenu_().close();
+    this.dispatchEvent(new CustomEvent('properties-click'));
+  }
+
   /**
    * @param {boolean} checked
    * @return {string}

chrome/browser/resources/pdf/elements/viewer-properties-dialog.html

+<style include="cr-shared-style">
+  :host {
+    --break-padding: 8px;
+  }
+
+  cr-dialog::part(dialog) {
+    width: fit-content;
+  }
+
+  table {
+    border-spacing: 0;
+  }
+
+  .break > td {
+    --break-color: var(--google-grey-refresh-300);
+    border-bottom: 1px solid var(--break-color);
+    padding-bottom: var(--break-padding);
+  }
+
+
+  .break + tr > td {
+    padding-top: var(--break-padding);
+  }
+
+  .name {
+    color: var(--cr-primary-text-color);
+    padding-inline-end: 12px;
+  }
+
+  .value {
+    color: var(--cr-secondary-text-color);
+    min-width: 200px;
+  }
+</style>
+<cr-dialog show-on-attach>
+  <div slot="title">$i18n{propertiesDialogTitle}</div>
+  <div slot="body">
+    <table>
+      <tr>
+        <td class="name">$i18n{propertiesFileName}</td>
+        <td class="value" id="file-name">-</td>
+      </tr>
+      <tr class="break">
+        <td class="name">$i18n{propertiesFileSize}</td>
+        <td class="value" id="file-size">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesTitle}</td>
+        <td class="value" id="title">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesAuthor}</td>
+        <td class="value" id="author">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesSubject}</td>
+        <td class="value" id="subject">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesKeywords}</td>
+        <td class="value" id="keywords">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesCreated}</td>
+        <td class="value" id="created">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesModified}</td>
+        <td class="value" id="modified">-</td>
+      </tr>
+      <tr class="break">
+        <td class="name">$i18n{propertiesApplication}</td>
+        <td class="value" id="application">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesPdfProducer}</td>
+        <td class="value" id="pdf-producer">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesPdfVersion}</td>
+        <td class="value" id="pdf-version">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesPageCount}</td>
+        <td class="value" id="page-count">-</td>
+      </tr>
+      <tr class="break">
+        <td class="name">$i18n{propertiesPageSize}</td>
+        <td class="value" id="page-size">-</td>
+      </tr>
+      <tr>
+        <td class="name">$i18n{propertiesFastWebView}</td>
+        <td class="value" id="fast-web-view">-</td>
+      </tr>
+    </table>
+  </div>
+  <div slot="button-container">
+    <cr-button id="close" class="action-button" on-click="onClickClose_">
+      $i18n{propertiesDialogClose}
+    </cr-button>
+  </div>
+</cr-dialog>

chrome/browser/resources/pdf/elements/viewer-properties-dialog.js

+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class ViewerPropertiesDialogElement extends PolymerElement {
+  static get is() {
+    return 'viewer-properties-dialog';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  /**
+   * @return {!CrDialogElement}
+   * @private
+   */
+  getDialog_() {
+    return /** @type {!CrDialogElement} */ (
+        this.shadowRoot.querySelector('cr-dialog'));
+  }
+
+  /** @private */
+  onClickClose_() {
+    this.getDialog_().close();
+  }
+}
+
+customElements.define(
+    ViewerPropertiesDialogElement.is, ViewerPropertiesDialogElement);

chrome/browser/resources/pdf/pdf_resources.grdp

@@ -46,6 +46,7 @@
   <include name="IDR_PDF_VIEWER_PDF_SIDENAV_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.js" use_base_dir="false" type="BINDATA"/>
   <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js" use_base_dir="false" type="BINDATA" preprocess="true"/>
   <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_NEW_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js" use_base_dir="false" type="BINDATA" preprocess="true"/>
+  <include name="IDR_PDF_VIEWER_PROPERTIES_DIALOG_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-properties-dialog.js" use_base_dir="false" type="BINDATA" />
   <include name="IDR_PDF_VIEWER_THUMBNAIL_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-thumbnail.js" use_base_dir="false" type="BINDATA" />
   <include name="IDR_PDF_VIEWER_THUMBNAIL_BAR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-thumbnail-bar.js" use_base_dir="false" type="BINDATA" />
   <include name="IDR_PDF_VIEWER_TOOLBAR_DROPDOWN_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.js" use_base_dir="false" type="BINDATA" />

chrome/browser/resources/pdf/pdf_viewer.html

@@ -183,6 +183,7 @@
     on-dropdown-opened="onDropdownOpened_"
     on-fit-to-changed="onFitToChanged"
     on-present-click="onPresentClick_"
+    on-properties-click="onPropertiesClick_"
     on-annotation-mode-dialog-confirmed="onResetView_"
     on-sidenav-toggle-click="onSidenavToggleClick_"
     on-two-up-view-changed="onTwoUpViewChanged_"
@@ -223,6 +224,12 @@
     on-password-submitted="onPasswordSubmitted_">
 </viewer-password-screen>
 
+<template is="dom-if" if="[[showPropertiesDialog_]]" restamp>
+  <viewer-properties-dialog id="properties-dialog"
+      on-close="onPropertiesDialogClose_">
+  </viewer-properties-dialog>
+</template>
+
 <template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
   <viewer-zoom-toolbar id="zoom-toolbar"
       on-fit-to-changed="onFitToChanged"

chrome/browser/resources/pdf/pdf_viewer.js

@@ -5,6 +5,7 @@
 import './elements/viewer-error-screen.js';
 import './elements/viewer-password-screen.js';
 import './elements/viewer-pdf-toolbar.js';
+import './elements/viewer-properties-dialog.js';
 import './elements/viewer-zoom-toolbar.js';
 import './elements/shared-vars.js';
 // <if expr="chromeos">
@@ -248,6 +249,12 @@ export class PDFViewerElement extends PDFViewerBaseElement {
         value: false,
       },
 
+      /** @private */
+      showPropertiesDialog_: {
+        type: Boolean,
+        value: false,
+      },
+
       /** @private */
       sidenavCollapsed_: {
         type: Boolean,
@@ -745,6 +752,19 @@ export class PDFViewerElement extends PDFViewerBaseElement {
         });
   }
 
+  /** @private */
+  onPropertiesClick_() {
+    assert(this.pdfViewerUpdateEnabled_);
+    assert(!this.showPropertiesDialog_);
+    this.showPropertiesDialog_ = true;
+  }
+
+  /** @private */
+  onPropertiesDialogClose_() {
+    assert(this.showPropertiesDialog_);
+    this.showPropertiesDialog_ = false;
+  }
+
   /**
    * Changes two up view mode for the controller. Controller will trigger
    * layout update later, which will update the viewport accordingly.

chrome/test/data/pdf/BUILD.gn

@@ -39,6 +39,7 @@ js_type_check("closure_compile") {
     #":touch_handling_test",
     ":viewer_pdf_sidenav_test",
     ":viewer_pdf_toolbar_new_test",
+    ":viewer_properties_dialog_test",
     ":viewer_thumbnail_bar_test",
     ":viewer_thumbnail_test",
     ":viewport_test",
@@ -206,6 +207,15 @@ js_library("viewer_pdf_toolbar_new_test") {
   externs_list = [ "$externs_path/test.js" ]
 }
 
+js_library("viewer_properties_dialog_test") {
+  deps = [
+    "../webui:test_util.m",
+    "//chrome/browser/resources/pdf:pdf_viewer",
+    "//chrome/browser/resources/pdf/elements:viewer-properties-dialog",
+  ]
+  externs_list = [ "$externs_path/test.js" ]
+}
+
 js_library("viewer_thumbnail_bar_test") {
   deps = [
     "../webui:test_util.m",

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

@@ -313,6 +313,16 @@ const tests = [
     await whenFired;
     chrome.test.succeed();
   },
+  async function testPropertiesButton() {
+    const toolbar = createToolbar();
+    const button = toolbar.shadowRoot.querySelector('#properties-button');
+    chrome.test.assertTrue(!!button);
+
+    const whenFired = eventToPromise('properties-click', toolbar);
+    button.click();
+    await whenFired;
+    chrome.test.succeed();
+  }
 ];
 
 chrome.test.runTests(tests);

chrome/test/data/pdf/viewer_properties_dialog_test.js

+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {eventToPromise} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
+import {ViewerPropertiesDialogElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-properties-dialog.js';
+import {PDFViewerElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/pdf_viewer.js';
+
+const viewer = /** @type {!PDFViewerElement} */ (
+    document.body.querySelector('pdf-viewer'));
+
+async function ensurePropertiesDialogOpen() {
+  chrome.test.assertFalse(!!getPropertiesDialog());
+  const whenOpen = eventToPromise('cr-dialog-open', viewer);
+  const toolbar = viewer.shadowRoot.querySelector('viewer-pdf-toolbar-new');
+  toolbar.dispatchEvent(new CustomEvent('properties-click'));
+  await whenOpen;
+  chrome.test.assertTrue(!!getPropertiesDialog());
+}
+
+async function ensurePropertiesDialogClose() {
+  const dialog = getPropertiesDialog();
+  chrome.test.assertTrue(!!dialog);
+  const whenClosed = eventToPromise('close', dialog);
+  dialog.shadowRoot.querySelector('#close').click();
+  await whenClosed;
+  chrome.test.assertFalse(!!getPropertiesDialog());
+}
+
+/** @return {!ViewerPropertiesDialogElement} */
+function getPropertiesDialog() {
+  return /** @type {!ViewerPropertiesDialogElement} */ (
+      viewer.shadowRoot.querySelector('#properties-dialog'));
+}
+
+const tests = [
+  async function testPropertiesDialog() {
+    await ensurePropertiesDialogOpen();
+    await ensurePropertiesDialogClose();
+    chrome.test.succeed();
+  },
+];
+
+chrome.test.runTests(tests);

components/pdf_strings.grdp

@@ -43,6 +43,52 @@
       Section
     </message>
 
+    <message name="IDS_PDF_PROPERTIES_DIALOG_TITLE" desc="Title of the dialog that displays the PDF document properties.">
+      Document properties
+    </message>
+    <message name="IDS_PDF_PROPERTIES_FILE_NAME" desc="Name of the property describing the file name of the PDF document.">
+      File name:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_FILE_SIZE" desc="Name of the property describing the size of the PDF document.">
+      File size:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_TITLE" desc="Name of the property describing the title of the PDF document.">
+      Title:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_AUTHOR" desc="Name of the property describing the author of the PDF document.">
+      Author:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_SUBJECT" desc="Name of the property describing the subject of the PDF document.">
+      Subject:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_KEYWORDS" desc="Name of the property describing the keywords associated with the PDF document.">
+      Keywords:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_CREATED" desc="Name of the property describing the date and time when the PDF document was created.">
+      Created:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_MODIFIED" desc="Name of the property describing the date and time when the PDF document was most recently modified.">
+      Modified:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_APPLICATION" desc="Name of the property describing the application that created the original document from which the PDF document was made.">
+      Application:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_PDF_PRODUCER" desc="Name of the property describing the name of the application that converted the original document to a PDF document.">
+      PDF producer:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_PDF_VERSION" desc="Name of the property describing the version of the PDF document.">
+      PDF version:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_PAGE_COUNT" desc="Name of the property describing the number of pages in the PDF document.">
+      Page count:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_PAGE_SIZE" desc="Name of the property describing the size of the pages of the PDF document.">
+      Page size:
+    </message>
+    <message name="IDS_PDF_PROPERTIES_FAST_WEB_VIEW" desc="Name of the property describing whether the PDF document is organized to be viewed efficiently in network environments.">
+      Fast web view:
+    </message>
+
     <message name="IDS_PDF_TOOLTIP_ROTATE_CW" desc="Button tooltip for the button which rotates a PDF document clockwise">
       Rotate clockwise
     </message>

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_APPLICATION.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_AUTHOR.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_CREATED.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_DIALOG_TITLE.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_FAST_WEB_VIEW.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_FILE_NAME.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_FILE_SIZE.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_KEYWORDS.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_MODIFIED.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_PAGE_COUNT.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_PAGE_SIZE.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_PDF_PRODUCER.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_PDF_VERSION.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_SUBJECT.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file

components/pdf_strings_grdp/IDS_PDF_PROPERTIES_TITLE.png.sha1

+38eae0f694309a8f5baf803f90d7a8b6457c5254
\ No newline at end of file