Network config: Add support for OpenVPN.ExtraHosts

This CL:
* Supports setting any valid property in internet-detail-page.
* Correctly provides the VPN type when setting VPN properties.
* Replaces 'VPN-{Username|Password}' with OpenVPN and L2TP specific
  entries so that fields are properly localized in
  network-property-list.
* Adds OpenVPN.ExtraHosts to the detail page.

Bug: 742666
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I278576c18dfdc45e4b5151a08fd4ded0b0efeda0
Reviewed-on: https://chromium-review.googlesource.com/954342
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543282}

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

@@ -718,25 +718,36 @@ Polymer({
 
   /**
    * Event triggered for elements associated with network properties.
-   * @param {!{detail: !{field: string, value: (string|!Object)}}} event
+   * @param {!{detail: !{field: string, value: !CrOnc.NetworkPropertyType}}} e
    * @private
    */
-  onNetworkPropertyChange_: function(event) {
+  onNetworkPropertyChange_: function(e) {
     if (!this.networkProperties)
       return;
-    const field = event.detail.field;
-    const value = event.detail.value;
+    const field = e.detail.field;
+    const value = e.detail.value;
     const onc = this.getEmptyNetworkProperties_();
     if (field == 'APN') {
       CrOnc.setTypeProperty(onc, 'APN', value);
     } else if (field == 'SIMLockStatus') {
       CrOnc.setTypeProperty(onc, 'SIMLockStatus', value);
-    } else if (field == 'VPN.Host') {
-      // TODO(stevenjb): Generalize this section if we add more editable fields.
-      CrOnc.setProperty(onc, field, value);
     } else {
-      console.error('Unexpected property change event: ' + field);
-      return;
+      const valueType = typeof value;
+      if (valueType == 'string' || valueType == 'number' ||
+          valueType == 'boolean' || Array.isArray(value)) {
+        CrOnc.setProperty(onc, field, value);
+        // Ensure any required configuration properties are also set.
+        if (field.match(/^VPN/)) {
+          const vpnType = CrOnc.getActiveValue(this.networkProperties.VPN.Type);
+          assert(vpnType);
+          CrOnc.setProperty(onc, 'VPN.Type', vpnType);
+        }
+      } else {
+        console.error(
+            'Unexpected property change event, Key: ' + field +
+            ' Value: ' + JSON.stringify(value));
+        return;
+      }
     }
     this.setNetworkProperties_(onc);
   },
@@ -917,7 +928,8 @@ Polymer({
    * @private
    */
   hasInfoFields_: function() {
-    return this.hasVisibleFields_(this.getInfoFields_());
+    return this.getInfoEditFieldTypes_().length > 0 ||
+        this.hasVisibleFields_(this.getInfoFields_());
   },
 
   /**
@@ -937,16 +949,21 @@ Polymer({
           'Tether.Carrier');
     } else if (type == CrOnc.Type.VPN && !!this.networkProperties.VPN) {
       const vpnType = CrOnc.getActiveValue(this.networkProperties.VPN.Type);
-      if (vpnType == 'ThirdPartyVPN') {
-        fields.push('VPN.ThirdPartyVPN.ProviderName');
-      } else if (vpnType == 'ARCVPN') {
-        fields.push('VPN.Type');
-      } else {
-        fields.push('VPN.Host', 'VPN.Type');
-        if (vpnType == 'OpenVPN')
-          fields.push('VPN.OpenVPN.Username');
-        else if (vpnType == 'L2TP-IPsec')
-          fields.push('VPN.L2TP.Username');
+      switch (vpnType) {
+        case CrOnc.VPNType.THIRD_PARTY_VPN:
+          fields.push('VPN.ThirdPartyVPN.ProviderName');
+          break;
+        case CrOnc.VPNType.ARCVPN:
+          fields.push('VPN.Type');
+          break;
+        case CrOnc.VPNType.OPEN_VPN:
+          fields.push(
+              'VPN.Type', 'VPN.Host', 'VPN.OpenVPN.Username',
+              'VPN.OpenVPN.ExtraHosts');
+          break;
+        case CrOnc.VPNType.L2TP_IPSEC:
+          fields.push('VPN.Type', 'VPN.Host', 'VPN.L2TP.Username');
+          break;
       }
     } else if (type == CrOnc.Type.WI_FI) {
       fields.push('RestrictedConnectivity');
@@ -965,8 +982,12 @@ Polymer({
     const type = this.networkProperties.Type;
     if (type == CrOnc.Type.VPN && !!this.networkProperties.VPN) {
       const vpnType = CrOnc.getActiveValue(this.networkProperties.VPN.Type);
-      if (vpnType != 'ThirdPartyVPN')
+      if (vpnType != CrOnc.VPNType.THIRD_PARTY_VPN)
         editFields['VPN.Host'] = 'String';
+      if (vpnType == CrOnc.VPNType.OPEN_VPN) {
+        editFields['VPN.OpenVPN.Username'] = 'String';
+        editFields['VPN.OpenVPN.ExtraHosts'] = 'StringArray';
+      }
     }
     return editFields;
   },

chrome/browser/ui/webui/chromeos/network_element_localized_strings_provider.cc

@@ -134,8 +134,11 @@ void AddOncLocalizedStrings(content::WebUIDataSource* html_source) {
       {"OncVPN-Host", IDS_ONC_VPN_HOST},
       {"OncVPN-IPsec-Group", IDS_ONC_VPN_IPSEC_GROUP},
       {"OncVPN-IPsec-PSK", IDS_ONC_VPN_IPSEC_PSK},
+      {"OncVPN-L2TP-Password", IDS_ONC_VPN_PASSWORD},
+      {"OncVPN-L2TP-Username", IDS_ONC_VPN_USERNAME},
       {"OncVPN-OpenVPN-OTP", IDS_ONC_VPN_OPENVPN_OTP},
-      {"OncVPN-Password", IDS_ONC_VPN_PASSWORD},
+      {"OncVPN-OpenVPN-Password", IDS_ONC_VPN_PASSWORD},
+      {"OncVPN-OpenVPN-Username", IDS_ONC_VPN_USERNAME},
       {"OncVPN-ThirdPartyVPN-ProviderName",
        IDS_ONC_VPN_THIRD_PARTY_VPN_PROVIDER_NAME},
       {"OncVPN-Type", IDS_ONC_VPN_TYPE},
@@ -144,7 +147,6 @@ void AddOncLocalizedStrings(content::WebUIDataSource* html_source) {
       {"OncVPN-Type_L2TP_IPsec_Cert", IDS_ONC_VPN_TYPE_L2TP_IPSEC_CERT},
       {"OncVPN-Type_OpenVPN", IDS_ONC_VPN_TYPE_OPENVPN},
       {"OncVPN-Type_ARCVPN", IDS_ONC_VPN_TYPE_ARCVPN},
-      {"OncVPN-Username", IDS_ONC_VPN_USERNAME},
       {"OncWiFi-Frequency", IDS_ONC_WIFI_FREQUENCY},
       {"OncWiFi-Passphrase", IDS_ONC_WIFI_PASSWORD},
       {"OncWiFi-SSID", IDS_ONC_WIFI_SSID},

chrome/test/data/webui/chromeos/cr_onc_strings.js

@@ -51,8 +51,11 @@ CrOncTest.overrideCrOncStrings = function() {
     'OncVPN-Host': 'OncVPN-Host',
     'OncVPN-IPsec-Group': 'OncVPN-IPsec-Group',
     'OncVPN-IPsec-PSK': 'OncVPN-IPsec-PSK',
+    'OncVPN-L2TP-Password': 'OncVPN-L2TP-Password',
+    'OncVPN-L2TP-Username': 'OncVPN-L2TP-Username',
     'OncVPN-OpenVPN-OTP': 'OncVPN-OpenVPN-OTP',
-    'OncVPN-Password': 'OncVPN-Password',
+    'OncVPN-OpenVPN-Password': 'OncVPN-OpenVPN-Password',
+    'OncVPN-OpenVPN-Username': 'OncVPN-OpenVPN-Username',
     'OncVPN-ThirdPartyVPN-ProviderName': 'OncVPN-ThirdPartyVPN-ProviderName',
     'OncVPN-Type': 'OncVPN-Type',
     'OncVPN-Type_L2TP_IPsec': 'OncVPN-Type_L2TP_IPsec',
@@ -60,7 +63,6 @@ CrOncTest.overrideCrOncStrings = function() {
     'OncVPN-Type_L2TP_IPsec_Cert': 'OncVPN-Type_L2TP_IPsec_Cert',
     'OncVPN-Type_OpenVPN': 'OncVPN-Type_OpenVPN',
     'OncVPN-Type_ARCVPN': 'OncVPN-Type_ARCVPN',
-    'OncVPN-Username': 'OncVPN-Username',
     'OncWiFi-Frequency': 'OncWiFi-Frequency',
     'OncWiFi-Passphrase': 'OncWiFi-Passphrase',
     'OncWiFi-SSID': 'OncWiFi-SSID',

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

@@ -54,10 +54,10 @@
           onc-prefix="VPN.Type" disabled="[[hasGuid_(guid)]]">
       </network-config-select>
       <template is="dom-if" if="[[!showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-Username')]]"
+        <network-config-input label="[[i18n('OncVPN-L2TP-Username')]]"
             value="{{configProperties_.VPN.L2TP.Username}}">
         </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-Password')]]"
+        <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')]]"
@@ -70,10 +70,10 @@
         </template>
       </template>
       <template is="dom-if" if="[[showVpn_.OpenVPN]]">
-        <network-config-input label="[[i18n('OncVPN-Username')]]"
+        <network-config-input label="[[i18n('OncVPN-OpenVPN-Username')]]"
             value="{{configProperties_.VPN.OpenVPN.Username}}">
         </network-config-input>
-        <network-config-input label="[[i18n('OncVPN-Password')]]"
+        <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')]]"