MD Settings: Add settings-internet-config (WiFi only, no certs)

chrome/browser/resources/settings/internet_page/internet_config.html

+<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/polymer.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/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-toggle-button/paper-toggle-button.html">
+<link rel="import" href="internet_shared_css.html">
+
+<dom-module id="settings-internet-config">
+  <template>
+    <style include="internet-shared md-select iron-flex">
+    </style>
+
+    <!-- Title section: Icon + name. -->
+    <div class="settings-box first">
+      <div class="start layout horizontal center">
+        <cr-network-icon network-state="[[networkProperties_]]" is-list-item>
+        </cr-network-icon>
+        <div class="title">[[title_]]</div>
+      </div>
+      <div id="buttonDiv">
+        <paper-button class="secondary-button" on-tap="onCancelTap_">
+          $i18n{cancel}
+        </paper-button>
+        <template is="dom-if" if="[[guid_]]">
+          <paper-button class="primary-button" on-tap="onSaveTap_">
+            $i18n{save}
+          </paper-button>
+        </template>
+        <template is="dom-if" if="[[!guid_]]">
+          <paper-button class="primary-button" on-tap="onSaveTap_"
+              disabled="[[!connectIsEnabled_(configProperties_.*)]]">
+            $i18n{networkButtonConnect}
+          </paper-button>
+        </template>
+      </div>
+    </div>
+
+    <!-- WiFi -->
+    <template is="dom-if"
+        if="[[isType_(NetworkType_.WI_FI, networkProperties_.Type)]]">
+      <div class="settings-box">
+        <div id="shareLabel" class="start">$i18n{networkConfigShare}</div>
+        <paper-toggle-button id="share" checked="{{shareNetwork_}}"
+            disabled="[[!shareIsEnabled_(guid_, configProperties_.*)]]"
+            aria-labelledby="shareLabel">
+        </paper-toggle-button>
+      </div>
+
+      <div class="settings-box">
+        <div id="ssidLabel" class="start">$i18n{OncWiFi-SSID}</div>
+        <paper-input-container no-label-float>
+          <input id="ssid" is="iron-input"
+              value="{{configProperties_.WiFi.SSID::change}}"

[michaelpg, 2017/05/18 21:14:23]

I just discovered bind-value:
https://github.com/PolymerElements/iron-input/tree/1.x

Might be less error prone than using |value| with "::change" (in case we forget
the ::change sometime).

[stevenjb, 2017/05/19 23:35:34]

Well, one might make the same mistake with value= vs bind-value=, but I agree
that the ::change is definitely awkward.

Unfortunately bind-value only appears to work with actual <iron-input> elements,
and I seem to a recall there was a reason we don't uses that directly?

+              disabled="[[guid_]]" aria-labelledby="ssidLabel">
+        </paper-input-container>
+      </div>
+
+      <div class="settings-box">
+        <div id="securityLabel" class="start">$i18n{OncWiFi-Security}</div>
+        <select id="security" class="md-select" disabled="[[guid_]]"
+            value="{{configProperties_.WiFi.Security::change}}"
+            aria-labelledby="securityLabel">
+          <template is="dom-repeat" items="[[securityItems_]]">
+            <option value="[[item]]">
+              [[getOncLabel_(item, 'Wifi.Security')]]
+            </option>
+          </template>
+        </select>
+      </div>
+
+      <div class="settings-box"
+          hidden="[[!showWiFiPassphrase_(configProperties_.*)]]">
+        <div id="passphraseLabel" class="start">
+          $i18n{OncWiFi-Passphrase}
+        </div>
+        <paper-input-container no-label-float>
+          <input id="passphrase" is="iron-input" type="password"
+              value="{{configProperties_.WiFi.Passphrase::change}}"
+              aria-labelledby="passphraseLabel">
+        </paper-input-container>
+      </div>
+    </template>
+
+    <!-- EAP (WiFi, WiMAX, Ethernet) -->
+    <div hidden="[[!showEap_]]">

[michaelpg, 2017/05/18 21:14:23]

could this be dom-if?

[stevenjb, 2017/05/19 23:35:34]

Done.

+      <div class="settings-box">
+        <div id="eapOuterLabel" class="start">$i18n{OncWiFi-EAP-Outer}</div>
+        <select id="eapOuter" class="md-select"
+            value="{{configProperties_.WiFi.EAP.Outer::change}}"
+            aria-labelledby="eapOuterLabel">
+          <template is="dom-repeat" items="[[eapOuterItems_]]">
+            <option value="[[item]]">
+              [[getOncLabel_(item, 'WiFi.EAP.Outer')]]
+            </option>
+          </template>
+        </select>
+      </div>
+      <div class="settings-box" hidden="[[!showEap_.Inner]]">
+        <div id="eapInnerLabel" class="start">$i18n{OncWiFi-EAP-Inner}</div>
+        <select id="eapInner" class="md-select"
+            value="{{configProperties_.WiFi.EAP.Inner::change}}"

