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

chrome/browser/resources/md_extensions/keyboard_shortcuts.js

Index: chrome/browser/resources/md_extensions/keyboard_shortcuts.js
diff --git a/chrome/browser/resources/md_extensions/keyboard_shortcuts.js b/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
index 98dd95e9079f3721cce1d6defccd997605fd7071..1b94f0ba50914cf15371c4319761793ddc067911 100644
--- a/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
+++ b/chrome/browser/resources/md_extensions/keyboard_shortcuts.js
@@ -9,19 +9,34 @@ cr.define('extensions', function() {
   var KeyboardShortcuts = Polymer({
     is: 'extensions-keyboard-shortcuts',
 
-    behaviors: [Polymer.NeonAnimatableBehavior],
+    behaviors: [Polymer.NeonAnimatableBehavior, I18nBehavior],
 
     properties: {
       /** @type {Array<!chrome.developerPrivate.ExtensionInfo>} */
       items: Array,
     },
 
+    /** @private {Array<Object>} */

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

Can this be !Array<!Object> ?

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

This property is removed in the newest patch.

+    scopes_: [],
+
     ready: function() {
       /** @type {!extensions.AnimationHelper} */
       this.animationHelper = new extensions.AnimationHelper(this, this.$.main);
       this.animationHelper.setEntryAnimations([extensions.Animation.FADE_IN]);
       this.animationHelper.setExitAnimations([extensions.Animation.SCALE_DOWN]);
       this.sharedElements = {hero: this.$.main};
+
+      // Preparing the options to be used easily by the html template.
+      this.scopes_ = [
+        {
+          value: chrome.developerPrivate.CommandScope.CHROME,
+          label: this.i18n('shortcutScopeInChrome')
+        },
+        {
+          value: chrome.developerPrivate.CommandScope.GLOBAL,
+          label: this.i18n('shortcutScopeGlobal')
+        },
+      ];
     },
 
     /**
@@ -57,26 +72,25 @@ cr.define('extensions', function() {
     },
 
     /**
-     * Returns the scope index in the dropdown menu for the command's scope.
-     * @param {chrome.developerPrivate.Command} command
-     * @return {number}
+     * Helper to check if an option's scope value equals current command scope.
+     * @param {!string} commandScope the current command's scope value

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

"!" not necessary with strings.

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

Acknowledged, though this function is removed in the newest patch.

+     * @param {!string} optionScopeValue scope value of options checked against
+     * @return {boolean}
      * @private
      */
-    computeSelectedScope_: function(command) {
-      // These numbers match the indexes in the dropdown menu in the html.
-      switch (command.scope) {
-        case chrome.developerPrivate.CommandScope.CHROME:
-          return 0;
-        case chrome.developerPrivate.CommandScope.GLOBAL:
-          return 1;
-      }
-      assertNotReached();
+    isScopeEqual_: function(commandScope, optionScopeValue) {
+      return commandScope == optionScopeValue;
     },
 
     /** @private */
     onCloseButtonClick_: function() {
       this.fire('close');
     },
+
+    /** @private */
+    onScopeChanged_: function(e) {
+      e.model.set('command.scope', e.target.value);
+    },
   });
 
   return {KeyboardShortcuts: KeyboardShortcuts};