WebUI cr-input: Programmatically enforce supported input 'type'.

Before this CL, the supported types were only mentioned in comments, and were
not programmatically enforced. As a result there were conflicting comments, as
well as cases that were a seemingly unsupported type was used (for example
'url' type in chrome://bookmarks).

Bug: 1010819
Change-Id: I3f52343220f2db2a3ed302a178efa1c0ca78db99
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1838975
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702741}

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -48,6 +48,12 @@ suite('cr-input', function() {
     });
   });
 
+  test('UnsupportedTypeThrows', function() {
+    assertThrows(function() {
+      crInput.type = 'checkbox';
+    });
+  });
+
   test('togglingDisableModifiesTabIndexCorrectly', function() {
     // Do innerHTML instead of createElement to make sure it's correct right
     // after being attached, and not messed up by disabledChanged_.

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -2,6 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+(function() {
+
+/**
+ * Input types supported by cr-input.
+ * @type {!Set<string>}
+ */
+const SUPPORTED_INPUT_TYPES = new Set([
+  'number',
+  'password',
+  'search',
+  'text',
+  'url',
+]);
+
 /**
  * @fileoverview 'cr-input' is a component similar to native input.
  *
@@ -17,7 +31,7 @@
  *   readonly
  *   required
  *   tabindex
- *   type (only 'text', 'password', 'number', and 'search' supported)
+ *   type (see |SUPPORTED_INPUT_TYPES| above)
  *   value
  *
  * Additional attributes that you can use with cr-input:
@@ -135,7 +149,8 @@ Polymer({
 
     type: {
       type: String,
-      value: 'text',  // Only 'text', 'password', 'search' are supported.
+      value: 'text',
+      observer: 'onTypeChanged_',
     },
 
     value: {
@@ -167,6 +182,12 @@ Polymer({
     }
   },
 
+  /** @private */
+  onTypeChanged_: function() {
+    // Check that the 'type' is one of the supported types.
+    assert(SUPPORTED_INPUT_TYPES.has(this.type));
+  },
+
   /** @return {!HTMLInputElement} */
   get inputElement() {
     return /** @type {!HTMLInputElement} */ (this.$.input);
@@ -364,3 +385,4 @@ Polymer({
     return !this.invalid;
   },
 });
+})();