WebUI: swap paper-dropdown-menu out for md-select.

chrome/browser/resources/md_user_manager/create_profile.html

 <link rel="import" href="/import_supervised_user.html">
 <link rel="import" href="/profile_browser_proxy.html">
 <link rel="import" href="/shared_styles.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 
 <dom-module id="create-profile">
   <template>
-    <style include="shared-styles iron-positioning">
+    <style include="shared-styles iron-positioning md-select">
       .container {
         color: var(--primary-text-color);
         width: var(--page-width);
       }
 
       #message-container {
         -webkit-transition: top 400ms cubic-bezier(.4, 0, .2, 1),
                             visibility 0s linear 400ms;
         align-items: center;
         background-color: var(--paper-red-50);
@@ skipping 31 matching lines @@
         text-decoration: underline;
       }
 
       #title-bar {
         border-bottom: var(--user-manager-separator-line);
         font-size: 16px;
         font-weight: 500;
         padding: 104px 0 16px;
       }
 
-      #nameInput,
-      paper-dropdown-menu {
+      #nameInput {
         --paper-input-container-focus-color: var(--google-blue-500);
         --paper-input-container-input: {
           font-size: inherit;
         };
         --paper-input-container-label: {
           font-size: inherit;
         };
       }
 
       #nameInput {
@@ skipping 15 matching lines @@
       }
 
       #supervised-user-container {
         -webkit-padding-start: 32px;
       }
 
       #supervised-user-container #learn-more {
         line-height: 20px;
       }
 
-      #supervised-user-container paper-dropdown-menu {
+      #supervised-user-container .md-select-wrapper {
+        -webkit-margin-start: calc(-1 * var(--md-select-side-padding));

[dpapad, 2017/06/16 00:55:19]

I've found two other places where we do similar thing, see
https://cs.chromium.org/search/?q=%22Mitigate+for+md-select%22&type=cs. Should
we update those to also use the variable?

[scottchen, 2017/06/16 01:53:20]

Yes!

         margin-top: 4px;
-        width: 200px;
-      }
-
-      #supervised-user-container paper-listbox paper-item {
-        --paper-item: {
-          font-size: inherit;
-          min-height: 40px;
-        };
       }
 
       #supervised-user-container #import-user {
         -webkit-margin-start: 16px;
       }
 
       #supervised-user-container #sign-in-howto-message {
         margin-top: 12px;
       }
 
@@ skipping 35 matching lines @@
       <template is="dom-if" if="[[!isForceSigninEnabled_]]">
         <paper-checkbox id="makeSupervisedCheckbox" checked="{{isSupervised_}}">
           $i18n{manageProfilesSupervisedSignedInLabel}
         </paper-checkbox>
         <div id="supervised-user-container">
           <div id="learn-more" >
             <a is="action-link" on-tap="onLearnMoreTap_">$i18n{learnMore}</a>
           </div>
           <template is="dom-if" if="[[isSupervised_]]">
             <template is="dom-if" if="[[isSignedIn_(signedInUsers_)]]">
-              <paper-dropdown-menu label="$i18n{selectAnAccount}" no-label-float>
-                <paper-listbox class="dropdown-content"
-                    selected="{{signedInUserIndex_}}"
-                    attr-for-selected="data-user-index">
+              <div class="md-select-wrapper">
+                <select class="md-select" on-change="onAccountChanged_">
+                  <option disabled selected>$i18n{selectAnAccount}</option>
                   <template is="dom-repeat" items="[[signedInUsers_]]">
-                    <paper-item data-user-index$="[[index]]">
+                    <option value="[[index]]">
                       [[item.username]]
-                    </paper-item>
+                    </option>
                   </template>
-                </paper-listbox>
-              </paper-dropdown-menu>
+                </select>
+                <span class="md-select-underline"></span>
+              </div>
               <a id="import-user" is="action-link" on-tap="onImportUserTap_"
                   hidden="[[isImportUserLinkHidden_(createInProgress_,
                                                     loadingSupervisedUsers_,
                                                     signedInUserIndex_)]]">
                 $i18n{importExistingSupervisedUserLink}
               </a>
             </template>
             <div id="sign-in-howto-message"
                 hidden="[[isSignedIn_(signedInUsers_)]]"
                 inner-h-t-m-l="[[i18nAllowIDAttr_('noSignedInUserMessage')]]">
@@ skipping 14 matching lines @@
                                         loadingSupervisedUsers_,
                                         profileName_)]]">
           $i18n{createProfileConfirm}
         </paper-button>
       </div>
       <import-supervised-user id="importUserPopup"></import-supervised-user>
     </div>
   </template>
   <script src="create_profile.js"></script>
 </dom-module>