CrOS Settings > Network: Improved UI support for custom APN

This addresses some inconsistencies with the 'Other' APN UI
encountered when switching between carrier networks within a
Cellular Service.

It also adds support for 'Other' entries with accessPointName
values matching an existing entry but with different username
or password values.

Additionally it fixes some instability in the UI while scanning
(when the device properties become unavailable). This fixes that
by postponing Cellular property updates until scanning completes.

Bug: 986921
Change-Id: If5a012e38e5af32ffe4832c553396b94361b86d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2333536Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796489}

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

@@ -490,6 +490,11 @@ Polymer({
         // Update just the scanning state to avoid interrupting other parts of
         // the UI (e.g. custom IP addresses or nameservers).
         this.deviceState_.scanning = newDeviceState.scanning;
+        // Cellular properties are not updated while scanning (since they
+        // may be invalid), so request them on scan completion.
+        if (type === mojom.NetworkType.kCellular) {
+          shouldGetNetworkDetails = true;
+        }
       }
       if (shouldGetNetworkDetails) {
         this.getNetworkDetails_();
@@ -669,6 +674,14 @@ Polymer({
    */
   updateManagedProperties_(properties) {
     this.applyingChanges_ = true;
+    if (this.managedProperties_ &&
+        this.managedProperties_.type === mojom.NetworkType.kCellular &&
+        this.deviceState_ && this.deviceState_.scanning) {
+      // Cellular properties may be invalid while scanning, so keep the existing
+      // properties instead.
+      properties.typeProperties.cellular =
+          this.managedProperties_.typeProperties.cellular;
+    }
     this.managedProperties_ = properties;
     Polymer.RenderStatus.afterNextRender(
         this, () => this.applyingChanges_ = false);

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

@@ -16,24 +16,28 @@
     <div class="property-box">
       <div class="start">[[i18n('networkAccessPoint')]]</div>
       <select id="selectApn" class="md-select" on-change="onSelectApnChange_"
+          value="[[selectedApn_]]"
+          disabled="[[isDisabled_(selectedApn_)]]"
           aria-label="[[i18n('networkAccessPoint')]]">
         <template is="dom-repeat" items="[[apnSelectList_]]">
-          <option value="[[item.accessPointName]]"
-                  selected$="[[isApnItemSelected_(item, selectedApn_)]]">[[apnDesc_(item)]]</option>
+          <option value="[[item.name]]">
+            [[apnDesc_(item)]]
+          </option>
         </template>
       </select>
     </div>
 
-    <div class="property-box single-column indented"
-        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-mojo>
-      <cr-button class="action-button" on-click="onSaveOtherTap_">
-        [[i18n('save')]]
-      </cr-button>
-    </div>
+    <template is="dom-if" if="[[showOtherApn_(selectedApn_)]]">    
+      <div class="property-box single-column indented">
+        <network-property-list-mojo on-property-change="onOtherApnChange_"
+            fields="[[otherApnFields_]]" property-dict="[[otherApn_]]"
+            edit-field-types="[[otherApnEditTypes_]]" prefix="cellular.apn.">
+        </network-property-list-mojo>
+        <cr-button class="action-button" on-click="onSaveOtherTap_">
+          [[i18n('save')]]
+        </cr-button>
+      </div>
+    </template>
   </template>
   <script src="network_apnlist.js"></script>
 </dom-module>