Use mojo in network-apnlist

This CL:
* Introduces <network-property-list-mojo>
* Uses the mojo element and mojo properties in <network-apnlist>

Follow-up CLs will use <network-property-list-mojo> more broadly.

Bug: 853953
Change-Id: I25ed760ecb8bfaa88936cbf88271c6c74525f41f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1758490
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#690238}

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.html

@@ -118,8 +118,8 @@
     <!-- APN (Cellular only) -->
     <template is="dom-if" if="[[isCellular_(managedProperties_)]]">
       <div class="section single-column">
-        <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
-            network-properties="[[networkProperties]]">
+        <network-apnlist editable on-apn-change="onApnChange_"
+            managed-properties="[[managedProperties_]]">
         </network-apnlist>
       </div>
     </template>
@@ -163,8 +163,7 @@
       <div class="section single-column indented">
         <network-property-list
             fields="[[getInfoFields_(networkProperties)]]"
-            property-dict="[[networkProperties]]"
-            on-property-change="onNetworkPropertyChange_">
+            property-dict="[[networkProperties]]">
         </network-property-list>
       </div>
     </template>

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.js

@@ -272,6 +272,24 @@ Polymer({
     });
   },
 
+  /**
+   * @param {!mojom.ConfigProperties} config
+   * @private
+   */
+  setMojoNetworkProperties_: function(config) {
+    if (!this.networkPropertiesReceived_ || !this.guid) {
+      return;
+    }
+    this.networkConfig_.setProperties(this.guid, config).then(response => {
+      if (!response.success) {
+        console.error('Unable to set properties: ' + JSON.stringify(config));
+        // An error typically indicates invalid input; request the properties
+        // to update any invalid fields.
+        this.getNetworkDetails_();
+      }
+    });
+  },
+
   /**
    * @return {!chrome.networkingPrivate.NetworkConfigProperties} An ONC
    *     dictionary with just the Type property set. Used for passing properties
@@ -469,24 +487,16 @@ Polymer({
   },
 
   /**
-   * Event triggered for elements associated with network properties.
-   * @param {!CustomEvent<!{field: string, value: (string|!Object)}>} event
+   * @param {!CustomEvent<!mojom.ApnProperties>} event
    * @private
    */
