Material PDF: Fix inconsistent behaviour in page selector, update styling

* Only change page when a value is committed to the selector with enter
* Prevents PDF keyboard shortcuts from firing when any input or textarea
  is active
* Update colors of the viewer and visual styling of the page selector

BUG=439114,484291

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

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

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.css

@@ -7,33 +7,34 @@
   width: 0.6em;
 }
 
-paper-input /deep/ ::-webkit-input-placeholder {
-  color: rgb(241, 241, 241);
+paper-input-container /deep/ .focused-line {
+  visibility: hidden;
 }
 
-paper-input /deep/ .focused-line {
-  background-color: rgb(241, 241, 241);
+paper-input-container /deep/ .unfocused-line {
+  visibility: hidden;
 }
 
-paper-input /deep/ .unfocused-line {
-  background-color: transparent;
-}
-
-paper-input:hover /deep/ .unfocused-line {
-  background-color: rgb(241, 241, 241);
-}
-
-paper-input /deep/ paper-input-container {
+paper-input-container {
   padding: 0;
 }
 
-paper-input /deep/ paper-input-container /deep/ input#input {
-  color: rgb(241, 241, 241);
+input#input {
+  color: #fff;
   font-size: 1em;
+  line-height: 20px;
+  padding: 3px;
   text-align: right;
 }
 
-#pagelength {
-  color: rgb(144, 202, 251);
-  font-size: 0.7em;
+input#input:focus {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+}
+
+#pagelength {
+  color: #fff;
+  font-size: 0.7em;
+  font-weight: 400;
+  padding-left: 3px;
 }

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html

@@ -1,10 +1,14 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 
 <dom-module id="viewer-page-selector">
   <link rel="import" type="css" href="viewer-page-selector.css">
   <template>
-    <paper-input id="pageselector" value="{{pageNo}}" no-label-float></paper-input>
+    <paper-input-container id="pageselector" no-label-float>
+      <input id="input" is="iron-input" bind-value="{{pageNo}}" on-mouseup="select"
+          on-change="pageNoCommitted">
+    </paper-input-container>
     <span id="pagelength">/ <span>{{docLength}}</span></span>
   </template>
 </dom-module>

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.js

@@ -8,15 +8,6 @@ Polymer({
   is: 'viewer-page-selector',
 
   properties: {
-    /**
-     * The index of the current page being viewed (0-based).
-     */
-    index: {
-      type: Number,
-      value: 0,
-      observer: 'indexChanged'
-    },
-
     /**
      * The number of pages the document contains.
      */
@@ -27,27 +18,19 @@ Polymer({
     },
 
     /**
-     * The current entry in the input field (1-based).
+     * The current page being viewed (1-based).
      */
     pageNo: {
       type: String,
-      value: '1',
-      observer: 'pageNoChanged'
-    },
-  },
-
-  pageNoChanged: function() {
-    var page = parseInt(this.pageNo);
-    if (!isNaN(page) && page != this.index + 1) {
-      this.fire('change-page', {page: page - 1});
-    } else {
-      // Repopulate the input.
-      this.indexChanged();
+      value: '1'
     }
   },
 
-  indexChanged: function() {
-    this.pageNo = String(this.index + 1);
+  pageNoCommitted: function() {
+    var page = parseInt(this.pageNo);
+    if (!isNaN(page)) {
+      this.fire('change-page', {page: page - 1});
+    }
   },
 
   docLengthChanged: function() {

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

@@ -15,6 +15,12 @@
 }
 
 #title {
+  /* paper-toolbar enforces a layout on anything with a title attribute which
+   * sets `flex: 1`. We must overwrite it here rather than with the 'flex-5'
+   * class.
+   * TODO(tsergeant): Remove this once it is fixed from the Polymer side.
+   */
+  flex: 5;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -32,6 +38,10 @@
   text-align: right;
 }
 
+#buttons > paper-icon-button {
+  margin-right: 0;
+}
+
 paper-progress {
   height: 56px;
   position: absolute;
@@ -40,15 +50,15 @@ paper-progress {
 }
 
 paper-progress::shadow #activeProgress {
-  background-color: rgb(27, 168, 243);
+  background-color: rgb(50, 54, 57);
 }
 
 paper-progress::shadow #progressContainer {
-  background-color: rgb(100, 181, 246);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 paper-toolbar {
-  background-color: rgb(27, 168, 243);
+  background-color: rgb(50, 54, 57);
   color: rgb(241, 241, 241);
   font-size: 1.5em;
   height: 56px;
@@ -58,7 +68,7 @@ paper-toolbar {
 }
 
 paper-toolbar /deep/ ::selection {
-  background: rgb(187, 222, 251);
+  background: rgba(255, 255, 255, 0.3);
 }
 
 paper-toolbar /deep/ .toolbar-tools {

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

@@ -25,7 +25,7 @@
 
           <div class="flex-1" id="pageselector-container">
             <viewer-page-selector id="pageselector" class="invisible"
-                index="{{pageIndex}}" doc-length="{{docLength}}">
+                doc-length="{{docLength}}" page-no="{{pageNo}}">
             </viewer-page-selector>
           </div>
 

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

@@ -20,9 +20,9 @@
       docTitle: String,
 
       /**
-       * The current index of the page being viewed (0-based).
+       * The number of the page being viewed (1-based).
        */
-      pageIndex: Number,
+      pageNo: Number,
 
       /**
        * Whether the document has bookmarks.

chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.css

@@ -14,18 +14,10 @@
   display: inline-block;
 }
 
-#main-zoom {
-  background-color: rgb(27, 168, 243);
-  display: block;
-  margin: auto;
-  margin-top: 2em;
-  overflow: visible;
-}
-
 #fit-to-width-button {
   display: block;
   margin: auto;
-  margin-top: 2em;
+  margin-top: 1em;
   overflow: visible;
 }
 

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

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 body {
-  background-color: #424242;
+  background-color: rgb(82, 86, 89);
   font-family: Roboto, 'Helvetica Neue', Helvetica, Arial;
   margin: 0;
 }

chrome/browser/resources/pdf/pdf.js

@@ -51,6 +51,23 @@ function onNavigateInNewTab(url) {
     window.open(url);
 }
 
+/**
+ * Whether keydown events should currently be ignored. Events are ignored when
+ * an editable element has focus, to allow for proper editing controls.
+ * @param {HTMLElement} activeElement The currently selected DOM node.
+ * @return {boolean} True if keydown events should be ignored.
+ */
+function shouldIgnoreKeyEvents(activeElement) {
+  while (activeElement.shadowRoot != null &&
+         activeElement.shadowRoot.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+
+  return (activeElement.isContentEditable ||
+          activeElement.tagName == 'INPUT' ||
+          activeElement.tagName == 'TEXTAREA');
+}
+
 /**
  * The minimum number of pixels to offset the toolbar by from the bottom and
  * right side of the screen.
@@ -206,6 +223,9 @@ PDFViewer.prototype = {
     // Certain scroll events may be sent from outside of the extension.
     var fromScriptingAPI = e.fromScriptingAPI;
 
+    if (shouldIgnoreKeyEvents(document.activeElement) || e.defaultPrevented)
+      return;
+
     var pageUpHandler = function() {
       // Go to the previous page if we are fit-to-page.
       if (this.viewport_.fittingType == Viewport.FittingType.FIT_TO_PAGE) {
@@ -623,7 +643,7 @@ PDFViewer.prototype = {
     // Update the page indicator.
     var visiblePage = this.viewport_.getMostVisiblePage();
     if (this.isMaterial_) {
-      this.materialToolbar_.pageIndex = visiblePage;
+      this.materialToolbar_.pageNo = visiblePage + 1;
     } else {
       this.pageIndicator_.index = visiblePage;
       if (this.documentDimensions_.pageDimensions.length > 1 &&

chrome/test/data/pdf/basic_test_material.js

@@ -36,6 +36,29 @@ var tests = [
         plugin.getAttribute('src').indexOf('/pdf/test.pdf') != -1);
     chrome.test.succeed();
   },
+
+  /**
+   * Test that shouldIgnoreKeyEvents correctly searches through the shadow DOM
+   * to find input fields.
+   */
+  function testIgnoreKeyEvents() {
+    // Test that the traversal through the shadow DOM works correctly.
+    var toolbar = document.getElementById('material-toolbar');
+    toolbar.$.pageselector.$.input.focus();
+    chrome.test.assertTrue(shouldIgnoreKeyEvents(toolbar));
+
+    // Test case where the active element has a shadow root of its own.
+    toolbar.$.buttons.children[0].focus();
+    chrome.test.assertFalse(shouldIgnoreKeyEvents(toolbar));
+
+    chrome.test.assertFalse(
+        shouldIgnoreKeyEvents(document.getElementById('plugin')));
+
+    chrome.test.succeed();
+  }
 ];
 
-chrome.test.runTests(tests);
+var scriptingAPI = new PDFScriptingAPI(window, window);
+scriptingAPI.setLoadCallback(function() {
+  chrome.test.runTests(tests);
+});

pdf/out_of_process_instance.cc

@@ -54,7 +54,7 @@ const char kAccessibleCopyable[] = "copyable";
 
 // PDF background colors.
 const uint32 kBackgroundColor = 0xFFCCCCCC;
-const uint32 kBackgroundColorMaterial = 0xFF424242;
+const uint32 kBackgroundColorMaterial = 0xFF525659;
 
 // Constants used in handling postMessage() messages.
 const char kType[] = "type";