Add a <cr-input> element to cr_elements.

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

Index: ui/webui/resources/cr_elements/cr_input/cr_input.js
diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input.js b/ui/webui/resources/cr_elements/cr_input/cr_input.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c053c465ec33c946c23eab6d5fba6dad9e12c3a
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input.js
@@ -0,0 +1,129 @@
+/* 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
+ * 'cr-input` is a single-line text field for user input. It is a convenience

[Dan Beam, 2015/02/20 23:45:46]

why ' + ` ?

[Jeremy Klein, 2015/02/20 23:59:21]

Ha, good catch. The back ticks are totally copy-pasta. Changed to single-quotes
everywhere.

[michaelpg, 2015/02/21 00:13:07]

we've been using `s because the polymer doc generator interprets those as code,
markdown-style. But we don't use them in other chrome JS.

+ * element composed of a `paper-input-decorator` and a `input is="core-input".

[Dan Beam, 2015/02/20 23:45:46]

think you're missing a ` here

[Jeremy Klein, 2015/02/20 23:59:21]

Done.

+ *
+ * Example:
+ *
+ *    <cr-input></cr-input>
+ *
+ * @group Chrome Elements
+ * @element cr-input
+ */
+Polymer('cr-input', {
+  publish: {
+    /**
+     * The label for this input. It normally appears as grey text inside
+     * the text input and disappears once the user enters text.
+     *
+     * @attribute label
+     * @type string
+     * @default ''
+     */
+    label: '',
+
+    /**
+     * If true, the label will "float" above the text input once the
+     * user enters text instead of disappearing.
+     *
+     * @attribute floatingLabel
+     * @type boolean
+     * @default true

[Dan Beam, 2015/02/20 23:45:47]

why do we have all these duplicate @defaults?

[Jeremy Klein, 2015/02/20 23:59:21]

Yeah I also feel like this is excessive, but for the time being that's how the
docs are in polymer for the generator.

+ajo and +tjsavage for input on whether we can eliminate the @default docs for
0.8. I agree that they should totally be unnecessary.

[Jeremy Klein, 2015/02/21 00:15:37]

Just revisited the 0.8 primer (which seems to have changed a fair amount since I
last looked) and it looks like @default will go away then:

https://github.com/Polymer/polymer/blob/0.8-preview/PRIMER.md#configure-callback

Really the whole process by which these properties get declared and initialized
is changing so personally, I don't care whether we keep the @defaults now.
Anyone else have a strong opinion about this?

+     */
+    floatingLabel: true,
+
+    /**
+     * Set to true to style the element as disabled.
+     *
+     * @attribute disabled
+     * @type boolean
+     * @default false
+     */
+    disabled: {value: false, reflect: true},
+
+    /**
+     * Set to true to mark the input as required.
+     *
+     * @attribute required
+     * @type boolean
+     * @default false
+     */
+    required: {value: false, reflect: true},
+
+    /**
+     * The current value of the input.
+     *
+     * @attribute value
+     * @type string
+     * @default ''
+     */
+    value: '',
+
+    /**
+     * The validation pattern for the input.
+     *
+     * @attribute pattern
+     * @type string
+     * @default ''
+     */
+    pattern: '',
+
+    /**
+     * The type of the input (password, date, etc.).
+     *
+     * @attribute type
+     * @type string
+     * @default 'text'
+     */
+    type: 'text',
+
+    /**
+     * The message to display if the input value fails validation. If this
+     * is unset or the empty string, a default message is displayed depending
+     * on the type of validation error.
+     *
+     * @attribute error
+     * @type string

[Dan Beam, 2015/02/20 23:45:46]

why no @default?  or conversely, why not no @default everywhere? :P

[Jeremy Klein, 2015/02/20 23:59:21]

Done.

+     */
+    error: '',
+
+    /**
+     * The most recently committed value of the input.
+     *
+     * @attribute committedValue
+     * @type string
+     * @default ''
+     */
+    committedValue: ''
+  },
+
+  /**
+   * Focuses the `input`.
+   *
+   * @method focus

[Dan Beam, 2015/02/20 23:45:46]

useless

[Jeremy Klein, 2015/02/20 23:59:21]

Yeah I hate this doc. Removed for now since we don't seem to have it in other
elements, but cc-ing ajo@ to see if we actually need these too.

[michaelpg, 2015/02/21 00:13:07]

:-\ this indicates which methods are considered "public" (and show up in
core-doc-viewer)

we could use @private instead... but that would involve more work for
core-doc-viewer (context-free-parser)

+   */
+  focus: function() {
+    this.$.input.focus();
+  },
+
+  valueChanged: function() {
+    this.$.decorator.updateLabelVisibility(this.value);
+  },
+
+  patternChanged: function() {
+    if (this.pattern) {

[Dan Beam, 2015/02/20 23:45:46]

nit: most of webui has no curlies

[Jeremy Klein, 2015/02/20 23:59:21]

Done.

+      this.$.input.pattern = this.pattern;
+    } else {
+      this.$.input.removeAttribute('pattern');
+    }
+  },
+

[Dan Beam, 2015/02/20 23:45:46]

/** @override */ on all these?

[Jeremy Klein, 2015/02/20 23:59:21]

Done for ready. Not really sure what to put for the *Changed functions because
they aren't actually overriding anything. The doc would just be "called when
pattern changes", which I don't really think adds any value. WDYT?

+  ready: function() {
+    this.$.events.forward(this.$.input, ['change']);
+    this.patternChanged();
+  },
+});