PDF Viewer Update: Add sidenav bookmarks/thumbnails skeleton

Adding a skeleton sidebar element with bookmarks/thumbnails icon buttons
and placeholder divs for the two views.

Bug: 1110756
Change-Id: I34b452bcc21a331c2eec88c15e794922b3124344
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2324558Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#793566}

chrome/browser/pdf/pdf_extension_test.cc

@@ -860,6 +860,12 @@ IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, ViewerPdfToolbarNew) {
   RunTestsInJsModule("viewer_pdf_toolbar_new_test.js", "test.pdf");
 }
 
+IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, ViewerPdfSidenav) {
+  // Although this test file does not require a PDF to be loaded, loading the
+  // elements without loading a PDF is difficult.
+  RunTestsInJsModule("viewer_pdf_sidenav_test.js", "test.pdf");
+}
+
 IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, ToolbarManager) {
   RunTestsInJsModule("toolbar_manager_test.js", "test.pdf");
 }

chrome/browser/resources/component_extension_resources.grd

@@ -136,6 +136,7 @@
         </if>
         <include name="IDR_PDF_VIEWER_PAGE_SELECTOR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-page-selector.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-password-screen.js" use_base_dir="false" type="BINDATA" />
+        <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_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/elements/BUILD.gn

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
     ":viewer-page-indicator",
     ":viewer-page-selector",
     ":viewer-password-screen",
+    ":viewer-pdf-sidenav",
     ":viewer-pdf-toolbar",
     ":viewer-pdf-toolbar-new",
     ":viewer-toolbar-dropdown",
@@ -94,6 +95,13 @@ js_library("viewer-password-screen") {
   ]
 }
 
+js_library("viewer-pdf-sidenav") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+  ]
+}
+
 js_library("viewer-pdf-toolbar") {
   deps = [
     ":viewer-annotations-bar",
@@ -148,6 +156,7 @@ html_to_js("web_components") {
     "viewer-page-indicator.js",
     "viewer-page-selector.js",
     "viewer-password-screen.js",
+    "viewer-pdf-sidenav.js",
     "viewer-pdf-toolbar.js",
     "viewer-pdf-toolbar-new.js",
     "viewer-toolbar-dropdown.js",

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

+<style include="pdf-shared">
+  :host {
+    background-color: var(--viewer-pdf-toolbar-background-color);
+    display: flex;
+    min-width: 300px;
+  }
+
+  #icons {
+    display: flex;
+    flex-direction: column;
+    min-width: 48px;
+  }
+
+  /* These are dummy styles currently - replace with real content. */
+  #content {
+    color: white;
+    font-weight: 500;
+    line-height: 36px;
+    text-align: center;
+    width: 100%;
+  }
+
+  .selected cr-icon-button {
+    --cr-icon-button-fill-color: var(--google-blue-refresh-700);
+  }
+
+  .button-wrapper {
+    --highlight-border-width: 6px;
+    align-items: center;
+    border-inline-start: var(--highlight-border-width) solid transparent;
+    display: flex;
+    height: var(--cr-icon-button-size);
+    justify-content: center;
+    margin: 6px 0;
+    width: calc(100% - var(--highlight-border-width));
+  }
+
+  .button-wrapper.selected {
+    border-color: var(--google-blue-refresh-700);
+  }
+</style>
+<div id="icons">
+  <!-- TODO(rbpotter): Localize titles once the strings are finalized. -->
+  <div class$="button-wrapper [[thumbnailButtonClass_(thumbnailView_)]]">
+    <cr-icon-button iron-icon="pdf:thumbnails" role="tab"
+        title="Thumbnail view" on-click="onThumbnailClick_">
+    </cr-icon-button>
+  </div>
+  <div class$="button-wrapper [[outlineButtonClass_(thumbnailView_)]]">
+    <cr-icon-button iron-icon="pdf:doc-outline" role="tab"
+        title="Outline view" on-click="onOutlineClick_">
+    </cr-icon-button>
+  </div>
+</div>
+<div id="content">
+  <div id="thumbnails" hidden="[[!thumbnailView_]]">Thumbnails</div>
+  <div id="outline" hidden="[[thumbnailView_]]">Outline</div>
+</div>

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

+// Copyright 2020 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 './shared-vars.js';
+import '../pdf_viewer_shared_style.js';
+import './icons.js';
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class ViewerPdfSidenavElement extends PolymerElement {
+  static get is() {
+    return 'viewer-pdf-sidenav';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /** @private */
+      thumbnailView_: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  /** @private */
+  onThumbnailClick_() {
+    this.thumbnailView_ = true;
+  }
+
+  /** @private */
+  onOutlineClick_() {
+    this.thumbnailView_ = false;
+  }
+
+  /**
+   * @return {string}
+   * @private
+   */
+  outlineButtonClass_() {
+    return this.thumbnailView_ ? '' : 'selected';
+  }
+
+  /**
+   * @return {string}
+   * @private
+   */
+  thumbnailButtonClass_() {
+    return this.thumbnailView_ ? 'selected' : '';
+  }
+}
+
+customElements.define(ViewerPdfSidenavElement.is, ViewerPdfSidenavElement);

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

 <style include="pdf-shared">
   :host {
-    --pdf-toolbar-text-color: rgb(241, 241, 241);
     box-shadow:
         0 -2px 8px rgba(0, 0, 0, 0.09),
         0 4px 8px rgba(0, 0, 0, 0.06),

chrome/browser/resources/pdf/pdf_viewer.html

-<style include="pdf-viewer-shared-style">
+<style include="pdf-viewer-shared-style cr-hidden-style">
+  viewer-pdf-sidenav,
+  viewer-pdf-toolbar-new {
+    --pdf-toolbar-text-color: rgb(241, 241, 241);
+  }
+
   #content-focus-rectangle {
     border: 2px solid white;
     border-radius: 2px;
@@ -48,11 +53,6 @@
     overflow: hidden;
   }
 
-  #sidenav {
-    background-color: var(--viewer-pdf-toolbar-background-color);
-    min-width: 260px;
-  }
-
   :host-context([pdf-viewer-update-enabled]) #plugin {
     position: initial;
   }
