From 7419009745a0e580f6ea1b2d70922d202801275e Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Mon, 20 Mar 2023 17:23:14 +0000
Subject: [PATCH] Added more help topics and added filetype detection to the
 'save output' button

---
 src/web/html/index.html            | 44 +++++++++++++++---------------
 src/web/waiters/BindingsWaiter.mjs | 43 +++++++++++++++++++----------
 src/web/waiters/OutputWaiter.mjs   | 16 +++++++++--
 3 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 5560bff1..c3b780b5 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -185,13 +185,13 @@
                     <div class="title no-select">
                         Recipe
                         <span class="pane-controls hide-on-maximised-output">
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe" data-help-title="Saving a recipe" data-help="<p>Recipes can be represented in a few different formats and saved for use at a later date. You can either copy the Recipe configuration and save it somewhere offline for later use, or use your browser's local storage.</p><ul><li><b>Deep link:</b> The easiest way to share a CyberChef Recipe is to copy the deep link, either from the address bar (which is updated as the Recipe or Input changes), or from the 'Save recipe' pane. When you visit this link, the Recipe and Input should be populated from where you left off.</li><li><b>Chef format:</b> This custom format is designed to be compact and easily readable. It is the format used in CyberChef's URL, so it largely uses characters that do not have to be escaped in URL encoding, making it a little easier to understand what a CyberChef URL contains.</li><li><b>Clean JSON:</b> This JSON format uses whitespace and indentation in a way that makes the Recipe easy to read.</li><li><b>Compact JSON:</b> This is the most compact way that the Recipe can be represented in JSON.</li><li><b>Local storage:</b> Alternatively, you can enter a name into the 'Recipe name' field and save to your browser's local storage. The Recipe will then be available to load from the 'Load Recipe' pane as long as you are using the same browser profile. Be aware that if your browser profile is cleaned, you may lose this data.</li></ul>">
                                 <i class="material-icons">save</i>
                             </button>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe" data-help-title="Loading a recipe" data-help="<p>Saved recipes can be loaded using one of the following methods:</p><ul><li>If you have a CyberChef deep link, simply visit that link and the Recipe and Input should be populated automatically.</li><li>If you have a Recipe string in any of the accepted formats, paste it into the 'Load recipe' pane textbox and click 'Load'.</li><li>If you have saved a Recipe to your browser's local storage, it should be available in the dropdown menu in the 'Load recipe' pane. If it is not there, you may not be using the same browser profile, or your profile may have been cleared.</li></ul>">
                                 <i class="material-icons">folder</i>
                             </button>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe" data-help-title="Clearing a recipe" data-help="Clicking the 'Clear recipe' button will remove all operations from the Recipe. It will not clear the Input, but it will trigger a Bake if Auto-bake is turned on, which will change the value of the Output.">
                                 <i class="material-icons">delete</i>
                             </button>
                         </span>
@@ -227,28 +227,28 @@
                             <label for="input-text">Input</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="input-files-info"></div>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab" data-help-title="Tabs" data-help="<p>New tabs can be created to support multiple Inputs. These tabs have their own associated character encodings and EOL separators, as defined in their status bars.</p><p>The deep link in the URL bar only contains information about the currently active tab.</p>">
                                     <i class="material-icons">add</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input" data-help-title="Opening a folder" data-help="<p>You can open a whole folder into CyberChef, which will result in each file being loaded into a separate Input tab.</p><p>CyberChef can handle lots of Input files, but be aware that performance may suffer, especially if the files are large in size.</p><p>Folders can also be loaded by dragging them over the Input pane and dropping them.</p>">
                                     <i class="material-icons">folder_open</i>
                                     <input type="file" id="open-folder" style="display: none" multiple directory webkitdirectory>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input" data-help-title="Opening a file" data-help="<p>Files can be loaded into CyberChef individually or in groups, either using the 'Open file as input' button, or by dragging and dropping them over the Input pane.</p><p>CyberChef can handle reasonably large files (at least 500MB, depending on hardware), but performance may be impacted and some Operations will run very slowly over large Inputs.</p>">
                                     <i class="material-icons">input</i>
                                     <input type="file" id="open-file" style="display: none" multiple>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output" data-help-title="Clearing the Input and Output" data-help="Clicking the 'Clear input and output' button will remove all Inputs and Outputs. It will not clear the Recipe.">
                                     <i class="material-icons">delete</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout" data-help-title="Resetting the pane layout" data-help="CyberChef's panes can be resized to suit your area of focus. This button will reset the pane sizes to their default configuration.">
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
                         </div>
 
                         <div id="input-wrapper" class="no-select">
