Implement a slide-in pane for bookmarks.

BUG=110020

Review URL: https://codereview.chromium.org/865033002

Cr-Commit-Position: refs/heads/master@{#314105}

chrome/browser/resources/component_extension_resources.grd

@@ -175,6 +175,11 @@
         <include name="IDR_PDF_PDF_PANE_HTML" file="pdf/elements/pdf-pane/pdf-pane.html" type="BINDATA" />
         <include name="IDR_PDF_PDF_PANE_JS" file="pdf/elements/pdf-pane/pdf-pane.js" type="BINDATA" />
 
+        <include name="IDR_PDF_VIEWER_BOOKMARK_CSS" file="pdf/elements/viewer-bookmark/viewer-bookmark.css" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_BOOKMARK_HTML" file="pdf/elements/viewer-bookmark/viewer-bookmark.html" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_BOOKMARK_JS" file="pdf/elements/viewer-bookmark/viewer-bookmark.js" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_BOOKMARKS_PANE_HTML" file="pdf/elements/viewer-bookmarks-pane/viewer-bookmarks-pane.html" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_BOOKMARKS_PANE_JS" file="pdf/elements/viewer-bookmarks-pane/viewer-bookmarks-pane.js" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BUTTON_CSS" file="pdf/elements/viewer-button/viewer-button.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BUTTON_HTML" file="pdf/elements/viewer-button/viewer-button.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BUTTON_JS" file="pdf/elements/viewer-button/viewer-button.js" type="BINDATA" />

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

+/* Copyright 2015 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. */
+
+.sub-bookmark {
+  margin-left: 1em;
+}

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

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
+
+<polymer-element name="viewer-bookmark" attributes="bookmark">
+<template>
+  <link rel="stylesheet" href="viewer-bookmark.css">
+  <paper-item on-click="{{onClick}}">{{bookmark.title}}</paper-item>
+  <template if="{{bookmark.children.length !== 0}}">
+    <div class="sub-bookmark">
+      <template repeat="{{child in bookmark.children}}">
+        <viewer-bookmark bookmark="{{child}}"></viewer-bookmark>
+      </template>
+    </div>
+  </template>
+</template>
+<script src="viewer-bookmark.js"></script>
+</polymer-element>

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

+// Copyright 2015 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.
+
+Polymer('viewer-bookmark', {
+
+  /**
+   * @type {Object}
+   * A bookmark object, each containing a:
+   * - title
+   * - page (optional)
+   * - children (an array of bookmarks)
+   */
+  bookmark: null,
+
+  onClick: function() {
+    if (this.bookmark.hasOwnProperty('page'))
+      this.fire('changePage', {page: this.bookmark.page});
+  },
+
+});

chrome/browser/resources/pdf/elements/viewer-bookmarks-pane/viewer-bookmarks-pane.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="../viewer-bookmark/viewer-bookmark.html">
+<link rel="import" href="../pdf-pane/pdf-pane.html">
+
+<polymer-element name="viewer-bookmarks-pane">
+<template>
+  <pdf-pane id="pane" heading="Bookmarks">
+    <template repeat="{{bookmarkNode in bookmarks}}">
+      <viewer-bookmark bookmark="{{bookmarkNode}}"></viewer-bookmark>
+    </template>
+  </pdf-pane>
+</template>
+<script src="viewer-bookmarks-pane.js"></script>
+</polymer-element>

chrome/browser/resources/pdf/elements/viewer-bookmarks-pane/viewer-bookmarks-pane.js

+// Copyright 2015 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.
+
+Polymer('viewer-bookmarks-pane', {
+
+  /**
+   * @type {Array}
+   * An array of top-level bookmarks, each containing a:
+   * - title
+   * - page (optional)
+   * - children (an array of bookmarks)
+   */
+  bookmarks: null,
+
+  toggle: function() {
+    this.$.pane.toggle();
+  }
+});

chrome/browser/resources/pdf/index-material.css

@@ -56,6 +56,10 @@ paper-progress::shadow #progressContainer {
   z-index: 0;
 }
 
+bookmarks-pane {
+  z-index: 2;
+}
+
 viewer-toolbar {
   visibility: hidden;
   white-space: nowrap;

chrome/browser/resources/pdf/index-material.html

@@ -2,6 +2,7 @@
 <html i18n-values="dir:textdirection;lang:language">
 <head>
   <meta charset="utf-8">
+  <link rel="import" href="elements/viewer-bookmarks-pane/viewer-bookmarks-pane.html">
   <link rel="import" href="elements/viewer-button/viewer-button.html">
   <link rel="import" href="elements/viewer-error-screen/viewer-error-screen.html">
   <link rel="import" href="elements/viewer-page-selector/viewer-page-selector.html">
@@ -24,11 +25,14 @@
 
     <viewer-page-selector id="page-indicator" flex></viewer-page-selector>
 
+    <paper-icon-button icon="bookmark-outline" id="bookmarks-button"></paper-icon-button>
     <paper-icon-button icon="file-download" id="save-button"></paper-icon-button>
     <paper-icon-button icon="print" id="print-button"></paper-icon-button>
   </core-toolbar>
 </paper-shadow>
 
+<viewer-bookmarks-pane id="bookmarks-pane" heading="Bookmarks"></viewer-bookmarks-pane>
+
 <div id="sizer"></div>
 <viewer-password-screen id="password-screen"></viewer-password-screen>
 

chrome/browser/resources/pdf/pdf.js

@@ -66,6 +66,7 @@ function PDFViewer(streamDetails) {
                                         this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
   this.toolbarHeight_ = this.isMaterial_ ? $('pdf-toolbar').clientHeight : 0;
+  this.bookmarksPane = $('bookmarks-pane');
 
   // Create the viewport.
   this.viewport_ = new Viewport(window,
@@ -116,6 +117,12 @@ function PDFViewer(streamDetails) {
     this.viewport_.goToPage(e.detail.page);
   }.bind(this));
 
+  if (this.isMaterial_) {
+    this.bookmarksPane.addEventListener('changePage', function(e) {
+      this.viewport_.goToPage(e.detail.page);
+    }.bind(this));
+  }
+
   // Setup the button event listeners.
   $('fit-to-width-button').addEventListener('click',
       this.viewport_.fitToWidth.bind(this.viewport_));
@@ -127,6 +134,11 @@ function PDFViewer(streamDetails) {
       this.viewport_.zoomOut.bind(this.viewport_));
   $('save-button').addEventListener('click', this.save_.bind(this));
   $('print-button').addEventListener('click', this.print_.bind(this));
+  if (this.isMaterial_) {
+    $('bookmarks-button').addEventListener('click', function() {
+      this.bookmarksPane.toggle();
+    }.bind(this));
+  }
 
   // Setup the keyboard event listener.
   document.onkeydown = this.handleKeyEvent_.bind(this);
@@ -449,6 +461,8 @@ PDFViewer.prototype = {
         break;
       case 'bookmarks':
         this.bookmarks_ = message.data.bookmarks;
+        if (this.isMaterial_)
+          this.bookmarksPane.bookmarks = message.data.bookmarks;
         break;
     }
   },