BASELINE: Update Chromium to 47.0.2526.14

Also adding in sources needed for spellchecking.

Change-Id: Idd44170fa1616f26315188970a8d5ba7d472b18a
Reviewed-by: Michael Brüning <michael.bruning@theqtcompany.com>

27 files changed, 525 insertions, 317 deletions

diff --git a/chromium/chrome/browser/resources/pdf/elements/shared-icon-style.css b/chromium/chrome/browser/resources/pdf/elements/shared-icon-style.css
new file mode 100644
index 00000000000..6611e9e09c7
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/shared-icon-style.css
@@ -0,0 +1,15 @@
+/* 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. */
+
+:root {
+  --iron-icon-height: 20px;
+  --iron-icon-width: 20px;
+  --paper-icon-button: {
+    height: 20px;
+    padding: 6px;
+    width: 20px;
+  };
+  --paper-icon-button-ink-color: rgb(189, 189, 189);
+  --viewer-icon-ink-color: rgb(189, 189, 189);
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.css b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.css
index ed9c5746609..58b4cde1726 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.css
@@ -3,17 +3,41 @@
  * found in the LICENSE file. */
 
 #item {
-  -webkit-user-select: none;
+  @apply(--layout-center);
+  @apply(--layout-horizontal);
   color: rgb(80, 80, 80);
   cursor: pointer;
-  min-height: 40px;
+  font-size: 77.8%;
+  height: 30px;
   position: relative;
-  @apply(--paper-font-subhead);
-  @apply(--layout-horizontal);
-  @apply(--layout-center);
 }
 
 #item:hover {
   background-color: rgb(237, 237, 237);
   color: rgb(20, 20, 20);
 }
+
+#title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#expand {
+  --iron-icon-height: 16px;
+  --iron-icon-width: 16px;
+  --paper-icon-button-ink-color: var(--paper-grey-900);
+  height: 16px;
+  min-width: 16px;
+  padding: 6px;
+  transition: transform 150ms;
+  width: 16px;
+}
+
+:host-context([dir=rtl]) #expand {
+  transform: rotate(180deg);
+}
+
+:host([children-shown]) #expand {
+  transform: rotate(90deg);
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
index 9328289811e..008eef63037 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
@@ -6,17 +6,20 @@
   <link rel="import" type="css" href="viewer-bookmark.css">
   <template>
     <div id="item" on-click="onClick">
-      <span>{{bookmark.title}}</span>
       <paper-ripple></paper-ripple>
+      <paper-icon-button id="expand" icon="chevron-right"
+          on-click="toggleChildren">
+      </paper-icon-button>
+      <span id="title" tabindex="0">{{bookmark.title}}</span>
     </div>
-    <div class="sub-bookmark">
-      <!-- The sub-bookmarks will only be created after the parent bookmark has
-        finished initializing and childDepth is available. -->
+    <!-- dom-if will stamp the complex bookmark tree lazily as individual nodes
+      are opened. -->
+    <template is="dom-if" if="{{childrenShown}}" id="sub-bookmarks">
       <template is="dom-repeat" items="{{bookmark.children}}">
         <viewer-bookmark bookmark="{{item}}" depth="{{childDepth}}">
         </viewer-bookmark>
       </template>
-    </div>
+    </template>
   </template>
 </dom-module>
 <script src="viewer-bookmark.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
index 4f555296490..7905ea4ec34 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 (function() {
-  // Amount that each level of bookmarks is indented by (px).
-  var BOOKMARK_INDENT = 16;
+  /** Amount that each level of bookmarks is indented by (px). */
+  var BOOKMARK_INDENT = 20;
 
   Polymer({
     is: 'viewer-bookmark',
@@ -16,24 +16,75 @@
        * - page (optional)
        * - children (an array of bookmarks)
        */
-      bookmark: Object,
+      bookmark: {
+        type: Object,
+        observer: 'bookmarkChanged_'
+      },
 
       depth: {
         type: Number,
         observer: 'depthChanged'
       },
 
-      childDepth: Number
+      childDepth: Number,
+
+      childrenShown: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false
+      },
+
+      keyEventTarget: {
+        type: Object,
+        value: function() {
+          return this.$.item;
+        }
+      }
+    },
+
+    behaviors: [
+      Polymer.IronA11yKeysBehavior
+    ],
+
+    keyBindings: {
+      'enter': 'onEnter_',
+      'space': 'onSpace_'
+    },
+
+    bookmarkChanged_: function() {
+      this.$.expand.style.visibility =
+          this.bookmark.children.length > 0 ? 'visible' : 'hidden';
     },
 
     depthChanged: function() {
       this.childDepth = this.depth + 1;
-      this.$.item.style.paddingLeft = (this.depth * BOOKMARK_INDENT) + 'px';
+      this.$.item.style.webkitPaddingStart =
+          (this.depth * BOOKMARK_INDENT) + 'px';
     },
 
     onClick: function() {
       if (this.bookmark.hasOwnProperty('page'))
         this.fire('change-page', {page: this.bookmark.page});
     },
+
+    onEnter_: function(e) {
+      // Don't allow events which have propagated up from the expand button to
+      // trigger a click.
+      if (e.detail.keyboardEvent.target != this.$.expand)
+        this.onClick();
+    },
+
+    onSpace_: function(e) {
+      // paper-icon-button stops propagation of space events, so there's no need
+      // to check the event source here.
+      this.onClick();
+      // Prevent default space scroll behavior.
+      e.detail.keyboardEvent.preventDefault();
+    },
+
+    toggleChildren: function(e) {
+      this.childrenShown = !this.childrenShown;
+      e.stopPropagation();  // Prevent the above onClick handler from firing.
+    }
   });
 })();
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.html b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.html
index 336ca3a1e32..3f9b6847984 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmarks-content/viewer-bookmarks-content.html
@@ -4,7 +4,7 @@
 <dom-module id="viewer-bookmarks-content">
   <template>
     <template is="dom-repeat" items="{{bookmarks}}">
