Merge branch 'features/keybindings' of https://github.com/artemisbot/CyberChef into artemisbot-features/keybindings

src/web/BindingsWaiter.js

@@ -0,0 +1,204 @@
+/**
+ * Waiter to handle keybindings to CyberChef functions (i.e. Bake, Step, Save, Load etc.)
+ *
+ * @author Matt C [matt@artemisbot.uk]
+ * @copyright Crown Copyright 2016
+ * @license Apache-2.0
+ *
+ * @constructor
+ * @param {App} app - The main view object for CyberChef.
+ * @param {Manager} manager - The CyberChef event manager.
+ */
+const BindingsWaiter = function (app, manager) {
+    this.app = app;
+    this.manager = manager;
+};
+
+
+/**
+ * Handler for all keydown events
+ * Checks whether valid keyboard shortcut has been instated
+ *
+ * @fires Manager#statechange
+ * @param {event} e
+ */
+BindingsWaiter.prototype.parseInput = function(e) {
+    let modKey = e.altKey;
+    if (this.app.options.useMetaKey) modKey = e.metaKey;
+    if (e.ctrlKey && modKey) {
+        let elem;
+        switch (e.code) {
+            case "KeyF":
+                e.preventDefault();
+                document.getElementById("search").focus(); // Focus search
+                break;
+            case "KeyI":
+                e.preventDefault();
+                document.getElementById("input-text").focus(); // Focus input
+                break;
+            case "KeyO":
+                e.preventDefault();
+                document.getElementById("output-text").focus(); // Focus output
+                break;
+            case "Period":
+                try {
+                    elem = document.activeElement.closest(".operation");
+                    if (elem.parentNode.lastChild === elem) {
+                        elem.parentNode.firstChild.querySelectorAll(".arg")[0].focus(); // if operation is last in recipe, loop around to the top operation's first argument
+                    } else {
+                        elem.nextSibling.querySelectorAll(".arg")[0].focus(); //focus first argument of next operation
+                    }
+                } catch (e) {
+                    // do nothing, just don't throw an error
+                }
+                break;
+            case "KeyB":
+                try {
+                    elem = document.activeElement.closest(".operation").querySelectorAll(".breakpoint")[0];
+                    if (elem.getAttribute("break") === "false") {
+                        elem.setAttribute("break", "true"); // add break point if not already enabled
+                        elem.classList.add("breakpoint-selected");
+                    } else {
+                        elem.setAttribute("break", "false"); // remove break point if already enabled
+                        elem.classList.remove("breakpoint-selected");
+                    }
+                    window.dispatchEvent(this.manager.statechange);
+                } catch (e) {
+                    // do nothing, just don't throw an error
+                }
+                break;
+            case "KeyD":
+                try {
+                    elem = document.activeElement.closest(".operation").querySelectorAll(".disable-icon")[0];
+                    if (elem.getAttribute("disabled") === "false") {
+                        elem.setAttribute("disabled", "true"); // disable operation if enabled
+                        elem.classList.add("disable-elem-selected");
+                        elem.parentNode.parentNode.classList.add("disabled");
+                    } else {
+                        elem.setAttribute("disabled", "false"); // enable operation if disabled
+                        elem.classList.remove("disable-elem-selected");
+                        elem.parentNode.parentNode.classList.remove("disabled");
+                    }
+                    this.app.progress = 0;
+                    window.dispatchEvent(this.manager.statechange);
+                } catch (e) {
+                    // do nothing, just don't throw an error
+                }
+                break;
+            case "Space":
+                this.app.bake(); // bake the recipe
+                break;
+            case "Quote":
+                this.app.bake(true); // step through the recipe
+                break;
+            case "KeyC":
+                this.manager.recipe.clearRecipe(); // clear recipe
+                break;
+            case "KeyS":
+                this.manager.output.saveClick(); // save output to file
+                break;
+            case "KeyL":
+                this.manager.controls.loadClick(); // load a recipe
+                break;
+            case "KeyM":
+                this.manager.controls.switchClick(); // switch input & output
+                break;
+            default:
+                if (e.code.match(/Digit[0-9]/g)) {
+                    e.preventDefault();
+                    try {
+                        document.querySelector(`li:nth-child(${e.code.substr(-1)}) .arg`).focus(); // select the first argument of the operation corresponding to the number pressed
+                    } catch (e) {
+                        // do nothing, just don't throw an error
+                    }
+                }
+                break;
+        }
+    }
+};
+
+/**
+ * Updates keybinding list when metaKey option is toggled
+ *
+ */
+BindingsWaiter.prototype.updateKeybList = function() {
+    let modWinLin = "Alt";
+    let modMac = "Opt";
+    if (this.app.options.useMetaKey) {
+        modWinLin = "Win";
+        modMac = "Cmd";
+    }
+    document.getElementById("keybList").innerHTML = `
+    <tr>
+        <td><b>Command</b></td>
+        <td><b>Shortcut (Win/Linux)</b></td>
+        <td><b>Shortcut (Mac)</b></td>
+    </tr>
+    <tr>
+        <td>Place cursor in search field</td>
+        <td>Ctrl+${modWinLin}+f</td>
+        <td>Ctrl+${modMac}+f</td>
+    <tr>
+        <td>Place cursor in input box</td>
+        <td>Ctrl+${modWinLin}+i</td>
+        <td>Ctrl+${modMac}+i</td>
+    </tr>
+    <tr>
+        <td>Place cursor in output box</td>
+        <td>Ctrl+${modWinLin}+o</td>
+        <td>Ctrl+${modMac}+o</td>
+    </tr>
+    <tr>
+        <td>Place cursor in first argument field<br>of the next operation in the recipe</td>
+        <td>Ctrl+${modWinLin}+.</td>
+        <td>Ctrl+${modMac}+.</td>
+    </tr>
+    <tr>
+        <td>Place cursor in first argument field<br>of the nth operation in the recipe</td>
+        <td>Ctrl+${modWinLin}+[1-9]</td>
+        <td>Ctrl+${modMac}+[1-9]</td>
+    </tr>
+    <tr>
+        <td>Disable current operation</td>
+        <td>Ctrl+${modWinLin}+d</td>
+        <td>Ctrl+${modMac}+d</td>
+    </tr>
+    <tr>
+        <td>Set/clear breakpoint</td>
+        <td>Ctrl+${modWinLin}+b</td>
+        <td>Ctrl+${modMac}+b</td>
+    </tr>
+    <tr>
+        <td>Bake</td>
+        <td>Ctrl+${modWinLin}+Space</td>
+        <td>Ctrl+${modMac}+Space</td>
+    </tr>
+    <tr>
+        <td>Step</td>
+        <td>Ctrl+${modWinLin}+'</td>
+        <td>Ctrl+${modMac}+'</td>
+    </tr>
+    <tr>
+        <td>Clear recipe</td>
+        <td>Ctrl+${modWinLin}+c</td>
+        <td>Ctrl+${modMac}+c</td>
+    </tr>
+    <tr>
+        <td>Save to file</td>
+        <td>Ctrl+${modWinLin}+s</td>
+        <td>Ctrl+${modMac}+s</td>
+    </tr>
+    <tr>
+        <td>Load recipe</td>
+        <td>Ctrl+${modWinLin}+l</td>
+        <td>Ctrl+${modMac}+l</td>
+    </tr>
+    <tr>
+        <td>Move output to input</td>
+        <td>Ctrl+${modWinLin}+m</td>
+        <td>Ctrl+${modMac}+m</td>
+    </tr>
+    `;
+};
+
+export default BindingsWaiter;

