From cb0a54c38338f9d62605857662e4940eae89480f Mon Sep 17 00:00:00 2001
From: alexandrec <alexandrec@chromium.org>
Date: Mon, 9 Feb 2015 18:58:52 -0800
Subject: [PATCH] Refactor Material Design PDF Viewer toolbar into a single
 element

Before, the layout of the Material Design PDF Viewer toolbar was exposed.
Now it has been compacted into one element so that it can be more easily maintained and updated.

BUG=110020

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

Cr-Commit-Position: refs/heads/master@{#315484}
---
 .../resources/component_extension_resources.grd    |  3 ++
 .../elements/viewer-bookmark/viewer-bookmark.js    |  2 +-
 .../viewer-page-selector/viewer-page-selector.html |  2 +-
 .../viewer-page-selector/viewer-page-selector.js   | 24 +++++++--
 .../viewer-pdf-toolbar/viewer-pdf-toolbar.css      | 32 ++++++++++++
 .../viewer-pdf-toolbar/viewer-pdf-toolbar.html     | 31 ++++++++++++
 .../viewer-pdf-toolbar/viewer-pdf-toolbar.js       | 54 ++++++++++++++++++++
 chrome/browser/resources/pdf/index-material.css    | 31 +-----------
 chrome/browser/resources/pdf/index-material.html   | 20 +-------
 chrome/browser/resources/pdf/pdf.js                | 58 ++++++++++++----------
 10 files changed, 177 insertions(+), 80 deletions(-)
 create mode 100644 chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
 create mode 100644 chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
 create mode 100644 chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js

diff --git a/chrome/browser/resources/component_extension_resources.grd b/chrome/browser/resources/component_extension_resources.grd
index bb033b8eb563..8ddaea37b6e1 100644
--- a/chrome/browser/resources/component_extension_resources.grd
+++ b/chrome/browser/resources/component_extension_resources.grd
@@ -194,6 +194,9 @@
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_CSS" file="pdf/elements/viewer-password-screen/viewer-password-screen.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_HTML" file="pdf/elements/viewer-password-screen/viewer-password-screen.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_JS" file="pdf/elements/viewer-password-screen/viewer-password-screen.js" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_CSS" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_HTML" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_JS" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PROGRESS_BAR_CSS" file="pdf/elements/viewer-progress-bar/viewer-progress-bar.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PROGRESS_BAR_HTML" file="pdf/elements/viewer-progress-bar/viewer-progress-bar.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PROGRESS_BAR_JS" file="pdf/elements/viewer-progress-bar/viewer-progress-bar.js" type="BINDATA" />
diff --git a/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js b/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
index a2ca92b4cec4..43f9de649e52 100644
--- a/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
+++ b/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
@@ -15,7 +15,7 @@ Polymer('viewer-bookmark', {
 
   onClick: function() {
     if (this.bookmark.hasOwnProperty('page'))
-      this.fire('changePage', {page: this.bookmark.page});
+      this.fire('change-page', {page: this.bookmark.page});
   },
 
 });
diff --git a/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html b/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
index 77fe5a72998a..1901375faadf 100644
--- a/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
+++ b/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input-decorator.html">
 
-<polymer-element name="viewer-page-selector">
+<polymer-element name="viewer-page-selector" attributes="index docLength">
 <template>
   <link rel="stylesheet" href="viewer-page-selector.css">
   <paper-input-decorator id="pageselector">
diff --git a/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js b/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
index f2a5fb359599..97713d53eb84 100644
--- a/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
+++ b/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
@@ -5,18 +5,34 @@
 var DIGIT_LENGTH = 0.6;
 
 Polymer('viewer-page-selector', {
-  // The current entry in the input field (1-based).
+  /**
+   * @type {string}
+   * The current entry in the input field (1-based).
+   */
   pageNo: '1',
-  // The index of the current page being viewed (0-based).
+
+  /**
+   * @type {number}
+   * The index of the current page being viewed (0-based).
+   */
   index: 0,
+
+  /**
+   * @type {number}
+   * The number of pages the document contains.
+   */
   docLength: 1,
-  // The submitted input from the user (1-based).
+
+  /**
+   * @type {string}
+   * The submitted input from the user (1-based).
+   */
   chosenPageNo: '1',
 
   chosenPageNoChanged: function() {
     var page = parseInt(this.chosenPageNo);
     if (!isNaN(page)) {
-      this.fire('changePage', {page: page - 1});
+      this.fire('change-page', {page: page - 1});
     } else {
       // Repopulate the input.
       this.indexChanged();
diff --git a/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
new file mode 100644
index 000000000000..73d9f3215aaa
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
@@ -0,0 +1,32 @@
+/* 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. */
+
+paper-progress {
+  height: 56px;
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+}
+
+paper-progress::shadow #activeProgress {
+  background-color: rgb(33, 150, 243);
+}
+
+paper-progress::shadow #progressContainer {
+  background-color: rgb(100, 181, 246);
+}
+
+core-toolbar {
+  background-color: transparent;
+  color: rgb(241, 241, 241);
+  font-size: 1.5em;
+  height: 56px;
+  padding-left: 1em;
+  padding-right: 1em;
+  z-index: 3;
+}
+
+core-toolbar /deep/ ::selection {
+  background: rgb(187, 222, 251);
+}
diff --git a/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
new file mode 100644
index 000000000000..0e46d98317ab
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
@@ -0,0 +1,31 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="../viewer-page-selector/viewer-page-selector.html">
+<link rel="import" href="chrome://resources/polymer/core-icons/image-icons.html">
+<link rel="import" href="chrome://resources/polymer/core-toolbar/core-toolbar.html">
+<link rel="import" href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/paper-progress/paper-progress.html">
+<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
+
+<polymer-element name="viewer-pdf-toolbar">
+<template>
+  <link rel="stylesheet" href="viewer-pdf-toolbar.css">
+  <paper-shadow z="1">
+    <paper-progress value="{{loadProgress}}"></paper-progress>
+    <core-toolbar class="core-narrow">
+      <span flex>{{docTitle}}</span>
+
+      <viewer-page-selector id="pageselector" index="{{pageIndex}}"
+          docLength="{{docLength}}" flex></viewer-page-selector>
+
+      <paper-icon-button icon="image:rotate-right"
+          on-click="{{rotateRight}}"></paper-icon-button>
+      <paper-icon-button icon="bookmark-outline"
+          on-click="{{toggleBookmarks}}"></paper-icon-button>
+      <paper-icon-button icon="file-download"
+          on-click="{{save}}"></paper-icon-button>
+      <paper-icon-button icon="print" on-click="{{print}}"></paper-icon-button>
+    </core-toolbar>
+  </paper-shadow>
+</template>
+<script src="viewer-pdf-toolbar.js"></script>
+</polymer-element>
diff --git a/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
new file mode 100644
index 000000000000..cec3ce1f4cd0
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
@@ -0,0 +1,54 @@
+// 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-pdf-toolbar', {
+  /**
+   * @type {string}
+   * The title of the PDF document.
+   */
+  docTitle: '',
+
+  /**
+   * @type {number}
+   * The current index of the page being viewed (0-based).
+   */
+  pageIndex: 0,
+
+  /**
+   * @type {number}
+   * The current loading progress of the PDF document (0 - 100).
+   */
+  loadProgress: 0,
+
+  /**
+   * @type {number}
+   * The number of pages in the PDF document.
+   */
+  docLength: 1,
+
+  loadProgressChanged: function() {
+    if (this.loadProgress >= 100)
+      this.$.pageselector.style.visibility = 'visible';
+  },
+
+  selectPageNumber: function() {
+    this.$.pageselector.select();
+  },
+
+  rotateRight: function() {
+    this.fire('rotate-right');
+  },
+
+  toggleBookmarks: function() {
+    this.fire('toggle-bookmarks');
+  },
+
+  save: function() {
+    this.fire('save');
+  },
+
+  print: function() {
+    this.fire('print');
+  }
+});
diff --git a/chrome/browser/resources/pdf/index-material.css b/chrome/browser/resources/pdf/index-material.css
index d42bdef793b7..f5c48cbfe98d 100644
--- a/chrome/browser/resources/pdf/index-material.css
+++ b/chrome/browser/resources/pdf/index-material.css
@@ -16,41 +16,12 @@ body {
   margin: 0;
 }
 
-core-toolbar {
-  background-color: transparent;
-  color: rgb(241, 241, 241);
-  font-size: 1.5em;
-  height: 56px;
-  padding-left: 1em;
-  padding-right: 1em;
-  z-index: 3;
-}
-
-core-toolbar /deep/ ::selection {
-  background: rgb(187, 222, 251);
-}
-
-#toolbar-shadow {
+viewer-pdf-toolbar {
   position: fixed;
   width: 100%;
   z-index: 4;
 }
 
-#progress-bar {
-  height: 56px;
-  position: absolute;
-  width: 100%;
-  z-index: 3;
-}
-
-paper-progress::shadow #activeProgress {
-  background-color: rgb(33, 150, 243);
-}
-
-paper-progress::shadow #progressContainer {
-  background-color: rgb(100, 181, 246);
-}
-
 #plugin {
   height: 100%;
   position: fixed;