-  onNetworkPropertyChange_: function(event) {
-    if (!this.networkProperties) {
-      return;
-    }
-    const field = event.detail.field;
-    const value = event.detail.value;
-    const onc = this.getEmptyNetworkProperties_();
-    if (field == 'APN') {
-      CrOnc.setTypeProperty(onc, 'APN', value);
-    } else {
-      console.error('Unexpected property change event: ' + field);
+  onApnChange_: function(event) {
+    if (!this.networkPropertiesReceived_) {
       return;
     }
-    this.setNetworkProperties_(onc);
+    const apn = event.detail;
+    const config = {cellular: {apn: apn}};
+    this.setMojoNetworkProperties_(config);
   },
 
   /**

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

@@ -303,8 +303,8 @@
 
             <!-- APN -->
             <template is="dom-if" if="[[isCellular_(managedProperties_)]]">
-              <network-apnlist on-apn-change="onNetworkPropertyChange_"
-                  network-properties="[[networkProperties_]]">
+              <network-apnlist on-apn-change="onApnChange_"
+                  managed-properties="[[managedProperties_]]">
               </network-apnlist>
             </template>
 

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

@@ -1160,30 +1160,38 @@ Polymer({
     const field = e.detail.field;
     const value = e.detail.value;
     const onc = this.getEmptyNetworkProperties_();
-    if (field == 'APN') {
-      CrOnc.setTypeProperty(onc, 'APN', value);
-    } else {
-      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;
-      }
+    const valueType = typeof value;
+    if (valueType != 'string' && valueType != 'number' &&
+        valueType != 'boolean' && !Array.isArray(value)) {
+      console.error(
+          'Unexpected property change event, Key: ' + field +
+          ' Value: ' + JSON.stringify(value));
+      return;
+    }
+    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);
     }
     this.setNetworkProperties_(onc);
   },
 
+  /**
+   * @param {!CustomEvent<!mojom.ApnProperties>} event
+   * @private
+   */
+  onApnChange_: function(event) {
+    if (!this.networkPropertiesReceived_) {
+      return;
+    }
+    const apn = event.detail;
+    const config = {cellular: {apn: apn}};
+    this.setMojoNetworkProperties_(config);
+  },
+
+
   /**
    * Event triggered when the IP Config or NameServers element changes.
    * @param {!CustomEvent<!{

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

@@ -19,6 +19,7 @@ js_type_check("closure_compile") {
     ":network_nameservers",
     ":network_password_input",
     ":network_property_list",
+    ":network_property_list_mojo",
     ":network_proxy",
     ":network_proxy_exclusions",
     ":network_proxy_input",
@@ -35,7 +36,7 @@ js_library("mojo_interface_provider") {
 
 js_library("network_apnlist") {
   deps = [
-    "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",
+    "//ui/webui/resources/cr_components/chromeos/network:network_config",
     "//ui/webui/resources/js:i18n_behavior",
   ]
 }
@@ -126,6 +127,15 @@ js_library("network_property_list") {
   ]
 }
 
+js_library("network_property_list_mojo") {
+  deps = [
+    "//ui/webui/resources/cr_elements/policy:cr_policy_network_behavior_mojo",
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js/chromeos:onc_mojo",
+  ]
+}
+
 js_library("network_proxy") {
   deps = [
     "//ui/webui/resources/cr_elements/chromeos/network:cr_onc_types",

ui/webui/resources/cr_components/chromeos/network/network_apnlist.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_button/cr_button.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
-<link rel="import" href="network_property_list.html">
+<link rel="import" href="network_property_list_mojo.html">
 <link rel="import" href="network_shared_css.html">
 
 <dom-module id="network-apnlist">
@@ -20,17 +19,17 @@
           value="[[selectedApn_]]"
           aria-label="[[i18n('networkAccessPoint')]]">
         <template is="dom-repeat" items="[[apnSelectList_]]">
-          <option value="[[item.AccessPointName]]">[[apnDesc_(item)]]</option>
+          <option value="[[item.accessPointName]]">[[apnDesc_(item)]]</option>
         </template>
       </select>
     </div>
 
     <div class="property-box single-column indented"
-        hidden$="[[!isOtherSelected_(selectedApn_, networkProperties)]]">
-      <network-property-list on-property-change="onOtherApnChange_"
+        hidden$="[[!isOtherSelected_(selectedApn_, managedProperties)]]">
+      <network-property-list-mojo on-property-change="onOtherApnChange_"
           fields="[[otherApnFields_]]" property-dict="[[otherApn_]]"
-          edit-field-types="[[otherApnEditTypes_]]" prefix="Cellular.APN.">
-      </network-property-list>
+          edit-field-types="[[otherApnEditTypes_]]" prefix="cellular.apn.">
+      </network-property-list-mojo>
       <cr-button class="action-button" on-click="onSaveOtherTap_">
         [[i18n('save')]]
       </cr-button>

ui/webui/resources/cr_components/chromeos/network/network_property_list_mojo.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/cr_elements/policy/cr_policy_network_behavior_mojo.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator_mojo.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="network_shared_css.html">
+
+<dom-module id="network-property-list-mojo">
+  <template>
+    <style include="network-shared iron-flex">
+      /* Property lists are embedded; remove the padding. */
+      .property-box {
+        padding: 0;
+      }
+
+      cr-input[readonly] {
+        --cr-input-background-color: transparent;
+      }
+
+      cr-policy-network-indicator {
+        margin-inline-start: var(--settings-controlled-by-spacing);
+      }
+    </style>
+    <template is="dom-repeat" items="[[fields]]"
+        filter="[[computeFilter_(prefix, propertyDict, editFieldTypes)]]">
+      <div class="property-box single-column two-line stretch">
+        <!-- Property label -->
+        <div class="layout horizontal center">
+          <div>[[getPropertyLabel_(item, prefix)]]</div>
+          <template is="dom-if" restamp
+              if="[[isEditType_(item, editFieldTypes)]]">
+            <cr-policy-network-indicator-mojo
+                property="[[getProperty_(item, propertyDict)]]">
+            </cr-policy-network-indicator-mojo>
+          </template>
+        </div>
+        <!-- Uneditable property value -->
+        <template is="dom-if" restamp
+            if="[[!showEditable_(item, propertyDict, editFieldTypes)]]">
+          <div class="secondary">
+            [[getPropertyValue_(item, prefix, propertyDict)]]
+          </div>
+        </template>
+        <!-- Editable property value -->
+        <template is="dom-if" restamp
+            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>
+      </div>
+    </template>
+  </template>
+  <script src="network_property_list_mojo.js"></script>
+</dom-module>

ui/webui/resources/cr_components/cr_components_resources.grdp

@@ -195,6 +195,14 @@
                file="cr_components/chromeos/network/network_property_list.js"
                type="chrome_html"
                compress="gzip" />
+    <structure name="IDR_WEBUI_CHROMEOS_NETWORK_PROPERTY_LIST_MOJO_HTML"
+               file="cr_components/chromeos/network/network_property_list_mojo.html"
+               type="chrome_html"
+               compress="gzip" />
+    <structure name="IDR_WEBUI_CHROMEOS_NETWORK_PROPERTY_LIST_MOJO_JS"
+               file="cr_components/chromeos/network/network_property_list_mojo.js"
+               type="chrome_html"
+               compress="gzip" />
     <structure name="IDR_WEBUI_CHROMEOS_NETWORK_PROXY_HTML"
                file="cr_components/chromeos/network/network_proxy.html"
                type="chrome_html"

ui/webui/resources/cr_elements/policy/cr_policy_network_indicator_mojo.js

@@ -9,8 +9,6 @@
 (function() {
 'use strict';
 
-const mojom = chromeos.networkConfig.mojom;
-
 Polymer({
   is: 'cr-policy-network-indicator-mojo',
 
@@ -21,8 +19,9 @@ Polymer({
      * Network property associated with the indicator. Note: |property| may
      * be null or undefined, depending on how the properties dictionary is
      * generated.
-     * @type {?mojom.ManagedBoolean|?mojom.ManagedInt32|?mojom.ManagedString|
-     *        undefined}
+     * @type {?chromeos.networkConfig.mojom.ManagedBoolean|
+     *        ?chromeos.networkConfig.mojom.ManagedInt32|
+     *        ?chromeos.networkConfig.mojom.ManagedString|undefined}
      */
     property: Object,
 
@@ -46,21 +45,22 @@ Polymer({
       this.indicatorType = CrPolicyIndicatorType.NONE;
       return;
     }
+    const PolicySource = chromeos.networkConfig.mojom.PolicySource;
     switch (property.policySource) {
-      case mojom.PolicySource.kNone:
+      case PolicySource.kNone:
         this.indicatorType = CrPolicyIndicatorType.NONE;
         break;
-      case mojom.PolicySource.kUserPolicyEnforced:
+      case PolicySource.kUserPolicyEnforced:
         this.indicatorType = CrPolicyIndicatorType.USER_POLICY;
         break;
-      case mojom.PolicySource.kDevicePolicyEnforced:
+      case PolicySource.kDevicePolicyEnforced:
         this.indicatorType = CrPolicyIndicatorType.DEVICE_POLICY;
         break;
-      case mojom.PolicySource.kUserPolicyRecommended:
-      case mojom.PolicySource.kDevicePolicyRecommended:
+      case PolicySource.kUserPolicyRecommended:
+      case PolicySource.kDevicePolicyRecommended:
         this.indicatorType = CrPolicyIndicatorType.RECOMMENDED;
         break;
-      case mojom.PolicySource.kActiveExtension:
+      case PolicySource.kActiveExtension:
         this.indicatorType = CrPolicyIndicatorType.EXTENSION;
         break;
     }

ui/webui/resources/js/chromeos/onc_mojo.js

@@ -662,8 +662,11 @@ class OncMojo {
   /**
    * @param {!chromeos.networkConfig.mojom.ManagedBoolean|
    *         !chromeos.networkConfig.mojom.ManagedInt32|
-   *         !chromeos.networkConfig.mojom.ManagedString|undefined} property
-   * @return {boolean|number|string|undefined}
+   *         !chromeos.networkConfig.mojom.ManagedString|
+   *         !chromeos.networkConfig.mojom.ManagedStringList|
+   *         !chromeos.networkConfig.mojom.ManagedApnList|undefined} property
+   * @return {boolean|number|string|!Array<string>|
+   *          !Array<!chromeos.networkConfig.mojom.ApnProperties>|undefined}
    */
   static getActiveValue(property) {
     if (!property) {