src/web/Manager.js

@@ -8,6 +8,7 @@ import OutputWaiter from "./OutputWaiter.js";
 import OptionsWaiter from "./OptionsWaiter.js";
 import HighlighterWaiter from "./HighlighterWaiter.js";
 import SeasonalWaiter from "./SeasonalWaiter.js";
+import BindingsWaiter from "./BindingsWaiter.js";
 
 
 /**
@@ -60,6 +61,7 @@ const Manager = function(app) {
     this.options     = new OptionsWaiter(this.app);
     this.highlighter = new HighlighterWaiter(this.app, this);
     this.seasonal    = new SeasonalWaiter(this.app, this);
+    this.bindings    = new BindingsWaiter(this.app, this);
 
     // Object to store dynamic handlers to fire on elements that may not exist yet
     this.dynamicHandlers = {};
@@ -76,6 +78,7 @@ Manager.prototype.setup = function() {
     this.recipe.initialiseOperationDragNDrop();
     this.controls.autoBakeChange();
     this.seasonal.load();
+    this.bindings.updateKeybList();
 };
 
 
@@ -89,7 +92,6 @@ Manager.prototype.initialiseEventListeners = function() {
     window.addEventListener("focus", this.window.windowFocus.bind(this.window));
     window.addEventListener("statechange", this.app.stateChange.bind(this.app));
     window.addEventListener("popstate", this.app.popState.bind(this.app));
-
     // Controls
     document.getElementById("bake").addEventListener("click", this.controls.bakeClick.bind(this.controls));
     document.getElementById("auto-bake").addEventListener("change", this.controls.autoBakeChange.bind(this.controls));
@@ -165,6 +167,10 @@ Manager.prototype.initialiseEventListeners = function() {
     this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
     document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));
 
+    //Keybindings
+    window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
+    $(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox#useMetaKey", this.bindings.updateKeybList.bind(this.bindings));
+
     // Misc
     document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
 };

src/web/html/index.html

@@ -326,6 +326,10 @@
                             <input type="checkbox" option="showErrors" id="showErrors" checked />
                             <label for="showErrors"> Operation error reporting (recommended) </label>
                         </div>
+                        <div class="option-item">
+                            <input type="checkbox" option="useMetaKey" id="useMetaKey" />
+                            <label for="errorTimeout"> Use meta (Windows/Command ⌘) key for keybindings </label>
+                        </div>
                         <div class="option-item">
                             <input type="number" option="errorTimeout" id="errorTimeout" />
                             <label for="errorTimeout"> Operation error timeout in ms (0 for never) </label>
@@ -402,6 +406,10 @@
                                     <img aria-hidden="true" src="<%- require('../static/images/speech-16x16.png') %>" alt="Speech Balloon Icon"/>
                                     About
                                 </a></li>
+                                <li role="presentation"><a href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
+                                    <img aria-hidden="true" src="<%- require('../static/images/code-16x16.png') %>" alt="List Icon"/>
+                                    Keybindings
+                                </a></li>
                             </ul>
                             <div class="tab-content">
                                 <div role="tabpanel" class="tab-pane active" id="faqs">
@@ -477,6 +485,9 @@
                                     <p>There are around 150 useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p>
                                     <p>It’s the Cyber Swiss Army Knife.</p>
                                 </div>
+                                <div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;">
+                                    <table class="table table-condensed table-bordered" id="keybList"></table>
+                                </div>
                             </div>
                         </div>
                     </div>

src/web/index.js

@@ -46,6 +46,7 @@ function main() {
         errorTimeout:      4000,
         attemptHighlight:  true,
         theme:             "classic",
+        useMetaKey:        false
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);