diff --git a/chrome/browser/resources/pdf/index-material.html b/chrome/browser/resources/pdf/index-material.html
index 2f34e4b2ea4a..55af6c659bf0 100644
--- a/chrome/browser/resources/pdf/index-material.html
+++ b/chrome/browser/resources/pdf/index-material.html
@@ -7,31 +7,15 @@
   <link rel="import" href="elements/viewer-error-screen/viewer-error-screen.html">
   <link rel="import" href="elements/viewer-page-selector/viewer-page-selector.html">
   <link rel="import" href="elements/viewer-password-screen/viewer-password-screen.html">
+  <link rel="import" href="elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html">
   <link rel="import" href="elements/viewer-toolbar/viewer-toolbar.html">
 
-  <link rel="import" href="chrome://resources/polymer/core-icons/image-icons.html">
-  <link rel="import" href="chrome://resources/polymer/core-toolbar/core-toolbar.html">
-  <link rel="import" href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html">
-  <link rel="import" href="chrome://resources/polymer/paper-progress/paper-progress.html">
-  <link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
-
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <link rel="stylesheet" type="text/css" href="index-material.css">
 </head>
 <body>
-<paper-shadow id="toolbar-shadow" z="1">
-  <paper-progress value="0" id="progress-bar"></paper-progress>
-  <core-toolbar id="pdf-toolbar" class="core-narrow">
-    <span id="title" flex></span>
-
-    <viewer-page-selector id="page-indicator" flex></viewer-page-selector>
 
