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

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.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.
 
 var DIGIT_LENGTH = 0.6;
 
 Polymer({
   is: 'viewer-page-selector',
 
   properties: {
     /**
      * The index of the current page being viewed (0-based).
      */
     index: {

[raymes, 2015/06/02 01:12:03]

As we discussed I wonder if we could potentially remove this?

[tsergeant, 2015/06/02 05:00:39]

Done.

       type: Number,
       value: 0,
       observer: 'indexChanged'
     },
 
     /**
      * The number of pages the document contains.
      */
     docLength: {
       type: Number,
       value: 1,
       observer: 'docLengthChanged'
     },
 
     /**
      * The current entry in the input field (1-based).
      */
     pageNo: {
       type: String,
-      value: '1',
-      observer: 'pageNoChanged'
-    },
+      value: '1'
+    }
   },
 
-  pageNoChanged: function() {
-    var page = parseInt(this.pageNo);
+  ready: function() {
+    // Polymer 0.8's iron-input's validation method has a bug which resets the
+    // cursor position to the end of the input field after every character is
+    // typed. This makes editing text in the middle of the input difficult.
+    // Since we don't use the input validation, just disable it.
+    // TODO(tsergeant): Remove this once we have iron-input >= 0.9.5 available.
+    this.$.input._onInput = null;

[raymes, 2015/06/02 01:12:03]

Will we be able to remove this before you land this patch then?

[tsergeant, 2015/06/02 05:00:39]

Yes, since I'll be waiting for the Polymer 1.0 patches to land. Removed.

+  },
+
+  pageNoCommitted: function(e) {
+    var page = parseInt(e.target.value);

[raymes, 2015/06/02 01:12:03]

is e.target.value the same as this.pageNo?

[tsergeant, 2015/06/02 05:00:39]

Done.

     if (!isNaN(page) && page != this.index + 1) {
       this.fire('change-page', {page: page - 1});
     } else {
       // Repopulate the input.
       this.indexChanged();
     }
   },
 
   indexChanged: function() {
     this.pageNo = String(this.index + 1);
   },
 
   docLengthChanged: function() {
     var numDigits = this.docLength.toString().length;
     this.$.pageselector.style.width = (numDigits * DIGIT_LENGTH) + 'em';
   },
 
   select: function() {
     this.$.input.select();
   }
 });