-      <viewer-bookmark bookmark="{{item}}" depth="1"></viewer-bookmark>
+      <viewer-bookmark bookmark="{{item}}" depth="0"></viewer-bookmark>
     </template>
   </template>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js
index abd56be2b3a..cd09aed83be 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js
@@ -6,5 +6,9 @@ Polymer({
   is: 'viewer-error-screen-legacy',
   properties: {
     text: String
+  },
+
+  show: function() {
+    this.style.visibility = 'visible';
   }
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.css b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.css
index 07ee91dd908..e1e91bd9b39 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.css
@@ -2,21 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-:host {
-  background-color: #ccc;
-  color: #555;
-  font-family: sans-serif;
-  font-size: 20px;
-  height: 100%;
-  pointer-events: none;
-  position: fixed;
-  text-align: center;
-  width: 100%;
+.last-item {
+  margin-bottom: 24px;
 }
-
-#load-failed-message {
-  line-height: 0;
-  position: absolute;
-  top: 50%;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
index 24344a23b5c..2795dfbdccd 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html
@@ -1,9 +1,21 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 
 <dom-module id="viewer-error-screen">
   <link rel="import" type="css" href="viewer-error-screen.css">
   <template>
-    <div id="load-failed-message">{{text}}</div>
+    <paper-dialog id="dialog" modal no-cancel-on-esc-key
+        entry-animation="fade-in-animation">
+      <div id="load-failed-message"
+          class="last-item">{{strings.pageLoadFailed}}</div>
+      <div class="buttons" hidden$="{{!reloadFn}}">
+        <paper-button on-click="reload" autofocus>
+          <span>{{strings.pageReload}}</span>
+        </paper-button>
+      </div>
+    </paper-dialog>
   </template>
 </dom-module>
 <script src="viewer-error-screen.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
index 905c8a0d7a4..88d24a6c459 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.js
@@ -5,6 +5,31 @@
 Polymer({
   is: 'viewer-error-screen',
   properties: {
-    text: String
+    strings: Object,
+
+    reloadFn: {
+      type: Object,
+      value: null,
+      observer: 'reloadFnChanged_'
+    }
+  },
+
+  reloadFnChanged_: function() {
+    // The default margins in paper-dialog don't work well with hiding/showing
+    // the .buttons div. We need to manually manage the bottom margin to get
+    // around this.
+    if (this.reloadFn)
+      this.$['load-failed-message'].classList.remove('last-item');
+    else
+      this.$['load-failed-message'].classList.add('last-item');
+  },
+
+  show: function() {
+    this.$.dialog.open();
+  },
+
+  reload: function() {
+    if (this.reloadFn)
+      this.reloadFn();
   }
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.css b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.css
index 1f858bc2b64..ab14b2587dc 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.css
@@ -2,29 +2,29 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#pageselector {
-  display: inline-block;
-  width: 0.6em;
-}
-
-paper-input-container /deep/ .focused-line {
-  visibility: hidden;
-}
-
-paper-input-container /deep/ .unfocused-line {
-  visibility: hidden;
+:host {
+  color: #fff;
+  font-size: 88.8%;
 }
 
-paper-input-container {
+#pageselector {
+  --paper-input-container-underline: {
+    visibility: hidden;
+  };
+  --paper-input-container-underline-focus: {
+    visibility: hidden;
+  };
+  display: inline-block;
   padding: 0;
+  width: 1ch;
 }
 
 input#input {
+  -webkit-margin-start: -3px;
   color: #fff;
-  font-size: 1em;
-  line-height: 20px;
+  line-height: 18px;
   padding: 3px;
-  text-align: right;
+  text-align: end;
 }
 
 input#input:focus,
@@ -33,9 +33,16 @@ input#input:hover {
   border-radius: 2px;
 }
 
+#slash {
+  padding: 0 3px;
+}
+
+#pagelength-spacer {
+  display: inline-block;
+  text-align: start;
+}
+
+#slash,
 #pagelength {
-  color: #fff;
-  font-size: 0.7em;
-  font-weight: 400;
-  padding-left: 3px;
+  font-size: 81.25%;
 }
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
index 82fc8975526..c686c3ef63b 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html
@@ -6,10 +6,14 @@
   <link rel="import" type="css" href="viewer-page-selector.css">
   <template>
     <paper-input-container id="pageselector" no-label-float>
