MD Settings: First half of Device > Keyboard sub-page.

chrome/browser/resources/settings/device_page/keyboard.js

Index: chrome/browser/resources/settings/device_page/keyboard.js
diff --git a/chrome/browser/resources/settings/device_page/keyboard.js b/chrome/browser/resources/settings/device_page/keyboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..938427af116772df7f42dcb53b1b69e59ed662f6
--- /dev/null
+++ b/chrome/browser/resources/settings/device_page/keyboard.js
@@ -0,0 +1,98 @@
+// Copyright 2016 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
+ * 'settings-keyboard' is the settings subpage with keyboard settings.
+ *
+ * @group Chrome Settings Elements
+ */
+
+// TODO(michaelpg): don't duplicate these docs; convert settings_dropdown_menu
+// and everything that depends on it to compiled_resources2.gyp?

[dschuyler, 2016/03/02 01:08:06]

Is this referring to the comment below?
Maybe mention DropdownMenuOption here or integrate this into
or closer to the comment/item below?  Or maybe say "don't 
duplicate these @typedef's".

[michaelpg, 2016/03/02 02:42:06]

Done.

+
+/**
+ * The |name| is shown in the gui.  The |value| us use to set or compare with
+ * the preference value.
+ * @typedef {{
+ *   name: string,
+ *   value: (number|string)
+ * }}
+ */
+var DropdownMenuOption;
+
+/**
+ * @typedef {!Array<!DropdownMenuOption>}
+ */
+var DropdownMenuOptionList;
+
+Polymer({
+  is: 'settings-keyboard',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  properties: {
+    /** Preferences state. */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @private Whether to show Caps Lock options. */
+    showCapsLock_: Boolean,
+
+    /** @private Whether to show diamond key options. */
+    showDiamondKey_: Boolean,
+
+    /** @private {!DropdownMenuOptionList} Menu items for key mapping. */
+    keyMapTargets_: Object,
+
+    /**
+     * @private {!DropdownMenuOptionList} Menu items for key mapping, including
+     * Caps Lock.
+     */
+    keyMapTargetsWithCapsLock_: Object,
+  },
+
+  /** @override */
+  ready: function() {
+    cr.addWebUIListener('show-keys-changed', this.onShowKeysChange_.bind(this));
+    chrome.send('initializeKeyboardSettings');
+    this.setUpKeyMapTargets_();
+  },
+
+  /**
+   * Initializes the dropdown menu options for remapping keys.
+   * @private
+   */
+  setUpKeyMapTargets_: function() {
+    this.keyMapTargets_ = [
+      {value: 0, name: loadTimeData.getString('keyboardKeySearch')},
+      {value: 1, name: loadTimeData.getString('keyboardKeyCtrl')},
+      {value: 2, name: loadTimeData.getString('keyboardKeyAlt')},
+      {value: 3, name: loadTimeData.getString('keyboardKeyDisabled')},
+      {value: 5, name: loadTimeData.getString('keyboardKeyEscape')},
+    ];
+
+    var keyMapTargetsWithCapsLock = this.keyMapTargets_.slice();
+    // Add Caps Lock, for keys allowed to be mapped to Caps Lock.
+    keyMapTargetsWithCapsLock.splice(4, 0, {
+      value: 4, name: loadTimeData.getString('keyboardKeyCapsLock'),
+    });
+    this.keyMapTargetsWithCapsLock_ = keyMapTargetsWithCapsLock;
+  },
+
+  /**
+   * Handler for updating which keys to show.
+   * @param {boolean} showCapsLock
+   * @param {boolean} showDiamondKey
+   * @private
+   */
+  onShowKeysChange_: function(showCapsLock, showDiamondKey) {
+    this.showCapsLock_ = showCapsLock;
+    this.showDiamondKey_ = showDiamondKey;
+  },
+});