@@ -134,7 +134,8 @@
 
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <div id="container">
-    <div id="sidenav" hidden="[[sidenavCollapsed_]]"></div>
+    <viewer-pdf-sidenav id="sidenav" hidden="[[sidenavCollapsed_]]">
+    </viewer-pdf-sidenav>
     <div id="main" on-scroll="onScroll_">
       <div id="sizer"></div>
       <div id="content"></div>
@@ -167,4 +168,4 @@
   <div id="content"></div>
 </template>
 
-<div id="content-focus-rectangle" hidden$="[[!documentHasFocus_]]"></div>
\ No newline at end of file
+<div id="content-focus-rectangle" hidden$="[[!documentHasFocus_]]"></div>

chrome/browser/resources/pdf/pdf_viewer.js

@@ -4,6 +4,7 @@
 
 import './elements/viewer-error-screen.js';
 import './elements/viewer-password-screen.js';
+import './elements/viewer-pdf-sidenav.js';
 import './elements/viewer-pdf-toolbar.js';
 import './elements/viewer-zoom-toolbar.js';
 import './elements/shared-vars.js';
@@ -12,6 +13,7 @@ import './elements/viewer-ink-host.js';
 import './elements/viewer-form-warning.js';
 // </if>
 import './pdf_viewer_shared_style.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 
 import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';

chrome/test/data/pdf/BUILD.gn

@@ -35,6 +35,7 @@ js_type_check("closure_compile") {
 
     #":toolbar_manager_test",
     #":touch_handling_test",
+    ":viewer_pdf_sidenav_test",
     ":viewer_pdf_toolbar_new_test",
 
     #":viewport_test",
@@ -159,6 +160,11 @@ js_library("title_test") {
   externs_list = [ "$externs_path/test.js" ]
 }
 
+js_library("viewer_pdf_sidenav_test") {
+  deps = [ "//chrome/browser/resources/pdf/elements:viewer-pdf-sidenav" ]
+  externs_list = [ "$externs_path/test.js" ]
+}
+
 js_library("viewer_pdf_toolbar_new_test") {
   deps = [
     "//chrome/browser/resources/pdf:constants",

chrome/test/data/pdf/viewer_pdf_sidenav_test.js

+// Copyright 2020 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 {ViewerPdfSidenavElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-pdf-sidenav.js';
+
+/** @return {!ViewerPdfSidenavElement} */
+function createSidenav() {
+  document.body.innerHTML = '';
+  const sidenav = /** @type {!ViewerPdfSidenavElement} */ (
+      document.createElement('viewer-pdf-sidenav'));
+  document.body.appendChild(sidenav);
+  return sidenav;
+}
+
+// Unit tests for the viewer-pdf-sidenav element.
+const tests = [
+  /**
+   * Test that the sidenav toggles between outline and thumbnail view.
+   */
+  function testViewToggle() {
+    const sidenav = createSidenav();
+    const content = sidenav.shadowRoot.querySelector('#content');
+    const buttons = /** @type {!NodeList<!CrIconButtonElement>} */ (
+        sidenav.shadowRoot.querySelectorAll('cr-icon-button'));
+
+    let visibleContent = content.querySelector('div:not([hidden])');
+    chrome.test.assertTrue(
+        buttons[0].parentNode.classList.contains('selected'));
+    chrome.test.assertFalse(
+        buttons[1].parentNode.classList.contains('selected'));
+    chrome.test.assertEq('Thumbnails', visibleContent.textContent);
+
+    // Click on outline view.
+    buttons[1].click();
+    visibleContent = content.querySelector('div:not([hidden])');
+    chrome.test.assertFalse(
+        buttons[0].parentNode.classList.contains('selected'));
+    chrome.test.assertTrue(
+        buttons[1].parentNode.classList.contains('selected'));
+    chrome.test.assertEq('Outline', visibleContent.textContent);
+
+    // Return to thumbnail view.
+    buttons[0].click();
+    visibleContent = content.querySelector('div:not([hidden])');
+    chrome.test.assertTrue(
+        buttons[0].parentNode.classList.contains('selected'));
+    chrome.test.assertFalse(
+        buttons[1].parentNode.classList.contains('selected'));
+    chrome.test.assertEq('Thumbnails', visibleContent.textContent);
+    chrome.test.succeed();
+  },
+];
+
+chrome.test.runTests(tests);