-                            <div id="input-tabs-wrapper" style="display: none;" class="no-select">
+                            <div id="input-tabs-wrapper" style="display: none;" class="no-select" data-help-proxy="#btn-new-tab">
                                 <span id="btn-previous-input-tab" class="input-tab-buttons">
                                     &lt;
                                 </span>
@@ -281,29 +281,29 @@
                             <label for="output-text">Output</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="bake-info"></div>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none" data-help-title="Saving all outputs to a zip file" data-help="<p>When operating with multiple tabbed Inputs and Outputs, you can use this button to save off all the Outputs at once in a ZIP file.</p><p>Use the 'Bake' button to bake all Inputs at once.</p><p>You will be given the choice to specify the file extension for the Outputs, or you can let CyberChef attempt to detect the filetype of each one. If an Output's type is not clear, CyberChef will use the '.dat' extension.</p>">
                                         <i class="material-icons">archive</i>
                                     </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file" data-help-title="Saving output to a file" data-help="The currently active Output can be saved to a file. You will be asked to specify a filename. CyberChef will attempt to guess the correct file extension based on the data. If a file type cannot be detected, the extension defaults to '.dat' but can be changed manually.">
                                     <i class="material-icons">save</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard" data-help-title="Copying raw output to the clipboard" data-help="<p>Data can be copied from the Output in the normal way by selecting text and copying it. This button provides a quick way of copying the entire output to the clipboard without having to select it. It directly copies the raw data rather than selecting text in the Output editor. Each method should have the same result, but the button may be more efficient for large Outputs as it does not require any DOM interaction.</p>">
                                     <i class="material-icons">content_copy</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Replace input with output">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Replace input with output" data-help-title="Replacing input with output" data-help="<p>This button moves the currently active Output data into the currently active Input tab, overwriting whatever data was already there.</p><p>The Input character encoding and EOL sequence will be changed to match the current Output values, so that the data is interpreted correctly.</p>">
                                     <i class="material-icons">open_in_browser</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane" data-help-title="Maximising the Output pane" data-help="This button allows you to view the Output pane at maximum size, hiding the Operations, Recipe and Input panes. You can restore the pane to its normal size by clicking the same button again.">
                                     <i class="material-icons">fullscreen</i>
                                 </button>
                             </span>
 
-                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
+                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true" data-help-title="CyberChef Magic!" data-help="<p>One of CyberChef's best features is its ability to automatically detect which Operations might make more sense of your data. The Magic button appears when CyberChef has a suggested Operation for you based on the data in the Output.</p><p>Clicking on the button will add the suggested Operation(s) to your Recipe.</p><p>This background Magic detection will inspect your Output up to three levels deep and attempt to unwrap it using a range of techniques. For more control, use the 'Magic' operation, which allows you to configure greater depth and filter based on various parameters.</p><p>Further information about CyberChef Magic can be found <a href='https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic'>here</a>.</p>">
                                 <svg width="22" height="22" viewBox="0 0 24 24">
                                     <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
                                 </svg>
                             </button>
-                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
+                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value." data-help-title="Staleness indicator" data-help="The staleness indicator is displayed when the Recipe or Input has changed but the Output has not yet been updated to reflect this. It is most commonly displayed when Auto-bake is turned off and indicates that you need to Bake in order to see an accurate Output.">
                                 <i class="material-icons">access_time</i>
                             </span>
                         </div>
@@ -345,7 +345,7 @@
 
         <div class="modal fade" id="save-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#save">
                     <div class="modal-header">
                         <h5 class="modal-title">Save recipe</h5>
                     </div>
@@ -386,7 +386,7 @@
                     </div>
                     <div class="modal-body">
                         <div class="form-group" id="save-link-group">
-                            <h6 style="display: inline">Data link</h6>
+                            <h6 style="display: inline">Deep link</h6>
                             <div class="save-link-options">
                                 <label class="checkbox-inline">
                                     <input type="checkbox" id="save-link-recipe-checkbox" checked> Include recipe
@@ -405,7 +405,7 @@
 
         <div class="modal fade" id="load-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#load">
                     <div class="modal-header">
                         <h5 class="modal-title">Load recipe</h5>
                     </div>
