chore: preset selection dropdown working

Author: abose

src/command/KeyBindingManager.js

@@ -57,7 +57,9 @@ define(function (require, exports, module) {
         _userKeyMapFilePath = path.normalize(brackets.app.getApplicationSupportDirectory() + "/" + KEYMAP_FILENAME);
 
     const EVENT_KEY_BINDING_ADDED = "keyBindingAdded",
-        EVENT_KEY_BINDING_REMOVED = "keyBindingRemoved";
+        EVENT_KEY_BINDING_REMOVED = "keyBindingRemoved",
+        EVENT_NEW_PRESET = "newPreset",
+        EVENT_PRESET_CHANGED = "presetChanged";
 
     const KEY = Keys.KEY;
     const knownBindableCommands = new Set();
@@ -1629,28 +1631,33 @@ define(function (require, exports, module) {
         if(_customKeymapIDInUse === packID) {
             _loadUserKeyMap();
         }
+        exports.trigger(EVENT_NEW_PRESET, packID);
     }
 
     function getAllCustomKeymapPacks() {
         const packDetails = [];
         for(let packID of Object.keys(_registeredCustomKeyMaps)){
-            packDetails.push([{
+            packDetails.push({
                 packID,
                 packageName: _registeredCustomKeyMaps[packID].packageName,
                 keyMap: structuredClone(_registeredCustomKeyMaps[packID].keyMap)
-            }]);
+            });
         }
         return packDetails;
     }
 
+    function getCurrentCustomKeymapPack() {
+        return _registeredCustomKeyMaps[_customKeymapIDInUse];
+    }
+
     /**
      * Determines the origin of a custom keyboard shortcut is from user keymap.json or a custom keymap preset.
      * If it is neither (Eg. phoenix default shortcuts, will return null.)
      *
      * @param {string} shortcut - The keyboard shortcut to check.
      * @returns {string|null} - The origin of the custom shortcut, or null if it is not a custom shortcut.
      */
-    function getCustomShortcutOrigin(shortcut) {
+    function _getCustomShortcutOrigin(shortcut) {
         shortcut = normalizeKeyDescriptorString(shortcut);
         if(_originalUserKeyMap.hasOwnProperty(shortcut)){
             return Strings.KEYBOARD_SHORTCUT_SRC_USER;
@@ -1667,9 +1674,9 @@ define(function (require, exports, module) {
      * @param packID
      * @private
      */
-    function _useCustomKeymapPack(packID) {
+    function _setCurrentCustomKeymapPack(packID) {
         if(!PreferencesManager){
-            throw new Error("_useCustomKeymapPack should be called only after appinit event.");
+            throw new Error("setCurrentCustomKeymapPack should be called only after appinit event.");
         }
         PreferencesManager.stateManager.set(STATE_CUSTOM_KEY_MAP_ID, packID);
     }
@@ -1678,6 +1685,7 @@ define(function (require, exports, module) {
         if(!_customKeymapIDInUse || !_registeredCustomKeyMaps[_customKeymapIDInUse]){
             return userKeyMap;
         }
+        Metrics.countEvent(Metrics.EVENT_TYPE.KEYBOARD, 'preset', _customKeymapIDInUse);
         // the custom keymap is something like {"Ctrl-Shift-&": "navigate.gotoFirstProblem"} .
         // user defined shortcuts take precedence over custom shortcuts.
         const customKeyMap = _registeredCustomKeyMaps[_customKeymapIDInUse].keyMap;
@@ -1837,6 +1845,7 @@ define(function (require, exports, module) {
             .on("change", ()=>{
                 _customKeymapIDInUse = PreferencesManager.stateManager.get(STATE_CUSTOM_KEY_MAP_ID);
                 _loadUserKeyMap();
+                exports.constructor(EVENT_PRESET_CHANGED, _customKeymapIDInUse);
             });
         _customKeymapIDInUse = PreferencesManager.stateManager.get(STATE_CUSTOM_KEY_MAP_ID);
         _loadUserKeyMap();
@@ -1984,8 +1993,9 @@ define(function (require, exports, module) {
     exports._onCtrlUp = _onCtrlUp;
 
     // private api
-    exports._useCustomKeymapPack = _useCustomKeymapPack;
     exports._getKnownBindableCommands = _getKnownBindableCommands;
+    exports._getCustomShortcutOrigin = _getCustomShortcutOrigin;
+    exports._setCurrentCustomKeymapPack = _setCurrentCustomKeymapPack;
 
     // Define public API
     exports.getKeymap = getKeymap;
@@ -2002,13 +2012,15 @@ define(function (require, exports, module) {
     exports.showShortcutSelectionDialog = showShortcutSelectionDialog;
     exports.registerCustomKeymapPack = registerCustomKeymapPack;
     exports.getAllCustomKeymapPacks = getAllCustomKeymapPacks;
-    exports.getCustomShortcutOrigin = getCustomShortcutOrigin;
+    exports.getCurrentCustomKeymapPack = getCurrentCustomKeymapPack;
 
     // public constants
     exports.KEY = KEY;
     // public events
     exports.EVENT_KEY_BINDING_ADDED = EVENT_KEY_BINDING_ADDED;
     exports.EVENT_KEY_BINDING_REMOVED = EVENT_KEY_BINDING_REMOVED;
+    exports.EVENT_NEW_PRESET = EVENT_NEW_PRESET;
+    exports.EVENT_PRESET_CHANGED = EVENT_PRESET_CHANGED;
 
     /**
      * Use windows-specific bindings if no other are found (e.g. Linux).

src/extensionsIntegrated/DisplayShortcuts/main.js

@@ -38,6 +38,7 @@ define(function (require, exports, module) {
         Dialogs             = require("widgets/Dialogs"),
         Metrics       = require("utils/Metrics"),
         WorkspaceManager    = require("view/WorkspaceManager"),
+        StringUtils   = require("utils/StringUtils"),
         AppInit             = require("utils/AppInit"),
         DropdownButton      = require("widgets/DropdownButton").DropdownButton,
         Strings             = require("strings");
@@ -47,6 +48,7 @@ define(function (require, exports, module) {
     const panelHtml           = require("text!./templates/bottom-panel.html"),
         shortcutsHtml       = require("text!./templates/shortcut-table.html"),
         TOGGLE_SHORTCUTS_ID = Commands.HELP_TOGGLE_SHORTCUTS_PANEL;
+    const DEFAULT_PACK_PLACEHOLDER = "default";
     let keyList = [],
         panel,
         $shortcutsPanel,
@@ -111,7 +113,7 @@ define(function (require, exports, module) {
         //  Core commands in Brackets use a simple command title as an id, for example "open.file".
         //  Extensions should use the following format: "author.myextension.mycommandname". 
         //  For example, "lschmitt.csswizard.format.css".
-        const customOrigin = KeyBindingManager.getCustomShortcutOrigin(keyBinding);
+        const customOrigin = KeyBindingManager._getCustomShortcutOrigin(keyBinding);
         if(customOrigin){
             return customOrigin;
         }
@@ -337,6 +339,7 @@ define(function (require, exports, module) {
     }
 
     function _showShortcuts() {
+        _updatePresets();
         let $shortcuts = $("#shortcuts-panel");
 
         // Apply any active filter
@@ -391,6 +394,21 @@ define(function (require, exports, module) {
         keyList = [];
     }
 
+    function _updatePresets() {
+        if (!panel || !panel.isVisible()) {
+            return;
+        }
+        const allPacks = KeyBindingManager.getAllCustomKeymapPacks();
+        const currentKeymapPack = KeyBindingManager.getCurrentCustomKeymapPack();
+        if(currentKeymapPack){
+            presetPicker.$button.text(StringUtils.format(
+                Strings.KEYBOARD_SHORTCUT_PRESET_USING, currentKeymapPack.packageName));
+        } else {
+            presetPicker.$button.text(Strings.KEYBOARD_SHORTCUT_PRESET_SELECT);
+        }
+        presetPicker.items = [DEFAULT_PACK_PLACEHOLDER, ...allPacks.map(pack=>pack.packID)];
+    }
+
     _updateKeyBindings = _.debounce(function () {
         // Update keylist
         destroyKeyList();
@@ -430,13 +448,17 @@ define(function (require, exports, module) {
         }
     }
 
-    function _presetRenderer(item) {
-        var html = "<span class='stylesheet-name'>" + _.escape(item.name);
-        if (item.subDirStr) {
-            html += "<span class='stylesheet-dir'> — " + _.escape(item.subDirStr) + "</span>";
+    function _presetRenderer(packID) {
+        if(packID === DEFAULT_PACK_PLACEHOLDER) {
+            return Strings.DEFAULT;
         }
-        html += "</span>";
-        return html;
+        const allPacks = KeyBindingManager.getAllCustomKeymapPacks();
+        for(let pack of allPacks) {
+            if(pack.packID === packID) {
+                return pack.packageName;
+            }
+        }
+        return packID;
     }
 
     AppInit.appReady(function() {
@@ -461,10 +483,17 @@ define(function (require, exports, module) {
 
         $shortcutsPanel = $("#shortcuts-panel");
 
-        presetPicker = new DropdownButton("Select Shortcut Presets", [], _presetRenderer, {
-            cssClasses: "presetPicker"
+        presetPicker = new DropdownButton(Strings.KEYBOARD_SHORTCUT_PRESET_SELECT, [], _presetRenderer, {
+            cssClasses: "presetPicker no-focus"
         });
         $shortcutsPanel.find(".presetPickerContainer").append(presetPicker.$button);
+        presetPicker.on("select", function (e, selectedPackID) {
+            if(selectedPackID === DEFAULT_PACK_PLACEHOLDER) {
+                KeyBindingManager._setCurrentCustomKeymapPack(null);
+            }
+            KeyBindingManager._setCurrentCustomKeymapPack(selectedPackID);
+            _updatePresets();
+        });
 
         // Events
         $shortcutsPanel.on("dblclick", function (e) {
@@ -510,5 +539,7 @@ define(function (require, exports, module) {
         });
         KeyBindingManager.on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, _updateKeyBindings);
         KeyBindingManager.on(KeyBindingManager.EVENT_KEY_BINDING_REMOVED, _updateKeyBindings);
+        KeyBindingManager.on(KeyBindingManager.EVENT_NEW_PRESET, _updatePresets);
+        KeyBindingManager.on(KeyBindingManager.EVENT_PRESET_CHANGED, _updatePresets);
     });
 });

src/nls/root/strings.js

@@ -371,6 +371,9 @@ define({
     //Bottom panel
     "KEYBOARD_SHORTCUT_PANEL_TITLE": "Keyboard Shortcuts",
     "KEYBOARD_SHORTCUT_PRESET_TOOLTIP": "Use keyboard shortcuts from editors like VSCode, WebStorm, or Sublime Text",
+    "KEYBOARD_SHORTCUT_PRESET_SELECT": "Select Shortcut Presets",
+    "KEYBOARD_SHORTCUT_PRESET_USING": "Using {0}",
+    "DEFAULT": "Default",
     "KEYBOARD_SHORTCUT_PANEL_FILTER": "Filter…",
     "KEYBOARD_SHORTCUT_PANEL_RESET": "Reset\u2026",
     "KEYBOARD_SHORTCUT_PANEL_RESET_DEFAULT": "Reset To Default Shortcuts\u2026",