Settings > network > update input and dialog style

This CL fixes a number of inconsistencies with input style and
overall dialog appearance.

Bug: 832177,829272
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Icb5bdd4245073d3c8db5100ebc3bca1a8b4f1b17
Reviewed-on: https://chromium-review.googlesource.com/1091166
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565643}

chrome/browser/resources/settings/internet_page/network_proxy_section.js

@@ -143,6 +143,6 @@ Polymer({
 
   /** @private */
   onAllowSharedDialogClose_: function() {
-    cr.ui.focusWithoutInk(assert(this.$$('#allowShared')));
+    this.$.allowShared.focus();
   },
 });

ui/webui/resources/cr_components/chromeos/network/BUILD.gn

@@ -9,10 +9,10 @@ js_type_check("closure_compile") {
     ":network_apnlist",
     ":network_choose_mobile",
     ":network_config",
-    ":network_config_input",
     ":network_config_select",
     ":network_ip_config",
     ":network_nameservers",
+    ":network_password_input",
     ":network_property_list",
     ":network_proxy",
     ":network_proxy_exclusions",
@@ -48,12 +48,6 @@ js_library("network_config") {
   extra_sources = [ "$interfaces_path/networking_private_interface.js" ]
 }
 
-js_library("network_config_input") {
-  deps = [
-    "//ui/webui/resources/js:i18n_behavior",
-  ]
-}
-
 js_library("network_config_select") {
   deps = [
     "//ui/webui/resources/js:assert",
@@ -77,6 +71,12 @@ js_library("network_nameservers") {
   ]
 }
 
+js_library("network_password_input") {
+  deps = [
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
 js_library("network_property_list") {
   deps = [
     "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
@@ -107,7 +107,6 @@ js_library("network_proxy_exclusions") {
 
 js_library("network_siminfo") {
   deps = [
-    "//third_party/polymer/v1_0/components-chromium/paper-input:paper-input-extracted",
     "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:i18n_behavior",

ui/webui/resources/cr_components/chromeos/network/compiled_resources2.gyp

@@ -33,13 +33,6 @@
       ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
-    {
-      'target_name': 'network_config_input',
-      'dependencies': [
-        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
-      ],
-      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
-    },
     {
       'target_name': 'network_config_select',
       'dependencies': [
@@ -66,6 +59,13 @@
       ],
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'network_password_input',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'network_property_list',
       'dependencies': [
@@ -101,7 +101,6 @@
     {
       'target_name': 'network_siminfo',
       'dependencies': [
-        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
         '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/network/compiled_resources2.gyp:cr_onc_types',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',

ui/webui/resources/cr_components/chromeos/network/network_config.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="network_shared_css.html">
-<link rel="import" href="network_config_input.html">
+<link rel="import" href="network_password_input.html">
 <link rel="import" href="network_config_select.html">
 
 <dom-module id="network-config">
@@ -16,9 +17,9 @@
 
     <!-- SSID (WiFi) -->
     <template is="dom-if" if="[[isType_(NetworkType_.WI_FI, type)]]" restamp>
-      <network-config-input id="ssid" label="[[i18n('OncWiFi-SSID')]]"
+      <cr-input id="ssid" label="[[i18n('OncWiFi-SSID')]]"
           value="{{configProperties_.WiFi.SSID}}" disabled="[[hasGuid_(guid)]]">
-      </network-config-input>
+      </cr-input>
     </template>
 
     <!-- Security (WiFi and Ethernet) -->
@@ -34,51 +35,51 @@
     <!-- Passphrase (WiFi) -->
     <template is="dom-if" if="[[configRequiresPassphrase_(type, security_)]]"
         restamp>
-      <network-config-input label="[[i18n('OncWiFi-Passphrase')]]"
-          value="{{configProperties_.WiFi.Passphrase}}" password>
+      <network-password-input label="[[i18n('OncWiFi-Passphrase')]]"
+          value="{{configProperties_.WiFi.Passphrase}}">
         <iron-a11y-keys keys="enter" on-keys-pressed="connectIfConfigured_">
         </iron-a11y-keys>
-      </network-config-input>
+      </network-password-input>
     </template>
 
     <!-- VPN -->
     <template is="dom-if" if="[[showVpn_]]" restamp>
-      <network-config-input label="[[i18n('OncVPN-Host')]]"
+      <cr-input label="[[i18n('OncVPN-Host')]]"
           value="{{configProperties_.VPN.Host}}">
-      </network-config-input>
-      <network-config-input label="[[i18n('OncName')]]"
+      </cr-input>
+      <cr-input label="[[i18n('OncName')]]"
           value="{{configProperties_.Name}}" disabled="[[hasGuid_(guid)]]">
-      </network-config-input>
+      </cr-input>
       <network-config-select id="outer" label="[[i18n('OncVPN-Type')]]"
           value="{{vpnType_}}" items="[[vpnTypeItems_]]"
           onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]">
       </network-config-select>
       <template is="dom-if" if="[[!showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-L2TP-Username')]]"
+        <cr-input label="[[i18n('OncVPN-L2TP-Username')]]"
             value="{{configProperties_.VPN.L2TP.Username}}">
-        </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-L2TP-Password')]]"
-            value="{{configProperties_.VPN.L2TP.Password}}" password>
-        </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-IPsec-Group')]]"
+        </cr-input>
+        <network-password-input label="[[i18n('OncVPN-L2TP-Password')]]"
+            value="{{configProperties_.VPN.L2TP.Password}}">
+        </network-password-input>
+        <cr-input label="[[i18n('OncVPN-IPsec-Group')]]"
             value="{{configProperties_.VPN.IPsec.Group}}">
-        </network-config-input>
+        </cr-input>
         <template is="dom-if" if="[[!showVpn_.Cert]]">
-          <network-config-input label="[[i18n('OncVPN-IPsec-PSK')]]"
-              value="{{configProperties_.VPN.IPsec.PSK}}" password>
-          </network-config-input>
+          <network-password-input label="[[i18n('OncVPN-IPsec-PSK')]]"
+              value="{{configProperties_.VPN.IPsec.PSK}}">
+          </network-password-input>
         </template>
       </template>
       <template is="dom-if" if="[[showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-OpenVPN-Username')]]"
+        <cr-input label="[[i18n('OncVPN-OpenVPN-Username')]]"
             value="{{configProperties_.VPN.OpenVPN.Username}}">
-        </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-OpenVPN-Password')]]"
-            value="{{configProperties_.VPN.OpenVPN.Password}}" password>
-        </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-OpenVPN-OTP')]]"
+        </cr-input>
+        <network-password-input label="[[i18n('OncVPN-OpenVPN-Password')]]"
+            value="{{configProperties_.VPN.OpenVPN.Password}}">
+        </network-password-input>
+        <cr-input label="[[i18n('OncVPN-OpenVPN-OTP')]]"
             value="{{configProperties_.VPN.OpenVPN.OTP}}">
-        </network-config-input>
+        </cr-input>
       </template>
       <template is="dom-if" if="[[showVpn_.Cert]]">
         <network-config-select id="vpnServerCa"
@@ -117,25 +118,24 @@
           value="{{selectedServerCaHash_}}" items="[[serverCaCerts_]]"
           hidden="[[!showEap_.ServerCA]]" cert-list>
       </network-config-select>
-      <network-config-input label="[[i18n('OncEAP-SubjectMatch')]]"
+      <cr-input label="[[i18n('OncEAP-SubjectMatch')]]"
           value="{{eapProperties_.SubjectMatch}}"
           hidden="[[!showEap_.SubjectMatch]]">
-      </network-config-input>
+      </cr-input>
       <network-config-select id="userCert" label="[[i18n('OncEAP-UserCert')]]"
           value="{{selectedUserCertHash_}}" items="[[userCerts_]]"
           hidden="[[!showEap_.UserCert]]" cert-list>
       </network-config-select>
-      <network-config-input label="[[i18n('OncEAP-Identity')]]"
+      <cr-input label="[[i18n('OncEAP-Identity')]]"
           value="{{eapProperties_.Identity}}" hidden="[[!showEap_.Identity]]">
-      </network-config-input>
-      <network-config-input label="[[i18n('OncEAP-Password')]]"
-          value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]"
-          password>
-      </network-config-input>
-      <network-config-input label="[[i18n('OncEAP-AnonymousIdentity')]]"
+      </cr-input>
+      <network-password-input label="[[i18n('OncEAP-Password')]]"
+          value="{{eapProperties_.Password}}" hidden="[[!showEap_.Password]]">
+      </network-password-input>
+      <cr-input label="[[i18n('OncEAP-AnonymousIdentity')]]"
           value="{{eapProperties_.AnonymousIdentity}}"
           hidden="[[!showEap_.AnonymousIdentity]]">
-      </network-config-input>
+      </cr-input>
       <div class="property-box">
         <div id="eapSaveCredentialsLabel" class="start">
           [[i18n('networkConfigSaveCredentials')]]

ui/webui/resources/cr_components/chromeos/network/network_config.js

@@ -405,7 +405,8 @@ Polymer({
   focusFirstInput_: function() {
     Polymer.dom.flush();
     var e = this.$$(
-        'network-config-input:not([disabled]),' +
+        'cr-input:not([disabled]),' +
+        'network-password-input:not([disabled]),' +
         'network-config-select:not([disabled])');
     if (e)
       e.focus();

ui/webui/resources/cr_components/chromeos/network/network_config_input.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
-<link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
-<link rel="import" href="network_shared_css.html">
-
-<dom-module id="network-config-input">
-  <template>
-    <style include="network-shared">
-      paper-input-container {
-        --paper-input-container-color: var(--secondary-text-color);
-        --paper-input-container-focus-color: var(--secondary-text-color);
-        --paper-input-container-input-color: var(--primary-text-color);
-        flex: 1;
-      }
-
-      #iconDiv {
-        -webkit-margin-start: var(--cr-icon-button-margin-start);
-        justify-content: center;
-        width: var(--network-control-margin);
-      }
-
-      #iconDiv paper-icon-button-light {
-        margin: 0;
-      }
-    </style>
-
-    <div class="control-box">
-      <paper-input-container always-float-label>
-        <label id="label" slot="label">[[label]]</label>
-        <iron-input slot="input" bind-value="{{value}}">
-          <input tabindex="1" disabled="[[disabled]]" aria-label$="[[label]]"
-              value="{{value::input}}"
-              type="[[getInputType_(password, showPassword)]]">
-        </iron-input>
-      </paper-input-container>
-      <div id="iconDiv">
-        <template is="dom-if" if="[[password]]">
-          <paper-icon-button-light class$="[[getIconClass_(showPassword)]]">
-            <button on-tap="onShowPasswordTap_"
-                title="[[getShowPasswordTitle_(showPassword)]]">
-            </button>
-          </paper-icon-button-light>
-        </template>
-      </div>
-    </div>
-  </template>
-  <script src="network_config_input.js"></script>
-</dom-module>

ui/webui/resources/cr_components/chromeos/network/network_config_select.html

@@ -5,25 +5,26 @@
 <dom-module id="network-config-select">
   <template>
     <style include="network-shared md-select">
-      #label {
-        color: var(--secondary-text-color);
-      }
-
       .md-select {
         color: var(--primary-text-color);
         width: 100%;
       }
 
-      .control-box {
-        -webkit-padding-end: calc(var(--network-control-margin) +
-            var(--cr-icon-button-margin-start));
+      #label {
+        @apply --cr-form-field-label;
+      }
+
+      #outer {
         align-items: stretch;
+        display: flex;
         flex-direction: column;
         justify-content: center;
+        margin-bottom: var(--cr-form-field-bottom-spacing);
+        padding: 0;
       }
     </style>
 
-    <div class="control-box">
+    <div id="outer">
       <div id="label">[[label]]</div>
       <select class="md-select" disabled="[[disabled]]"
           value="{{value::change}}" aria-label$="[[label]]">

ui/webui/resources/cr_components/chromeos/network/network_ip_config.html

@@ -20,7 +20,7 @@
     </div>
     <template is="dom-if" if="[[hasIpConfigFields_(ipConfig_)]]">
       <div class="property-box single-column indented stretch">
-        <network-property-list
+        <network-property-list editable
             fields="[[ipConfigFields_]]" property-dict="[[ipConfig_]]"
             edit-field-types="[[getIPEditFields_(editable, automatic_)]]"
             on-property-change="onIPChange_">

ui/webui/resources/cr_components/chromeos/network/network_nameservers.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="network_shared_css.html">
 
@@ -17,10 +16,10 @@
         -webkit-margin-start: 4px;
       }
 
-      paper-input-container {
+      cr-input {
         /* Aligns with the start of cr-radio-button's text. */
         -webkit-margin-start: 38px;
-        height: 36px;
+        margin-bottom: 4px;
       }
 
       paper-radio-group {
@@ -85,12 +84,10 @@
             'custom')]]">
           <div class="property-box single-column two-line">
             <template is="dom-repeat" items="[[nameservers_]]">
-              <paper-input-container no-label-float>
-                <iron-input slot="input" bind-value="[[item]]">
-                  <input id="nameserver[[index]]" on-change="onValueChange_"
-                      disabled="[[!canEdit_(editable, nameserversType_)]]">
-                </iron-input>
-              </paper-input-container>
+              <cr-input id="nameserver[[index]]" value="[[item]]"
+                  on-change="onValueChange_"
+                  disabled="[[!canEdit_(editable, nameserversType_)]]">
+              </cr-input>
             </template>
           </div>
         </template>

ui/webui/resources/cr_components/chromeos/network/network_password_input.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<link rel="import" href="network_shared_css.html">
+
+<dom-module id="network-password-input">
+  <template>
+    <style include="network-shared">
+      cr-input {
+        width: 100%;
+      }
+
+      paper-icon-button-light {
+        margin: 0;
+        width: var(--network-control-margin);
+      }
+    </style>
+
+    <cr-input label="[[label]]" value="{{value}}" disabled="[[disabled]]"
+        type="[[getInputType_(showPassword)]]">
+      <paper-icon-button-light id="icon" slot="suffix"
+          class$="[[getIconClass_(showPassword)]]">
+        <button on-tap="onShowPasswordTap_"
+            title="[[getShowPasswordTitle_(showPassword)]]">
+        </button>
+      </paper-icon-button-light>
+    </cr-input>
+  </template>
+  <script src="network_password_input.js"></script>
+</dom-module>

ui/webui/resources/cr_components/chromeos/network/network_config_input.js → ui/webui/resources/cr_components/chromeos/network/network_password_input.js

@@ -3,15 +3,18 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview Polymer element for network configuration input fields.
+ * @fileoverview Polymer element for network password input fields.
  */
 Polymer({
-  is: 'network-config-input',
+  is: 'network-password-input',
 
   behaviors: [I18nBehavior],
 
   properties: {
-    label: String,
+    label: {
+      type: String,
+      reflectToAttribute: true,
+    },
 
     disabled: {
       type: Boolean,
@@ -23,8 +26,6 @@ Polymer({
       notify: true,
     },
 
-    password: Boolean,
-
     showPassword: {
       type: Boolean,
       value: false,
@@ -32,7 +33,7 @@ Polymer({
   },
 
   focus: function() {
-    this.$$('input').focus();
+    this.$$('cr-input').focus();
   },
 
   /**
@@ -40,7 +41,7 @@ Polymer({
    * @private
    */
   getInputType_: function() {
-    return (this.password && !this.showPassword) ? 'password' : 'text';
+    return this.showPassword ? 'text' : 'password';
   },
 
   /**

ui/webui/resources/cr_components/chromeos/network/network_property_list.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="network_shared_css.html">
 
 <dom-module id="network-property-list">
@@ -17,6 +16,10 @@
         padding: 0;
       }
 
+      cr-input[readonly] {
+        --cr-input-background: transparent;
+      }
+
       cr-policy-network-indicator {
         -webkit-margin-start: var(--settings-controlled-by-spacing);
       }
@@ -28,7 +31,7 @@
         <div class="layout horizontal center">
           <div>[[getPropertyLabel_(item, prefix)]]</div>
           <template is="dom-if" restamp
-              if="[[isEditTypeAny_(item, editFieldTypes)]]">
+              if="[[isEditType_(item, editFieldTypes)]]">
             <cr-policy-network-indicator
                 property="[[getProperty_(item, propertyDict)]]">
             </cr-policy-network-indicator>
@@ -36,23 +39,21 @@
         </div>
         <!-- Uneditable property value -->
         <template is="dom-if" restamp
-            if="[[!isEditable_(item, propertyDict, editFieldTypes)]]">
+            if="[[!showEditable_(item, propertyDict, editFieldTypes)]]">
           <div class="secondary">
             [[getPropertyValue_(item, prefix, propertyDict)]]
           </div>
         </template>
-        <!-- Editable String property value -->
+        <!-- Editable property value -->
         <template is="dom-if" restamp
-            if="[[isEditTypeInput_(item, propertyDict, editFieldTypes)]]">
-          <paper-input-container no-label-float>
-            <iron-input slot="input"
-                bind-value="[[getPropertyValue_(item, prefix, propertyDict)]]">
-              <input id="[[item]]" on-change="onValueChange_"
-                  type="[[getEditInputType_(item, editFieldTypes)]]">
-            </iron-input>
-          </paper-input-container>
+            if="[[showEditable_(item, propertyDict, editFieldTypes)]]">
+          <cr-input id="[[item]]"
+              readonly="[[!isEditable_(item, propertyDict, editFieldTypes)]]"
+              value="[[getPropertyValue_(item, prefix, propertyDict)]]"
+              on-change="onValueChange_"
+              type="[[getEditInputType_(item, editFieldTypes)]]">
+          </cr-input>
         </template>
-        <!-- TODO(stevenjb): Support other types (number, boolean)? -->
       </div>
     </template>
   </template>

ui/webui/resources/cr_components/chromeos/network/network_property_list.js

@@ -13,6 +13,16 @@ Polymer({
   behaviors: [I18nBehavior, CrPolicyNetworkBehavior],
 
   properties: {
+    /**
+     * If true, all fields are shown as editable. Fields without an edit type
+     * or that are policy enforced will be shown as 'readonly'. Used for lists
+     * with dynamic edit types (e.g. network-ip-config).
+     */
+    editable: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The dictionary containing the properties to display.
      * @type {!Object|undefined}
@@ -38,7 +48,6 @@ Polymer({
      *       separated list of strings.
      *   'Password' - A string with input type = password.
      *   TODO(stevenjb): Support types with custom validation, e.g. IPAddress.
-     *   TODO(stevenjb): Support 'Number'.
      * When a field changes, the 'property-change' event will be fired with
      * the field name and the new value provided in the event detail.
      */
@@ -140,11 +149,13 @@ Polymer({
   /**
    * @param {string} key The property key.
    * @param {!Object} editFieldTypes
-   * @return {boolean}
+   * @return {boolean} True if the edit type for the key is a valid type.
    * @private
    */
-  isEditTypeAny_: function(key, editFieldTypes) {
-    return editFieldTypes[key] !== undefined;
+  isEditType_: function(key, editFieldTypes) {
+    var editType = editFieldTypes[key];
+    return editType == 'String' || editType == 'StringArray' ||
+        editType == 'Password';
   },
 
   /**
@@ -154,35 +165,30 @@ Polymer({
    * @return {boolean}
    * @private
    */
-  isEditTypeInput_: function(key, propertyDict, editFieldTypes) {
-    if (!this.isPropertyEditable_(key, propertyDict))
-      return false;
-    var editType = editFieldTypes[key];
-    return editType == 'String' || editType == 'StringArray' ||
-        editType == 'Password';
+  isEditable_: function(key, propertyDict, editFieldTypes) {
+    return this.isEditType_(key, editFieldTypes) &&
+        this.isPropertyEditable_(key, propertyDict);
   },
 
   /**
    * @param {string} key The property key.
+   * @param {!Object} propertyDict
    * @param {!Object} editFieldTypes
-   * @return {string}
+   * @return {boolean}
    * @private
    */
-  getEditInputType_: function(key, editFieldTypes) {
-    return editFieldTypes[key] == 'Password' ? 'password' : 'text';
+  showEditable_: function(key, propertyDict, editFieldTypes) {
+    return this.isEditable_(key, propertyDict, editFieldTypes) || this.editable;
   },
 
   /**
    * @param {string} key The property key.
-   * @param {!Object} propertyDict
    * @param {!Object} editFieldTypes
-   * @return {boolean}
+   * @return {string}
    * @private
    */
-  isEditable_: function(key, propertyDict, editFieldTypes) {
-    if (!this.isPropertyEditable_(key, propertyDict))
-      return false;
-    return this.isEditTypeAny_(key, editFieldTypes);
+  getEditInputType_: function(key, editFieldTypes) {
+    return editFieldTypes[key] == 'Password' ? 'password' : 'text';
   },
 
   /**

ui/webui/resources/cr_components/chromeos/network/network_proxy.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
@@ -11,8 +12,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="network_proxy_exclusions.html">
 <link rel="import" href="network_proxy_input.html">
 <link rel="import" href="network_shared_css.html">
@@ -28,6 +27,14 @@
         margin: 10px 0;
       }
 
+      #addException {
+        margin-top: 8px;
+      }
+
+      #addException cr-input {
+        margin-bottom: 0;
+      }
+
       #manualProxy {
         -webkit-padding-start: var(--cr-section-padding);
       }
@@ -50,12 +57,12 @@
     <!-- Autoconfiguration (PAC) -->
     <div class="property-box indented"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.PAC)]]">
-      <div>[[i18n('networkProxyAutoConfig')]]</div>
-      <paper-input id="pacInput" no-label-float class="middle"
+      <cr-input id="pacInput" class="flex"
+          label="[[i18n('networkProxyAutoConfig')]]"
           value="{{proxy_.PAC}}" on-change="onPACChange_"
           disabled="[[!isEditable_('PAC', networkProperties, editable,
               useSharedProxies)]]">
-      </paper-input>
+      </cr-input>
     </div>
 
     <!-- Web Proxy Auto Discovery (WPAD) -->
@@ -128,15 +135,12 @@
             editable="[[isEditable_('ExcludeDomains', networkProperties,
                 editable, useSharedProxies)]]">
         </network-proxy-exclusions>
-        <div class="layout horizontal">
-          <paper-input-container no-label-float class="flex">
-            <iron-input slot="input">
-              <input id="proxyExclusion">
-            </iron-input>
-            <iron-a11y-keys keys="enter" slot="add-on"
+        <div id="addException" class="layout horizontal center">
+          <cr-input id="proxyExclusion" class="flex">
+            <iron-a11y-keys keys="enter"
                 on-keys-pressed="onAddProxyExclusionTap_">
             </iron-a11y-keys>
-          </paper-input-container>
+          </cr-input>
           <paper-button on-tap="onAddProxyExclusionTap_">
             [[i18n('networkProxyAddException')]]
           </paper-button>

ui/webui/resources/cr_components/chromeos/network/network_proxy_input.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="network_shared_css.html">
 
 <dom-module id="network-proxy-input">
   <template>
     <style include="network-shared">
-      paper-input-container {
-        -webkit-margin-start: 10px;
+      cr-input {
+        margin: 0 var(--cr-button-edge-spacing);
       }
 
       #container {
@@ -33,17 +32,13 @@
     </style>
     <div id="container">
       <div id="label">[[label]]</div>
-      <paper-input-container id="host" no-label-float disabled$="[[!editable]]">
-        <iron-input slot="input" bind-value="{{value.Host}}">
-          <input disabled$="[[!editable]]" on-change="onValueChange_">
-        </iron-input>
-      </paper-input-container>
+      <cr-input id="host" readonly="[[!editable]]" value="{{value.Host}}"
+          on-change="onValueChange_">
+      </cr-input>
       <div>[[i18n('networkProxyPort')]]</div>
-      <paper-input-container id="port" no-label-float disabled$="[[!editable]]">
-        <iron-input slot="input" bind-value="{{value.Port}}">
-          <input disabled$="[[!editable]]" on-change="onValueChange_">
-        </iron-input>
-      </paper-input-container>
+      <cr-input id="port" readonly="[[!editable]]" value="{{value.Port}}"
+          on-change="onValueChange_">
+      </cr-input>
     </div>
   </template>
   <script src="network_proxy_input.js"></script>

ui/webui/resources/cr_components/chromeos/network/network_proxy_input.js

@@ -44,7 +44,7 @@ Polymer({
   },
 
   focus: function() {
-    this.$$('input').focus();
+    this.$$('cr-input').focus();
   },
 
   /**

ui/webui/resources/cr_components/chromeos/network/network_shared_css.html

@@ -10,13 +10,6 @@
         --network-control-margin: 40px;
       }
 
-      .control-box {
-        align-items: center;
-        display: flex;
-        height: 58px;  /* Matches height of paper-input */
-        padding: 0;
-      }
-
       .property-box {
         @apply --cr-section;
         border-top: none;
@@ -61,23 +54,9 @@
         @apply --cr-secondary-text;
       }
 
-      paper-input-container {
-        --paper-input-container-input: {
-          color: var(--paper-grey-600);
-          font-size: inherit;
-          font-weight: 400;
-        };
-        --paper-input-container-input-color: var(--secondary-text-color);
-        margin-bottom: -12px;
-        margin-top: -10px;
-        width: 250px;
-      }
-
-      iron-input input {
-        @apply --paper-input-container-shared-input-style;
-        @apply --cr-secondary-text;
-        font-size: inherit;
-        line-height: inherit;
+      cr-input {
+        --cr-input-error-display: none;
+        margin-bottom: var(--cr-form-field-bottom-spacing);
       }
     </style>
   </template>

ui/webui/resources/cr_components/chromeos/network/network_siminfo.html

@@ -12,7 +12,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="network_config_input.html">
+<link rel="import" href="network_password_input.html">
 <link rel="import" href="network_shared_css.html">
 
 <dom-module id="network-siminfo">
@@ -95,16 +95,19 @@
         on-close="onEnterPinDialogClose_">
       <div slot="title">[[i18n('networkSimEnterPinTitle')]]</div>
       <div slot="body">
-        <network-config-input id="enterPin" password
+        <network-password-input id="enterPin"
             label="[[i18n('networkSimEnterPin')]]">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendEnterPin_">
           </iron-a11y-keys>
-        </network-config-input>
+        </network-password-input>
         <div class="dialog-error">
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
       <div slot="button-container">
+        <paper-button class="cancel-button" on-tap="closeDialogs_">
+          [[i18n('cancel')]]
+        </paper-button>
         <paper-button on-tap="sendEnterPin_" disabled="[[inProgress_]]">
           [[i18n('networkSimEnter')]]
         </paper-button>
@@ -116,22 +119,25 @@
         on-close="onChangePinDialogClose_">
       <div slot="title">[[i18n('networkSimChangePinTitle')]]</div>
       <div slot="body">
-        <network-config-input id="changePinOld" password
+        <network-password-input id="changePinOld"
             label="[[i18n('networkSimEnterOldPin')]]">
-        </network-config-input>
-        <network-config-input id="changePinNew1" password
+        </network-password-input>
+        <network-password-input id="changePinNew1"
             label="[[i18n('networkSimEnterNewPin')]]">
-        </network-config-input>
-        <network-config-input id="changePinNew2" password
+        </network-password-input>
+        <network-password-input id="changePinNew2"
             label="[[i18n('networkSimReEnterNewPin')]]">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendChangePin_">
           </iron-a11y-keys>
-        </network-config-input>
+        </network-password-input>
         <div class="dialog-error">
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
       <div slot="button-container">
+        <paper-button class="cancel-button" on-tap="closeDialogs_">
+          [[i18n('cancel')]]
+        </paper-button>
         <paper-button class="action-button" on-tap="sendChangePin_"
             disabled="[[inProgress_]]">
           [[i18n('networkSimChange')]]
@@ -144,16 +150,19 @@
         on-close="onUnlockPinDialogClose_">
       <div slot="title">[[i18n('networkSimLockedTitle')]]</div>
       <div slot="body">
-        <network-config-input id="unlockPin" password
+        <network-password-input id="unlockPin"
             label="[[i18n('networkSimEnterPin')]]">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendUnlockPin_">
           </iron-a11y-keys>
-        </network-config-input>
+        </network-password-input>
         <div class="dialog-error">
           [[getErrorMsg_(error_, networkProperties)]]
         </div>
       </div>
       <div slot="button-container">
+        <paper-button class="cancel-button" on-tap="closeDialogs_">
+          [[i18n('cancel')]]
+        </paper-button>
         <paper-button on-tap="sendUnlockPin_" disabled="[[inProgress_]]">
           [[i18n('networkSimUnlock')]]
         </paper-button>
@@ -168,17 +177,17 @@
         <div>
           Enter the 8-digit PIN Unblocking Key provided by your carrier
         </div>
-        <network-config-input id="unlockPuk" password
+        <network-password-input id="unlockPuk"
             label="[[i18n('networkSimEnterPuk')]]">
-        </network-config-input>
-        <network-config-input id="unlockPin1" password
+        </network-password-input>
+        <network-password-input id="unlockPin1"
             label="[[i18n('networkSimEnterNewPin')]]">
-        </network-config-input>
-        <network-config-input id="unlockPin2" password
+        </network-password-input>
+        <network-password-input id="unlockPin2"
             label="[[i18n('networkSimReEnterNewPin')]]">
           <iron-a11y-keys keys="enter" on-keys-pressed="sendUnlockPuk_">
           </iron-a11y-keys>
-        </network-config-input>
+        </network-password-input>
         <div class="dialog-error">
           [[i18n('networkSimLockedWarning')]]
         </div>
@@ -187,6 +196,9 @@
         </div>
       </div>
       <div slot="button-container">
+        <paper-button class="cancel-button" on-tap="closeDialogs_">
+          [[i18n('cancel')]]
+        </paper-button>
         <paper-button on-tap="sendUnlockPuk_" disabled="[[inProgress_]]">
           [[i18n('networkSimUnlock')]]
         </paper-button>

ui/webui/resources/cr_components/chromeos/network/network_siminfo.js

@@ -90,8 +90,15 @@ Polymer({
 
   /** @override */
   detached: function() {
-    if (this.$.enterPinDialog.open)
+    this.closeDialogs_();
+  },
+
+  /** @private */
+  closeDialogs_: function() {
+    if (this.$.enterPinDialog.open) {
+      this.onEnterPinDialogCancel_();
       this.$.enterPinDialog.close();
+    }
     if (this.$.changePinDialog.open)
       this.$.changePinDialog.close();
     if (this.$.unlockPinDialog.open)
@@ -215,7 +222,7 @@ Polymer({
       this.inProgress_ = false;
       if (chrome.runtime.lastError) {
         this.error_ = ErrorType.INCORRECT_PIN;
-        this.$.enterPin.inputElement.select();
+        this.$.enterPin.focus();
       } else {
         this.error_ = ErrorType.NONE;
         this.$.enterPinDialog.close();
@@ -265,7 +272,7 @@ Polymer({
       this.inProgress_ = false;
       if (chrome.runtime.lastError) {
         this.error_ = ErrorType.INCORRECT_PIN;
-        this.$.changePinOld.inputElement.select();
+        this.$.changePinOld.focus();
       } else {
         this.error_ = ErrorType.NONE;
         this.$.changePinDialog.close();
@@ -305,7 +312,7 @@ Polymer({
       this.inProgress_ = false;
       if (chrome.runtime.lastError) {
         this.error_ = ErrorType.INCORRECT_PIN;
-        this.$.unlockPin.inputElement.select();
+        this.$.unlockPin.focus();
       } else {
         this.error_ = ErrorType.NONE;
         this.$.unlockPinDialog.close();
@@ -356,7 +363,7 @@ Polymer({
       this.inProgress_ = false;
       if (chrome.runtime.lastError) {
         this.error_ = ErrorType.INCORRECT_PUK;
-        this.$.unlockPuk.inputElement.select();
+        this.$.unlockPuk.focus();
       } else {
         this.error_ = ErrorType.NONE;
         this.$.unlockPukDialog.close();

ui/webui/resources/cr_components/cr_components_resources.grdp

@@ -131,14 +131,6 @@
                file="cr_components/chromeos/network/network_config.js"
                type="chrome_html"
                compress="gzip" />
-    <structure name="IDR_WEBUI_CHROMEOS__NETWORK_CONFIG_INPUT_HTML"
-               file="cr_components/chromeos/network/network_config_input.html"
-               type="chrome_html"
-               compress="gzip" />
-    <structure name="IDR_WEBUI_CHROMEOS__NETWORK_CONFIG_INPUT_JS"
-               file="cr_components/chromeos/network/network_config_input.js"
-               type="chrome_html"
-               compress="gzip" />
     <structure name="IDR_WEBUI_CHROMEOS__NETWORK_CONFIG_SELECT_HTML"
                file="cr_components/chromeos/network/network_config_select.html"
                type="chrome_html"
@@ -163,6 +155,14 @@
                file="cr_components/chromeos/network/network_nameservers.js"
                type="chrome_html"
                compress="gzip" />
+    <structure name="IDR_WEBUI_CHROMEOS__NETWORK_PASSWORD_INPUT_HTML"
+               file="cr_components/chromeos/network/network_password_input.html"
+               type="chrome_html"
+               compress="gzip" />
+    <structure name="IDR_WEBUI_CHROMEOS__NETWORK_PASSWORD_INPUT_JS"
+               file="cr_components/chromeos/network/network_password_input.js"
+               type="chrome_html"
+               compress="gzip" />
     <structure name="IDR_WEBUI_CHROMEOS_NETWORK_PROPERTY_LIST_HTML"
                file="cr_components/chromeos/network/network_property_list.html"
                type="chrome_html"

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

@@ -26,6 +26,7 @@
       */
 
       :host {
+        --cr-input-background: var(--google-grey-refresh-100);
         --cr-input-error-color: var(--google-red-600);
         --cr-input-focus-color: var(--google-blue-600);
         display: block;
@@ -60,7 +61,7 @@
 
       input {
         -webkit-appearance: none;
-        background: var(--google-grey-refresh-100);
+        background: var(--cr-input-background);
         border: none;
         box-sizing: border-box;
         caret-color: var(--cr-input-focus-color);