MD Settings: validate home button url input

chrome/browser/resources/settings/controls/settings_input.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.
 
 /**
  * @fileoverview
  * `settings-input` is a single-line text field for user input associated
  * with a pref value.
  */
 Polymer({
   is: 'settings-input',
 
   behaviors: [CrPolicyPrefBehavior, PrefControlBehavior],
 
   properties: {
     /**
      * The preference object to control.
      * @type {!chrome.settingsPrivate.PrefObject|undefined}
      * @override
      */
-    pref: {
-      observer: 'prefChanged_'
-    },
+    pref: {observer: 'prefChanged_'},
 
     /* The current value of the input, reflected to/from |pref|. */
     value: {
       type: String,
       value: '',
       notify: true,
     },
 
     /* Set to true to disable editing the input. */
-    disabled: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true
-    },
+    disabled: {type: Boolean, value: false, reflectToAttribute: true},
 
     canTab: Boolean,
 
+    invalid: {
+      type: Boolean,
+      value: false,
+      notify: true,

[dpapad, 2017/03/24 01:39:31]

Is this needed? From the docs, this is only applicable when a two-way binding is
used, but I did not see any binding for it here.

[scottchen, 2017/03/24 20:48:54]

Based on your comment regarding using data-binding for invalid, it's actually
necessary to do a two-way binding here: <settings-input invalid="{{..}}">, since
settings-input programmatically change .invalid's value too, so if it doesn't
notify, they get de-synchronized  and sometimes validity state isn't showing
correctly.

+    },
+
     /* Properties for paper-input. This is not strictly necessary.
      * Though it does define the types for the closure compiler. */
-    errorMessage: { type: String },
-    label: { type: String },
-    noLabelFloat: { type: Boolean, value: false },
-    pattern: { type: String },
-    readonly: { type: Boolean, value: false },
-    required: { type: Boolean, value: false },
-    stopKeyboardEventPropagation: { type: Boolean, value: false },
-    type: { type: String },
+    errorMessage: {type: String},
+    label: {type: String},
+    noLabelFloat: {type: Boolean, value: false},
+    pattern: {type: String},
+    readonly: {type: Boolean, value: false},
+    required: {type: Boolean, value: false},
+    stopKeyboardEventPropagation: {type: Boolean, value: false},
+    type: {type: String},
   },
 
   /**
    * Focuses the 'input' element.
    */
   focus: function() {
     this.$.input.focus();
   },
 
   /**
@@ skipping 35 matching lines @@
 
   /**
    * Change event handler for paper-input. Updates the pref value.
    * settings-input uses the change event because it is fired by the Enter key.
    * @private
    */
   onChange_: function() {
     if (!this.pref)
       return;
 
+    if (this.invalid) {
+      this.resetValue_();
+      return;
+    }
+
     if (this.pref.type == chrome.settingsPrivate.PrefType.NUMBER) {
       if (!this.value) {
-        // Ignore empty input field and restore value.
-        this.value = this.pref.value.toString();
+        this.resetValue_();
         return;
       }
       var n = parseInt(this.value, 10);
       if (isNaN(n)) {
         console.error('Bad value for numerical pref: ' + this.value);
         return;
       }
       this.set('pref.value', n);
     } else {
       assert(this.pref.type == chrome.settingsPrivate.PrefType.STRING ||
              this.pref.type == chrome.settingsPrivate.PrefType.URL);
       this.set('pref.value', this.value);
     }
   },
 
+  /** @private */
+  resetValue_: function() {
+    this.invalid = false;
+    this.setInputValueFromPref_();
+    this.$.input.blur();
+  },
+
   /**
    * Handler for profile name keydowns.

[dpapad, 2017/03/24 01:39:31]

Is this comment obsolete?

[scottchen, 2017/03/24 20:48:54]

Acknowledged.

    * @param {!Event} event
    * @private
    */
   onKeydown_: function(event) {
+    /* If pressed enter when input is invalid, do not trigger on-change */

[dpapad, 2017/03/24 01:39:31]

End full sentence comment with a period.

[scottchen, 2017/03/24 20:48:54]

Done.

+    if (event.key == 'Enter' && this.invalid) {
+      event.preventDefault();
+      return;
+    }
+
     if (event.key != 'Escape')
       return;
 
-    this.setInputValueFromPref_();
-    this.$.input.blur();
+    this.resetValue_();
   },
 
   /**
    * @param {boolean} disabled
    * @return {boolean} Whether the element should be disabled.
    * @private
    */
   isDisabled_: function(disabled) {
     return disabled || this.isPrefEnforced();
   },
 });