PDF Viewer: Add document outline

Add document outline view by porting the bookmarks list to the sidenav
from the viewer toolbar.

Bug: 1116574
Change-Id: I571dc8e6f6f7288debff5a9abcdc4e2f93877366
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2357673
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798859}

chrome/browser/resources/component_extension_resources.grd

@@ -124,6 +124,7 @@
         <include name="IDR_PDF_SHARED_VARS_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/shared-vars.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_ICONS_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/icons.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BOOKMARK_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-bookmark.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_DOCUMENT_OUTLINE_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-document-outline.js" use_base_dir="false" type="BINDATA"/>
         <include name="IDR_PDF_VIEWER_DOWNLOADS_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-download-controls.js" use_base_dir="false" type="BINDATA"/>
         <include name="IDR_PDF_VIEWER_ERROR_SCREEN_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-error-screen.js" use_base_dir="false" type="BINDATA" />
         <if expr="chromeos">

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

@@ -9,6 +9,7 @@ js_type_check("closure_compile") {
   is_polymer3 = true
   deps = [
     ":viewer-bookmark",
+    ":viewer-document-outline",
     ":viewer-download-controls",
     ":viewer-error-screen",
     ":viewer-page-indicator",
@@ -40,6 +41,14 @@ js_library("viewer-bookmark") {
   ]
 }
 
+js_library("viewer-document-outline") {
+  deps = [
+    ":viewer-bookmark",
+    "..:bookmark_type",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("viewer-download-controls") {
   deps = [
     "..:constants",
@@ -99,6 +108,8 @@ js_library("viewer-password-screen") {
 
 js_library("viewer-pdf-sidenav") {
   deps = [
+    ":viewer-document-outline",
+    ":viewer-thumbnail-bar",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
   ]
@@ -166,6 +177,7 @@ html_to_js("web_components") {
     "shared-vars.js",
     "shared-css.js",
     "viewer-bookmark.js",
+    "viewer-document-outline.js",
     "viewer-download-controls.js",
     "viewer-error-screen.js",
     "viewer-page-indicator.js",

chrome/browser/resources/pdf/elements/shared-css.html

@@ -14,7 +14,8 @@
        ui/webui/resources/cr_elements/shared_vars_css.html. Unfortunately there
        seems to be no great way to share styles with the
        "prefers-color-scheme: dark" @media query selector. */
-    :host-context([pdf-viewer-update-enabled]) cr-action-menu {
+    :host-context([pdf-viewer-update-enabled]) cr-action-menu,
+    :host-context([pdf-viewer-update-enabled]) viewer-bookmark {
         --cr-menu-background-color: var(--google-grey-900);
         --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                           rgba(0, 0, 0, .15) 0 3px 6px 2px;

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

@@ -7,6 +7,10 @@
         position: relative;
       }
 
+      :host-context([pdf-viewer-update-enabled]) #item {
+        height: initial;
+      }
+
       #item:hover {
         background-color: var(--cr-menu-background-focus-color);
       }
@@ -27,6 +31,10 @@
         white-space: nowrap;
       }
 
+      :host-context([pdf-viewer-update-enabled]) #title {
+        white-space: initial;
+      }
+
       #expand {
         --cr-icon-button-fill-color: var(--primary-text-color);
         --cr-icon-button-icon-size: 16px;

chrome/browser/resources/pdf/elements/viewer-document-outline.html

+<style include="pdf-shared">
+  :host {
+    display: block;
+    padding-inline-end: 20px;
+    padding-top: 20px;
+  }
+</style>
+<template is="dom-repeat" items="[[bookmarks]]">
+  <viewer-bookmark bookmark="[[item]]" depth="0"></viewer-bookmark>
+</template>

chrome/browser/resources/pdf/elements/viewer-document-outline.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-css.js';
+import './viewer-bookmark.js';
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {Bookmark} from '../bookmark_type.js';
+
+export class ViewerDocumentOutlineElement extends PolymerElement {
+  static get is() {
+    return 'viewer-document-outline';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /** @type {!Array<!Bookmark>} */
+      bookmarks: Array,
+    };
+  }
+}
+
+customElements.define(
+    ViewerDocumentOutlineElement.is, ViewerDocumentOutlineElement);

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

-<style include="pdf-shared">
+<style include="pdf-shared cr-hidden-style">
   :host {
     background-color: var(--viewer-pdf-toolbar-background-color);
     display: flex;
     min-width: 300px;
+    overflow: hidden;
+    width: 300px;
   }
 
   #icons {
@@ -14,10 +16,8 @@
   /* These are dummy styles currently - replace with real content. */
   #content {
     color: white;
-    font-weight: 500;
-    line-height: 36px;
-    text-align: center;
-    width: 100%;
+    flex: 1;
+    overflow-x: hidden;
   }
 
   .selected cr-icon-button {
@@ -45,7 +45,8 @@
         title="$i18n{tooltipThumbnails}" on-click="onThumbnailClick_">
     </cr-icon-button>
   </div>
-  <div class$="button-wrapper [[outlineButtonClass_(thumbnailView_)]]">
+  <div class$="button-wrapper [[outlineButtonClass_(thumbnailView_)]]"
+      hidden$="[[!bookmarks.length]]">
     <cr-icon-button iron-icon="pdf:doc-outline" role="tab"
         title="$i18n{tooltipDocumentOutline}" on-click="onOutlineClick_">
     </cr-icon-button>
@@ -55,5 +56,7 @@
   <viewer-thumbnail-bar id="thumbnail-bar" hidden="[[!thumbnailView_]]"
       doc-length="[[docLength]]">
   </viewer-thumbnail-bar>
-  <div id="outline" hidden="[[thumbnailView_]]">Outline</div>
+  <viewer-document-outline id="outline" hidden="[[thumbnailView_]]"
+      bookmarks="[[bookmarks]]">
+  </viewer-document-outline>
 </div>

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

@@ -5,11 +5,15 @@
 import './shared-vars.js';
 import '../pdf_viewer_shared_style.js';
 import './icons.js';
+import './viewer-document-outline.js';
 import './viewer-thumbnail-bar.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {Bookmark} from '../bookmark_type.js';
+
 export class ViewerPdfSidenavElement extends PolymerElement {
   static get is() {
     return 'viewer-pdf-sidenav';
@@ -21,6 +25,12 @@ export class ViewerPdfSidenavElement extends PolymerElement {
 
   static get properties() {
     return {
+      /** @type {!Array<!Bookmark>} */
+      bookmarks: {
+        type: Array,
+        value: () => [],
+      },
+
       docLength: Number,
 
       /** @private */

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

@@ -4,6 +4,7 @@
     height: 100%;
     overflow: auto;
     padding-bottom: 24px;
+    text-align: center;
   }
 </style>
 <div id="thumbnails">

chrome/browser/resources/pdf/pdf_viewer.html

@@ -126,10 +126,10 @@
     on-change-page="onChangePage_"
     on-display-annotations-changed="onDisplayAnnotationsChanged_"
     on-dropdown-opened="onDropdownOpened_"
-    on-fit-to-changed="onFitToChanged" on-zoom-in="onZoomIn"
+    on-fit-to-changed="onFitToChanged"
     on-sidenav-toggle-click="onSidenavToggleClick_"
     on-two-up-view-changed="onTwoUpViewChanged_"
-    on-zoom-changed="onZoomChanged"
+    on-zoom-changed="onZoomChanged" on-zoom-in="onZoomIn"
     on-zoom-out="onZoomOut" on-rotate-left="rotateCounterclockwise"
 <if expr="chromeos">
     on-annotation-mode-toggled="onAnnotationModeToggled_"
@@ -141,7 +141,10 @@
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <div id="container">
     <viewer-pdf-sidenav id="sidenav" hidden="[[sidenavCollapsed_]]"
-        doc-length="[[docLength_]]">
+        bookmarks="[[bookmarks_]]" doc-length="[[docLength_]]"
+        on-change-page="onChangePage_"
+        on-change-page-and-xy="onChangePageAndXy_"
+        on-navigate="onNavigate_">
     </viewer-pdf-sidenav>
     <div id="main" on-scroll="onScroll_">
       <div id="sizer"></div>

chrome/test/data/pdf/viewer_pdf_sidenav_test.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {ViewerDocumentOutlineElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-document-outline.js';
 import {ViewerPdfSidenavElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-pdf-sidenav.js';
 import {ViewerThumbnailBarElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail-bar.js';
 
@@ -28,11 +29,23 @@ const tests = [
     const thumbnailBar =
         /** @type {!ViewerThumbnailBarElement} */ (
             content.querySelector('viewer-thumbnail-bar'));
-    const outline = /** @type {!HTMLElement} */ (content.querySelector('div'));
+    const outline = /** @type {!ViewerDocumentOutlineElement} */ (
+        content.querySelector('viewer-document-outline'));
+
 
     // Sidebar starts on thumbnail view.
     chrome.test.assertTrue(
         buttons[0].parentNode.classList.contains('selected'));
+
+    // Outline button is hidden since there are no bookmarks.
+    chrome.test.assertTrue(buttons[1].parentNode.hidden);
+
+    // Add some dummy bookmarks so that the button appears.
+    sidenav.bookmarks = [
+      {title: 'Foo', page: 1},
+      {title: 'Bar', page: 2},
+    ];
+    chrome.test.assertFalse(buttons[1].parentNode.hidden);
     chrome.test.assertFalse(
         buttons[1].parentNode.classList.contains('selected'));
     chrome.test.assertFalse(thumbnailBar.hidden);