-    <paper-icon-button icon="image:rotate-right" id="rotate-right-button"></paper-icon-button>
-    <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-pdf-toolbar id="material-toolbar"></viewer-pdf-toolbar>
 
 <viewer-bookmarks-pane id="bookmarks-pane" heading="Bookmarks"></viewer-bookmarks-pane>
 
diff --git a/chrome/browser/resources/pdf/pdf.js b/chrome/browser/resources/pdf/pdf.js
index c6df1a1a1ed6..eaf96ac6559e 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -86,7 +86,8 @@ function PDFViewer(streamDetails) {
   this.passwordScreen_.addEventListener('password-submitted',
                                         this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
-  this.bookmarksPane = $('bookmarks-pane');
+  this.materialToolbar_ = $('material-toolbar');
+  this.bookmarksPane_ = $('bookmarks-pane');
 
   // Create the viewport.
   this.viewport_ = new Viewport(window,
@@ -118,7 +119,7 @@ function PDFViewer(streamDetails) {
 
   document.title = getFilenameFromURL(this.streamDetails_.originalUrl);
   if (this.isMaterial_)
-    $('title').textContent = document.title;
+    this.materialToolbar_.docTitle = document.title;
   this.plugin_.setAttribute('src', this.streamDetails_.originalUrl);
   this.plugin_.setAttribute('stream-url', this.streamDetails_.streamUrl);
   var headers = '';
@@ -132,15 +133,6 @@ function PDFViewer(streamDetails) {
     this.plugin_.setAttribute('full-frame', '');
   document.body.appendChild(this.plugin_);
 
-  this.pageIndicator_.addEventListener('changePage', function(e) {
-    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',
@@ -151,14 +143,21 @@ function PDFViewer(streamDetails) {
       this.viewport_.zoomIn.bind(this.viewport_));
   $('zoom-out-button').addEventListener('click',
       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();
+    this.materialToolbar_.addEventListener('save', this.save_.bind(this));
+    this.materialToolbar_.addEventListener('print', this.print_.bind(this));
+    this.materialToolbar_.addEventListener('toggle-bookmarks', function() {
+      this.bookmarksPane_.toggle();
     }.bind(this));
-    $('rotate-right-button').addEventListener('click',
+    this.materialToolbar_.addEventListener('rotate-right',
         this.rotateClockwise_.bind(this));
+    document.body.addEventListener('change-page', function(e) {
+      this.viewport_.goToPage(e.detail.page);
+    }.bind(this));
+  } else {
+    $('save-button').addEventListener('click', this.save_.bind(this));
+    $('print-button').addEventListener('click', this.print_.bind(this));
   }
 
   // Setup the keyboard event listener.
@@ -290,7 +289,7 @@ PDFViewer.prototype = {
         return;
       case 71: // g key.
         if (this.isMaterial_ && (e.ctrlKey || e.metaKey)) {
-          this.pageIndicator_.select();
+          this.materialToolbar_.selectPageNumber();
           // To prevent the default "find text" behaviour in Chrome.
           e.preventDefault();
         }
@@ -392,7 +391,7 @@ PDFViewer.prototype = {
    */
   updateProgress_: function(progress) {
     if (this.isMaterial_)
-      this.progressBar_.value = progress;
+      this.materialToolbar_.loadProgress = progress;
     else
       this.progressBar_.progress = progress;
 
@@ -409,7 +408,7 @@ PDFViewer.prototype = {
       // Document load complete.
       if (this.lastViewportPosition_)
         this.viewport_.position = this.lastViewportPosition_;
-      if (this.isMaterial_)
+      if (!this.isMaterial_)
         this.pageIndicator_.style.visibility = 'visible';
       this.handleURLParams_();
       this.loaded_ = true;
@@ -450,7 +449,7 @@ PDFViewer.prototype = {
           this.passwordScreen_.accept();
 
         if (this.isMaterial_) {
-          this.pageIndicator_.docLength =
+          this.materialToolbar_.docLength =
               this.documentDimensions_.pageDimensions.length;
         } else {
           this.pageIndicator_.initialFadeIn();
@@ -504,9 +503,11 @@ PDFViewer.prototype = {
         break;
       case 'setTranslatedStrings':
         this.passwordScreen_.text = message.data.getPasswordString;
-        this.progressBar_.text = message.data.loadingString;
-        if (!this.isPrintPreview_)
-          this.progressBar_.style.visibility = 'visible';
+        if (!this.isMaterial_) {
+          this.progressBar_.text = message.data.loadingString;
+          if (!this.isPrintPreview_)
+            this.progressBar_.style.visibility = 'visible';
+        }
         this.errorScreen_.text = message.data.loadFailedString;
         break;
       case 'cancelStreamUrl':
@@ -515,7 +516,7 @@ PDFViewer.prototype = {
       case 'bookmarks':
         this.bookmarks_ = message.data.bookmarks;
         if (this.isMaterial_)
-          this.bookmarksPane.bookmarks = message.data.bookmarks;
+          this.bookmarksPane_.bookmarks = message.data.bookmarks;
         break;
     }
   },
@@ -608,7 +609,11 @@ PDFViewer.prototype = {
 
     // Update the page indicator.
     var visiblePage = this.viewport_.getMostVisiblePage();
-    this.pageIndicator_.index = visiblePage;
+    if (this.isMaterial_)
+      this.materialToolbar_.pageIndex = visiblePage;
+    else
+      this.pageIndicator_.index = visiblePage;
+
     if (!this.isMaterial_) {
       if (this.documentDimensions_.pageDimensions.length > 1 &&
           hasScrollbars.vertical) {
@@ -700,7 +705,8 @@ PDFViewer.prototype = {
         if (saveButton)
           saveButton.parentNode.removeChild(saveButton);
 
-        this.pageIndicator_.pageLabels = message.data.pageNumbers;
+        if (!this.isMaterial_)
+          this.pageIndicator_.pageLabels = message.data.pageNumbers;
 
         this.plugin_.postMessage({
           type: 'resetPrintPreviewMode',
-- 
2.11.4.GIT