-      <input id="input" is="iron-input" bind-value="{{pageNo}}" on-mouseup="select"
-          on-change="pageNoCommitted">
+      <input id="input" is="iron-input" value="{{pageNo}}"
+          prevent-invalid-input allowed-pattern="\d" on-mouseup="select"
+          on-change="pageNoCommitted" aria-label$="{{strings.labelPageNumber}}">
     </paper-input-container>
-    <span id="pagelength">/ <span>{{docLength}}</span></span>
+    <span id="slash"> / </span>
+    <span id="pagelength-spacer">
+      <span id="pagelength">{{docLength}}</span>
+    </span>
   </template>
 </dom-module>
 <script src="viewer-page-selector.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
index 5086219364e..014362ab962 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js
@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var DIGIT_LENGTH = 0.6;
-
 Polymer({
   is: 'viewer-page-selector',
 
@@ -18,27 +16,44 @@ Polymer({
     },
 
     /**
-     * The current page being viewed (1-based).
+     * The current page being viewed (1-based). A change to pageNo is mirrored
+     * immediately to the input field. A change to the input field is not
+     * mirrored back until pageNoCommitted() is called and change-page is fired.
      */
     pageNo: {
-      type: String,
-      value: '1'
-    }
+      type: Number,
+      value: 1
+    },
+
+    strings: Object
   },
 
   pageNoCommitted: function() {
-    var page = parseInt(this.pageNo);
-    if (!isNaN(page)) {
+    var page = parseInt(this.$.input.value);
+
+    if (!isNaN(page) && page <= this.docLength && page > 0)
       this.fire('change-page', {page: page - 1});
-    }
+    else
+      this.$.input.value = this.pageNo;
+    this.$.input.blur();
   },
 
   docLengthChanged: function() {
     var numDigits = this.docLength.toString().length;
-    this.$.pageselector.style.width = (numDigits * DIGIT_LENGTH) + 'em';
+    this.$.pageselector.style.width = numDigits + 'ch';
+    // Set both sides of the slash to the same width, so that the layout is
+    // exactly centered.
+    this.$['pagelength-spacer'].style.width = numDigits + 'ch';
   },
 
   select: function() {
     this.$.input.select();
+  },
+
+  /**
+   * @return {boolean} True if the selector input field is currently focused.
+   */
+  isActive: function() {
+    return this.shadowRoot.activeElement == this.$.input;
   }
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.css b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.css
deleted file mode 100644
index 83c3fc47961..00000000000
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* 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. */
-
-:host {
-  -webkit-transition: opacity 400ms ease-in-out;
-  background-color: #ccc;
-  color: #555;
-  display: table;
-  font-family: sans-serif;
-  font-size: 15px;
-  height: 100%;
-  pointer-events: none;
-  position: fixed;
-  text-align: center;
-  width: 100%;
-}
-
-#message {
-  padding-bottom: 10px;
-}
-
-.center {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.form {
-  border: 1px solid #777;
-  box-shadow: 1px 1px 1px;
-  display: inline-block;
-  padding: 10px;
-  width: 300px;
-}
-
-input {
-  color: #333;
-  pointer-events: all;
-}
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
index 3506405441e..18065022df7 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html
@@ -1,15 +1,30 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 
 <dom-module id="viewer-password-screen">
-  <link rel="import" type="css" href="viewer-password-screen.css">
   <template>
-    <div class="center">
-      <form class="form">
-        <div id="message">{{text}}</div>
-        <input id="password" type="password" size="20"></input>
-        <input id="submit" type="submit" on-click="submit"></input>
-      </form>
-    </div>
+    <paper-dialog id="dialog" modal no-cancel-on-esc-key
+        entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+      <div id="message">[[strings.passwordPrompt]]</div>
+      <div class="horizontal layout start">
+        <paper-input-container id="password-container" class="flex"
+            no-label-float invalid="[[invalid]]">
+          <input is="iron-input" id="password" type="password" size="20"
+              on-keypress="handleKey" autofocus>
+          </input>
+          <template is="dom-if" if="[[invalid]]">
+            <paper-input-error>[[strings.passwordInvalid]]</paper-input-error>
+          </template>
+        </paper-input-container>
+        <paper-button id="submit"
+            on-click="submit">{{strings.passwordSubmit}}</paper-button>
+      </div>
+    </paper-dialog>
   </template>
 </dom-module>
 <script src="viewer-password-screen.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
index 491c0a8e4c6..6f5cd6ebfa6 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.js
@@ -6,10 +6,9 @@ Polymer({
   is: 'viewer-password-screen',
 
   properties: {
-    text: {
-      type: String,
-      value: 'This document is password protected. Please enter a password.',
-    },
+    strings: Object,
+
+    invalid: Boolean,
 
     active: {
       type: Boolean,
@@ -18,8 +17,6 @@ Polymer({
     }
   },
 
-  timerId: undefined,
-
   ready: function() {
     this.activeChanged();
   },
@@ -31,13 +28,17 @@ Polymer({
   deny: function() {
     this.$.password.disabled = false;
     this.$.submit.disabled = false;
+    this.invalid = true;
     this.$.password.focus();
     this.$.password.select();
   },
 
-  submit: function(e) {
-    // Prevent the default form submission behavior.
-    e.preventDefault();
+  handleKey: function(e) {
+    if (e.keyCode == 13)
+      this.submit();
+  },
+
+  submit: function() {
     if (this.$.password.value.length == 0)
       return;
     this.$.password.disabled = true;
@@ -46,17 +47,11 @@ Polymer({
   },
 
   activeChanged: function() {
-    clearTimeout(this.timerId);
-    this.timerId = undefined;
     if (this.active) {
-      this.style.visibility = 'visible';
-      this.style.opacity = 1;
+      this.$.dialog.open();
       this.$.password.focus();
     } else {
-      this.style.opacity = 0;
-      this.timerId = setTimeout(function() {
-        this.style.visibility = 'hidden';
-      }.bind(this), 400);
+      this.$.dialog.close();
     }
   }
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
index 436090c063a..b96c7b278a8 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css
@@ -5,10 +5,13 @@
 /* We introduce a wrapper aligner element as setting the relevant attributes
  * (horizontal justified layout center) have no effect on the core-toolbar. */
 #aligner {
+  padding: 0 16px;
   width: 100%;
 }
 
 #title {
+  font-size: 77.8%;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -23,37 +26,32 @@
 }
 
 #buttons {
-  text-align: right;
+  -webkit-user-select: none;
+  text-align: end;
 }
 
-#buttons > paper-icon-button {
-  margin-right: 8px;
+paper-icon-button {
+  -webkit-margin-end: 12px;
 }
 
 viewer-toolbar-dropdown {
-  margin-right: 4px;
+  -webkit-margin-end: 4px;
 }
 
 paper-progress {
-  height: 56px;
-  position: absolute;
+  --paper-progress-active-color: var(--google-blue-300);
+  --paper-progress-container-color: transparent;
+  --paper-progress-height: 3px;
+  transition: opacity 150ms;
   width: 100%;
-  z-index: 3;
-}
-
-paper-progress {
-  --paper-progress-active-color: rgb(50, 54, 57);
-  --paper-progress-container-color: rgb(34, 36, 38);
 }
 
 paper-toolbar {
-  background-color: transparent;
+  --paper-toolbar-background: rgb(50, 54, 57);
+  @apply(--shadow-elevation-2dp);
   color: rgb(241, 241, 241);
   font-size: 1.5em;
-  height: 56px;
-  padding-left: 1em;
-  padding-right: 1em;
-  z-index: 3;
+  height: 48px;
 }
 
 paper-toolbar /deep/ ::selection {
@@ -61,9 +59,33 @@ paper-toolbar /deep/ ::selection {
 }
 
 paper-toolbar /deep/ .toolbar-tools {
-  height: 56px;
+  height: 48px;
 }
 
 .invisible {
   visibility: hidden;
 }
+
+@media(max-width: 675px) {
+  #bookmarks,
+  #rotate-left {
+    display: none;
+  }
+
+  #pageselector-container {
+    flex: 2;
+  }
+}
+
+@media(max-width: 450px) {
+  #rotate-right {
+    display: none;
+  }
+}
+
+@media(max-width: 400px) {
+  #buttons,
+  #pageselector-container {
+    display: none;
+  }
+}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
index 8cba44f130e..feec286f274 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
@@ -6,7 +6,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-up-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="../viewer-bookmarks-content/viewer-bookmarks-content.html">
@@ -14,46 +13,57 @@
 <link rel="import" href="../viewer-toolbar-dropdown/viewer-toolbar-dropdown.html">
 
 <dom-module id="viewer-pdf-toolbar">
+  <link rel="import" type="css" href="../shared-icon-style.css">
   <link rel="import" type="css" href="viewer-pdf-toolbar.css">
   <template>
-    <paper-material class="fit"></paper-material>
-
-    <paper-progress value="{{loadProgress}}"></paper-progress>
 
     <paper-toolbar>
-      <div id="aligner" class="horizontal layout center">
-        <span id="title" class="invisible flex-5" title="{{docTitle}}">
+      <div id="aligner" class="middle horizontal layout center">
+        <span id="title" class="flex-5" title="{{docTitle}}">
           <span>{{docTitle}}</span>
         </span>
 
         <div class="flex-1" id="pageselector-container">
           <viewer-page-selector id="pageselector" class="invisible"
-              doc-length="{{docLength}}" page-no="{{pageNo}}">
+              doc-length="{{docLength}}" page-no="{{pageNo}}"
+              strings="{{strings}}">
           </viewer-page-selector>
         </div>
 
         <div id="buttons" class="invisible flex-5">
-          <!-- TODO(tsergeant): "Bookmarks" should be localized. -->
           <viewer-toolbar-dropdown id="bookmarks"
-                                   hidden$="[[!bookmarks]]"
-                                   header="Bookmarks"
+                                   hidden$="[[!bookmarks.length]]"
+                                   header="{{strings.bookmarks}}"
                                    open-icon="bookmark"
                                    closed-icon="bookmark-border">
               <viewer-bookmarks-content bookmarks="{{bookmarks}}">
               </viewer-bookmarks-content>
           </viewer-toolbar-dropdown>
-          <paper-icon-button icon="image:rotate-right"
-              on-click="rotateRight"></paper-icon-button>
-          <!-- TODO(tsergeant): Replace this placeholder with a more useful
-                button. -->
-          <paper-icon-button icon="image:rotate-left"
-              on-click="rotateLeft"></paper-icon-button>
-          <paper-icon-button icon="save"
-              on-click="save"></paper-icon-button>
-          <paper-icon-button icon="print"
-              on-click="print"></paper-icon-button>
+
+          <paper-icon-button id="rotate-right" icon="image:rotate-right"
+              on-click="rotateRight" alt="{{strings.tooltipRotateCW}}"
+              title="{{strings.tooltipRotateCW}}">
+          </paper-icon-button>
+
+          <paper-icon-button id="rotate-left" icon="image:rotate-left"
+              on-click="rotateLeft" alt="{{strings.tooltipRotateCCW}}"
+              title="{{strings.tooltipRotateCCW}}">
+          </paper-icon-button>
+
+          <paper-icon-button id="save" icon="save"
+              on-click="save" alt="{{strings.tooltipSave}}"
+              title="{{strings.tooltipSave}}">
+          </paper-icon-button>
+
+          <paper-icon-button id="print" icon="print"
+              on-click="print" alt="{{strings.tooltipPrint}}"
+              title="{{strings.tooltipPrint}}">
+          </paper-icon-button>
         </div>
       </div>
+      <div class="bottom fit">
+        <paper-progress id="progress" value="{{loadProgress}}"></paper-progress>
+      </div>
     </paper-toolbar>
   </template>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
index 62e5cf9a5ec..338d9eaaeb0 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js
@@ -10,6 +10,7 @@
     ],
 
     properties: {
+      strings: Object,
       /**
        * The current loading progress of the PDF document (0 - 100).
        */
@@ -78,15 +79,14 @@
     },
 
     _onAnimationFinished: function() {
-      if (!this.opened)
-        this.style.visibility = 'hidden';
+        this.style.transform = this.opened ? 'none' : 'translateY(-100%)';
     },
 
     loadProgressChanged: function() {
       if (this.loadProgress >= 100) {
-        this.$.title.classList.toggle('invisible', false);
         this.$.pageselector.classList.toggle('invisible', false);
         this.$.buttons.classList.toggle('invisible', false);
+        this.$.progress.style.opacity = 0;
       }
     },
 
@@ -98,7 +98,6 @@
     show: function() {
       if (!this.opened) {
         this.toggleVisibility();
-        this.style.visibility = 'initial';
       }
     },
 
@@ -113,7 +112,16 @@
     },
 
     shouldKeepOpen: function() {
-      return this.$.bookmarks.dropdownOpen || this.loadProgress < 100;
+      return this.$.bookmarks.dropdownOpen || this.loadProgress < 100 ||
+          this.$.pageselector.isActive();
+    },
+
+    hideDropdowns: function() {
+      if (this.$.bookmarks.dropdownOpen) {
+        this.$.bookmarks.toggleDropdown();
+        return true;
+      }
+      return false;
     },
 
     setDropdownLowerBound: function(lowerBound) {
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.css b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.css
index 066c4a52de2..30b9f42abdf 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.css
@@ -4,7 +4,7 @@
 
 :host {
   display: inline-block;
-  text-align: left;
+  text-align: start;
 }
 
 #container {
@@ -30,20 +30,21 @@ paper-material {
   display: inline-block;
 }
 
-#icon.open {
+:host([dropdown-open]) #icon {
   background-color: rgb(25, 27, 29);
   border-radius: 4px;
 }
 
 #arrow {
-  margin-left: -18px;
-  padding-right: 4px;
+  -webkit-margin-start: -12px;
+  -webkit-padding-end: 4px;
 }
 
 h1 {
   border-bottom: 1px solid rgb(219, 219, 219);
   color: rgb(33, 33, 33);
+  font-size: 77.8%;
+  font-weight: 500;
   margin: 0;
-  padding: 16px;
-  @apply(--paper-font-title);
+  padding: 14px 28px;
 }
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html
index 9b6ec5ec41e..25b44c296e1 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html
@@ -4,10 +4,13 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 
 <dom-module id="viewer-toolbar-dropdown">
+  <link rel="import" type="css" href="../shared-icon-style.css">
   <link rel="import" type="css" href="viewer-toolbar-dropdown.css">
   <template>
     <div on-click="toggleDropdown" id="icon">
-      <paper-icon-button icon="[[dropdownIcon]]"></paper-icon-button>
+      <paper-icon-button id="main-icon" icon="[[dropdownIcon]]"
+          alt="{{header}}" title="{{header}}">
+      </paper-icon-button>
       <iron-icon icon="arrow-drop-down" id="arrow"></iron-icon>
     </div>
 
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
index 8586d829457..17a04c04d7b 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js
@@ -12,7 +12,7 @@
   var DROPDOWN_OUTER_PADDING = 2;
 
   /** Minimum height of toolbar dropdowns (px). */
-  var MIN_DROPDOWN_HEIGHT = 300;
+  var MIN_DROPDOWN_HEIGHT = 200;
 
   Polymer({
     is: 'viewer-toolbar-dropdown',
@@ -30,6 +30,7 @@
       /** True if the dropdown is currently open. */
       dropdownOpen: {
         type: Boolean,
+        reflectToAttribute: true,
         value: false
       },
 
@@ -69,12 +70,9 @@
     toggleDropdown: function() {
       this.dropdownOpen = !this.dropdownOpen;
       if (this.dropdownOpen) {
-        this.$.icon.classList.add('open');
         this.$.dropdown.style.display = 'block';
         if (!this.maxHeightValid_)
           this.updateMaxHeight();
-      } else {
-        this.$.icon.classList.remove('open');
       }
       this.cancelAnimation_();
       this.playAnimation_(this.dropdownOpen);
@@ -102,9 +100,9 @@
      * @private
      */
     playAnimation_: function(isEntry) {
-      this._animation = isEntry ? this.animateEntry_() : this.animateExit_();
-      this._animation.onfinish = function() {
-        this._animation = null;
+      this.animation_ = isEntry ? this.animateEntry_() : this.animateExit_();
+      this.animation_.onfinish = function() {
+        this.animation_ = null;
         if (!this.dropdownOpen)
           this.$.dropdown.style.display = 'none';
       }.bind(this);
@@ -114,6 +112,9 @@
       var maxHeight = this.$.dropdown.getBoundingClientRect().height -
           DROPDOWN_OUTER_PADDING;
 
+      if (maxHeight < 0)
+        maxHeight = 0;
+
       var fade = new KeyframeEffect(this.$.dropdown, [
             {opacity: 0},
             {opacity: 1}
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css
index 6c77cbe13dc..c9bb1896f96 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.css
@@ -2,7 +2,28 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+#wrapper {
+  transition: transform 250ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host([closed]) #wrapper {
+  transform: translateX(100%);
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host-context([dir=rtl]):host([closed]) #wrapper {
+  transform: translateX(-100%);
+}
+
 paper-fab {
+  --paper-fab-keyboard-focus-background: var(--viewer-icon-ink-color);
+  --paper-fab-mini: {
+    height: 36px;
+    padding: 8px;
+    width: 36px;
+  };
+  @apply(--shadow-elevation-4dp);
   background-color: rgb(242, 242, 242);
   color: rgb(96, 96, 96);
   margin: 0 48px;
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
index 84e5da1bf99..fbc51b550d6 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
@@ -1,13 +1,16 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/transform-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.html">
 
 <dom-module id="viewer-zoom-button">
+  <link rel="import" type="css" href="../shared-icon-style.css">
   <link rel="import" type="css" href="viewer-zoom-button.css">
   <template>
-    <paper-fab id="button" mini icon="[[icon]]"></paper-fab>
+    <div id="wrapper">
+      <paper-fab id="button" mini icon="[[visibleIcon_]]" on-click="fireClick"
+          aria-label$="[[visibleTooltip_]]" title="[[visibleTooltip_]]">
+      </paper-fab>
+    </div>
   </template>
 </dom-module>
 <script src="viewer-zoom-button.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
index 754badb3fcb..df556aced28 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
@@ -5,77 +5,91 @@
 Polymer({
   is: 'viewer-zoom-button',
 
-  behaviors: [
-    Polymer.NeonAnimationRunnerBehavior
-  ],
-
   properties: {
-    icon: String,
+    /**
+     * Icons to be displayed on the FAB. Multiple icons should be separated with
+     * spaces, and will be cycled through every time the FAB is clicked.
+     */
+    icons: String,
+
+    /**
+     * Array version of the list of icons. Polymer does not allow array
+     * properties to be set from HTML, so we must use a string property and
+     * perform the conversion manually.
+     * @private
+     */
+    icons_: {
+      type: Array,
+      value: [''],
+      computed: 'computeIconsArray_(icons)'
+    },
+
+    tooltips: Array,
 
-    opened: {
+    closed: {
       type: Boolean,
-      value: true
+      reflectToAttribute: true,
+      value: false
+    },
+
+    delay: {
+      type: Number,
+      observer: 'delayChanged_'
+    },
+
+    /**
+     * Index of the icon currently being displayed.
+     */
+    activeIndex: {
+      type: Number,
+      value: 0
     },
 
-    delay: Number,
+    /**
+     * Icon currently being displayed on the FAB.
+     * @private
+     */
+    visibleIcon_: {
+      type: String,
+      computed: 'computeVisibleIcon_(icons_, activeIndex)'
+    },
 
-    animationConfig: {
-      type: Object,
-      computed: 'computeAnimationConfig(delay)'
+    visibleTooltip_: {
+      type: String,
+      computed: 'computeVisibleTooltip_(tooltips, activeIndex)'
     }
   },
 
-  computeAnimationConfig: function(delay) {
-    return {
-      'entry': {
-        name: 'transform-animation',
-        node: this,
-        timing: {
-          easing: 'cubic-bezier(0, 0, 0.2, 1)',
-          duration: 250,
-          delay: delay
-        },
-        transformFrom: 'translateX(100%)'
-      },
-      'exit': {
-        name: 'transform-animation',
-        node: this,
-        timing: {
-          easing: 'cubic-bezier(0.4, 0, 1, 1)',
-          duration: 250,
-          delay: delay
-        },
-        transformTo: 'translateX(100%)'
-      }
-    };
+  computeIconsArray_: function(icons) {
+    return icons.split(' ');
+  },
+
+  computeVisibleIcon_: function(icons, activeIndex) {
+    return icons[activeIndex];
   },
 
-  listeners: {
-    'neon-animation-finish': '_onAnimationFinished'
+  computeVisibleTooltip_: function(tooltips, activeIndex) {
+    return tooltips[activeIndex];
   },
 
-  _onAnimationFinished: function() {
-    // Must use visibility: hidden so that the buttons do not change layout as
-    // they are hidden.
-    if (!this.opened)
-      this.style.visibility = 'hidden';
+  delayChanged_: function() {
+    this.$.wrapper.style.transitionDelay = this.delay + 'ms';
   },
 
   show: function() {
-    if (!this.opened) {
-      this.toggle_();
-      this.style.visibility = 'initial';
-    }
+    this.closed = false;
   },
 
   hide: function() {
-    if (this.opened)
-      this.toggle_();
+    this.closed = true;
   },
 
-  toggle_: function() {
-    this.opened = !this.opened;
-    this.cancelAnimation();
-    this.playAnimation(this.opened ? 'entry' : 'exit');
-  },
+  fireClick: function() {
+    // We cannot attach an on-click to the entire viewer-zoom-button, as this
+    // will include clicks on the margins. Instead, proxy clicks on the FAB
+    // through.
+    this.fire('fabclick');
+
+    this.activeIndex = (this.activeIndex + 1) % this.icons_.length;
+  }
 });
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css
index 808cd91f8fd..4756c8b3ebe 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css
@@ -3,6 +3,7 @@
  * found in the LICENSE file. */
 
 :host {
+  -webkit-user-select: none;
   bottom: 0;
   padding: 48px 0;
   position: fixed;
@@ -10,18 +11,21 @@
   z-index: 3;
 }
 
+:host-context([dir=rtl]) {
+  left: 0;
+  right: auto;
+}
+
 viewer-zoom-button {
   display: block;
 }
 
-/* A small gap between the fit to page/fit to width buttons and the zoom in/zoom
- * out buttons. */
-#fit-to-page-button,
+/* A small gap between the zoom in/zoom out buttons. */
 #zoom-out-button {
-  margin-top: 1em;
+  margin-top: 10px;
 }
 
-/* A larger gap between the top two and bottom two buttons. */
+/* A larger gap between the fit button and bottom two buttons. */
 #zoom-in-button {
-  margin-top: 2em;
+  margin-top: 24px;
 }
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
index 88649f4c52e..a2e3b372014 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
@@ -8,15 +8,13 @@
 
     <div id="zoom-buttons">
       <div id="buttons">
-        <!-- TODO(alexandrec): Replace with custom icons. -->
-        <viewer-zoom-button id="fit-to-width-button" icon="fullscreen"
-            on-click="fitToWidth" delay="0"></viewer-zoom-button>
-        <viewer-zoom-button id="fit-to-page-button" icon="fullscreen-exit"
-            on-click="fitToPage" delay="50"></viewer-zoom-button>
-        <viewer-zoom-button id="zoom-in-button" icon="add"
-            on-click="zoomIn" delay="100"></viewer-zoom-button>
-        <viewer-zoom-button id="zoom-out-button" icon="remove"
-            on-click="zoomOut" delay="150"></viewer-zoom-button>
+        <viewer-zoom-button id="fit-button" icons="fullscreen-exit fullscreen"
+            on-fabclick="fitToggle" delay="100">
+        </viewer-zoom-button>
+        <viewer-zoom-button id="zoom-in-button" icons="add"
+            on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
+        <viewer-zoom-button id="zoom-out-button" icons="remove"
+            on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
       </div>
     </div>
   </template>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
index 515b49df1cc..c65365c93bb 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
@@ -2,62 +2,69 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-ANIMATION_INTERVAL = 50;
-
-Polymer({
-  is: 'viewer-zoom-toolbar',
-
-  properties: {
-   /**
-     * The default zoom percentage.
-     */
-    zoomValue: {
-      type: Number,
-      value: 100
-    }
-  },
-
-  get visible() {
-    return this.visible_;
-  },
-
-  ready: function() {
-    this.visible_ = true;
-  },
-
-  fitToPage: function() {
-    this.fire('fit-to-page');
-  },
-
-  fitToWidth: function() {
-    this.fire('fit-to-width');
-  },
-
-  zoomIn: function() {
-    this.fire('zoom-in');
-  },
-
-  zoomOut: function() {
-    this.fire('zoom-out');
-  },
-
-  show: function() {
-    if (!this.visible) {
-      this.visible_ = true;
-      this.$['fit-to-width-button'].show();
-      this.$['fit-to-page-button'].show();
-      this.$['zoom-in-button'].show();
-      this.$['zoom-out-button'].show();
-    }
-  },
-
-  hide: function() {
-    if (this.visible) {
-      this.visible_ = false;
-      this.$['fit-to-page-button'].hide();
-      this.$['fit-to-width-button'].hide();
-      this.$['zoom-in-button'].hide();
-      this.$['zoom-out-button'].hide();
-    }
-  },
-});
+(function() {
+
+  var FIT_TO_PAGE = 0;
+  var FIT_TO_WIDTH = 1;
+
+  Polymer({
+    is: 'viewer-zoom-toolbar',
+
+    properties: {
+      strings: {
+        type: Object,
+        observer: 'setTooltips_'
+      },
+
+      visible_: {
+        type: Boolean,
+        value: true
+      }
+    },
+
+    isVisible: function() {
+      return this.visible_;
+    },
+
+    setTooltips_: function() {
+      this.$['fit-button'].tooltips =
+          [this.strings.tooltipFitToPage, this.strings.tooltipFitToWidth];
+      this.$['zoom-in-button'].tooltips = [this.strings.tooltipZoomIn];
+      this.$['zoom-out-button'].tooltips = [this.strings.tooltipZoomOut];
+    },
+
+    fitToggle: function() {
+      if (this.$['fit-button'].activeIndex == FIT_TO_WIDTH)
+        this.fire('fit-to-width');
+      else
+        this.fire('fit-to-page');
+    },
+
+    zoomIn: function() {
+      this.fire('zoom-in');
+    },
+
+    zoomOut: function() {
+      this.fire('zoom-out');
+    },
+
+    show: function() {
+      if (!this.visible_) {
+        this.visible_ = true;
+        this.$['fit-button'].show();
+        this.$['zoom-in-button'].show();
+        this.$['zoom-out-button'].show();
+      }
+    },
+
+    hide: function() {
+      if (this.visible_) {
+        this.visible_ = false;
+        this.$['fit-button'].hide();
+        this.$['zoom-in-button'].hide();
+        this.$['zoom-out-button'].hide();
+      }
+    },
+  });
+
+})();