Use md-select instead of paper-dropdown-menu-light in internet page

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

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Polymer element for displaying and modifying a list of cellular
  * access points.
  */
 Polymer({
   is: 'network-apnlist',
@@ skipping 123 matching lines @@
 
     // Save the 'other' properties.
     this.otherApn_ = otherApn;
 
     // Append 'other' to the end of the list of APNs.
     result.push(otherApn);
 
     this.apnSelectList_ = result;
     this.selectedApn_ =
         (activeApn && activeApn.AccessPointName) || otherApn.AccessPointName;
-    // We need to flush the DOM here, otherwise the paper-dropdown-menu-light

[dpapad, 2016/10/17 22:57:05]

Native <select> has the same problem described by this comment. Setting its
|value| is ignored if the <option> that has the corresponding |value| attribute
has not been rendered yet.

Are you sure that this works? I had to do a call to async() to bypass this, see
for example
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/passwo....

Basically

tihs.apnSelectList_ = result;
this.async(function() {
  this.selectedApn_ = ...;
  this.$.selectApn.value = this.selectedApn_;
}.bind(this));

[stevenjb, 2016/10/17 23:10:19]

Hrm, yeah, you're right, I need to us async() here.

-    // will not update to correctly display the selected AccessPointName.
-    Polymer.dom.flush();
+    this.$.selectApn.value = this.selectedApn_;
   },
 
   /**
    * @param {!CrOnc.APNProperties|undefined=} apnProperties
    * @return {!CrOnc.APNProperties} A new APN object with properties from
    *     |apnProperties| if provided.
    * @private
    */
   createApnObject_: function(apnProperties) {
     var newApn = {AccessPointName: ''};
@@ skipping 13 matching lines @@
     /** @type {!chrome.networkingPrivate.ManagedAPNList|undefined} */ var
         apnlist = this.networkProperties.Cellular.APNList;
     if (!apnlist)
       return [];
     return /** @type {!Array<!CrOnc.APNProperties>} */ (
         CrOnc.getActiveValue(apnlist));
   },
 
   /**
    * Event triggered when the selectApn selection changes.
-   * @param {!{detail: !{selected: string}}} event
+   * @param {!{target: !{value: string}}} event

[dpapad, 2016/10/17 22:57:05]

I think the proper way to type annotate this is as follows

@param {!Event} e
...

var accessPointName = /** @type {!HTMLSelectElement} */ (event.target).value;

[stevenjb, 2016/10/17 23:10:19]

Sure. Done.

    * @private
    */
   onSelectApnChange_: function(event) {
-    /** @type {string} */ var accessPointName = event.detail.selected;
+    var accessPointName = event.target.value;
     // When selecting 'Other', don't set a change event unless a valid
     // non-default value has been set for Other.
     if (this.isOtherSelected_(accessPointName) &&
         (!this.otherApn_ || !this.otherApn_.AccessPointName ||
          this.otherApn_.AccessPointName == this.DefaultAccessPointName)) {
+      this.selectedApn_ = accessPointName;
       return;
     }
     this.sendApnChange_(accessPointName);
   },
 
   /**
    * Event triggered when any 'Other' APN network property changes.
    * @param {!{detail: {field: string, value: string}}} event
    * @private
    */
@@ skipping 60 matching lines @@
    * @private
    */
   findApnInList: function(apnList, accessPointName) {
     for (let a of apnList) {
       if (a.AccessPointName == accessPointName)
         return a;
     }
     return undefined;
   }
 });