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

chrome/browser/resources/md_extensions/keyboard_shortcuts.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/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.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-item/paper-item.html">

[dpapad, 2017/06/15 01:35:36]

Is this still used?

[scottchen, 2017/06/15 23:50:51]

Nope, removing.

 <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://extensions/animation_helper.html">
 <link rel="import" href="chrome://extensions/shortcut_input.html">
 
 <dom-module id="extensions-keyboard-shortcuts">
   <template>
-    <style>
+    <style include="md-select">
       [hidden] {
         display: none !important;
       }
 
       .shortcut-card {
         @apply(--shadow-elevation-2dp);
         background-color: white;
         color: var(--paper-grey-600);
         margin: 0 auto 16px auto;
         max-width: 928px;
         min-width: 600px;
         padding-bottom: 8px;
         width: 90%;
       }
 
       .command-entry {
         align-items: center;
         display: flex;
         font-size: 13px;
         height: 48px;
       }
 
       .command-name {
         color: var(--paper-grey-900);
         flex: 1;
       }
 
-      .command-entry paper-dropdown-menu {
+      .command-entry .md-select-wrapper {
         -webkit-margin-start: 40px;
       }
 
       .card-title {
         align-items: center;
         border-bottom: 1px solid var(--paper-grey-400);
         display: flex;
         font-size: 14px;
         font-weight: 500;
         margin-bottom: 9px;
         padding: 16px 20px;
       }
 
       .icon {
         -webkit-margin-end: 20px;
         height: 16px;
         width: 16px;
       }
 
       .card-controls {
         /* We line up the controls with the name, which is after the
            20px left padding + 16px icon + 20px margin on the icon. */
         -webkit-margin-end: 20px;
         -webkit-margin-start: 56px;
       }
 
       #main {
         margin-top: 24px;
       }
-
-      #main paper-dropdown-menu {
-        --paper-input-container: {
-          margin-bottom: 14px;
-          padding: 0;
-        };
-        --paper-input-container-color: var(--paper-grey-400);
-        --paper-input-container-focus-color: var(--google-blue-500);
-        --paper-input-container-input: {
-          font-size: 13px;
-        };
-        --paper-input-container-underline-disabled: {
-          border-bottom: 1px solid;
-        };
-      }
-
     </style>
     <div id="main">
       <template is="dom-repeat" items="[[calculateShownItems_(items.*)]]">
         <div class="shortcut-card">
           <div class="card-title">
             <img class="icon" src="[[item.iconUrl]]">
             <span>[[item.name]]</span>
           </div>
           <div class="card-controls">
             <template is="dom-repeat" items="[[item.commands]]" as="command">
               <div class="command-entry" command="[[command]]">
                 <span class="command-name">[[command.description]]</span>
                 <extensions-shortcut-input item="[[item.id]]"
                     shortcut="[[command.keybinding]]"
                     command-name="[[command.name]]">
                 </extensions-shortcut-input>
-                <paper-dropdown-menu
-                    disabled$="[[computeScopeDisabled_(command)]]">
-                  <paper-listbox class="dropdown-content"
-                      selected="[[computeSelectedScope_(command)]]">
-                    <paper-item>$i18n{shortcutScopeInChrome}</paper-item>
-                    <paper-item>$i18n{shortcutScopeGlobal}</paper-item>
-                  </paper-listbox>
-                </paper-dropdown>
+                <div class="md-select-wrapper">
+                  <select class="md-select" on-change="onScopeChanged_"
+                      disabled$="[[computeScopeDisabled_(command)]]">
+                    <template is="dom-repeat" items="[[scopes_]]" as="scope">
+                      <option value="[[scope.value]]" selected="[[

[dpapad, 2017/06/15 01:35:37]

FYI, I recall now that binding the "selected" attribute (using "$=") is
problematic, where as binding to the "selected" JS property (using simply "=" is
safe).

Previous issue where I came to this conclusion
https://bugs.chromium.org/p/chromium/issues/detail?id=698189#c5, and resulting
fix at https://codereview.chromium.org/2736803002.

[scottchen, 2017/06/15 23:50:51]

Discussed with dpapad offline, see new patch for cleaner solution.

+                          isScopeEqual_(command.scope, scope.value)]]">
+                        [[scope.label]]
+                      </option>
+                    </template>
+                  </select>
+                  <span class="md-select-underline"></span>
+                </div>
               </div>
             </template>
           </div>
         </div>
       </template>
     </div>
   </template>
   <script src="chrome://extensions/keyboard_shortcuts.js"></script>
 </dom-module>