Print Preview Refresh: Fix some pages bugs

Splitting out fixes for bugs from change to dropdown, in case we decide
not to keep dropdown change. Addresses some focus issues, and removes
use of auto-validate. Auto-validate does not work well for this section
as some errors (e.g. out of range) cannot be caught by the auto
validation. Having 2 different sets of logic for setting the input
invalid (auto-validate + JS validation) causes some bugs.

Bug: 887231, 886591, 886542, 885094, 886560
Change-Id: I053899718a735fa8bcc23df27d36b23d2c26e0b0
Reviewed-on: https://chromium-review.googlesource.com/1238868Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593394}

chrome/browser/resources/print_preview/new/input_behavior.js

@@ -55,7 +55,7 @@ cr.define('print_preview_new', function() {
       if (event.code != 'Enter')
         return;
 
-      this.resetAndUpdate_();
+      this.resetAndUpdate();
     },
 
     /**

chrome/browser/resources/print_preview/new/pages_settings.html

@@ -48,16 +48,16 @@
               checked$="[[customSelected_]]"
               disabled$="[[getDisabled_(disabled)]]"
               aria-label="$i18n{optionCustomPages}"
-              on-click="onCustomRadioClick_">
+              on-click="onCustomRadioClick_"
+              on-focus="onCustomRadioFocus_"
+              on-blur="onCustomInputBlur_">
             <cr-input id="pageSettingsCustomInput" type="text"
                 data-timeout-delay="500"
                 disabled$="[[getDisabled_(disabled)]]" spellcheck="false"
-                pattern="[[inputPattern_]]"
                 on-focus="onCustomInputFocus_" on-blur="onCustomInputBlur_"
                 placeholder="$i18n{examplePageRangeText}"
                 error-message="[[getHintMessage_(errorState_,
-                    documentInfo.pageCount)]]"
-                auto-validate>
+                    documentInfo.pageCount)]]">
             </cr-input>
           </cr-radio-button>
         </div>

chrome/browser/resources/print_preview/new/pages_settings.js

@@ -60,14 +60,6 @@ Polymer({
       type: Array,
       computed: 'computeRangesToPrint_(pagesToPrint_, allPagesArray_)',
     },
-
-    /** @private {string} */
-    inputPattern_: {
-      type: String,
-      notify: true,
-      value:
-          '([0-9]*(-)?[0-9]*(,|\u3001)( )?)*([0-9]*(-)?[0-9]*(,|\u3001)?( )?)?',
-    },
   },
 
   observers: [
@@ -131,15 +123,10 @@ Polymer({
    * @private
    */
   computePagesToPrint_: function() {
-    if (!this.customSelected_ || this.inputString_.trim() == '') {
+    if (!this.customSelected_ || this.inputString_ === '') {
       this.errorState_ = PagesInputErrorState.NO_ERROR;
       return this.allPagesArray_;
     }
-    if (this.$.pageSettingsCustomInput.invalid) {
-      this.errorState_ = PagesInputErrorState.INVALID_SYNTAX;
-      this.onRangeChange_();
-      return this.pagesToPrint_;
-    }
 
     const pages = [];
     const added = {};
@@ -153,8 +140,8 @@ Polymer({
         return this.pagesToPrint_;
       }
       const limits = range.split('-');
-      let min = parseInt(limits[0], 10);
-      if (min < 1) {
+      let min = Number.parseInt(limits[0], 10);
+      if ((limits[0].length > 0 && Number.isNaN(min)) || min < 1) {
         this.errorState_ = PagesInputErrorState.INVALID_SYNTAX;
         this.onRangeChange_();
         return this.pagesToPrint_;
@@ -172,10 +159,16 @@ Polymer({
         continue;
       }
 
-      let max = parseInt(limits[1], 10);
-      if (isNaN(min))
+      let max = Number.parseInt(limits[1], 10);
+      if (Number.isNaN(max) && limits[1].length > 0) {
+        this.errorState_ = PagesInputErrorState.INVALID_SYNTAX;
+        this.onRangeChange_();
+        return this.pagesToPrint_;
+      }
+
+      if (Number.isNaN(min))
         min = 1;
-      if (isNaN(max))
+      if (Number.isNaN(max))
         max = maxPage;
       if (min > max) {
         this.errorState_ = PagesInputErrorState.INVALID_SYNTAX;
@@ -278,6 +271,15 @@ Polymer({
     this.customSelected_ = false;
   },
 
+  /**
+   * @param {Event} event Contains information about where focus came from.
+   * @private
+   */
+  onCustomRadioFocus_: function(event) {
+    if (event.relatedTarget !== this.$.pageSettingsCustomInput)
+      this.onCustomRadioClick_();
+  },
+
   /** @private */
   onCustomRadioClick_: function() {
     /** @type {!CrInputElement} */ (this.$.pageSettingsCustomInput)
@@ -286,7 +288,6 @@ Polymer({
 
   /** @private */
   onCustomInputFocus_: function() {
-    this.$.pageSettingsCustomInput.validate();
     this.customSelected_ = true;
   },
 
@@ -295,8 +296,9 @@ Polymer({
    * @private
    */
   onCustomInputBlur_: function(event) {
+    this.resetAndUpdate();
+
     if (this.inputString_.trim() == '' &&
-        event.relatedTarget != this.$$('.custom-input-wrapper') &&
         event.relatedTarget != this.$$('#custom-radio-button')) {
       this.customSelected_ = false;
     }