WebUI: Update Polymer iron-input version 1.0.10 -> 2.1.3

Bug: 812926
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ieb2e6910fdfb52edd377dfee3e645b34ec267699
Reviewed-on: https://chromium-review.googlesource.com/1015644
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557077}

chrome/browser/resources/chromeos/login/gaia_input.css

@@ -26,6 +26,10 @@ paper-input-container > label > span {
   color: rgba(0, 0, 0, 0.54);
 }
 
+iron-input input {
+  @apply --paper-input-container-shared-input-style;
+}
+
 :host-context(html[dir=rtl]) input {
   flex-direction: row-reverse;
 }

chrome/browser/resources/chromeos/login/gaia_input.html

@@ -44,10 +44,13 @@
     <paper-input-container id="decorator" on-tap="onTap"
         invalid="[[isInvalid]]" disabled$="[[disabled]]">
       <label slot="label"><span>[[label]]</span></label>
-      <input id="input" is="iron-input" on-keydown="onKeyDown"
-          bind-value="{{value}}" invalid="[[isInvalid]]" slot="input"
+      <iron-input id="ironInput" slot="input" class="flex"
+          bind-value="{{value}}">
+        <input id="input" on-keydown="onKeyDown"
+          value="{{value::input}}" invalid="[[isInvalid]]"
           required$="[[required]]" disabled$="[[disabled]]"
-          pattern$="[[pattern]]" class="flex">
+          pattern$="[[pattern]]">
+      </iron-input>
       <span id="domainLabel" slot="suffix">[[domain]]</span>
       <template is="dom-if" if="[[error]]">
         <paper-input-error slot="add-on">[[error]]</paper-input-error>

chrome/browser/resources/chromeos/login/gaia_input.js

