Print Preview: Change the behavior for empty PIN value.

* Allow to save empty PIN in sticky settings.
* Show the error if the PIN field is empty.

Bug: 848942
Change-Id: If7c4f3af6b9d6a5ade041c06d4732903ce780ff9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1570011Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Nikita Podguzov <nikitapodguzov@google.com>
Cr-Commit-Position: refs/heads/master@{#652206}

chrome/browser/resources/print_preview/new/BUILD.gn

@@ -161,6 +161,7 @@ if (is_chromeos) {
     deps = [
       ":input_behavior",
       ":settings_behavior",
+      ":state",
     ]
   }
 }

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

@@ -7,6 +7,7 @@
 <link rel="import" href="print_preview_shared_css.html">
 <link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
+<link rel="import" href="state.html">
 
 <dom-module id="print-preview-pin-settings">
   <template>
@@ -54,7 +55,7 @@
               maxlength="4" data-timeout-delay="250" aria-labelledby="pin"
               placeholder="$i18n{pinPlaceholder}" spellcheck="false"
               disabled$="[[inputDisabled_(pinEnabled_, inputValid_, disabled)]]"
-              error-message="$i18n{pinErrorMessage}" auto-validate>
+              error-message="$i18n{pinErrorMessage}" required auto-validate>
           </cr-input>
         </div>
       </print-preview-settings-section>

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

@@ -8,6 +8,9 @@ Polymer({
   behaviors: [SettingsBehavior, print_preview_new.InputBehavior],
 
   properties: {
+    /** @type {!print_preview_new.State} */
+    state: Number,
+
     disabled: Boolean,
 
     /** @private {boolean} */
@@ -38,8 +41,10 @@ Polymer({
     },
   },
 
-  observers:
-      ['onSettingsChanged_(settings.pin.value, settings.pinValue.value)'],
+  observers: [
+    'onSettingsChanged_(settings.pin.value, settings.pinValue.value)',
+    'changePinValueSetting_(state)',
+  ],
 
   listeners: {
     'input-change': 'onInputChange_',
@@ -94,11 +99,27 @@ Polymer({
     this.pinEnabled_ = pinEnabled;
     const pinValue = this.getSetting('pinValue');
     this.inputString_ = /** @type {string} */ (pinValue.value);
+    this.resetString();
   },
 
   /** @private */
   onPinChange_: function() {
     this.setSetting('pin', this.$.pin.checked);
+    // We need to set validity of pinValue to true to return to READY state
+    // after unchecking the pin and to check the validity again after checking
+    // the pin.
+    if (!this.$.pin.checked) {
+      this.setSettingValid('pinValue', true);
+    } else {
+      this.changePinValueSetting_();
+    }
+  },
+
+  /**
+   * @private
+   */
+  onInputChanged_: function() {
+    this.changePinValueSetting_();
   },
 
   /**
@@ -106,14 +127,25 @@ Polymer({
    * input.
    * @private
    */
-  onInputChanged_: function() {
+  changePinValueSetting_: function() {
     if (this.settings === undefined) {
       return;
     }
+    // If the state is not READY and current pinValue is valid (so it's not the
+    // cause of the error) we need to wait until the state will be READY again.
+    // It's done because we don't permit multiple simultaneous validation errors
+    // in Print Preview and we also don't want to set the value when sticky
+    // settings may not yet have been set.
+    if (this.state != print_preview_new.State.READY &&
+        this.settings.pinValue.valid) {
+      return;
+    }
     this.inputValid_ = this.computeValid_();
     this.setSettingValid('pinValue', this.inputValid_);
 
-    if (this.inputValid_) {
+    // We allow to save the empty string as sticky setting value to give users
+    // the opportunity to unset their PIN in sticky settings.
+    if (this.inputValid_ || this.inputString_ == '') {
       this.setSetting('pinValue', this.inputString_);
     }
   },
@@ -126,6 +158,7 @@ Polymer({
   computeValid_: function() {
     // Make sure value updates first, in case inputString_ was updated by JS.
     this.$.pinValue.value = this.inputString_;
+    this.$.pinValue.validate();
     return !this.$.pinValue.invalid;
   },
 });

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

@@ -108,7 +108,7 @@
           available class="settings-section">
       </print-preview-destination-settings>
 <if expr="chromeos">
-      <print-preview-pin-settings settings="[[settings]]"
+      <print-preview-pin-settings state="[[state]]" settings="[[settings]]"
           disabled="[[controlsDisabled_]]"
           hidden$="[[!settings.pin.available]]" class="settings-section">
       </print-preview-pin-settings>

chrome/test/data/webui/print_preview/pin_settings_test.js

@@ -22,6 +22,7 @@ cr.define('pin_settings_test', function() {
 
       pinSection = document.createElement('print-preview-pin-settings');
       pinSection.settings = model.settings;
+      pinSection.state = print_preview_new.State.READY;
       pinSection.disabled = false;
       test_util.fakeDataBind(model, pinSection, 'settings');
       document.body.appendChild(pinSection);