Ctrl-G now selects page number in Material Design PDF Viewer

Previously, typing Ctrl-G would pop up the "find-text" box, appearing to be an alias for Ctrl-F.
Doing so will now highlight the page number in the viewer-page-selector, allowing for a quick and easy method to go to another page.
Changed viewer-page-selector to use a combination of paper-input-decorator and input instead of a sole paper-input. This affords us greater flexibility and should ease maintenance.

BUG=55920

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

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

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

@@ -11,23 +11,23 @@
   width: 0.6em;
 }
 
-paper-input /deep/ ::-webkit-input-placeholder {
+paper-input-decorator /deep/ ::-webkit-input-placeholder {
   color: rgb(241, 241, 241);
 }
 
-paper-input /deep/ .focused-underline {
+paper-input-decorator /deep/ .focused-underline {
   background-color: rgb(241, 241, 241);
 }
 
-paper-input /deep/ .unfocused-underline {
+paper-input-decorator /deep/ .unfocused-underline {
   background-color: transparent;
 }
 
-paper-input:hover /deep/ .unfocused-underline {
+paper-input-decorator:hover /deep/ .unfocused-underline {
   background-color: rgb(241, 241, 241);
 }
 
-paper-input::shadow input[is='core-input'] {
+#input {
   margin: 0;
   text-align: right;
 }

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

 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/paper-input/paper-input-decorator.html">
 
 <polymer-element name="viewer-page-selector">
 <template>
   <link rel="stylesheet" href="viewer-page-selector.css">
-  <paper-input value="{{pageNo}}"
-               committedValue="{{chosenPageNo}}"
-               id="pageselector"></paper-input>
+  <paper-input-decorator id="pageselector">
+    <input id="input" is="core-input"
+        value="{{pageNo}}" committedvalue="{{chosenPageNo}}">
+  </paper-input-decorator>
   <span id="pagelength">/ {{docLength}}</span>
 </template>
 <script src="viewer-page-selector.js"></script>

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

@@ -32,5 +32,9 @@ Polymer('viewer-page-selector', {
   docLengthChanged: function() {
     var numDigits = this.docLength.toString().length;
     this.$.pageselector.style.width = (numDigits * DIGIT_LENGTH) + 'em';
+  },
+
+  select: function() {
+    this.$.input.select();
   }
 });

chrome/browser/resources/pdf/pdf.js

@@ -291,6 +291,13 @@ PDFViewer.prototype = {
           e.preventDefault();
         }
         return;
+      case 71: // g key.
+        if (this.isMaterial_ && (e.ctrlKey || e.metaKey)) {
+          this.pageIndicator_.select();
+          // To prevent the default "find text" behaviour in Chrome.
+          e.preventDefault();
+        }
+        return;
       case 80:  // p key.
         if (e.ctrlKey || e.metaKey) {
           this.print_();