Add a <cr-input> element to cr_elements.

BUG=

Review URL: https://codereview.chromium.org/918913002

Cr-Commit-Position: refs/heads/master@{#318662}

chrome/browser/resources/md_settings/md_settings.html

@@ -8,6 +8,7 @@
   <link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
+  <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
@@ -39,7 +40,7 @@
       </cr-dropdown-menu>
     </section>
     <section>
-      <h2>cr-collapse</h2>
+      <h3>cr-collapse</h3>
       <paper-button id="manage-button" raised onclick="toggleCollapse();">
         Toggle Collapse
       </paper-button>
@@ -52,6 +53,10 @@
       <cr-button>Flat button</cr-button>
       <cr-button raised>Raised Button</cr-button>
     </section>
+    <section>
+      <h3>cr-input</h3>
+      <cr-input label="Enter Something!"></cr-input>
+    </section>
   </div>
   <script>
     var collapse = document.getElementById('collapse');

ui/webui/resources/cr_elements/cr_input/cr_input.css

+/* 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. */
+
+:host {
+  display: inline-block;
+}

ui/webui/resources/cr_elements/cr_input/cr_input.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/paper-input/paper-input-decorator.html">
+<link rel="import" href="chrome://resources/polymer/core-input/core-input.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_events/cr_events.html">
+
+<polymer-element name="cr-input">
+  <template>
+    <link rel="stylesheet" href="cr_input.css">
+    <cr-events id="events"></cr-events>
+
+    <!-- TODO(jlklein): Use 'autoValidate' instead of isInvalid binding when
+         updated to 0.5.4. -->
+    <paper-input-decorator id="decorator" label="{{label}}"
+        floatingLabel="{{floatingLabel}}" value="{{value}}"
+        disabled?="{{disabled}}" error="{{error}}"
+        isInvalid="{{!$.input.validity.valid}}">
+      <input is="core-input" id="input" value="{{value}}"
+          committedValue="{{committedValue}}" disabled?="{{disabled}}"
+          required?="{{required}}" type="{{type}}">
+    </paper-input-decorator>
+  </template>
+  <script src="cr_input.js"></script>
+</polymer-element>

ui/webui/resources/cr_elements/cr_input/cr_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
+ * 'cr-input' is a single-line text field for user input. It is a convenience
+ * element composed of a 'paper-input-decorator' and a 'input is="core-input"'.
+ *
+ * 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
+     */
+    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
+     * @default ''
+     */
+    error: '',
+
+    /**
+     * The most recently committed value of the input.
+     *
+     * @attribute committedValue
+     * @type string
+     * @default ''
+     */
+    committedValue: ''
+  },
+
+  /**
+   * Focuses the 'input' element.
+   */
+  focus: function() {
+    this.$.input.focus();
+  },
+
+  valueChanged: function() {
+    this.$.decorator.updateLabelVisibility(this.value);
+  },
+
+  patternChanged: function() {
+    if (this.pattern)
+      this.$.input.pattern = this.pattern;
+    else
+      this.$.input.removeAttribute('pattern');
+  },
+
+  /** @override */
+  ready: function() {
+    this.$.events.forward(this.$.input, ['change']);
+    this.patternChanged();
+  },
+});

ui/webui/resources/cr_elements/cr_input/demo.html

+<!doctype html>
+<html>
+<head>
+  <link href="cr_input.html" rel="import">
+</head>
+<body unresolved>
+  <cr-input label="Blah"></cr-input>
+  <cr-input label="This is required" required error="Put something here!">
+  </cr-input>
+  <cr-input label="Only numbers" pattern="^[0-9]*$"
+      error="Only numbers allowed!"></cr-input>
+  <cr-input label="Password" type="password"></cr-input>
+</body>
+</html>

ui/webui/resources/cr_elements_resources.grdp

@@ -37,29 +37,38 @@
              file="../../webui/resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.js"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_CSS"
-             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.css" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.css"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_HTML"
-             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.html" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.html"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_JS"
-             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.js" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_network_icon/cr_network_icon.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_ONC_TYPES_JS"
-             file="../../webui/resources/cr_elements/cr_onc/cr_onc_types.js" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_onc/cr_onc_types.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_ONC_DATA_HTML"
-             file="../../webui/resources/cr_elements/cr_onc/cr_onc_data.html" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_onc/cr_onc_data.html"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_ONC_DATA_JS"
-             file="../../webui/resources/cr_elements/cr_onc/cr_onc_data.js" 
-             type="chrome_html" /> 
+             file="../../webui/resources/cr_elements/cr_onc/cr_onc_data.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_EVENTS_HTML"
              file="../../webui/resources/cr_elements/cr_events/cr_events.html"
              type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_EVENTS_JS"
              file="../../webui/resources/cr_elements/cr_events/cr_events.js"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_INPUT_CSS"
+             file="../../webui/resources/cr_elements/cr_input/cr_input.css"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_INPUT_HTML"
+             file="../../webui/resources/cr_elements/cr_input/cr_input.html"
+             type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_CR_INPUT_JS"
+             file="../../webui/resources/cr_elements/cr_input/cr_input.js"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_TOGGLE_BUTTON_CSS"
              file="../../webui/resources/cr_elements/cr_toggle_button/cr_toggle_button.css"
              type="chrome_html" />