[michaelpg, 2017/05/18 21:14:22]

This logic is a bit complex to follow but it seems possible to update the list
of <option>s after the |value| is set. That could cause these <select>s to not
show the correct option as selected. Does that happen here? (see
https://bugs.chromium.org/p/chromium/issues/detail?id=658075#c7)

[stevenjb, 2017/05/19 23:35:34]

Yeah, this turns out to be a little subtly complicated, so thanks for noticing.
I did two things:
1) Ensured that EAP.Inner has a valid value when EAP.Outer changes.
2) Ensured that the select value is updated when the value or items list
changes.

+            aria-labelledby="eapInnerLabel">
+          <template is="dom-repeat"
+              items="[[getEapInnerItems_(configProperties_.WiFi.EAP.Outer)]]">
+            <option value="[[item]]">
+              [[getOncLabel_(item, 'WiFi.EAP.Inner')]]
+            </option>
+          </template>
+        </select>
+      </div>
+      <div class="settings-box" hidden="[[!showEap.SubjectMatch]]">
+        <div id="eapSubjectMatchLabel" class="start">
+          $i18n{OncWiFi-EAP-SubjectMatch}
+        </div>
+        <paper-input-container no-label-float>
+          <input id="eapSubjectMatch" is="iron-input"
+              value="{{configProperties_.WiFi.EAP.SubjectMatch::change}}"
+              aria-labelledby="eapSubjectMatchLabel">
+        </paper-input-container>
+      </div>
+      <div class="settings-box" hidden="[[!showEap.Identity]]">
+        <div id="OncWiFi-EAP-Identity" class="start">
+          $i18n{OncWiFi-EAP-Identity}
+        </div>
+        <paper-input-container no-label-float>
+          <input id="eapIdentity" is="iron-input"
+              value="{{configProperties_.WiFi.EAP.Identity::change}}"
+              aria-labelledby="eapIdentityLabel">
+        </paper-input-container>
+      </div>
+      <div class="settings-box" hidden="[[!showEap.Password]]">
+        <div id="eapPasswordLabel" class="start">
+          $i18n{OncWiFi-EAP-Password}
+        </div>
+        <paper-input-container no-label-float>
+          <input id="eapPassword" is="iron-input" type="password"
+              value="{{configProperties_.WiFi.EAP.Password::change}}"
+              aria-labelledby="eapPasswordLabel">
+        </paper-input-container>
+      </div>
+      <div class="settings-box" hidden="[[!showEap.AnonymousIdentity]]">

[michaelpg, 2017/05/18 21:14:22]

sigh... it would be nice if each of these extremely similar 10-line elements
could just be, like, a "settings-input" component. I know that introduces
performance concerns, but this is a lot of boilerplate so it seems cumbersome.

<settings-input hidden="[[!showEap.AnonymousIdentity]]"
    value="{{configProperties_.WiFi.EAP.AnonymousIdentity"
    label="$i18n{OncWifi-EAP-AnonymousIdentity}">
</settings-input>

A man can dream...

[stevenjb, 2017/05/19 23:35:34]

You know, I feel like I have unlearned some concepts that make web components
appealing in the first place.

This is absolutely a good place for a couple of custom elements. Performance is
not the only consideration here, and ease of maintenance was one of the
motivations of doing all this in the first place.

So, done and done - I created two custom elements, one for input and one for
select. I made them network specific so that I can change them if I need to when
we do UX review for this, but we can consider generalizing at least the input
element later.

Thanks for pointing this out.

+        <div id="eapAnonymousIdentityLabel" class="start">
+          $i18n{OncWiFi-EAP-AnonymousIdentity}
+        </div>
+        <paper-input-container no-label-float>
+          <input id="eapAnonymousIdentity" is="iron-input"
+              value="{{configProperties_.WiFi.EAP.AnonymousIdentity::change}}"
+              aria-labelledby="eapAnonymousIdentityLabel">
+        </paper-input-container>
+      </div>
+    </div>
+
+    <!-- TODO(stevenjb): Error message for config or cert failure -->
+
+  </template>
+
+  </template>

[michaelpg, 2017/05/18 21:14:22]

remove extra newline and </template>

[stevenjb, 2017/05/19 23:35:34]

Ah, merges. Done.

+  <script src="internet_config.js"></script>
+</dom-module>