feat: custom shortcut preset registration infra for eg. vscode shortcuts

Author: abose

src/brackets.js

@@ -115,6 +115,8 @@ define(function (require, exports, module) {
      * Global notification UI Widgets.
      */
     window.NotificationUI = NotificationUI;
+    Phoenix.globalAPI.NotificationUI = NotificationUI;
+    Phoenix.globalAPI.PreferencesManager = PreferencesManager;
 
     // load modules for later use
     require("utils/Global");

src/command/KeyBindingManager.js

@@ -44,6 +44,7 @@ define(function (require, exports, module) {
     require("utils/Global");
 
     const KEY = Keys.KEY;
+    const allMenuCommands = new Set();
     /**
      * Brackets Application Menu Constants
      * @enum {string}
@@ -171,6 +172,14 @@ define(function (require, exports, module) {
         return menuMap[id];
     }
 
+    /**
+     * retruns a set containing all commands that has a menu item registered
+     * @returns {Set<string>}
+     */
+    function getAllMenuItemCommands() {
+        return new Set(allMenuCommands);
+    }
+
     /**
      * Retrieves the map of all Menu objects.
      * @return {Object.<string, Menu>}
@@ -573,10 +582,16 @@ define(function (require, exports, module) {
                     return null;
                 }
                 name = command.getName();
+                if(!allMenuCommands.has(commandID)){
+                    allMenuCommands.add(commandID);
+                }
             }
         } else {
             commandID = command.getID();
             name = command.getName();
+            if(!allMenuCommands.has(commandID)){
+                allMenuCommands.add(commandID);
+            }
         }
 
         // Internal id is the a composite of the parent menu id and the command id.
@@ -1647,6 +1662,7 @@ define(function (require, exports, module) {
     exports.getOpenMenu = getOpenMenu;
     exports.registerContextMenu = registerContextMenu;
     exports.closeAll = closeAll;
+    exports.getAllMenuItemCommands = getAllMenuItemCommands;
     exports.Menu = Menu;
     exports.MenuItem = MenuItem;
     exports.ContextMenu = ContextMenu;

src/command/Menus.js

@@ -39,8 +39,11 @@ define(function (require, exports, module) {
         Metrics       = require("utils/Metrics"),
         WorkspaceManager    = require("view/WorkspaceManager"),
         AppInit             = require("utils/AppInit"),
+        DropdownButton      = require("widgets/DropdownButton").DropdownButton,
         Strings             = require("strings");
 
+    require("./vscode.js");
+
     const panelHtml           = require("text!./templates/bottom-panel.html"),
         shortcutsHtml       = require("text!./templates/shortcut-table.html"),
         TOGGLE_SHORTCUTS_ID = Commands.HELP_TOGGLE_SHORTCUTS_PANEL;
@@ -49,6 +52,7 @@ define(function (require, exports, module) {
         $shortcutsPanel,
         $filterField,
         currentFilter,
+        presetPicker,
         _updateKeyBindings;
 
     let sortByBase = 1,
@@ -102,11 +106,15 @@ define(function (require, exports, module) {
         return string;
     }
 
-    function _getOriginFromCommandId(cmdID) {
+    function _getOriginFromCommandId(cmdID, keyBinding) {
         // According to CommandManager.register() documentation:
         //  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);
+        if(customOrigin){
+            return customOrigin;
+        }
         let idArray = cmdID.split(".");
         const defaultCommands = Object.values(Commands);
 
@@ -138,36 +146,39 @@ define(function (require, exports, module) {
     // CodeMirror and Brackets key maps have different formats, so collect
     // keys into a normalized array
     function _getkeyList() {
-        let i,
+        let keyBinding,
             base,
             command,
             key;
+        const allCommandsWithShortcuts = new Set();
+        const menuCommands = Menus.getAllMenuItemCommands();
+        const knownBindableCommands = KeyBindingManager._getKnownBindableCommands();
+        const allCommandsToList = new Set([...menuCommands, ...knownBindableCommands]);
 
         // Brackets keymap
         let bracketsKeymap = KeyBindingManager.getKeymap();
         if (bracketsKeymap) {
-            for (i in bracketsKeymap) {
-                if (bracketsKeymap.hasOwnProperty(i)) {
-                    key = bracketsKeymap[i];
+            for (keyBinding in bracketsKeymap) {
+                if (bracketsKeymap.hasOwnProperty(keyBinding)) {
+                    key = bracketsKeymap[keyBinding];
                     if (key) {
-                        base = _getBaseKey(i);
+                        base = _getBaseKey(keyBinding);
                         command = CommandManager.get(key.commandID);
                         if (!command) {
                             continue;
                         }
 
-                        // Listen for keybinding changes
-                        command.on("keyBindingAdded.bds keyBindingRemoved.bds", _updateKeyBindings);
-
+                        allCommandsWithShortcuts.add(key.commandID);
                         keyList.push({
                             keyBase: KeyBindingManager.formatKeyDescriptor(base),
-                            keyBinding: i,
-                            keyBindingDisplay: KeyBindingManager.formatKeyDescriptor(i),
+                            keyBinding: keyBinding,
+                            keyBindingDisplay: KeyBindingManager.formatKeyDescriptor(keyBinding),
                             command: command,
                             commandID: key.commandID,
                             commandName: command.getName(),
-                            origin: _getOriginFromCommandId(key.commandID),
-                            filter: command.getName().toLowerCase() +  _filterFromKeyBinding(i)
+                            origin: _getOriginFromCommandId(key.commandID, keyBinding),
+                            filter: command.getName().toLowerCase() +  _filterFromKeyBinding(keyBinding)
+                                + _getOriginFromCommandId(key.commandID, keyBinding).toLowerCase()
                         });
                     }
                 }
@@ -178,27 +189,44 @@ define(function (require, exports, module) {
         if (CodeMirror.keyMap) {
             let cmKeymap = (brackets.platform === "mac") ? CodeMirror.keyMap.macDefault : CodeMirror.keyMap.pcDefault;
             if (cmKeymap) {
-                for (i in cmKeymap) {
+                for (keyBinding in cmKeymap) {
                     // Note that we only ignore CodeMirror duplicates, but
                     // we want to see Brackets & Extensions duplicates
-                    if (cmKeymap.hasOwnProperty(i) &&
-                            (i !== "fallthrough") &&
-                            (_findKeyBinding(keyList, i) === -1)) {
-                        base = _getBaseKey(i);
+                    if (cmKeymap.hasOwnProperty(keyBinding) &&
+                            (keyBinding !== "fallthrough") &&
+                            (_findKeyBinding(keyList, keyBinding) === -1)) {
+                        base = _getBaseKey(keyBinding);
+                        allCommandsWithShortcuts.add(cmKeymap[keyBinding]);
                         keyList.push({
                             keyBase: KeyBindingManager.formatKeyDescriptor(base),
-                            keyBinding: i,
-                            keyBindingDisplay: KeyBindingManager.formatKeyDescriptor(i),
-                            commandID: cmKeymap[i],
-                            commandName: cmKeymap[i],
-                            origin: origCodeMirror,
-                            filter: cmKeymap[i].toLowerCase() +  _filterFromKeyBinding(i)
+                            keyBinding: keyBinding,
+                            keyBindingDisplay: KeyBindingManager.formatKeyDescriptor(keyBinding),
+                            commandID: cmKeymap[keyBinding],
+                            commandName: cmKeymap[keyBinding],
+                            origin: window.debugMode ? origCodeMirror : origBrackets,
+                            filter: cmKeymap[keyBinding].toLowerCase() +  _filterFromKeyBinding(keyBinding) +
+                                origCodeMirror.toLowerCase()
                         });
                     }
                 }
             }
         }
-        
+
+        for(let commandID of allCommandsToList){
+            if(allCommandsWithShortcuts.has(commandID)){
+                continue;
+            }
+            keyList.push({
+                keyBase: "",
+                keyBinding: "",
+                keyBindingDisplay: "",
+                commandID: commandID,
+                commandName: commandID,
+                origin: _getOriginFromCommandId(commandID, keyBinding),
+                filter: commandID.toLowerCase() + _getOriginFromCommandId(commandID, keyBinding).toLowerCase()
+            });
+        }
+
         return keyList;
     }
 
@@ -402,6 +430,15 @@ 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>";
+        }
+        html += "</span>";
+        return html;
+    }
+
     AppInit.appReady(function() {
         let s, file_menu;
 
@@ -424,6 +461,11 @@ define(function (require, exports, module) {
 
         $shortcutsPanel = $("#shortcuts-panel");
 
+        presetPicker = new DropdownButton("Select Shortcut Presets", [], _presetRenderer, {
+            cssClasses: "presetPicker"
+        });
+        $shortcutsPanel.find(".presetPickerContainer").append(presetPicker.$button);
+
         // Events
         $shortcutsPanel.on("dblclick", function (e) {
             var $rowEl = $(e.target).closest("tr");
@@ -466,5 +508,7 @@ define(function (require, exports, module) {
             }
             _showCommandIdsInPanelIfNeeded();
         });
+        KeyBindingManager.on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, _updateKeyBindings);
+        KeyBindingManager.on(KeyBindingManager.EVENT_KEY_BINDING_REMOVED, _updateKeyBindings);
     });
 });

src/extensionsIntegrated/DisplayShortcuts/main.js

@@ -4,6 +4,7 @@
         <a href="#" class="close">&times;</a>
         <button class="btn reset-to-default" title="{{KEYBOARD_SHORTCUT_PANEL_RESET_DEFAULT}}">{{{KEYBOARD_SHORTCUT_PANEL_RESET}}}</button>
         <input class="filter" type="search" placeholder="{{{KEYBOARD_SHORTCUT_PANEL_FILTER}}}">
+        <span class="presetPickerContainer" title="{{KEYBOARD_SHORTCUT_PRESET_TOOLTIP}}"></span>
     </div>
     <div class="resizable-content"></div>
 </div>

src/extensionsIntegrated/DisplayShortcuts/templates/bottom-panel.html

@@ -0,0 +1,29 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2018 - 2021 Adobe Systems Incorporated. All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+define(function (require, exports, module) {
+    const KeyBindingManager   = require("command/KeyBindingManager"),
+        vscodeKeyMap = JSON.parse(require("text!./vscode.json"));
+
+    const VSCODE_PACK_ID = "vscode";
+
+    KeyBindingManager.registerCustomKeymapPack(VSCODE_PACK_ID, "Visual Studio Code", vscodeKeyMap);
+});

src/extensionsIntegrated/DisplayShortcuts/vscode.js

@@ -0,0 +1,2 @@
+{
+}

src/extensionsIntegrated/DisplayShortcuts/vscode.json

@@ -370,11 +370,14 @@ define({
     "KEYBOARD_SHORTCUT_ORIG_EXTENSION": "Extension",
     //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_PANEL_FILTER": "Filter…",
     "KEYBOARD_SHORTCUT_PANEL_RESET": "Reset\u2026",
     "KEYBOARD_SHORTCUT_PANEL_RESET_DEFAULT": "Reset To Default Shortcuts\u2026",
     "KEYBOARD_SHORTCUT_RESET_DIALOG_TITLE": "Reset Keyboard Shortcuts",
     "KEYBOARD_SHORTCUT_RESET_DIALOG_MESSAGE": "Reset all custom shortcuts to default? This cannot be undone.",
+    "KEYBOARD_SHORTCUT_SRC_USER": "User Defined",
+    "KEYBOARD_SHORTCUT_SRC_PRESET": "{0} Preset",
 
     /**
      * StatusBar strings

src/nls/root/strings.js

@@ -103,6 +103,9 @@ Phoenix.libs = {
     picomatch: fs.utils.picomatch
 };
 
+// global API is only usable/stable after App init
+Phoenix.globalAPI = {};
+
 Phoenix.app = {
     getNodeState: function (cbfn){
         cbfn(new Error('Node cannot be run in phoenix browser mode'));

src/phoenix/shell.js

@@ -28,6 +28,10 @@
     overflow-y: scroll;
 }
 
+#phoenix-keyboard-shortcuts-table {
+    margin-bottom: 50px;
+}
+
 #shortcuts-panel table td {
     line-height: 14px;
     padding: 4px 10px;
@@ -107,9 +111,10 @@
 }
 
 #shortcuts-panel .toolbar button.reset-to-default,
+#shortcuts-panel .toolbar button.presetPicker,
 #shortcuts-panel .toolbar .filter {
     float: right;
-    margin: -2px 10px;
+    margin: 4px 10px;
     padding-top: 2px;
     padding-bottom: 2px;
 }