@@ -49,7 +49,7 @@ Polymer((function() {
     },
 
     checkValidity: function() {
-      var valid = this.$.input.validate();
+      var valid = this.$.ironInput.validate();
       this.isInvalid = !valid;
       return valid;
     },

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html

@@ -61,11 +61,17 @@
       #pagelength {
         font-size: 0.81rem;
       }
+
+      iron-input input {
+        @apply --paper-input-container-shared-input-style;
+      }
     </style>
     <paper-input-container id="pageselector" no-label-float>
-      <input id="input" is="iron-input" value="{{pageNo}}" slot="input"
-          prevent-invalid-input allowed-pattern="\d" on-mouseup="select"
-          on-change="pageNoCommitted" aria-label$="{{strings.labelPageNumber}}">
+      <iron-input slot="input" bind-value="[[pageNo]]" allowed-pattern="\d">
+        <input id="input" prevent-invalid-input value="{{value::input}}"
+            on-mouseup="select" on-change="pageNoCommitted"
+            aria-label$="{{strings.labelPageNumber}}">
+      </iron-input>
     </paper-input-container>
     <span id="slash"> / </span>
     <span id="pagelength-spacer">

chrome/browser/resources/settings/people_page/password_prompt_dialog.js

@@ -118,7 +118,7 @@ Polymer({
         // Select the whole password if user entered an incorrect password.
         // Return focus to the password input if it lost focus while being
         // checked (user pressed confirm button).
-        this.$.passwordInput.inputElement.select();
+        this.$.passwordInput.inputElement.inputElement.select();
         if (!this.$.passwordInput.focused)
           this.$.passwordInput.focus();
         return;

chrome/browser/resources/settings/people_page/sync_page.js

@@ -265,7 +265,7 @@ Polymer({
       listenOnce(document, 'show-container', () => {
         const input = /** @type {!PaperInputElement} */ (
             this.$$('#existingPassphraseInput'));
-        input.inputElement.focus();
+        input.focus();
       });
     }
   },

chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html

@@ -59,11 +59,16 @@
       #dropdownIcon {
         background-size: 24px;
       }
+
+      iron-input input {
+        @apply --paper-input-container-shared-input-style;
+      }
     </style>
     <paper-input-container no-label-float on-click="onTap_">
-      <input is="iron-input" type="search" bind-value="{{selectedItem}}"
-          on-search="onInputValueChanged_" on-change="onChange_" incremental
-          slot="input">
+      <iron-input id="search" slot="input" bind-value="{{selectedItem}}">
+        <input type="search" on-search="onInputValueChanged_"
+            value="{{value::input}}" on-change="onChange_" incremental>
+      </iron-input>
       <paper-icon-button-light id="searchIcon" class="icon-search" hidden
           slot="suffix">
         <button></button>

chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html

@@ -97,11 +97,9 @@
         outline: none;
       }
 
-      paper-input-container {
-        --paper-input-container-input: {
-          font: inherit;
-        };
-        --paper-input-container-input-color: inherit;
+      #search input[type='search'] {
+        @apply --paper-input-container-shared-input-style;
+        font: inherit;
       }
     </style>
   </template>

chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js

@@ -78,7 +78,7 @@ Polymer({
 
   /** @override */
   attached: function() {
-    this.updateActionButtonState_();
+    this.async(this.updateActionButtonState_.bind(this));
     this.browserProxy_.searchEngineEditStarted(
         this.model ? this.model.modelIndex : this.DEFAULT_MODEL_INDEX);
     this.$.dialog.showModal();

chrome/test/data/webui/extensions/extension_pack_dialog_test.js

@@ -82,6 +82,7 @@ cr.define('extension_pack_dialog_tests', function() {
         expectEquals(kRootPath, packDialog.packDirectory_);
       }));
 
+      Polymer.dom.flush();
       expectEquals('', packDialog.$$('#key-file').value);
       MockInteractions.tap(packDialog.$$('#key-file-browse'));
       expectTrue(!!mockDelegate.keyPromise);

chrome/test/data/webui/md_bookmarks/edit_dialog_test.js

@@ -71,6 +71,7 @@ suite('<bookmarks-edit-dialog>', function() {
 
     dialog.titleValue_ = 'Permission Site';
     dialog.urlValue_ = 'permission.site';
+    Polymer.dom.flush();
 
     MockInteractions.tap(dialog.$.saveButton);
 
@@ -87,7 +88,9 @@ suite('<bookmarks-edit-dialog>', function() {
     assertTrue(dialog.validateUrl_());
 
     dialog.urlValue_ = 'example.com';
+    Polymer.dom.flush();
     assertTrue(dialog.validateUrl_());
+    Polymer.dom.flush();
     assertEquals('http://example.com', dialog.urlValue_);
 
     dialog.urlValue_ = '';
@@ -103,7 +106,9 @@ suite('<bookmarks-edit-dialog>', function() {
 
     dialog.urlValue_ = '';
 
+    Polymer.dom.flush();
     MockInteractions.tap(dialog.$.saveButton);
+    Polymer.dom.flush();
 
     assertTrue(dialog.$.url.invalid);
     assertTrue(dialog.$.dialog.open);

chrome/test/data/webui/settings/quick_unlock_authenticate_browsertest_chromeos.js

@@ -73,6 +73,7 @@ cr.define('settings_people_page_quick_unlock', function() {
         testElement = document.createElement('settings-password-prompt-dialog');
         testElement.quickUnlockPrivate_ = quickUnlockPrivateApi;
         testElement.writeUma_ = fakeUma.recordProgress.bind(fakeUma);
+        Polymer.dom.flush();
         document.body.appendChild(testElement);
 
         passwordElement = getFromElement('#passwordInput');
@@ -99,13 +100,16 @@ cr.define('settings_people_page_quick_unlock', function() {
         const confirmButton = getFromElement('#passwordInput');
         quickUnlockPrivateApi.accountPassword = 'bar';
         passwordElement.value = 'foo';
+        Polymer.dom.flush();
+
         MockInteractions.tap(
             getFromElement('paper-button[class="action-button"]'));
 
-        assertEquals(0, passwordElement.inputElement.selectionStart);
+        assertEquals(
+            0, passwordElement.inputElement.inputElement.selectionStart);
         assertEquals(
             passwordElement.value.length,
-            passwordElement.inputElement.selectionEnd);
+            passwordElement.inputElement.inputElement.selectionEnd);
       });
 
       test('TapConfirmButtonWithWrongPasswordRestoresFocus', function() {

chrome/test/data/webui/settings/search_engines_page_test.js

@@ -112,13 +112,16 @@ cr.define('settings_search_engines_page', function() {
               Promise.resolve();
         };
 
-        assertEquals('', dialog.$.searchEngine.value);
-        assertEquals('', dialog.$.keyword.value);
-        assertEquals('', dialog.$.queryUrl.value);
         const actionButton = dialog.$.actionButton;
-        assertTrue(actionButton.disabled);
 
-        return inputAndValidate('searchEngine')
+        return browserProxy.whenCalled('searchEngineEditStarted')
+            .then(() => {
+              assertEquals('', dialog.$.searchEngine.value);
+              assertEquals('', dialog.$.keyword.value);
+              assertEquals('', dialog.$.queryUrl.value);
+              assertTrue(actionButton.disabled);
+            })
+            .then(() => inputAndValidate('searchEngine'))
             .then(() => inputAndValidate('keyword'))
             .then(() => inputAndValidate('queryUrl'))
             .then(() => {

chrome/test/data/webui/settings/startup_urls_page_test.js

@@ -85,6 +85,7 @@ cr.define('settings_startup_urls_page', function() {
 
     test('Initialization_Add', function() {
       document.body.appendChild(dialog);
+      Polymer.dom.flush();
       assertTrue(dialog.$.dialog.open);
 
       // Assert that the "Add" button is disabled.

third_party/polymer/v1_0/bower.json

@@ -17,7 +17,7 @@
     "iron-icon": "PolymerElements/iron-icon#2.0.1",
     "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.1.1",
     "iron-icons": "PolymerElements/iron-icons#2.0.1",
-    "iron-input": "PolymerElements/iron-input#1.0.10",
+    "iron-input": "PolymerElements/iron-input#2.1.3",
     "iron-list": "PolymerElements/iron-list#2.0.14",
     "iron-location": "PolymerElements/iron-location#2.0.3",
     "iron-media-query": "PolymerElements/iron-media-query#2.0.0",

third_party/polymer/v1_0/chromium.patch

@@ -9,6 +9,35 @@ index 7a24999..4eefcba 100644
 -<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
 -<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
 +<link rel="stylesheet" href="chrome://resources/css/roboto.css">
+diff --git a/components-chromium/paper-input/paper-input-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js
+index 754820fb5d0c..3f8e640ffa71 100644
+--- a/components-chromium/paper-input/paper-input-extracted.js
++++ b/components-chromium/paper-input/paper-input-extracted.js
+@@ -7,13 +7,7 @@ Polymer({
+     ],
+ 
+     beforeRegister: function() {
+-      // We need to tell which kind of of template to stamp based on
+-      // what kind of `iron-input` we got, but because of polyfills and
+-      // custom elements differences between v0 and v1, the safest bet is
+-      // to check a particular method we know the iron-input#2.x can have.
+-      // If it doesn't have it, then it's an iron-input#1.x.
+-      var ironInput = document.createElement('iron-input');
+-      var version = typeof ironInput._initSlottedInput == 'function' ? 'v1' : 'v0';
++      var version = 'v1';  // Hard coded Polymer 2 style iron-input.
+       var template = Polymer.DomModule.import('paper-input', 'template');
+       var inputTemplate = Polymer.DomModule.import('paper-input', 'template#' + version);
+       var inputPlaceholder = template.content.querySelector('#template-placeholder');
+@@ -30,7 +24,8 @@ Polymer({
+      * @return {!HTMLElement}
+      */
+     get _focusableElement() {
+-      return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
++      // TODO(hcarmona): remove this patch after polymer is v2.
++      return this.inputElement._inputElement;
+     },
+ 
+     // Note: This event is only available in the 1.0 version of this element.
 diff --git a/components-chromium/paper-input/paper-textarea-extracted.js b/components-chromium/paper-input/paper-textarea-extracted.js
 index 11bc05a37471..8d425e02c30b 100644
 --- a/components-chromium/paper-input/paper-textarea-extracted.js

third_party/polymer/v1_0/components-chromium/iron-input/bower.json

 {
   "name": "iron-input",
-  "version": "1.0.10",
+  "version": "2.1.3",
   "description": "An input element with data binding",
   "authors": [
     "The Polymer Authors"
@@ -20,16 +20,41 @@
   "homepage": "https://github.com/PolymerElements/iron-input",
   "ignore": [],
   "dependencies": {
-    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
-    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0"
+    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#1 - 2",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#1 - 2",
+    "polymer": "Polymer/polymer#1.9 - 2"
   },
   "devDependencies": {
-    "paper-styles": "polymerelements/paper-styles#^1.0.2",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "polymerelements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "polymerelements/iron-demo-helpers#1 - 2",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#1 - 2",
+    "paper-styles": "polymerelements/paper-styles#1 - 2",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
+        "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+        "polymer": "Polymer/polymer#^1.9"
+      },
+      "devDependencies": {
+        "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
+        "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+        "paper-styles": "polymerelements/paper-styles#^1.0.0",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
+      },
+      "resolutions": {
+        "webcomponentsjs": "^0.7"
+      }
+    }
+  },
+  "resolutions": {
+    "webcomponentsjs": "^1.0.0"
   }
 }

third_party/polymer/v1_0/components-chromium/iron-input/iron-input.html

@@ -10,4 +10,92 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
-</head><body><script src="iron-input-extracted.js"></script></body></html>
+<!--
\ No newline at end of file
+`<iron-input>` is a wrapper to a native `<input>` element, that adds two-way binding
+and prevention of invalid input. To use it, you must distribute a native `<input>`
+yourself. You can continue to use the native `input` as you would normally:
+
+    <iron-input>
+      <input>
+    </iron-input>
+
+    <iron-input>
+      <input type="email" disabled>
+    </iron-input>
+
+### Two-way binding
+
+By default you can only get notified of changes to a native `<input>`'s `value`
+due to user input:
+
+    <input value="{{myValue::input}}">
+
+This means that if you imperatively set the value (i.e. `someNativeInput.value = 'foo'`),
+no events will be fired and this change cannot be observed.
+
+`iron-input` adds the `bind-value` property that mirrors the native `input`'s '`value` property; this
+property can be used for two-way data binding.
+`bind-value` will notify if it is changed either by user input or by script.
+
+    <iron-input bind-value="{{myValue}}">
+      <input>
+    </iron-input>
+
+Note: this means that if you want to imperatively set the native `input`'s, you _must_
+set `bind-value` instead, so that the wrapper `iron-input` can be notified.
+
+### Validation
+
+`iron-input` uses the native `input`'s validation. For simplicity, `iron-input`
+has a `validate()` method (which internally just checks the distributed `input`'s
+validity), which sets an `invalid` attribute that can also be used for styling.
+
+To validate automatically as you type, you can use the `auto-validate` attribute.
+
+`iron-input` also fires an `iron-input-validate` event after `validate()` is
+called. You can use it to implement a custom validator:
+
+    var CatsOnlyValidator = {
+      validate: function(ironInput) {
+        var valid = !ironInput.bindValue || ironInput.bindValue === 'cat';
+        ironInput.invalid = !valid;
+        return valid;
+      }
+    }
+    ironInput.addEventListener('iron-input-validate', function() {
+      CatsOnly.validate(input2);
+    });
+
+You can also use an element implementing an [`IronValidatorBehavior`](/element/PolymerElements/iron-validatable-behavior).
+This example can also be found in the demo for this element:
+
+    <iron-input validator="cats-only">
+      <input>
+    </iron-input>
+
+### Preventing invalid input
+
+It may be desirable to only allow users to enter certain characters. You can use the
+`allowed-pattern` attribute to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+
+    // Only allow typing digits, but a valid input has exactly 5 digits.
+    <iron-input allowed-pattern="[0-9]">
+      <input pattern="\d{5}">
+    </iron-input>
+
+@hero hero.svg
+@demo demo/index.html
+-->
+
+</head><body><dom-module id="iron-input">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+      }
+    </style>
+    <slot id="content"></slot>
+  </template>
+  </dom-module>
+<script src="iron-input-extracted.js"></script></body></html>
\ No newline at end of file

third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js

@@ -7,13 +7,7 @@ Polymer({
     ],
 
     beforeRegister: function() {
-      // We need to tell which kind of of template to stamp based on
-      // what kind of `iron-input` we got, but because of polyfills and
-      // custom elements differences between v0 and v1, the safest bet is
-      // to check a particular method we know the iron-input#2.x can have.
-      // If it doesn't have it, then it's an iron-input#1.x.
-      var ironInput = document.createElement('iron-input');
-      var version = typeof ironInput._initSlottedInput == 'function' ? 'v1' : 'v0';
+      var version = 'v1';  // Hard coded Polymer 2 style iron-input.
       var template = Polymer.DomModule.import('paper-input', 'template');
       var inputTemplate = Polymer.DomModule.import('paper-input', 'template#' + version);
       var inputPlaceholder = template.content.querySelector('#template-placeholder');
@@ -30,7 +24,8 @@ Polymer({
      * @return {!HTMLElement}
      */
     get _focusableElement() {
-      return Polymer.Element ? this.inputElement._inputElement : this.inputElement;
+      // TODO(hcarmona): remove this patch after polymer is v2.
+      return this.inputElement._inputElement;
     },
 
     // Note: This event is only available in the 1.0 version of this element.

third_party/polymer/v1_0/components_summary.txt

@@ -90,9 +90,9 @@ Tree link: https://github.com/PolymerElements/iron-iconset-svg/tree/v2.1.1
 
 Name: iron-input
 Repository: https://github.com/PolymerElements/iron-input.git
-Tree: 1.0.10
-Revision: 01d17407672ad8033ee447c9c7a65162f13c8f49
-Tree link: https://github.com/PolymerElements/iron-input/tree/1.0.10
+Tree: v2.1.3
+Revision: 72a4a9e898a4b825602eacd78944e8e25ee41f5c
+Tree link: https://github.com/PolymerElements/iron-input/tree/v2.1.3
 
 Name: iron-list
 Repository: https://github.com/PolymerElements/iron-list.git

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

@@ -30,9 +30,11 @@
     <div class="control-box">
       <paper-input-container always-float-label>
         <label id="label" slot="label">[[label]]</label>
-        <input is="iron-input" value="{{value::input}}" slot="input"
-            tabindex="1" disabled="[[disabled]]" aria-label$="[[label]]"
-            type="[[getInputType_(password, showPassword)]]">
+        <iron-input slot="input">
+          <input value="{{value::input}}" tabindex="1" disabled="[[disabled]]"
+              aria-label$="[[label]]"
+              type="[[getInputType_(password, showPassword)]]">
+        </iron-input>
       </paper-input-container>
       <div id="iconDiv">
         <template is="dom-if" if="[[password]]">

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

@@ -88,9 +88,11 @@
           <div class="property-box single-column two-line">
             <template is="dom-repeat" items="[[nameservers_]]">
               <paper-input-container no-label-float>
-                <input id="nameserver[[index]]" is="iron-input" value="[[item]]"
-                    disabled="[[!canEdit_(editable, nameserversType_)]]"
-                    on-change="onValueChange_" slot="input">
+                <iron-input slot="input">
+                  <input id="nameserver[[index]]" value="[[item]]"
+                      disabled="[[!canEdit_(editable, nameserversType_)]]"
+                      on-change="onValueChange_">
+                </iron-input>
               </paper-input-container>
             </template>
           </div>

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

@@ -49,10 +49,12 @@
         <template is="dom-if" restamp
             if="[[isEditTypeInput_(item, propertyDict, editFieldTypes)]]">
           <paper-input-container no-label-float>
-            <input id="[[item]]" is="iron-input" slot="input"
-                type="[[getEditInputType_(item, editFieldTypes)]]"
-                value="[[getPropertyValue_(item, prefix, propertyDict)]]"
-                on-change="onValueChange_">
+            <iron-input slot="input">
+              <input id="[[item]]"
+                  type="[[getEditInputType_(item, editFieldTypes)]]"
+                  value="[[getPropertyValue_(item, prefix, propertyDict)]]"
+                  on-change="onValueChange_">
+            </iron-input>
           </paper-input-container>
         </template>
         <!-- TODO(stevenjb): Support other types (number, boolean)? -->

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

@@ -130,7 +130,9 @@
         </network-proxy-exclusions>
         <div class="layout horizontal">
           <paper-input-container no-label-float class="flex">
-            <input id="proxyExclusion" is="iron-input" slot="input">
+            <iron-input slot="input">
+              <input id="proxyExclusion">
+            </iron-input>
             <iron-a11y-keys keys="enter" slot="add-on"
                 on-keys-pressed="onAddProxyExclusionTap_">
             </iron-a11y-keys>

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

@@ -35,14 +35,18 @@
     </style>
     <div id="container">
       <div id="label">[[label]]</div>
-      <paper-input-container id="host" no-label-float>
-        <input is="iron-input" bind-value="{{value.Host}}" slot="input"
-            disabled="[[!editable]]" on-change="onValueChange_">
+      <paper-input-container id="host" no-label-float disabled$="[[!editable]]">
+        <iron-input slot="input">
+          <input value="{{value.Host}}" disabled$="[[!editable]]"
+              on-change="onValueChange_">
+        </iron-input>
       </paper-input-container>
       <div>[[i18n('networkProxyPort')]]</div>
-      <paper-input-container id="port" no-label-float>
-        <input is="iron-input" bind-value="{{value.Port}}" slot="input"
-            disabled="[[!editable]]" on-change="onValueChange_">
+      <paper-input-container id="port" no-label-float disabled$="[[!editable]]">
+        <iron-input slot="input">
+          <input value="{{value.Port}}" disabled$="[[!editable]]"
+              on-change="onValueChange_">
+        </iron-input>
       </paper-input-container>
     </div>
   </template>

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

@@ -70,6 +70,10 @@
         margin-bottom: 0;
         margin-top: -9px;
       }
+
+      iron-input input {
+        @apply --paper-input-container-shared-input-style;
+      }
     </style>
   </template>
 </dom-module>

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js

@@ -395,7 +395,7 @@ Polymer({
   passwordElement_: function() {
     // |passwordElement| is null by default. It can be set to override the
     // input field that will be populated with the keypad.
-    return this.passwordElement || this.$.pinInput.inputElement;
+    return this.passwordElement || this.$.pinInput.inputElement.inputElement;
   },
 });
 })();