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

chrome/browser/resources/settings/internet_page/network_nameservers.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 network nameserver options.
  */
 Polymer({
   is: 'network-nameservers',
 
@@ skipping 25 matching lines @@
       },
     },
 
     /**
      * The selected nameserver type.
      * @private
      */
     nameserversType_: {
       type: String,
       value: 'automatic',
+      observer: 'nameserversTypeChanged_',
     },
 
     /**
      * Array of nameserver types.
      * @private
      */
     nameserverTypeNames_: {
       type: Array,
       value: ['automatic', 'google', 'custom'],
       readOnly: true,
@@ skipping 39 matching lines @@
         type = 'google';
       } else {
         type = 'custom';
       }
     } else {
       type = 'automatic';
     }
     this.setNameservers_(type, nameservers);
   },
 
+  /** @private */
+  nameserversTypeChanged_: function() {
+    this.$.nameserverType.value = this.nameserversType_;

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

I don't think this observer needed? You can use a 1-way binding to change the
displayed selected value.

<select .... value="[[nameServersType_]]">

This will work just fine as long as you have ensured that the dom-repeat
template has been rendered before setting a value to the <select>'s |value|. See
example at
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/contro....

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

Hmm, I'm not sure I understand how using data binding ensures "the dom-repeat
template has been rendered before setting a value to the <select>'s |value|".
I'll ping you to discuss this.

[stevenjb, 2016/10/17 23:58:01]

After looking over the settings-dropdown-menu implementation I understand what
you meant now.

This is pretty awkward, a helper would be nice here, but at this point I'm just
going to push this forward.

+  },
+
   /**
    * @param {string} nameserversType
    * @param {!Array<string>} nameservers
    * @private
    */
   setNameservers_: function(nameserversType, nameservers) {
     this.nameserversType_ = nameserversType;
     if (nameserversType == 'custom') {
       // Add empty entries for unset custom nameservers.
       for (let i = nameservers.length; i < this.MAX_NAMESERVERS; ++i)
@@ skipping 20 matching lines @@
    * @return {boolean} True if the nameservers are editable.
    * @private
    */
   canEdit_: function() {
     return this.editable && this.nameserversType_ == 'custom';
   },
 
   /**
    * Event triggered when the selected type changes. Updates nameservers and
    * sends the change value if necessary.
-   * @param {!{detail: !{selected: string}}} e
+   * @param {!{target: !{value: string}}} e

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

Same here.

[stevenjb, 2016/10/17 23:58:01]

Acknowledged.

    * @private
    */
   onTypeChange_: function(e) {
     if (this.nameserversType_ == 'custom')
       this.savedNameservers_ = this.nameservers_;
-    var type = e.detail.selected;
+    var type = e.target.value;
     this.nameserversType_ = type;
     if (type == 'custom') {
       // Restore the saved nameservers.
       this.setNameservers_(type, this.savedNameservers_);
       // Only send custom nameservers if they are not empty.
       if (this.savedNameservers_.length == 0)
         return;
     }
     this.sendNameServers_();
   },
@@ skipping 40 matching lines @@
       });
     } else {
       // automatic
       this.fire('nameservers-change', {
         field: 'NameServersConfigType',
         value: CrOnc.IPConfigType.DHCP,
       });
     }
   },
 });