@@ -432,7 +432,7 @@
 
         <div class="modal fade" id="options-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#options">
                     <div class="modal-header">
                         <h5 class="modal-title">Options</h5>
                     </div>
@@ -533,7 +533,7 @@
 
         <div class="modal fade" id="favourites-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="a[data-target='#catFavourites']">
                     <div class="modal-header">
                         <h5 class="modal-title">Edit Favourites</h5>
                     </div>
@@ -559,7 +559,7 @@
 
         <div class="modal fade" id="support-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#support">
                     <div class="modal-header">
                         <h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
                     </div>
diff --git a/src/web/waiters/BindingsWaiter.mjs b/src/web/waiters/BindingsWaiter.mjs
index 967272ed..1a03b648 100755
--- a/src/web/waiters/BindingsWaiter.mjs
+++ b/src/web/waiters/BindingsWaiter.mjs
@@ -270,23 +270,36 @@ class BindingsWaiter {
      * Shows contextual help message based on where the mouse pointer is
      */
     contextualHelp() {
-        const hoveredHelpEls = document.querySelectorAll(":hover[data-help]");
+        const hoveredHelpEls = document.querySelectorAll(":hover[data-help],:hover[data-help-proxy]");
+        if (!hoveredHelpEls.length) return;
 
-        if (hoveredHelpEls.length) {
-            const helpEl = hoveredHelpEls[hoveredHelpEls.length - 1],
-                helpText = helpEl.getAttribute("data-help");
-            let helpTitle = helpEl.getAttribute("data-help-title");
-
-            if (helpTitle)
-                helpTitle = "<span class='text-muted'>Help topic:</span> " + helpTitle;
-            else
-                helpTitle = "<span class='text-muted'>Help topic</span>";
-
-            document.querySelector("#help-modal .modal-body").innerHTML = helpText;
-            document.querySelector("#help-modal #help-title").innerHTML = helpTitle;
-
-            $("#help-modal").modal();
+        let helpEl = hoveredHelpEls[hoveredHelpEls.length - 1];
+        const helpElSelector = helpEl.getAttribute("data-help-proxy");
+        if (helpElSelector) {
+            // A hovered element is directing us to another element for its help text
+            helpEl = document.querySelector(helpElSelector);
         }
+        this.displayHelp(helpEl);
+    }
+
+    /**
+     * Displays the help pane populated with help text associated with the given element
+     *
+     * @param {Element} el
+     */
+    displayHelp(el) {
+        const helpText = el.getAttribute("data-help");
+        let helpTitle = el.getAttribute("data-help-title");
+
+        if (helpTitle)
+            helpTitle = "<span class='text-muted'>Help topic:</span> " + helpTitle;
+        else
+            helpTitle = "<span class='text-muted'>Help topic</span>";
+
+        document.querySelector("#help-modal .modal-body").innerHTML = helpText;
+        document.querySelector("#help-modal #help-title").innerHTML = helpTitle;
+
+        $("#help-modal").modal();
     }
 
 }
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index 1d0ff3d8..dae27f3e 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -7,6 +7,7 @@
 
 import Utils, {debounce} from "../../core/Utils.mjs";
 import Dish from "../../core/Dish.mjs";
+import {detectFileType} from "../../core/lib/FileType.mjs";
 import FileSaver from "file-saver";
 import ZipWorker from "worker-loader?inline=no-fallback!../workers/ZipWorker.mjs";
 
@@ -765,13 +766,22 @@ class OutputWaiter {
             this.app.alert("Could not find any output data to download. Has this output been baked?", 3000);
             return;
         }
-        const fileName = window.prompt("Please enter a filename: ", "download.dat");
+
+        const data = await dish.get(Dish.ARRAY_BUFFER);
+        let ext = ".dat";
+
+        // Detect file type automatically
+        const types = detectFileType(data);
+        if (types.length) {
+            ext = `.${types[0].extension.split(",", 1)[0]}`;
+        }
+
+        const fileName = window.prompt("Please enter a filename: ", `download${ext}`);
 
         // Assume if the user clicks cancel they don't want to download
         if (fileName === null) return;
 
-        const data = await dish.get(Dish.ARRAY_BUFFER),
-            file = new File([data], fileName);
+        const file = new File([data], fileName);
         FileSaver.saveAs(file, fileName, {autoBom: false});
     }