Merge branch 'gchq:master' into master

src/web/App.mjs

@@ -11,6 +11,7 @@ import HTMLCategory from "./HTMLCategory.mjs";
 import HTMLOperation from "./HTMLOperation.mjs";
 import Split from "split.js";
 import moment from "moment-timezone";
+import cptable from "codepage";
 
 
 /**
@@ -41,6 +42,10 @@ class App {
         this.autoBakePause = false;
         this.progress      = 0;
         this.ingId         = 0;
+
+        this.appLoaded     = false;
+        this.workerLoaded  = false;
+        this.waitersLoaded = false;
     }
 
 
@@ -59,11 +64,10 @@ class App {
         this.manager.output.saveBombe();
         this.adjustComponentSizes();
         this.setCompileMessage();
+        this.uriParams = this.getURIParams();
 
         log.debug("App loaded");
         this.appLoaded = true;
-
-        this.loadURIParams();
         this.loaded();
     }
 
@@ -76,9 +80,12 @@ class App {
     loaded() {
         // Check that both the app and the worker have loaded successfully, and that
         // we haven't already loaded before attempting to remove the loading screen.
-        if (!this.workerLoaded || !this.appLoaded ||
+        if (!this.workerLoaded || !this.appLoaded || !this.waitersLoaded ||
             !document.getElementById("loader-wrapper")) return;
 
+        // Load state from URI
+        this.loadURIParams(this.uriParams);
+
         // Trigger CSS animations to remove preloader
         document.body.classList.add("loaded");
 
@@ -153,11 +160,9 @@ class App {
 
         if (this.autoBake_ && !this.baking) {
             log.debug("Auto-baking");
-            this.manager.input.inputWorker.postMessage({
-                action: "autobake",
-                data: {
-                    activeTab: this.manager.tabs.getActiveInputTab()
-                }
+            this.manager.worker.bakeInputs({
+                nums: [this.manager.tabs.getActiveTab("input")],
+                step: false
             });
         } else {
             this.manager.controls.showStaleIndicator();
@@ -174,7 +179,7 @@ class App {
         // Reset status using cancelBake
         this.manager.worker.cancelBake(true, false);
 
-        const activeTab = this.manager.tabs.getActiveInputTab();
+        const activeTab = this.manager.tabs.getActiveTab("input");
         if (activeTab === -1) return;
 
         let progress = 0;
@@ -221,7 +226,7 @@ class App {
     setInput(input) {
         // Get the currently active tab.
         // If there isn't one, assume there are no inputs so use inputNum of 1
-        let inputNum = this.manager.tabs.getActiveInputTab();
+        let inputNum = this.manager.tabs.getActiveTab("input");
         if (inputNum === -1) inputNum = 1;
         this.manager.input.updateInputValue(inputNum, input);
 
@@ -276,7 +281,15 @@ class App {
         }
 
         // Add edit button to first category (Favourites)
-        document.querySelector("#categories a").appendChild(document.getElementById("edit-favourites"));
+        const favCat = document.querySelector("#categories a");
+        favCat.appendChild(document.getElementById("edit-favourites"));
+        favCat.setAttribute("data-help-title", "Favourite operations");
+        favCat.setAttribute("data-help", `<p>This category displays your favourite operations.</p>
+        <ul>
+            <li><b>To add:</b> drag an operation over the Favourites category</li>
+            <li><b>To reorder:</b> Click on the 'Edit favourites' button and drag operations up and down in the list provided</li>
+            <li><b>To remove:</b> Click on the 'Edit favourites' button and hit the delete button next to the operation you want to remove</li>
+        </ul>`);
     }
 
 
@@ -335,7 +348,7 @@ class App {
         let favourites;
 
         if (this.isLocalStorageAvailable()) {
-            favourites = localStorage.favourites && localStorage.favourites.length > 2 ?
+            favourites = localStorage?.favourites?.length > 2 ?
                 JSON.parse(localStorage.favourites) :
                 this.dfavourites;
             favourites = this.validFavourites(favourites);
@@ -451,13 +464,15 @@ class App {
      * Searches the URI parameters for recipe and input parameters.
      * If recipe is present, replaces the current recipe with the recipe provided in the URI.
      * If input is present, decodes and sets the input to the one provided in the URI.
+     * If character encodings are present, sets them appropriately.
      * If theme is present, uses the theme.
      *
+     * @param {Object} params
      * @fires Manager#statechange
      */
-    loadURIParams() {
+    loadURIParams(params=this.getURIParams()) {
         this.autoBakePause = true;
-        this.uriParams = this.getURIParams();
+        this.uriParams = params;
 
         // Read in recipe from URI params
         if (this.uriParams.recipe) {
@@ -482,11 +497,39 @@ class App {
             search.dispatchEvent(new Event("search"));
         }
 
+        // Input Character Encoding
+        // Must be set before the input is loaded
+        if (this.uriParams.ienc) {
+            this.manager.input.chrEncChange(parseInt(this.uriParams.ienc, 10));
+        }
+
+        // Output Character Encoding
+        if (this.uriParams.oenc) {
+            this.manager.output.chrEncChange(parseInt(this.uriParams.oenc, 10));
+        }
+
+        // Input EOL sequence
+        if (this.uriParams.ieol) {
+            this.manager.input.eolChange(this.uriParams.ieol);
+        }
+
+        // Output EOL sequence
+        if (this.uriParams.oeol) {
+            this.manager.output.eolChange(this.uriParams.oeol);
+        }
+
         // Read in input data from URI params
         if (this.uriParams.input) {
             try {
-                const inputData = fromBase64(this.uriParams.input);
-                this.setInput(inputData);
+                let inputVal;
+                const inputChrEnc = this.manager.input.getChrEnc();
+                const inputData = fromBase64(this.uriParams.input, null, "byteArray");
+                if (inputChrEnc > 0) {
+                    inputVal = cptable.utils.decode(inputChrEnc, inputData);
+                } else {
+                    inputVal = Utils.byteArrayToChars(inputData);
+                }
+                this.setInput(inputVal);
             } catch (err) {}
         }
 
@@ -589,6 +632,7 @@ class App {
         this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();
         this.manager.output.calcMaxTabs();
+        this.manager.controls.calcControlsHeight();
     }
 
 
@@ -620,6 +664,8 @@ class App {
         const notice = document.getElementById("notice");
         notice.innerHTML = compileInfo;
         notice.setAttribute("title", Utils.stripHtmlTags(window.compileMessage));
+        notice.setAttribute("data-help-title", "Last build");
+        notice.setAttribute("data-help", "This live version of CyberChef is updated whenever new commits are added to the master branch of the CyberChef repository. It represents the latest, most up-to-date build of CyberChef.");
     }
 
 
@@ -727,21 +773,22 @@ class App {
      * @param {event} e
      */
     stateChange(e) {
-        this.progress = 0;
-        this.autoBake();
-
-        this.updateTitle(true, null, true);
+        debounce(function() {
+            this.progress = 0;
+            this.autoBake();
+            this.updateURL(true, null, true);
+        }, 20, "stateChange", this, [])();
     }
 
 
     /**
-     * Update the page title to contain the new recipe
+     * Update the page title and URL to contain the new recipe
      *
      * @param {boolean} includeInput
-     * @param {string} input
+     * @param {string} [input=null]
      * @param {boolean} [changeUrl=true]
      */
-    updateTitle(includeInput, input, changeUrl=true) {
+    updateURL(includeInput, input=null, changeUrl=true) {
         // Set title
         const recipeConfig = this.getRecipeConfig();
         let title = "CyberChef";

src/web/HTMLCategory.mjs

@@ -38,7 +38,7 @@ class HTMLCategory {
      * @returns {string}
      */
     toHtml() {
-        const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
+        const catName = "cat" + this.name.replace(/[\s/\-:_]/g, "");
         let html = `<div class="panel category">
         <a class="category-title" data-toggle="collapse" data-target="#${catName}">
             ${this.name}

src/web/HTMLIngredient.mjs

@@ -54,7 +54,7 @@ class HTMLIngredient {
             case "string":
             case "binaryString":
             case "byteArray":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -70,7 +70,7 @@ class HTMLIngredient {
                 break;
             case "shortString":
             case "binaryShortString":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group ing-short">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -85,7 +85,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "toggleString":
-                html += `<div class="form-group input-group">
+                html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation.">
                     <div class="toggle-string">
                         <label for="${this.id}"
                             ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
@@ -111,7 +111,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "number":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group inline ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -128,7 +128,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "boolean":
-                html += `<div class="form-group inline boolean-arg">
+                html += `<div class="form-group inline boolean-arg ing-flexible">
                     <div class="checkbox">
                         <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
                             <input type="checkbox"
@@ -144,7 +144,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "option":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -168,7 +168,7 @@ class HTMLIngredient {
                 break;
             case "populateOption":
             case "populateMultiOption":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values.">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -199,7 +199,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
                 break;
             case "editableOption":
-                html += `<div class="form-group input-group">
+                html += `<div class="form-group input-group ing-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -230,7 +230,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "editableOptionShort":
-                html += `<div class="form-group input-group inline">
+                html += `<div class="form-group input-group ing-short">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -261,7 +261,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "text":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-very-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -275,7 +275,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "argSelector":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible.">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -298,7 +298,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
                 break;
             case "label":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-flexible">
                     <label>${this.name}</label>
                     <input type="hidden"
                         class="form-control arg"

src/web/HTMLOperation.mjs

@@ -83,8 +83,8 @@ class HTMLOperation {
 
         html += `</div>
         <div class="recip-icons">
-            <i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
-            <i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
+            <i class="material-icons breakpoint" title="Set breakpoint" break="false" data-help-title="Setting breakpoints" data-help="Setting a breakpoint on an operation will cause execution of the Recipe to pause when it reaches that operation.">pause</i>
+            <i class="material-icons disable-icon" title="Disable operation" disabled="false" data-help-title="Disabling operations" data-help="Disabling an operation will prevent it from being executed when the Recipe is baked. Execution will skip over the disabled operation and continue with subsequent operations.">not_interested</i>
         </div>
         <div class="clearfix">&nbsp;</div>`;
 

src/web/Manager.mjs

@@ -17,6 +17,7 @@ import SeasonalWaiter from "./waiters/SeasonalWaiter.mjs";
 import BindingsWaiter from "./waiters/BindingsWaiter.mjs";
 import BackgroundWorkerWaiter from "./waiters/BackgroundWorkerWaiter.mjs";
 import TabWaiter from "./waiters/TabWaiter.mjs";
+import TimingWaiter from "./waiters/TimingWaiter.mjs";
 
 
 /**
@@ -59,6 +60,7 @@ class Manager {
         this.statechange = new CustomEvent("statechange", {bubbles: true});
 
         // Define Waiter objects to handle various areas
+        this.timing      = new TimingWaiter(this.app, this);
         this.worker      = new WorkerWaiter(this.app, this);
         this.window      = new WindowWaiter(this.app);
         this.controls    = new ControlsWaiter(this.app, this);
@@ -93,6 +95,23 @@ class Manager {
         this.bindings.updateKeybList();
         this.background.registerChefWorker();
         this.seasonal.load();
+
+        this.confirmWaitersLoaded();
+    }
+
+    /**
+     * Confirms that all Waiters have loaded correctly.
+     */
+    confirmWaitersLoaded() {
+        if (this.tabs.getActiveTab("input") >= 0 &&
+            this.tabs.getActiveTab("output") >= 0) {
+            log.debug("Waiters loaded");
+            this.app.waitersLoaded = true;
+            this.app.loaded();
+        } else {
+            // Not loaded yet, try again soon
+            setTimeout(this.confirmWaitersLoaded.bind(this), 10);
+        }
     }
 
 
@@ -146,19 +165,14 @@ class Manager {
         this.addDynamicListener("textarea.arg", "drop", this.recipe.textArgDrop, this.recipe);
 
         // Input
-        this.addMultiEventListener("#input-text", "keyup", this.input.debounceInputChange, this.input);
-        this.addMultiEventListener("#input-text", "paste", this.input.inputPaste, this.input);
         document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app));
         this.addListeners("#clr-io,#btn-close-all-tabs", "click", this.input.clearAllIoClick, this.input);
         this.addListeners("#open-file,#open-folder", "change", this.input.inputOpen, this.input);
-        this.addListeners("#input-text,#input-file", "dragover", this.input.inputDragover, this.input);
-        this.addListeners("#input-text,#input-file", "dragleave", this.input.inputDragleave, this.input);
-        this.addListeners("#input-text,#input-file", "drop", this.input.inputDrop, this.input);
-        document.getElementById("input-text").addEventListener("scroll", this.highlighter.inputScroll.bind(this.highlighter));
-        document.getElementById("input-text").addEventListener("mouseup", this.highlighter.inputMouseup.bind(this.highlighter));
-        document.getElementById("input-text").addEventListener("mousemove", this.highlighter.inputMousemove.bind(this.highlighter));
-        this.addMultiEventListener("#input-text", "mousedown dblclick select",  this.highlighter.inputMousedown, this.highlighter);
-        document.querySelector("#input-file .close").addEventListener("click", this.input.clearIoClick.bind(this.input));
+        document.getElementById("btn-open-file").addEventListener("click", this.input.inputOpenClick.bind(this.input));
+        document.getElementById("btn-open-folder").addEventListener("click", this.input.folderOpenClick.bind(this.input));
+        this.addListeners("#input-wrapper", "dragover", this.input.inputDragover, this.input);
+        this.addListeners("#input-wrapper", "dragleave", this.input.inputDragleave, this.input);
+        this.addListeners("#input-wrapper", "drop", this.input.inputDrop, this.input);
         document.getElementById("btn-new-tab").addEventListener("click", this.input.addInputClick.bind(this.input));
         document.getElementById("btn-previous-input-tab").addEventListener("mousedown", this.input.previousTabClick.bind(this.input));
         document.getElementById("btn-next-input-tab").addEventListener("mousedown", this.input.nextTabClick.bind(this.input));
@@ -177,8 +191,6 @@ class Manager {
         document.getElementById("input-num-results").addEventListener("keyup", this.input.filterTabSearch.bind(this.input));
         document.getElementById("input-filter-refresh").addEventListener("click", this.input.filterTabSearch.bind(this.input));
         this.addDynamicListener(".input-filter-result", "click", this.input.filterItemClick, this.input);
-        document.getElementById("btn-open-file").addEventListener("click", this.input.inputOpenClick.bind(this.input));
-        document.getElementById("btn-open-folder").addEventListener("click", this.input.folderOpenClick.bind(this.input));
 
 
         // Output
@@ -186,20 +198,8 @@ class Manager {
         document.getElementById("save-all-to-file").addEventListener("click", this.output.saveAllClick.bind(this.output));
         document.getElementById("copy-output").addEventListener("click", this.output.copyClick.bind(this.output));
         document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output));
-        document.getElementById("undo-switch").addEventListener("click", this.output.undoSwitchClick.bind(this.output));
         document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
         document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
-        document.getElementById("output-text").addEventListener("scroll", this.highlighter.outputScroll.bind(this.highlighter));
-        document.getElementById("output-text").addEventListener("mouseup", this.highlighter.outputMouseup.bind(this.highlighter));
-        document.getElementById("output-text").addEventListener("mousemove", this.highlighter.outputMousemove.bind(this.highlighter));
-        document.getElementById("output-html").addEventListener("mouseup", this.highlighter.outputHtmlMouseup.bind(this.highlighter));
-        document.getElementById("output-html").addEventListener("mousemove", this.highlighter.outputHtmlMousemove.bind(this.highlighter));
-        this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
-        this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
-        this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
-        this.addDynamicListener("#output-file-show-all", "click", this.output.showAllFile, this.output);
-        this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
-        document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
         this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
         this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output);
         document.getElementById("btn-previous-output-tab").addEventListener("mousedown", this.output.previousTabClick.bind(this.output));
@@ -232,7 +232,6 @@ class Manager {
         this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
         document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));
         document.getElementById("logLevel").addEventListener("change", this.options.logLevelChange.bind(this.options));
-        document.getElementById("imagePreview").addEventListener("change", this.input.renderFileThumb.bind(this.input));
 
         // Misc
         window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));

src/web/html/index.html

@@ -147,7 +147,7 @@
         <div id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">
-                    <a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download>Download CyberChef <i class="material-icons">file_download</i></a>
+                    <a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">Download CyberChef <i class="material-icons">file_download</i></a>
                 </div>
                 <div class="col-md-6" id="notice-wrapper">
                     <span id="notice">
@@ -162,29 +162,31 @@
                     </span>
                 </div>
                 <div class="col" style="text-align: right; padding-right: 0;">
-                    <a href="#" id="options">Options <i class="material-icons">settings</i></a>
-                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support <i class="material-icons">help</i></a>
+                    <a href="#" id="options" data-help-title="Options and Settings" data-help="Configurable options to change how CyberChef behaves. These settings are stored in your browser's local storage, meaning they will persist between sessions that use the same browser profile.">Options <i class="material-icons">settings</i></a>
+                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal" data-help-title="About / Support" data-help="This pane provides information about the CyberChef web app, how to use some of the features, and how to raise bug reports.">About / Support <i class="material-icons">help</i></a>
                 </div>
             </div>
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
-                    <div class="title no-select">Operations</div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2">
+                    <div class="title no-select" data-help-title="Operations list" data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
+                        Operations
+                    </div>
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
 
-                <div id="recipe" class="split split-horizontal no-select">
+                <div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
                     <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>
@@ -192,18 +194,18 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select hide-on-maximised-output">
-                        <div id="controls-content" class="d-flex align-items-center">
-                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
+                        <div id="controls-content">
+                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
                                 Step
                             </button>
 
-                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
+                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
                                 <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
                                 <span>Bake!</span>
                             </button>
 
                             <div class="form-group" style="display: contents;">
-                                <div class="mx-1 checkbox">
+                                <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
                                     <label id="auto-bake-label">
                                         <input type="checkbox" checked="checked" id="auto-bake">
                                         <br>Auto Bake
@@ -215,115 +217,93 @@
                 </div>
 
                 <div class="split split-horizontal" id="IO">
-                    <div id="input" class="split no-select">
+                    <div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="input-files-info"></div>
-                                <div class="io-info" id="input-selection-info"></div>
-                                <div class="io-info" id="input-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>
-                        <div id="input-tabs-wrapper" style="display: none;" class="no-select">
-                            <span id="btn-previous-input-tab" class="input-tab-buttons">
-                                &lt;
-                            </span>
-                            <span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                ···
-                            </span>
-                            <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
-                                <a id="btn-go-to-input-tab" class="dropdown-item">
-                                    Go to tab
-                                </a>
-                                <a id="btn-find-input-tab" class="dropdown-item">
-                                    Find tab
-                                </a>
-                                <a id="btn-close-all-tabs" class="dropdown-item">
-                                    Close all tabs
-                                </a>
-                            </div>
-                            <span id="btn-next-input-tab" class="input-tab-buttons">
-                                &gt;
-                            </span>
-                            <ul id="input-tabs">
-                            </ul>
-                        </div>
-                        <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
-                            <div id="input-highlighter" class="no-select"></div>
-                            <textarea id="input-text" class="input-text" spellcheck="false" tabindex="1" autofocus></textarea>
-                            <div class="input-file" id="input-file">
-                                <div class="file-overlay" id="file-overlay"></div>
-                                <div style="position: relative; height: 100%;">
-                                    <div class="io-card card">
-                                        <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon" id="input-file-thumbnail"/>
-                                        <div class="card-body">
-                                            <button type="button" class="close" id="input-file-close">&times;</button>
-                                            Name: <span id="input-file-name"></span><br>
-                                            Size: <span id="input-file-size"></span><br>
-                                            Type: <span id="input-file-type"></span><br>
-                                            Loaded: <span id="input-file-loaded"></span>
-                                        </div>
-                                    </div>
+                        <div id="input-wrapper" 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>
+                                <span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    ···
+                                </span>
+                                <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
+                                    <a id="btn-go-to-input-tab" class="dropdown-item">
+                                        Go to tab
+                                    </a>
+                                    <a id="btn-find-input-tab" class="dropdown-item">
+                                        Find tab
+                                    </a>
+                                    <a id="btn-close-all-tabs" class="dropdown-item">
+                                        Close all tabs
+                                    </a>
                                 </div>
+                                <span id="btn-next-input-tab" class="input-tab-buttons">
+                                    &gt;
+                                </span>
+                                <ul id="input-tabs">
+                                </ul>
                             </div>
+                            <div id="input-text"></div>
                         </div>
                     </div>
 
-                    <div id="output" class="split">
+                    <div id="output" class="split" data-help-title="Output pane" data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="bake-info"></div>
-                                <div class="io-info" id="output-selection-info"></div>
-                                <div class="io-info" id="output-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="undo-switch" data-toggle="tooltip" title="Undo" disabled="disabled">
-                                    <i class="material-icons">undo</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>
-                        <div id="output-wrapper">
+
+                        <div id="output-wrapper" class="no-select">
                             <div id="output-tabs-wrapper" style="display: none" class="no-select">
                                 <span id="btn-previous-output-tab" class="output-tab-buttons">
                                     &lt;
@@ -345,41 +325,12 @@
                                 <ul id="output-tabs">
                                 </ul>
                             </div>
-                            <div class="textarea-wrapper">
-                                <div id="output-highlighter" class="no-select"></div>
-                                <div id="output-html"></div>
-                                <textarea id="output-text" readonly="readonly" spellcheck="false"></textarea>
-                                <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
-                                <div id="output-file">
-                                    <div class="file-overlay"></div>
-                                    <div style="position: relative; height: 100%;">
-                                        <div class="io-card card">
-                                            <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
-                                            <div class="card-body">
-                                                Size: <span id="output-file-size"></span><br>
-                                                <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
-                                                <button id="output-file-show-all" type="button" class="btn btn-warning btn-outline" data-toggle="tooltip" title="Warning: This could crash your browser. Use at your own risk.">Show all</button>
-                                                <div class="input-group">
-                                                    <span class="input-group-prepend">
-                                                        <button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" data-toggle="tooltip" title="View slice">
-                                                            <i class="material-icons">search</i>
-                                                        </button>
-                                                    </span>
-                                                    <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="128" min="0">
-                                                    <div class="input-group-addon">to</div>
-                                                    <input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="256" step="128" min="0">
-                                                    <div class="input-group-addon">KiB</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div id="output-loader">
-                                    <div id="output-loader-animation">
-                                        <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
-                                    </div>
-                                    <div class="loading-msg"></div>
+                            <div id="output-text"></div>
+                            <div id="output-loader">
+                                <div id="output-loader-animation">
+                                    <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%" data-help-title="Loading animation" data-help="This loading animation shows an accurate representation of how rotors moved on The Bombe, an electro-mechanical device built at Bletchley Park in 1939 by Alan Turing with refinements by Gordon Welchman in 1940. The Bombe was used by the Government Code and Cipher School (the precursor to GCHQ) to discover daily settings of Enigma machines used by the German military in World War 2.<br><br>More information can be found on <a href='https://wikipedia.org/wiki/Bombe'>Wikipedia</a>."></object>
                                 </div>
+                                <div class="loading-msg"></div>
                             </div>
                         </div>
                     </div>
@@ -389,7 +340,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>
@@ -430,7 +381,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
@@ -449,7 +400,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>
@@ -476,7 +427,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>
@@ -494,25 +445,6 @@
                             </select>
                         </div>
 
-                        <div class="form-group option-item">
-                            <label for="preserveCR" class="bmd-label-floating"> Preserve carriage returns (0x0d)</label>
-                            <select class="form-control" option="preserveCR" id="preserveCR" data-toggle="tooltip" data-placement="bottom" data-offset="-10%" data-html="true" title="HTML textareas don't support carriage returns, so if we want to preserve them in our input, we have to disable editing.<br><br>The default option is to only do this for high-entropy inputs, but you can force the choice using this dropdown.">
-                                <option value="entropy">For high-entropy inputs</option>
-                                <option value="always">Always</option>
-                                <option value="never">Never</option>
-                            </select>
-                        </div>
-
-                        <div class="form-group option-item">
-                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
-                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
-                        </div>
-
-                        <div class="form-group option-item">
-                            <label for="ioDisplayThreshold" class="bmd-label-floating">Size threshold for treating the input and output as a file (KiB)</label>
-                            <input type="number" class="form-control" option="ioDisplayThreshold" id="ioDisplayThreshold">
-                        </div>
-
                         <div class="form-group option-item">
                             <label for="logLevel" class="bmd-label-floating">Console logging level</label>
                             <select class="form-control" option="logLevel" id="logLevel">
@@ -539,13 +471,6 @@
                             </label>
                         </div>
 
-                        <div class="checkbox option-item">
-                            <label for="treatAsUtf8">
-                                <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked>
-                                Treat output as UTF-8 if possible
-                            </label>
-                        </div>
-
                         <div class="checkbox option-item">
                             <label for="wordWrap">
                                 <input type="checkbox" option="wordWrap" id="wordWrap" checked>
@@ -553,13 +478,18 @@
                             </label>
                         </div>
 
-                        <div class="checkbox option-item">
+                        <div class="checkbox option-item mb-0">
                             <label for="showErrors">
                                 <input type="checkbox" option="showErrors" id="showErrors" checked>
-                                Operation error reporting (recommended)
+                                Show errors from operations (recommended)
                             </label>
                         </div>
 
+                        <div class="form-group option-item">
+                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
+                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
+                        </div>
+
                         <div class="checkbox option-item">
                             <label for="useMetaKey">
                                 <input type="checkbox" option="useMetaKey" id="useMetaKey">
@@ -598,15 +528,15 @@
 
         <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>
                     <div class="modal-body" id="favourites-body">
                         <ul>
-                            <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category</li>
+                            <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category and drop it</li>
                             <li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below</li>
-                            <li><span style="font-weight: bold">To remove:</span> hit the red cross or drag out of the list below</li>
+                            <li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li>
                         </ul>
                         <br>
                         <ul id="edit-favourites-list" class="op-list"></ul>
@@ -624,7 +554,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>
@@ -663,8 +593,16 @@
                             </li>
                         </ul>
                         <div class="tab-content">
-                            <div role="tabpanel" class="tab-pane active" id="faqs">
+                            <div role="tabpanel" class="tab-pane active" id="faqs" data-help-title="FAQ pane" data-help="The Frequently Asked Questions pane provides answers to some of the most common queries people have about CyberChef.">
                                 <br>
+                                <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-contextual-help">
+                                    How does X feature work?
+                                </a>
+                                <div class="collapse" id="faq-contextual-help">
+                                    <p>CyberChef has a contextual help feature. Just hover your cursor over a feature that you want to learn more about and press <code>F1</code> on your keyboard to get some information about it. Give it a try by hovering over this text and pressing <code>F1</code> now!</code></p>
+                                </div>
+                                <br>
+
                                 <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-examples">
                                     What sort of things can I do with CyberChef?
                                 </a>
@@ -897,5 +835,63 @@
                 </div>
             </div>
         </div>
+
+        <div class="modal fade" id="download-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content" data-help-proxy="a[data-target='#download-modal']">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Download CyberChef</h5>
+                    </div>
+                    <div class="modal-body">
+                        <p>
+                            CyberChef runs entirely within your browser with no server-side component, meaning that your Input data and Recipe configuration are not sent anywhere, whether you use the live, official version of CyberChef or a downloaded, standalone version (assuming it is unmodified).
+                        </p>
+                        <p>
+                            There are three operations that make calls to external services, those being the 'Show on map' operation which downloads map tiles from wikimedia.org, the 'DNS over HTTPS' operation which resolves DNS requests using either Google or Cloudflare services, and the 'HTTP request' operation that calls out to the configured URL you enter. You can confirm what network requests are made using your browser's developer console (F12) and viewing the Network tab.
+                        </p>
+                        <p>
+                            If you would like to download your own standalone copy of CyberChef to run in a segregated network or where there is limited or no Internet connectivity, you can get a ZIP file containing the whole web app below. This can be run locally or hosted on a web server with no configuration required.
+                        </p>
+                        <p>
+                            Be aware that the standalone version will never update itself, meaning it will not receive bug fixes or new features until you re-download newer versions manually.
+                        </p>
+
+                        <h6>CyberChef v<%= htmlWebpackPlugin.options.version %></h6>
+                        <ul>
+                            <li>Build time: <%= htmlWebpackPlugin.options.compileTime %></li>
+                            <li>The changelog for this version can be viewed <a href="https://github.com/gchq/CyberChef/blob/master/CHANGELOG.md">here</a></li>
+                            <li>&copy; Crown Copyright 2016</li>
+                            <li>Released under the Apache Licence, Version 2.0</li>
+                            <li>SHA256 hash: DOWNLOAD_HASH_PLACEHOLDER</li>
+                        </ul>
+                        <a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download class="btn btn-outline-primary">Download ZIP file</a>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- The Help modal should be last to ensure it has the highest z-index -->
+        <div class="modal fade" id="help-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            <i class="material-icons modal-icon">info_outline</i>
+                            <span id="help-title"></span>
+                        </h5>
+                    </div>
+                    <div class="modal-body">
+
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" id="help-ok" data-dismiss="modal">Ok</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </body>
 </html>

src/web/index.js

@@ -42,19 +42,16 @@ function main() {
     const defaultOptions = {
         updateUrl:           true,
         showHighlighter:     true,
-        treatAsUtf8:         true,
         wordWrap:            true,
         showErrors:          true,
         errorTimeout:        4000,
         attemptHighlight:    true,
         theme:               "classic",
         useMetaKey:          false,
-        ioDisplayThreshold:  2048,
         logLevel:            "info",
         autoMagic:           true,
         imagePreview:        true,
-        syncTabs:            true,
-        preserveCR:          "entropy"
+        syncTabs:            true
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

src/web/static/ga.html

@@ -1,18 +1,12 @@
 
 
 <!-- Begin Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9R4C1H8SR"></script>
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-85682716-2', 'auto');
-
-  // Specifying location.pathname here overrides the default URL which could include arguments.
-  // This method prevents Google Analytics from logging any recipe or input data in the URL.
-  ga('send', 'pageview', location.pathname);
-
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-G9R4C1H8SR');
 </script>
 <!-- End Google Analytics -->
 

src/web/stylesheets/components/_operation.css

@@ -27,17 +27,31 @@
 }
 
 .ingredients {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-column-gap: 14px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    column-gap: 14px;
+    row-gap: 0;
 }
 
-.ingredients > div {
-    grid-column: 1 / span 3;
+.ing-very-wide {
+    flex: 4 400px;
 }
 
-.ingredients > div.inline {
-    grid-column: unset;
+.ing-wide {
+    flex: 3 200px;
+}
+
+.ing-medium {
+    flex: 2 120px;
+}
+
+.ing-short {
+    flex: 1 80px;
+}
+
+.ing-flexible {
+    flex-grow: 1;
 }
 
 .ingredients .form-group {
@@ -64,6 +78,11 @@ div.toggle-string {
     flex: 1;
 }
 
+input.toggle-string {
+    border-top-right-radius: 0 !important;
+    height: 42px !important;
+}
+
 .operation [class^='bmd-label'],
 .operation [class*=' bmd-label'] {
     top: 13px !important;
@@ -160,7 +179,7 @@ div.toggle-string {
 }
 
 .input-group .form-control {
-    border-top-left-radius: 4px !important;
+    border-top-left-radius: 4px;
 }
 
 .input-group-append button {

src/web/stylesheets/components/_pane.css

@@ -46,72 +46,6 @@
     padding: 0;
 }
 
-.io-card.card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-    transition: 0.3s;
-    width: 400px;
-    height: 150px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-family: var(--primary-font-family);
-    color: var(--primary-font-colour);
-    line-height: 30px;
-    background-color: var(--primary-background-colour);
-    flex-direction: row;
-    padding-left: 10px;
-}
-
-.io-card.card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-}
-
-.io-card.card>img {
-    float: left;
-    width: auto;
-    height: auto;
-    max-width: 128px;
-    max-height: 128px;
-    margin-left: auto;
-    margin-top: auto;
-    margin-right: auto;
-    margin-bottom: auto;
-    padding: 0px;
-
-}
-
-.io-card.card .card-body .close {
-    position: absolute;
-    right: 10px;
-    top: 4px;
-}
-
-.io-card.card .card-body {
-    float: left;
-    padding: 16px;
-    width: 250px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: text;
-}
-
-.io-card.card .card-body>.btn {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.io-card.card input[type=number] {
-    padding-right: 6px;
-    padding-left: 6px;
-    height: unset;
-}
-
-.io-card.card .input-group {
-    padding-top: 5px;
-}
-
 #files .card-header .float-right a:hover {
     text-decoration: none;
 }

src/web/stylesheets/layout/_controls.css

@@ -6,27 +6,20 @@
  * @license Apache-2.0
  */
 
-:root {
-    --controls-height: 75px;
-}
-
 #controls {
     position: absolute;
     width: 100%;
-    height: var(--controls-height);
     bottom: 0;
-    padding: 0;
-    padding-top: 12px;
+    padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
 }
 
 #controls-content {
     position: relative;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transform-origin: center left;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
 #auto-bake-label {
@@ -56,6 +49,7 @@
 
 #controls .btn {
     border-radius: 30px;
+    margin: 0;
 }
 
 .output-maximised .hide-on-maximised-output {

src/web/stylesheets/layout/_io.css

@@ -7,41 +7,36 @@
  */
 
 #input-text,
-#output-text,
-#output-html {
+#output-text {
     position: relative;
     width: 100%;
     height: 100%;
     margin: 0;
-    padding: 3px;
-    -moz-padding-start: 3px;
-    -moz-padding-end: 3px;
-    border: none;
-    border-width: 0px;
-    resize: none;
     background-color: transparent;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-#output-wrapper{
-    margin: 0;
-    padding: 0;
-}
-
-#output-wrapper .textarea-wrapper {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
     overflow: hidden;
-    pointer-events: auto;
+    user-select: auto;
 }
 
-
+#output-text.html-output .cm-content,
+#output-text.html-output .cm-line,
 #output-html {
+    display: block;
+    height: 100%;
+    user-select: auto;
+}
+#output-text.html-output .cm-line .cm-widgetBuffer,
+#output-text.html-output .cm-line>br {
     display: none;
-    overflow-y: auto;
-    -moz-padding-start: 1px; /* Fixes bug in Firefox */
+}
+
+.cm-editor {
+    height: 100%;
+}
+
+.cm-editor .cm-content {
+    font-family: var(--fixed-width-font-family);
+    font-size: var(--fixed-width-font-size);
+    color: var(--fixed-width-font-colour);
 }
 
 #input-tabs-wrapper #input-tabs,
@@ -162,70 +157,25 @@
 }
 
 #input-wrapper,
-#output-wrapper,
-#input-wrapper > * ,
-#output-wrapper > .textarea-wrapper > div,
-#output-wrapper > .textarea-wrapper > textarea {
+#output-wrapper {
     height: calc(100% - var(--title-height));
 }
 
 #input-wrapper.show-tabs,
-#input-wrapper.show-tabs > *,
-#output-wrapper.show-tabs,
-#output-wrapper.show-tabs > .textarea-wrapper > div,
-#output-wrapper.show-tabs > .textarea-wrapper > textarea {
+#output-wrapper.show-tabs {
     height: calc(100% - var(--tab-height) - var(--title-height));
 }
 
-#output-wrapper > .textarea-wrapper > #output-html {
-    height: 100%;
-}
-
-#show-file-overlay {
-    height: 32px;
-}
-
-.input-wrapper.textarea-wrapper {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    pointer-events: auto;
-}
-
-.textarea-wrapper textarea,
-.textarea-wrapper>div {
-    font-family: var(--fixed-width-font-family);
-    font-size: var(--fixed-width-font-size);
-    color: var(--fixed-width-font-colour);
-}
-
-#input-highlighter,
-#output-highlighter {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    padding: 3px;
-    margin: 0;
-    overflow: hidden;
-    letter-spacing: normal;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    color: #fff;
-    background-color: transparent;
-    border: none;
-    pointer-events: none;
-}
-
 #output-loader {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
+    height: 100%;
     margin: 0;
-    background-color: var(--primary-background-colour);
-    visibility: hidden;
+    background-color: var(--secondary-background-colour);
     opacity: 0;
+    visibility: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -254,31 +204,6 @@
     transition: all 0.5s ease;
 }
 
-#input-file,
-#output-file {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    display: none;
-}
-
-.file-overlay {
-    position: absolute;
-    opacity: 0.8;
-    background-color: var(--title-background-colour);
-    width: 100%;
-    height: 100%;
-}
-
-#show-file-overlay {
-    position: absolute;
-    right: 15px;
-    top: calc(var(--title-height) + 10px);
-    cursor: pointer;
-    display: none;
-}
-
 .io-info {
     margin-right: 18px;
     margin-top: 1px;
@@ -292,10 +217,6 @@
     align-items: center;
 }
 
-#input-info {
-    line-height: 15px;
-}
-
 .dropping-file {
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
@@ -458,3 +379,214 @@
     cursor: pointer;
     filter: brightness(98%);
 }
+
+/* Highlighting */
+.ͼ2.cm-focused .cm-selectionBackground {
+    background-color: var(--hl5);
+}
+
+.ͼ2 .cm-selectionBackground {
+    background-color: var(--hl1);
+}
+
+.ͼ1 .cm-selectionMatch {
+    background-color: var(--hl2);
+}
+
+.ͼ1.cm-focused .cm-cursor.cm-cursor-primary {
+    border-color: var(--primary-font-colour);
+}
+
+.ͼ1 .cm-cursor.cm-cursor-primary {
+    display: block;
+    border-color: var(--subtext-font-colour);
+}
+
+
+/* Status bar */
+
+.cm-panel input::placeholder {
+    font-size: 12px !important;
+}
+
+.ͼ2 .cm-panels,
+.ͼ2 .cm-side-panels {
+    background-color: var(--secondary-background-colour);
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
+.cm-status-bar {
+    font-family: var(--fixed-width-font-family);
+    font-weight: normal;
+    font-size: 8pt;
+    margin: 0 5px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cm-status-bar i {
+    font-size: 12pt;
+    vertical-align: middle;
+    margin-left: 8px;
+}
+.cm-status-bar>div>span:first-child i {
+    margin-left: 0;
+}
+
+.cm-status-bar .disabled {
+    background-color: unset !important;
+    cursor: not-allowed;
+}
+
+/* Dropup Button */
+.cm-status-bar-select-btn {
+    border: none;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropup content */
+.cm-status-bar-select {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropup content (Hidden by Default) */
+.cm-status-bar-select-content {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    right: 0;
+    background-color: #f1f1f1;
+    min-width: 200px;
+    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropup */
+.cm-status-bar-select-content a {
+    color: black;
+    padding: 2px 5px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropup links on hover */
+.cm-status-bar-select-content a:hover {
+    background-color: #ddd
+}
+
+/* Change the background color of the dropup button when the dropup content is shown */
+.cm-status-bar-select:hover .cm-status-bar-select-btn {
+    background-color: #f1f1f1;
+}
+
+/* The search field */
+.cm-status-bar-filter-input {
+    box-sizing: border-box;
+    font-size: 12px;
+    padding-left: 10px !important;
+    border: none;
+}
+
+.cm-status-bar-filter-search {
+    border-top: 1px solid #ddd;
+}
+
+/* Show the dropup menu */
+.cm-status-bar-select .show {
+    display: block;
+}
+
+.cm-status-bar-select-scroll {
+    overflow-y: auto;
+    max-height: 300px;
+}
+
+.chr-enc-value {
+    max-width: 150px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+
+/* File details panel */
+
+.cm-file-details {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    padding-bottom: 21px;
+    height: 100%;
+}
+
+.file-details-toggle-shown,
+.file-details-toggle-hidden {
+    width: 8px;
+    height: 40px;
+    border: 1px solid var(--secondary-border-colour);
+    position: absolute;
+    top: calc(50% - 20px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary-border-colour);
+    color: var(--subtext-font-colour);
+    z-index: 1;
+}
+
+.file-details-toggle-shown {
+    left: 0;
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.file-details-toggle-hidden {
+    left: -8px;
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.file-details-toggle-shown:hover,
+.file-details-toggle-hidden:hover {
+    background-color: var(--primary-border-colour);
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
+.file-details-heading {
+    font-weight: bold;
+    margin: 10px 0 10px 0;
+}
+
+.file-details-data {
+    text-align: left;
+    margin: 10px 2px;
+}
+
+.file-details-data td {
+    padding: 0 3px;
+    max-width: 130px;
+    min-width: 60px;
+    overflow: hidden;
+    vertical-align: top;
+    word-break: break-all;
+}
+
+.file-details-error {
+    color: #f00;
+}
+
+.file-details-thumbnail {
+    max-width: 180px;
+}

src/web/stylesheets/layout/_modals.css

@@ -107,4 +107,4 @@
     background-image:
         linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
         linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
-}
+}

src/web/stylesheets/layout/_recipe.css

@@ -7,7 +7,6 @@
  */
 
 #rec-list {
-    bottom: var(--controls-height);
     overflow: auto;
 }
 

src/web/stylesheets/themes/_classic.css

@@ -110,11 +110,11 @@
 
 
     /* Highlighter colours */
-    --hl1: #fff000;
-    --hl2: #95dfff;
-    --hl3: #ffb6b6;
-    --hl4: #fcf8e3;
-    --hl5: #8de768;
+    --hl1: #ffee00aa;
+    --hl2: #95dfffaa;
+    --hl3: #ffb6b6aa;
+    --hl4: #fcf8e3aa;
+    --hl5: #8de768aa;
 
 
     /* Scrollbar */

src/web/stylesheets/themes/_dark.css

@@ -110,7 +110,7 @@
     --hl2: #675351;
     --hl3: #ffb6b6;
     --hl4: #fcf8e3;
-    --hl5: #8de768;
+    --hl5: #38811b;
 
 
     /* Scrollbar */

src/web/stylesheets/themes/_solarizedDark.css

@@ -125,9 +125,9 @@
     /* Highlighter colours */
     --hl1: var(--base01);
     --hl2: var(--sol-blue);
-    --hl3: var(--sol-magenta);
+    --hl3: var(--sol-green);
     --hl4: var(--sol-yellow);
-    --hl5: var(--sol-green);
+    --hl5: var(--sol-magenta);
 
 
     /* Scrollbar */

src/web/stylesheets/themes/_solarizedLight.css

@@ -127,9 +127,9 @@
     /* Highlighter colours */
     --hl1: var(--base1);
     --hl2: var(--sol-blue);
-    --hl3: var(--sol-magenta);
+    --hl3: var(--sol-green);
     --hl4: var(--sol-yellow);
-    --hl5: var(--sol-green);
+    --hl5: var(--sol-magenta);
 
 
     /* Scrollbar */

src/web/stylesheets/utils/_general.css

@@ -50,6 +50,11 @@ body {
     padding-left: 2px;
 }
 
+.modal-icon {
+    position: absolute;
+    right: 25px;
+}
+
 .konami {
     transform: rotate(180deg);
 }

src/web/stylesheets/utils/_overrides.css

@@ -13,7 +13,7 @@
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-    src: url("../static/fonts/MaterialIcons-Regular.woff2") format('woff2');
+    src: url("../static/fonts/MaterialIcons-Regular.ttf") format('truetype');
 }
 
 .material-icons {
@@ -247,3 +247,11 @@ optgroup {
 .colorpicker-color div {
     height: 100px;
 }
+
+
+/* CodeMirror */
+
+.ͼ2 .cm-specialChar,
+.cm-specialChar {
+    color: red;
+}

src/web/utils/copyOverride.mjs

@@ -0,0 +1,125 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ *
+ * In order to render whitespace characters as control character pictures in the output, even
+ * when they are the designated line separator, CyberChef sometimes chooses to represent them
+ * internally using the Unicode Private Use Area (https://en.wikipedia.org/wiki/Private_Use_Areas).
+ * See `Utils.escapeWhitespace()` for an example of this.
+ *
+ * The `renderSpecialChar()` function understands that it should display these characters as
+ * control pictures. When copying data from the Output, we need to replace these PUA characters
+ * with their original values, so we override the DOM "copy" event and modify the copied data
+ * if required. This handler is based closely on the built-in CodeMirror handler and defers to the
+ * built-in handler if PUA characters are not present in the copied data, in order to minimise the
+ * impact of breaking changes.
+ */
+
+import {EditorView} from "@codemirror/view";
+
+/**
+ * Copies the currently selected text from the state doc.
+ * Based on the built-in implementation with a few unrequired bits taken out:
+ * https://github.com/codemirror/view/blob/7d9c3e54396242d17b3164a0e244dcc234ee50ee/src/input.ts#L604
+ *
+ * @param {EditorState} state
+ * @returns {Object}
+ */
+function copiedRange(state) {
+    const content = [];
+    let linewise = false;
+    for (const range of state.selection.ranges) if (!range.empty) {
+        content.push(state.sliceDoc(range.from, range.to));
+    }
+    if (!content.length) {
+        // Nothing selected, do a line-wise copy
+        let upto = -1;
+        for (const {from} of state.selection.ranges) {
+            const line = state.doc.lineAt(from);
+            if (line.number > upto) {
+                content.push(line.text);
+            }
+            upto = line.number;
+        }
+        linewise = true;
+    }
+
+    return {text: content.join(state.lineBreak), linewise};
+}
+
+/**
+ * Regex to match characters in the Private Use Area of the Unicode table.
+ */
+const PUARegex = new RegExp("[\ue000-\uf8ff]");
+const PUARegexG = new RegExp("[\ue000-\uf8ff]", "g");
+/**
+ * Regex tto match Unicode Control Pictures.
+ */
+const CPRegex = new RegExp("[\u2400-\u243f]");
+const CPRegexG = new RegExp("[\u2400-\u243f]", "g");
+
+/**
+ * Overrides the DOM "copy" handler in the CodeMirror editor in order to return the original
+ * values of control characters that have been represented in the Unicode Private Use Area for
+ * visual purposes.
+ * Based on the built-in copy handler with some modifications:
+ * https://github.com/codemirror/view/blob/7d9c3e54396242d17b3164a0e244dcc234ee50ee/src/input.ts#L629
+ *
+ * This handler will defer to the built-in version if no PUA characters are present.
+ *
+ * @returns {Extension}
+ */
+export function copyOverride() {
+    return EditorView.domEventHandlers({
+        copy(event, view) {
+            const {text, linewise} = copiedRange(view.state);
+            if (!text && !linewise) return;
+
+            // If there are no PUA chars in the copied text, return false and allow the built-in
+            // copy handler to fire
+            if (!PUARegex.test(text)) return false;
+
+            // If PUA chars are detected, modify them back to their original values and copy that instead
+            const rawText = text.replace(PUARegexG, function(c) {
+                return String.fromCharCode(c.charCodeAt(0) - 0xe000);
+            });
+
+            event.preventDefault();
+            event.clipboardData.clearData();
+            event.clipboardData.setData("text/plain", rawText);
+
+            // Returning true prevents CodeMirror default handlers from firing
+            return true;
+        }
+    });
+}
+
+
+/**
+ * Handler for copy events in output-html decorations. If there are control pictures present,
+ * this handler will convert them back to their raw form before copying. If there are no
+ * control pictures present, it will do nothing and defer to the default browser handler.
+ *
+ * @param {ClipboardEvent} event
+ * @returns {boolean}
+ */
+export function htmlCopyOverride(event) {
+    const text = window.getSelection().toString();
+    if (!text) return;
+
+    // If there are no control picture chars in the copied text, return false and allow the built-in
+    // copy handler to fire
+    if (!CPRegex.test(text)) return false;
+
+    // If control picture chars are detected, modify them back to their original values and copy that instead
+    const rawText = text.replace(CPRegexG, function(c) {
+        return String.fromCharCode(c.charCodeAt(0) - 0x2400);
+    });
+
+    event.preventDefault();
+    event.clipboardData.clearData();
+    event.clipboardData.setData("text/plain", rawText);
+
+    return true;
+}

src/web/utils/editorUtils.mjs

@@ -0,0 +1,97 @@
+/**
+ * CodeMirror utilities that are relevant to both the input and output
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ */
+
+import Utils from "../../core/Utils.mjs";
+
+// Descriptions for named control characters
+const Names = {
+    0: "null",
+    7: "bell",
+    8: "backspace",
+    10: "line feed",
+    11: "vertical tab",
+    13: "carriage return",
+    27: "escape",
+    8203: "zero width space",
+    8204: "zero width non-joiner",
+    8205: "zero width joiner",
+    8206: "left-to-right mark",
+    8207: "right-to-left mark",
+    8232: "line separator",
+    8237: "left-to-right override",
+    8238: "right-to-left override",
+    8294: "left-to-right isolate",
+    8295: "right-to-left isolate",
+    8297: "pop directional isolate",
+    8233: "paragraph separator",
+    65279: "zero width no-break space",
+    65532: "object replacement"
+};
+
+// Regex for Special Characters to be replaced
+const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
+const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\u2066\u2067\u2069\ufeff\ufff9-\ufffc\ue000-\uf8ff]", UnicodeRegexpSupport);
+
+
+/**
+ * Override for rendering special characters.
+ * Should mirror the toDOM function in
+ * https://github.com/codemirror/view/blob/main/src/special-chars.ts#L153
+ * But reverts the replacement of line feeds with newline control pictures.
+ *
+ * @param {number} code
+ * @param {string} desc
+ * @param {string} placeholder
+ * @returns {element}
+ */
+export function renderSpecialChar(code, desc, placeholder) {
+    const s = document.createElement("span");
+
+    // CodeMirror changes 0x0a to "NL" instead of "LF". We change it back along with its description.
+    if (code === 0x0a) {
+        placeholder = "\u240a";
+        desc = desc.replace("newline", "line feed");
+    }
+
+    // Render CyberChef escaped characters correctly - see Utils.escapeWhitespace
+    if (code >= 0xe000 && code <= 0xf8ff) {
+        code = code - 0xe000;
+        placeholder = String.fromCharCode(0x2400 + code);
+        desc = "Control character " + (Names[code] || "0x" + code.toString(16));
+    }
+
+    s.textContent = placeholder;
+    s.title = desc;
+    s.setAttribute("aria-label", desc);
+    s.className = "cm-specialChar";
+    return s;
+}
+
+
+/**
+ * Given a string, returns that string with any control characters replaced with HTML
+ * renderings of control pictures.
+ *
+ * @param {string} str
+ * @param {boolean} [preserveWs=false]
+ * @param {string} [lineBreak="\n"]
+ * @returns {html}
+ */
+export function escapeControlChars(str, preserveWs=false, lineBreak="\n") {
+    if (!preserveWs)
+        str = Utils.escapeWhitespace(str);
+
+    return str.replace(Specials, function(c) {
+        if (lineBreak.includes(c)) return c;
+        const code = c.charCodeAt(0);
+        const desc = "Control character " + (Names[code] || "0x" + code.toString(16));
+        const placeholder = code > 32 ? "\u2022" : String.fromCharCode(9216 + code);
+        const n = renderSpecialChar(code, desc, placeholder);
+        return n.outerHTML;
+    });
+}

src/web/utils/fileDetails.mjs

@@ -0,0 +1,147 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ */
+
+import {showSidePanel} from "./sidePanel.mjs";
+import Utils from "../../core/Utils.mjs";
+import {isImage, detectFileType} from "../../core/lib/FileType.mjs";
+
+/**
+ * A File Details extension for CodeMirror
+ */
+class FileDetailsPanel {
+
+    /**
+     * FileDetailsPanel constructor
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        this.fileDetails = opts?.fileDetails;
+        this.progress = opts?.progress ?? 0;
+        this.status = opts?.status;
+        this.buffer = opts?.buffer;
+        this.renderPreview = opts?.renderPreview;
+        this.toggleHandler = opts?.toggleHandler;
+        this.hidden = opts?.hidden;
+        this.dom = this.buildDOM();
+        this.renderFileThumb();
+    }
+
+    /**
+     * Builds the file details DOM tree
+     * @returns {DOMNode}
+     */
+    buildDOM() {
+        const dom = document.createElement("div");
+
+        dom.className = "cm-file-details";
+        const fileThumb = require("../static/images/file-128x128.png");
+        dom.innerHTML = `
+            <div class="${this.hidden ? "file-details-toggle-hidden" : "file-details-toggle-shown"}"
+                data-toggle="tooltip"
+                title="${this.hidden ? "Show" : "Hide"} file details">
+                ${this.hidden ? "&#10096;" : "&#10097;"}
+            </div>
+            <p class="file-details-heading">File details</p>
+            <img aria-hidden="true" src="${fileThumb}" alt="File icon" class="file-details-thumbnail"/>
+            <table class="file-details-data">
+                <tr>
+                    <td>Name:</td>
+                    <td class="file-details-name" title="${Utils.escapeHtml(this.fileDetails?.name)}">
+                        ${Utils.escapeHtml(this.fileDetails?.name)}
+                    </td>
+                </tr>
+                <tr>
+                    <td>Size:</td>
+                    <td class="file-details-size" title="${Utils.escapeHtml(this.fileDetails?.size)} bytes">
+                        ${Utils.escapeHtml(this.fileDetails?.size)} bytes
+                    </td>
+                </tr>
+                <tr>
+                    <td>Type:</td>
+                    <td class="file-details-type" title="${Utils.escapeHtml(this.fileDetails?.type)}">
+                        ${Utils.escapeHtml(this.fileDetails?.type)}
+                    </td>
+                </tr>
+                <tr>
+                    <td>Loaded:</td>
+                    <td class="file-details-${this.status === "error" ? "error" : "loaded"}">
+                        ${this.status === "error" ? "Error" : this.progress + "%"}
+                    </td>
+                </tr>
+            </table>
+        `;
+
+        dom.querySelector(".file-details-toggle-shown,.file-details-toggle-hidden")
+            .addEventListener("click", this.toggleHandler, false);
+
+        return dom;
+    }
+
+    /**
+     * Render the file thumbnail
+     */
+    renderFileThumb() {
+        if (!this.renderPreview) {
+            this.resetFileThumb();
+            return;
+        }
+        const fileThumb = this.dom.querySelector(".file-details-thumbnail");
+        const fileType = this.dom.querySelector(".file-details-type");
+        const fileBuffer = new Uint8Array(this.buffer);
+        const type = isImage(fileBuffer);
+
+        if (type && type !== "image/tiff" && fileBuffer.byteLength <= 512000) {
+            // Most browsers don't support displaying TIFFs, so ignore them
+            // Don't render images over 512,000 bytes
+            const blob = new Blob([fileBuffer], {type: type}),
+                url = URL.createObjectURL(blob);
+            fileThumb.src = url;
+        } else {
+            this.resetFileThumb();
+        }
+        fileType.textContent = type ? type : detectFileType(fileBuffer)[0]?.mime ?? "unknown";
+    }
+
+    /**
+     * Reset the file thumbnail to the default icon
+     */
+    resetFileThumb() {
+        const fileThumb = this.dom.querySelector(".file-details-thumbnail");
+        fileThumb.src = require("../static/images/file-128x128.png");
+    }
+
+}
+
+/**
+ * A panel constructor factory building a panel that displays file details
+ * @param {Object} opts
+ * @returns {Function<PanelConstructor>}
+ */
+function makePanel(opts) {
+    const fdPanel = new FileDetailsPanel(opts);
+
+    return (view) => {
+        return {
+            dom: fdPanel.dom,
+            width: opts?.hidden ? 1 : 200,
+            update(update) {
+            },
+            mount() {
+                $("[data-toggle='tooltip']").tooltip();
+            }
+        };
+    };
+}
+
+/**
+ * A function that build the extension that enables the panel in an editor.
+ * @param {Object} opts
+ * @returns {Extension}
+ */
+export function fileDetailsPanel(opts) {
+    const panelMaker = makePanel(opts);
+    return showSidePanel.of(panelMaker);
+}

src/web/utils/htmlWidget.mjs

@@ -0,0 +1,129 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ */
+
+import {WidgetType, Decoration, ViewPlugin} from "@codemirror/view";
+import {escapeControlChars} from "./editorUtils.mjs";
+import {htmlCopyOverride} from "./copyOverride.mjs";
+
+
+/**
+ * Adds an HTML widget to the Code Mirror editor
+ */
+class HTMLWidget extends WidgetType {
+
+    /**
+     * HTMLWidget consructor
+     */
+    constructor(html, view) {
+        super();
+        this.html = html;
+        this.view = view;
+    }
+
+    /**
+     * Builds the DOM node
+     * @returns {DOMNode}
+     */
+    toDOM() {
+        const wrap = document.createElement("span");
+        wrap.setAttribute("id", "output-html");
+        wrap.innerHTML = this.html;
+
+        // Find text nodes and replace unprintable chars with control codes
+        this.walkTextNodes(wrap);
+
+        // Add a handler for copy events to ensure the control codes are copied correctly
+        wrap.addEventListener("copy", htmlCopyOverride);
+        return wrap;
+    }
+
+    /**
+     * Walks all text nodes in a given element
+     * @param {DOMNode} el
+     */
+    walkTextNodes(el) {
+        for (const node of el.childNodes) {
+            switch (node.nodeType) {
+                case Node.TEXT_NODE:
+                    this.replaceControlChars(node);
+                    break;
+                default:
+                    if (node.nodeName !== "SCRIPT" &&
+                        node.nodeName !== "STYLE")
+                        this.walkTextNodes(node);
+                    break;
+            }
+        }
+    }
+
+    /**
+     * Renders control characters in text nodes
+     * @param {DOMNode} textNode
+     */
+    replaceControlChars(textNode) {
+        const val = escapeControlChars(textNode.nodeValue, true, this.view.state.lineBreak);
+        if (val.length !== textNode.nodeValue.length) {
+            const node = document.createElement("span");
+            node.innerHTML = val;
+            textNode.parentNode.replaceChild(node, textNode);
+        }
+    }
+
+}
+
+/**
+ * Decorator function to provide a set of widgets for the editor DOM
+ * @param {EditorView} view
+ * @param {string} html
+ * @returns {DecorationSet}
+ */
+function decorateHTML(view, html) {
+    const widgets = [];
+    if (html.length) {
+        const deco = Decoration.widget({
+            widget: new HTMLWidget(html, view),
+            side: 1
+        });
+        widgets.push(deco.range(0));
+    }
+    return Decoration.set(widgets);
+}
+
+
+/**
+ * An HTML Plugin builder
+ * @param {Object} htmlOutput
+ * @returns {ViewPlugin}
+ */
+export function htmlPlugin(htmlOutput) {
+    const plugin = ViewPlugin.fromClass(
+        class {
+            /**
+             * Plugin constructor
+             * @param {EditorView} view
+             */
+            constructor(view) {
+                this.htmlOutput = htmlOutput;
+                this.decorations = decorateHTML(view, this.htmlOutput.html);
+            }
+
+            /**
+             * Editor update listener
+             * @param {ViewUpdate} update
+             */
+            update(update) {
+                if (this.htmlOutput.changed) {
+                    this.decorations = decorateHTML(update.view, this.htmlOutput.html);
+                    this.htmlOutput.changed = false;
+                }
+            }
+        }, {
+            decorations: v => v.decorations
+        }
+    );
+
+    return plugin;
+}

src/web/utils/sidePanel.mjs

@@ -0,0 +1,263 @@
+/**
+ * A modification of the CodeMirror Panel extension to enable panels to the
+ * left and right of the editor.
+ * Based on code here: https://github.com/codemirror/view/blob/main/src/panel.ts
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ */
+
+import {EditorView, ViewPlugin} from "@codemirror/view";
+import {Facet} from "@codemirror/state";
+
+const panelConfig = Facet.define({
+    combine(configs) {
+        let leftContainer, rightContainer;
+        for (const c of configs) {
+            leftContainer = leftContainer || c.leftContainer;
+            rightContainer = rightContainer || c.rightContainer;
+        }
+        return {leftContainer, rightContainer};
+    }
+});
+
+/**
+ * Configures the panel-managing extension.
+ * @param {PanelConfig} config
+ * @returns Extension
+ */
+export function panels(config) {
+    return config ? [panelConfig.of(config)] : [];
+}
+
+/**
+ * Get the active panel created by the given constructor, if any.
+ * This can be useful when you need access to your panels' DOM
+ * structure.
+ * @param {EditorView} view
+ * @param {PanelConstructor} panel
+ * @returns {Panel}
+ */
+export function getPanel(view, panel) {
+    const plugin = view.plugin(panelPlugin);
+    const index = plugin ? plugin.specs.indexOf(panel) : -1;
+    return index > -1 ? plugin.panels[index] : null;
+}
+
+const panelPlugin = ViewPlugin.fromClass(class {
+
+    /**
+     * @param {EditorView} view
+     */
+    constructor(view) {
+        this.input = view.state.facet(showSidePanel);
+        this.specs = this.input.filter(s => s);
+        this.panels = this.specs.map(spec => spec(view));
+        const conf = view.state.facet(panelConfig);
+        this.left = new PanelGroup(view, true, conf.leftContainer);
+        this.right = new PanelGroup(view, false, conf.rightContainer);
+        this.left.sync(this.panels.filter(p => p.left));
+        this.right.sync(this.panels.filter(p => !p.left));
+        for (const p of this.panels) {
+            p.dom.classList.add("cm-panel");
+            if (p.mount) p.mount();
+        }
+    }
+
+    /**
+     * @param {ViewUpdate} update
+     */
+    update(update) {
+        const conf = update.state.facet(panelConfig);
+        if (this.left.container !== conf.leftContainer) {
+            this.left.sync([]);
+            this.left = new PanelGroup(update.view, true, conf.leftContainer);
+        }
+        if (this.right.container !== conf.rightContainer) {
+            this.right.sync([]);
+            this.right = new PanelGroup(update.view, false, conf.rightContainer);
+        }
+        this.left.syncClasses();
+        this.right.syncClasses();
+        const input = update.state.facet(showSidePanel);
+        if (input !== this.input) {
+            const specs = input.filter(x => x);
+            const panels = [], left = [], right = [], mount = [];
+            for (const spec of specs) {
+                const known = this.specs.indexOf(spec);
+                let panel;
+                if (known < 0) {
+                    panel = spec(update.view);
+                    mount.push(panel);
+                } else {
+                    panel = this.panels[known];
+                    if (panel.update) panel.update(update);
+                }
+                panels.push(panel)
+                ;(panel.left ? left : right).push(panel);
+            }
+            this.specs = specs;
+            this.panels = panels;
+            this.left.sync(left);
+            this.right.sync(right);
+            for (const p of mount) {
+                p.dom.classList.add("cm-panel");
+                if (p.mount) p.mount();
+            }
+        } else {
+            for (const p of this.panels) if (p.update) p.update(update);
+        }
+    }
+
+    /**
+     * Destroy panel
+     */
+    destroy() {
+        this.left.sync([]);
+        this.right.sync([]);
+    }
+}, {
+    // provide: PluginField.scrollMargins.from(value => ({left: value.left.scrollMargin(), right: value.right.scrollMargin()}))
+});
+
+/**
+ * PanelGroup
+ */
+class PanelGroup {
+
+    /**
+     * @param {EditorView} view
+     * @param {boolean} left
+     * @param {HTMLElement} container
+     */
+    constructor(view, left, container) {
+        this.view = view;
+        this.left = left;
+        this.container = container;
+        this.dom = undefined;
+        this.classes = "";
+        this.panels = [];
+        this.syncClasses();
+    }
+
+    /**
+     * @param {Panel[]} panels
+     */
+    sync(panels) {
+        for (const p of this.panels) if (p.destroy && panels.indexOf(p) < 0) p.destroy();
+        this.panels = panels;
+        this.syncDOM();
+    }
+
+    /**
+     * Synchronise the DOM
+     */
+    syncDOM() {
+        if (this.panels.length === 0) {
+            if (this.dom) {
+                this.dom.remove();
+                this.dom = undefined;
+                this.setScrollerMargin(0);
+            }
+            return;
+        }
+
+        const parent = this.container || this.view.dom;
+        if (!this.dom) {
+            this.dom = document.createElement("div");
+            this.dom.className = this.left ? "cm-side-panels cm-panels-left" : "cm-side-panels cm-panels-right";
+            parent.insertBefore(this.dom, parent.firstChild);
+        }
+
+        let curDOM = this.dom.firstChild;
+        let bufferWidth = 0;
+        for (const panel of this.panels) {
+            bufferWidth += panel.width;
+            if (panel.dom.parentNode === this.dom) {
+                while (curDOM !== panel.dom) curDOM = rm(curDOM);
+                curDOM = curDOM.nextSibling;
+            } else {
+                this.dom.insertBefore(panel.dom, curDOM);
+                panel.dom.style.width = panel.width + "px";
+                this.dom.style.width = bufferWidth + "px";
+            }
+        }
+        while (curDOM) curDOM = rm(curDOM);
+
+        this.setScrollerMargin(bufferWidth);
+    }
+
+    /**
+     * Sets the margin of the cm-scroller element to make room for the panel
+     */
+    setScrollerMargin(width) {
+        const parent = this.container || this.view.dom;
+        const margin = this.left ? "marginLeft" : "marginRight";
+        parent.querySelector(".cm-scroller").style[margin] = width + "px";
+    }
+
+    /**
+     *
+     */
+    scrollMargin() {
+        return !this.dom || this.container ? 0 :
+            Math.max(0, this.left ?
+                this.dom.getBoundingClientRect().right - Math.max(0, this.view.scrollDOM.getBoundingClientRect().left) :
+                Math.min(innerHeight, this.view.scrollDOM.getBoundingClientRect().right) - this.dom.getBoundingClientRect().left);
+    }
+
+    /**
+     *
+     */
+    syncClasses() {
+        if (!this.container || this.classes === this.view.themeClasses) return;
+        for (const cls of this.classes.split(" ")) if (cls) this.container.classList.remove(cls);
+        for (const cls of (this.classes = this.view.themeClasses).split(" ")) if (cls) this.container.classList.add(cls);
+    }
+}
+
+/**
+ * @param {ChildNode} node
+ * @returns HTMLElement
+ */
+function rm(node) {
+    const next = node.nextSibling;
+    node.remove();
+    return next;
+}
+
+const baseTheme = EditorView.baseTheme({
+    ".cm-side-panels": {
+        boxSizing: "border-box",
+        position: "absolute",
+        height: "100%",
+        top: 0,
+        bottom: 0
+    },
+    "&light .cm-side-panels": {
+        backgroundColor: "#f5f5f5",
+        color: "black"
+    },
+    "&light .cm-panels-left": {
+        borderRight: "1px solid #ddd",
+        left: 0
+    },
+    "&light .cm-panels-right": {
+        borderLeft: "1px solid #ddd",
+        right: 0
+    },
+    "&dark .cm-side-panels": {
+        backgroundColor: "#333338",
+        color: "white"
+    }
+});
+
+/**
+ * Opening a panel is done by providing a constructor function for
+ * the panel through this facet. (The panel is closed again when its
+ * constructor is no longer provided.) Values of `null` are ignored.
+ */
+export const showSidePanel = Facet.define({
+    enables: [panelPlugin, baseTheme]
+});

src/web/utils/statusBar.mjs

@@ -0,0 +1,496 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2022
+ * @license Apache-2.0
+ */
+
+import {showPanel} from "@codemirror/view";
+import {CHR_ENC_SIMPLE_LOOKUP, CHR_ENC_SIMPLE_REVERSE_LOOKUP} from "../../core/lib/ChrEnc.mjs";
+
+/**
+ * A Status bar extension for CodeMirror
+ */
+class StatusBarPanel {
+
+    /**
+     * StatusBarPanel constructor
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        this.label = opts.label;
+        this.timing = opts.timing;
+        this.tabNumGetter = opts.tabNumGetter;
+        this.eolHandler = opts.eolHandler;
+        this.chrEncHandler = opts.chrEncHandler;
+        this.chrEncGetter = opts.chrEncGetter;
+        this.htmlOutput = opts.htmlOutput;
+
+        this.eolVal = null;
+        this.chrEncVal = null;
+
+        this.dom = this.buildDOM();
+    }
+
+    /**
+     * Builds the status bar DOM tree
+     * @returns {DOMNode}
+     */
+    buildDOM() {
+        const dom = document.createElement("div");
+        const lhs = document.createElement("div");
+        const rhs = document.createElement("div");
+
+        dom.className = "cm-status-bar";
+        dom.setAttribute("data-help-title", `${this.label} status bar`);
+        dom.setAttribute("data-help", `This status bar provides information about data in the ${this.label}. Help topics are available for each of the components by activating help when hovering over them.`);
+        lhs.innerHTML = this.constructLHS();
+        rhs.innerHTML = this.constructRHS();
+
+        dom.appendChild(lhs);
+        dom.appendChild(rhs);
+
+        // Event listeners
+        dom.querySelectorAll(".cm-status-bar-select-btn").forEach(
+            el => el.addEventListener("click", this.showDropUp.bind(this), false)
+        );
+        dom.querySelector(".eol-select").addEventListener("click", this.eolSelectClick.bind(this), false);
+        dom.querySelector(".chr-enc-select").addEventListener("click", this.chrEncSelectClick.bind(this), false);
+        dom.querySelector(".cm-status-bar-filter-input").addEventListener("keyup", this.chrEncFilter.bind(this), false);
+
+        return dom;
+    }
+
+    /**
+     * Handler for dropup clicks
+     * Shows/Hides the dropup
+     * @param {Event} e
+     */
+    showDropUp(e) {
+        const el = e.target
+            .closest(".cm-status-bar-select")
+            .querySelector(".cm-status-bar-select-content");
+        const btn = e.target.closest(".cm-status-bar-select-btn");
+
+        if (btn.classList.contains("disabled")) return;
+
+        el.classList.add("show");
+
+        // Focus the filter input if present
+        const filter = el.querySelector(".cm-status-bar-filter-input");
+        if (filter) filter.focus();
+
+        // Set up a listener to close the menu if the user clicks outside of it
+        hideOnClickOutside(el, e);
+    }
+
+    /**
+     * Handler for EOL Select clicks
+     * Sets the line separator
+     * @param {Event} e
+     */
+    eolSelectClick(e) {
+        // preventDefault is required to stop the URL being modified and popState being triggered
+        e.preventDefault();
+
+        const eolLookup = {
+            "LF": "\u000a",
+            "VT": "\u000b",
+            "FF": "\u000c",
+            "CR": "\u000d",
+            "CRLF": "\u000d\u000a",
+            "NEL": "\u0085",
+            "LS": "\u2028",
+            "PS": "\u2029"
+        };
+        const eolval = eolLookup[e.target.getAttribute("data-val")];
+
+        if (eolval === undefined) return;
+
+        // Call relevant EOL change handler
+        this.eolHandler(eolval);
+        hideElement(e.target.closest(".cm-status-bar-select-content"));
+    }
+
+    /**
+     * Handler for Chr Enc Select clicks
+     * Sets the character encoding
+     * @param {Event} e
+     */
+    chrEncSelectClick(e) {
+        // preventDefault is required to stop the URL being modified and popState being triggered
+        e.preventDefault();
+
+        const chrEncVal = parseInt(e.target.getAttribute("data-val"), 10);
+
+        if (isNaN(chrEncVal)) return;
+
+        this.chrEncHandler(chrEncVal);
+        this.updateCharEnc(chrEncVal);
+        hideElement(e.target.closest(".cm-status-bar-select-content"));
+    }
+
+    /**
+     * Handler for Chr Enc keyup events
+     * Filters the list of selectable character encodings
+     * @param {Event} e
+     */
+    chrEncFilter(e) {
+        const input = e.target;
+        const filter = input.value.toLowerCase();
+        const div = input.closest(".cm-status-bar-select-content");
+        const a = div.getElementsByTagName("a");
+        for (let i = 0; i < a.length; i++) {
+            const txtValue = a[i].textContent || a[i].innerText;
+            if (txtValue.toLowerCase().includes(filter)) {
+                a[i].style.display = "block";
+            } else {
+                a[i].style.display = "none";
+            }
+        }
+    }
+
+    /**
+     * Counts the stats of a document
+     * @param {EditorState} state
+     */
+    updateStats(state) {
+        const length = this.dom.querySelector(".stats-length-value"),
+            lines = this.dom.querySelector(".stats-lines-value");
+
+        let docLength = state.doc.length;
+        // CodeMirror always counts line breaks as one character.
+        // We want to show an accurate reading of how many bytes there are.
+        if (state.lineBreak.length !== 1) {
+            docLength += (state.lineBreak.length * state.doc.lines) - state.doc.lines - 1;
+        }
+        length.textContent = docLength;
+        lines.textContent = state.doc.lines;
+    }
+
+    /**
+     * Gets the current selection info
+     * @param {EditorState} state
+     * @param {boolean} selectionSet
+     */
+    updateSelection(state, selectionSet) {
+        const selLen = state?.selection?.main ?
+            state.selection.main.to - state.selection.main.from :
+            0;
+
+        const selInfo = this.dom.querySelector(".sel-info"),
+            curOffsetInfo = this.dom.querySelector(".cur-offset-info");
+
+        if (!selectionSet) {
+            selInfo.style.display = "none";
+            curOffsetInfo.style.display = "none";
+            return;
+        }
+
+        // CodeMirror always counts line breaks as one character.
+        // We want to show an accurate reading of how many bytes there are.
+        let from = state.selection.main.from,
+            to = state.selection.main.to;
+        if (state.lineBreak.length !== 1) {
+            const fromLine = state.doc.lineAt(from).number;
+            const toLine = state.doc.lineAt(to).number;
+            from += (state.lineBreak.length * fromLine) - fromLine - 1;
+            to += (state.lineBreak.length * toLine) - toLine - 1;
+        }
+
+        if (selLen > 0) { // Range
+            const start = this.dom.querySelector(".sel-start-value"),
+                end = this.dom.querySelector(".sel-end-value"),
+                length = this.dom.querySelector(".sel-length-value");
+
+            selInfo.style.display = "inline-block";
+            curOffsetInfo.style.display = "none";
+            start.textContent = from;
+            end.textContent = to;
+            length.textContent = to - from;
+        } else { // Position
+            const offset = this.dom.querySelector(".cur-offset-value");
+
+            selInfo.style.display = "none";
+            curOffsetInfo.style.display = "inline-block";
+            offset.textContent = from;
+        }
+    }
+
+    /**
+     * Sets the current EOL separator in the status bar
+     * @param {EditorState} state
+     */
+    updateEOL(state) {
+        if (state.lineBreak === this.eolVal) return;
+
+        const eolLookup = {
+            "\u000a": ["LF", "Line Feed"],
+            "\u000b": ["VT", "Vertical Tab"],
+            "\u000c": ["FF", "Form Feed"],
+            "\u000d": ["CR", "Carriage Return"],
+            "\u000d\u000a": ["CRLF", "Carriage Return + Line Feed"],
+            "\u0085": ["NEL", "Next Line"],
+            "\u2028": ["LS", "Line Separator"],
+            "\u2029": ["PS", "Paragraph Separator"]
+        };
+
+        const val = this.dom.querySelector(".eol-value");
+        const button = val.closest(".cm-status-bar-select-btn");
+        const eolName = eolLookup[state.lineBreak];
+        val.textContent = eolName[0];
+        button.setAttribute("title", `End of line sequence:<br>${eolName[1]}`);
+        button.setAttribute("data-original-title", `End of line sequence:<br>${eolName[1]}`);
+        this.eolVal = state.lineBreak;
+    }
+
+
+    /**
+     * Sets the current character encoding of the document
+     */
+    updateCharEnc() {
+        const chrEncVal = this.chrEncGetter();
+        if (chrEncVal === this.chrEncVal) return;
+
+        const name = CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] ? CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] : "Raw Bytes";
+
+        const val = this.dom.querySelector(".chr-enc-value");
+        const button = val.closest(".cm-status-bar-select-btn");
+        val.textContent = name;
+        button.setAttribute("title", `${this.label} character encoding:<br>${name}`);
+        button.setAttribute("data-original-title", `${this.label} character encoding:<br>${name}`);
+        this.chrEncVal = chrEncVal;
+    }
+
+    /**
+     * Sets the latest timing info
+     */
+    updateTiming() {
+        if (!this.timing) return;
+
+        const bakingTime = this.dom.querySelector(".baking-time-value");
+        const bakingTimeInfo = this.dom.querySelector(".baking-time-info");
+
+        if (this.label === "Output" && this.timing) {
+            bakingTimeInfo.style.display = "inline-block";
+            bakingTime.textContent = this.timing.duration(this.tabNumGetter());
+
+            const info = this.timing.printStages(this.tabNumGetter()).replace(/\n/g, "<br>");
+            bakingTimeInfo.setAttribute("title", info);
+            bakingTimeInfo.setAttribute("data-original-title", info);
+        } else {
+            bakingTimeInfo.style.display = "none";
+        }
+    }
+
+    /**
+     * Updates the sizing of elements that need to fit correctly
+     * @param {EditorView} view
+     */
+    updateSizing(view) {
+        const viewHeight = view.contentDOM.parentNode.clientHeight;
+        this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach(
+            el => {
+                el.style.maxHeight = (viewHeight - 50) + "px";
+            }
+        );
+    }
+
+    /**
+     * Checks whether there is HTML output requiring some widgets to be disabled
+     */
+    monitorHTMLOutput() {
+        if (!this.htmlOutput?.changed) return;
+
+        if (this.htmlOutput?.html === "") {
+            // Enable all controls
+            this.dom.querySelectorAll(".disabled").forEach(el => {
+                el.classList.remove("disabled");
+            });
+        } else {
+            // Disable chrenc, length, selection etc.
+            this.dom.querySelectorAll(".cm-status-bar-select-btn").forEach(el => {
+                el.classList.add("disabled");
+            });
+
+            this.dom.querySelector(".stats-length-value").parentNode.classList.add("disabled");
+            this.dom.querySelector(".stats-lines-value").parentNode.classList.add("disabled");
+            this.dom.querySelector(".sel-info").classList.add("disabled");
+            this.dom.querySelector(".cur-offset-info").classList.add("disabled");
+        }
+    }
+
+    /**
+     * Builds the Left-hand-side widgets
+     * @returns {string}
+     */
+    constructLHS() {
+        return `
+            <span data-toggle="tooltip" title="${this.label} length" data-help-title="${this.label} length" data-help="This number represents the number of characters in the ${this.label}.<br><br>The CRLF end of line separator is counted as two characters which impacts this value.">
+                <i class="material-icons">abc</i>
+                <span class="stats-length-value"></span>
+            </span>
+            <span data-toggle="tooltip" title="Number of lines"  data-help-title="Number of lines" data-help="This number represents the number of lines in the ${this.label}. Lines are separated by the End of Line Sequence which can be changed using the EOL selector at the far right of this status bar.">
+                <i class="material-icons">sort</i>
+                <span class="stats-lines-value"></span>
+            </span>
+
+            <span class="sel-info" data-toggle="tooltip" title="Main selection" data-help-title="Main selection" data-help="These numbers show which offsets have been selected and how many characters are in the current selection. If multiple selections are made, these numbers refer to the latest one. ">
+                <i class="material-icons">highlight_alt</i>
+                <span class="sel-start-value"></span>\u279E<span class="sel-end-value"></span>
+                (<span class="sel-length-value"></span> selected)
+            </span>
+            <span class="cur-offset-info" data-toggle="tooltip" title="Cursor offset" data-help-title="Cursor offset" data-help="This number indicates what the current offset of the cursor is from the beginning of the ${this.label}.<br><br>The CRLF end of line separator is counted as two characters which impacts this value.">
+                <i class="material-icons">location_on</i>
+                <span class="cur-offset-value"></span>
+            </span>`;
+    }
+
+    /**
+     * Builds the Right-hand-side widgets
+     * Event listener set up in Manager
+     *
+     * @returns {string}
+     */
+    constructRHS() {
+        const chrEncOptions = Object.keys(CHR_ENC_SIMPLE_LOOKUP).map(name =>
+            `<a href="#" draggable="false" data-val="${CHR_ENC_SIMPLE_LOOKUP[name]}">${name}</a>`
+        ).join("");
+
+        let chrEncHelpText = "",
+            eolHelpText = "";
+        if (this.label === "Input") {
+            chrEncHelpText = "The input character encoding defines how the input text is encoded into bytes which are then processed by the Recipe.<br><br>The 'Raw bytes' option attempts to treat the input as individual bytes in the range 0-255. If it detects any characters with Unicode values above 255, it will treat the entire input as UTF-8. 'Raw bytes' is usually the best option if you are inputting binary data, such as a file.";
+            eolHelpText = "The End of Line Sequence defines which bytes are considered EOL terminators. Pressing the return key will enter this value into the input and create a new line.<br><br>Changing the EOL sequence will not modify any existing data in the input but may change how previously entered line breaks are displayed. Lines added while a different EOL terminator was set may not now result in a new line, but may be displayed as control characters instead.";
+        } else {
+            chrEncHelpText = "The output character encoding defines how the output bytes are decoded into text which can be displayed to you.<br><br>The 'Raw bytes' option treats the output data as individual bytes in the range 0-255.";
+            eolHelpText = "The End of Line Sequence defines which bytes are considered EOL terminators.<br><br>Changing this value will not modify the value of the output, but may change how certain bytes are displayed and whether they result in a new line being created.";
+        }
+
+        return `
+            <span class="baking-time-info" style="display: none" data-toggle="tooltip" data-html="true" title="Baking time" data-help-title="Baking time" data-help="The baking time is the total time between data being read from the input, processed, and then displayed in the output.<br><br>The 'Threading overhead' value accounts for the transfer of data between different processing threads, as well as some garbage collection. It is not included in the overall bake time displayed in the status bar as it is largely influenced by background operating system and browser activity which can fluctuate significantly.">
+                <i class="material-icons">schedule</i>
+                <span class="baking-time-value"></span>ms
+            </span>
+
+            <div class="cm-status-bar-select chr-enc-select" data-help-title="${this.label} character encoding" data-help="${chrEncHelpText}">
+                <span class="cm-status-bar-select-btn" data-toggle="tooltip" data-html="true" data-placement="left" title="${this.label} character encoding">
+                    <i class="material-icons">text_fields</i> <span class="chr-enc-value">Raw Bytes</span>
+                </span>
+                <div class="cm-status-bar-select-content">
+                    <div class="cm-status-bar-select-scroll no-select">
+                        <a href="#" draggable="false" data-val="0">Raw Bytes</a>
+                        ${chrEncOptions}
+                    </div>
+                    <div class="input-group cm-status-bar-filter-search">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">
+                                <i class="material-icons">search</i>
+                            </span>
+                        </div>
+                        <input type="text" class="form-control cm-status-bar-filter-input" placeholder="Filter...">
+                    </div>
+                </div>
+            </div>
+
+            <div class="cm-status-bar-select eol-select" data-help-title="${this.label} EOL sequence" data-help="${eolHelpText}">
+                <span class="cm-status-bar-select-btn" data-toggle="tooltip" data-html="true" data-placement="left" title="End of line sequence">
+                    <i class="material-icons">keyboard_return</i> <span class="eol-value"></span>
+                </span>
+                <div class="cm-status-bar-select-content no-select">
+                    <a href="#" draggable="false" data-val="LF">Line Feed, U+000A</a>
+                    <a href="#" draggable="false" data-val="VT">Vertical Tab, U+000B</a>
+                    <a href="#" draggable="false" data-val="FF">Form Feed, U+000C</a>
+                    <a href="#" draggable="false" data-val="CR">Carriage Return, U+000D</a>
+                    <a href="#" draggable="false" data-val="CRLF">CR+LF, U+000D U+000A</a>
+                    <!-- <a href="#" draggable="false" data-val="NL">Next Line, U+0085</a> This causes problems. -->
+                    <a href="#" draggable="false" data-val="LS">Line Separator, U+2028</a>
+                    <a href="#" draggable="false" data-val="PS">Paragraph Separator, U+2029</a>
+                </div>
+            </div>`;
+    }
+
+}
+
+const elementsWithListeners = {};
+
+/**
+ * Hides the provided element when a click is made outside of it
+ * @param {Element} element
+ * @param {Event} instantiatingEvent
+ */
+function hideOnClickOutside(element, instantiatingEvent) {
+    /**
+     * Handler for document click events
+     * Closes element if click is outside it.
+     * @param {Event} event
+     */
+    const outsideClickListener = event => {
+        // Don't trigger if we're clicking inside the element, or if the element
+        // is not visible, or if this is the same click event that opened it.
+        if (!element.contains(event.target) &&
+            event.timeStamp !== instantiatingEvent.timeStamp) {
+            hideElement(element);
+        }
+    };
+
+    if (!Object.prototype.hasOwnProperty.call(elementsWithListeners, element)) {
+        elementsWithListeners[element] = outsideClickListener;
+        document.addEventListener("click", elementsWithListeners[element], false);
+    }
+}
+
+/**
+ * Hides the specified element and removes the click listener for it
+ * @param {Element} element
+ */
+function hideElement(element) {
+    element.classList.remove("show");
+    document.removeEventListener("click", elementsWithListeners[element], false);
+    delete elementsWithListeners[element];
+}
+
+
+/**
+ * A panel constructor factory building a panel that re-counts the stats every time the document changes.
+ * @param {Object} opts
+ * @returns {Function<PanelConstructor>}
+ */
+function makePanel(opts) {
+    const sbPanel = new StatusBarPanel(opts);
+
+    return (view) => {
+        sbPanel.updateEOL(view.state);
+        sbPanel.updateCharEnc();
+        sbPanel.updateTiming();
+        sbPanel.updateStats(view.state);
+        sbPanel.updateSelection(view.state, false);
+        sbPanel.monitorHTMLOutput();
+
+        return {
+            "dom": sbPanel.dom,
+            update(update) {
+                sbPanel.updateEOL(update.state);
+                sbPanel.updateCharEnc();
+                sbPanel.updateSelection(update.state, update.selectionSet);
+                sbPanel.updateTiming();
+                sbPanel.monitorHTMLOutput();
+                if (update.geometryChanged) {
+                    sbPanel.updateSizing(update.view);
+                }
+                if (update.docChanged) {
+                    sbPanel.updateStats(update.state);
+                }
+            }
+        };
+    };
+}
+
+/**
+ * A function that build the extension that enables the panel in an editor.
+ * @param {Object} opts
+ * @returns {Extension}
+ */
+export function statusBar(opts) {
+    const panelMaker = makePanel(opts);
+    return showPanel.of(panelMaker);
+}

src/web/waiters/BackgroundWorkerWaiter.mjs

@@ -35,6 +35,14 @@ class BackgroundWorkerWaiter {
         log.debug("Registering new background ChefWorker");
         this.chefWorker = new ChefWorker();
         this.chefWorker.addEventListener("message", this.handleChefMessage.bind(this));
+        this.chefWorker.postMessage({
+            action: "setLogPrefix",
+            data: "BGChefWorker"
+        });
+        this.chefWorker.postMessage({
+            action: "setLogLevel",
+            data: log.getLevel()
+        });
 
         let docURL = document.location.href.split(/[#?]/)[0];
         const index = docURL.lastIndexOf("/");
@@ -52,7 +60,7 @@ class BackgroundWorkerWaiter {
      */
     handleChefMessage(e) {
         const r = e.data;
-        log.debug("Receiving '" + r.action + "' from ChefWorker in the background");
+        log.debug(`Receiving '${r.action}' from BGChefWorker`);
 
         switch (r.action) {
             case "bakeComplete":
@@ -152,6 +160,18 @@ class BackgroundWorkerWaiter {
         this.manager.output.backgroundMagicResult(response.dish.value);
     }
 
+
+    /**
+     * Sets the console log level in the workers.
+     */
+    setLogLevel() {
+        if (!this.chefWorker) return;
+        this.chefWorker.postMessage({
+            action: "setLogLevel",
+            data: log.getLevel()
+        });
+    }
+
 }
 
 

src/web/waiters/BindingsWaiter.mjs

@@ -40,11 +40,11 @@ class BindingsWaiter {
                     break;
                 case "KeyI": // Focus input
                     e.preventDefault();
-                    document.getElementById("input-text").focus();
+                    this.manager.input.inputEditorView.focus();
                     break;
                 case "KeyO": // Focus output
                     e.preventDefault();
-                    document.getElementById("output-text").focus();
+                    this.manager.output.outputEditorView.focus();
                     break;
                 case "Period": // Focus next operation
                     e.preventDefault();
@@ -126,7 +126,7 @@ class BindingsWaiter {
                     break;
                 case "KeyW": // Close tab
                     e.preventDefault();
-                    this.manager.input.removeInput(this.manager.tabs.getActiveInputTab());
+                    this.manager.input.removeInput(this.manager.tabs.getActiveTab("input"));
                     break;
                 case "ArrowLeft": // Go to previous tab
                     e.preventDefault();
@@ -148,6 +148,13 @@ class BindingsWaiter {
                     }
                     break;
             }
+        } else {
+            switch (e.code) {
+                case "F1":
+                    e.preventDefault();
+                    this.contextualHelp();
+                    break;
+            }
         }
     }
 
@@ -164,9 +171,14 @@ class BindingsWaiter {
         }
         document.getElementById("keybList").innerHTML = `
         <tr>
-            <td><b>Command</b></td>
-            <td><b>Shortcut (Win/Linux)</b></td>
-            <td><b>Shortcut (Mac)</b></td>
+            <th>Command</th>
+            <th>Shortcut (Win/Linux)</th>
+            <th>Shortcut (Mac)</th>
+        </tr>
+        <tr>
+            <td>Activate contextual help</td>
+            <td>F1</td>
+            <td>F1</td>
         </tr>
         <tr>
             <td>Place cursor in search field</td>
@@ -255,6 +267,42 @@ class BindingsWaiter {
         `;
     }
 
+    /**
+     * Shows contextual help message based on where the mouse pointer is
+     */
+    contextualHelp() {
+        const hoveredHelpEls = document.querySelectorAll(":hover[data-help],:hover[data-help-proxy]");
+        if (!hoveredHelpEls.length) return;
+
+        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();
+    }
+
 }
 
 export default BindingsWaiter;

src/web/waiters/ControlsWaiter.mjs

@@ -138,9 +138,18 @@ class ControlsWaiter {
             }
         }
 
+        const inputChrEnc = this.manager.input.getChrEnc();
+        const outputChrEnc = this.manager.output.getChrEnc();
+        const inputEOLSeq = this.manager.input.getEOLSeq();
+        const outputEOLSeq = this.manager.output.getEOLSeq();
+
         const params = [
             includeRecipe ? ["recipe", recipeStr] : undefined,
-            includeInput ? ["input", Utils.escapeHtml(input)] : undefined,
+            includeInput && input.length ? ["input", Utils.escapeHtml(input)] : undefined,
+            inputChrEnc !== 0 ? ["ienc", inputChrEnc] : undefined,
+            outputChrEnc !== 0 ? ["oenc", outputChrEnc] : undefined,
+            inputEOLSeq !== "\n" ? ["ieol", inputEOLSeq] : undefined,
+            outputEOLSeq !== "\n" ? ["oeol", outputEOLSeq] : undefined
         ];
 
         const hash = params
@@ -410,6 +419,17 @@ ${navigator.userAgent}
         }
     }
 
+    /**
+     * Calculates the height of the controls area and adjusts the recipe
+     * height accordingly.
+     */
+    calcControlsHeight() {
+        const controls = document.getElementById("controls"),
+            recList = document.getElementById("rec-list");
+
+        recList.style.bottom = controls.clientHeight + "px";
+    }
+
 }
 
 export default ControlsWaiter;

src/web/waiters/HighlighterWaiter.mjs

@@ -4,18 +4,8 @@
  * @license Apache-2.0
  */
 
-/**
- * HighlighterWaiter data type enum for the input.
- * @enum
- */
-const INPUT = 0;
-
-/**
- * HighlighterWaiter data type enum for the output.
- * @enum
- */
-const OUTPUT = 1;
-
+import {EditorSelection} from "@codemirror/state";
+import {chrEncWidth} from "../../core/lib/ChrEnc.mjs";
 
 /**
  * Waiter to handle events related to highlighting in CyberChef.
@@ -32,436 +22,115 @@ class HighlighterWaiter {
         this.app = app;
         this.manager = manager;
 
-        this.mouseButtonDown = false;
-        this.mouseTarget = null;
+        this.currentSelectionRanges = [];
     }
 
-
     /**
-     * Determines if the current text selection is running backwards or forwards.
-     * StackOverflow answer id: 12652116
+     * Handler for selection change events in the input and output
      *
-     * @private
-     * @returns {boolean}
-     */
-    _isSelectionBackwards() {
-        let backwards = false;
-        const sel = window.getSelection();
-
-        if (!sel.isCollapsed) {
-            const range = document.createRange();
-            range.setStart(sel.anchorNode, sel.anchorOffset);
-            range.setEnd(sel.focusNode, sel.focusOffset);
-            backwards = range.collapsed;
-            range.detach();
-        }
-        return backwards;
-    }
-
-
-    /**
-     * Calculates the text offset of a position in an HTML element, ignoring HTML tags.
-     *
-     * @private
-     * @param {element} node - The parent HTML node.
-     * @param {number} offset - The offset since the last HTML element.
-     * @returns {number}
-     */
-    _getOutputHtmlOffset(node, offset) {
-        const sel = window.getSelection();
-        const range = document.createRange();
-
-        range.selectNodeContents(document.getElementById("output-html"));
-        range.setEnd(node, offset);
-        sel.removeAllRanges();
-        sel.addRange(range);
-
-        return sel.toString().length;
-    }
-
-
-    /**
-     * Gets the current selection offsets in the output HTML, ignoring HTML tags.
-     *
-     * @private
-     * @returns {Object} pos
-     * @returns {number} pos.start
-     * @returns {number} pos.end
-     */
-    _getOutputHtmlSelectionOffsets() {
-        const sel = window.getSelection();
-        let range,
-            start = 0,
-            end = 0,
-            backwards = false;
-
-        if (sel.rangeCount) {
-            range = sel.getRangeAt(sel.rangeCount - 1);
-            backwards = this._isSelectionBackwards();
-            start = this._getOutputHtmlOffset(range.startContainer, range.startOffset);
-            end = this._getOutputHtmlOffset(range.endContainer, range.endOffset);
-            sel.removeAllRanges();
-            sel.addRange(range);
-
-            if (backwards) {
-                // If selecting backwards, reverse the start and end offsets for the selection to
-                // prevent deselecting as the drag continues.
-                sel.collapseToEnd();
-                sel.extend(sel.anchorNode, range.startOffset);
-            }
-        }
-
-        return {
-            start: start,
-            end: end
-        };
-    }
-
-
-    /**
-     * Handler for input scroll events.
-     * Scrolls the highlighter pane to match the input textarea position.
-     *
-     * @param {event} e
-     */
-    inputScroll(e) {
-        const el = e.target;
-        document.getElementById("input-highlighter").scrollTop = el.scrollTop;
-        document.getElementById("input-highlighter").scrollLeft = el.scrollLeft;
-    }
-
-
-    /**
-     * Handler for output scroll events.
-     * Scrolls the highlighter pane to match the output textarea position.
-     *
-     * @param {event} e
-     */
-    outputScroll(e) {
-        const el = e.target;
-        document.getElementById("output-highlighter").scrollTop = el.scrollTop;
-        document.getElementById("output-highlighter").scrollLeft = el.scrollLeft;
-    }
-
-
-    /**
-     * Handler for input mousedown events.
-     * Calculates the current selection info, and highlights the corresponding data in the output.
-     *
-     * @param {event} e
-     */
-    inputMousedown(e) {
-        this.mouseButtonDown = true;
-        this.mouseTarget = INPUT;
-        this.removeHighlights();
-
-        const el = e.target;
-        const start = el.selectionStart;
-        const end = el.selectionEnd;
-
-        if (start !== 0 || end !== 0) {
-            document.getElementById("input-selection-info").innerHTML = this.selectionInfo(start, end);
-            this.highlightOutput([{start: start, end: end}]);
-        }
-    }
-
-
-    /**
-     * Handler for output mousedown events.
-     * Calculates the current selection info, and highlights the corresponding data in the input.
-     *
-     * @param {event} e
-     */
-    outputMousedown(e) {
-        this.mouseButtonDown = true;
-        this.mouseTarget = OUTPUT;
-        this.removeHighlights();
-
-        const el = e.target;
-        const start = el.selectionStart;
-        const end = el.selectionEnd;
-
-        if (start !== 0 || end !== 0) {
-            document.getElementById("output-selection-info").innerHTML = this.selectionInfo(start, end);
-            this.highlightInput([{start: start, end: end}]);
-        }
-    }
-
-
-    /**
-     * Handler for output HTML mousedown events.
-     * Calculates the current selection info.
-     *
-     * @param {event} e
-     */
-    outputHtmlMousedown(e) {
-        this.mouseButtonDown = true;
-        this.mouseTarget = OUTPUT;
-
-        const sel = this._getOutputHtmlSelectionOffsets();
-        if (sel.start !== 0 || sel.end !== 0) {
-            document.getElementById("output-selection-info").innerHTML = this.selectionInfo(sel.start, sel.end);
-        }
-    }
-
-
-    /**
-     * Handler for input mouseup events.
-     *
-     * @param {event} e
-     */
-    inputMouseup(e) {
-        this.mouseButtonDown = false;
-    }
-
-
-    /**
-     * Handler for output mouseup events.
-     *
-     * @param {event} e
-     */
-    outputMouseup(e) {
-        this.mouseButtonDown = false;
-    }
-
-
-    /**
-     * Handler for output HTML mouseup events.
-     *
-     * @param {event} e
-     */
-    outputHtmlMouseup(e) {
-        this.mouseButtonDown = false;
-    }
-
-
-    /**
-     * Handler for input mousemove events.
-     * Calculates the current selection info, and highlights the corresponding data in the output.
-     *
-     * @param {event} e
-     */
-    inputMousemove(e) {
-        // Check that the left mouse button is pressed
-        if (!this.mouseButtonDown ||
-            e.which !== 1 ||
-            this.mouseTarget !== INPUT)
-            return;
-
-        const el = e.target;
-        const start = el.selectionStart;
-        const end = el.selectionEnd;
-
-        if (start !== 0 || end !== 0) {
-            document.getElementById("input-selection-info").innerHTML = this.selectionInfo(start, end);
-            this.highlightOutput([{start: start, end: end}]);
-        }
-    }
-
-
-    /**
-     * Handler for output mousemove events.
-     * Calculates the current selection info, and highlights the corresponding data in the input.
-     *
-     * @param {event} e
-     */
-    outputMousemove(e) {
-        // Check that the left mouse button is pressed
-        if (!this.mouseButtonDown ||
-            e.which !== 1 ||
-            this.mouseTarget !== OUTPUT)
-            return;
-
-        const el = e.target;
-        const start = el.selectionStart;
-        const end = el.selectionEnd;
-
-        if (start !== 0 || end !== 0) {
-            document.getElementById("output-selection-info").innerHTML = this.selectionInfo(start, end);
-            this.highlightInput([{start: start, end: end}]);
-        }
-    }
-
-
-    /**
-     * Handler for output HTML mousemove events.
-     * Calculates the current selection info.
-     *
-     * @param {event} e
-     */
-    outputHtmlMousemove(e) {
-        // Check that the left mouse button is pressed
-        if (!this.mouseButtonDown ||
-            e.which !== 1 ||
-            this.mouseTarget !== OUTPUT)
-            return;
-
-        const sel = this._getOutputHtmlSelectionOffsets();
-        if (sel.start !== 0 || sel.end !== 0) {
-            document.getElementById("output-selection-info").innerHTML = this.selectionInfo(sel.start, sel.end);
-        }
-    }
-
-
-    /**
-     * Given start and end offsets, writes the HTML for the selection info element with the correct
-     * padding.
-     *
-     * @param {number} start - The start offset.
-     * @param {number} end - The end offset.
-     * @returns {string}
-     */
-    selectionInfo(start, end) {
-        const len = end.toString().length;
-        const width = len < 2 ? 2 : len;
-        const startStr = start.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
-        const endStr = end.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
-        const lenStr = (end-start).toString().padStart(width, " ").replace(/ /g, "&nbsp;");
-
-        return "start: " + startStr + "<br>end: " + endStr + "<br>length: " + lenStr;
-    }
-
-
-    /**
-     * Removes highlighting and selection information.
-     */
-    removeHighlights() {
-        document.getElementById("input-highlighter").innerHTML = "";
-        document.getElementById("output-highlighter").innerHTML = "";
-        document.getElementById("input-selection-info").innerHTML = "";
-        document.getElementById("output-selection-info").innerHTML = "";
-    }
-
-
-    /**
-     * Highlights the given offsets in the output.
+     * Highlights the given offsets in the input or output.
      * We will only highlight if:
      *     - input hasn't changed since last bake
      *     - last bake was a full bake
      *     - all operations in the recipe support highlighting
      *
-     * @param {Object} pos - The position object for the highlight.
-     * @param {number} pos.start - The start offset.
-     * @param {number} pos.end - The end offset.
+     * @param {string} io
+     * @param {ViewUpdate} e
      */
-    highlightOutput(pos) {
+    selectionChange(io, e) {
+        // Confirm we are not currently baking
         if (!this.app.autoBake_ || this.app.baking) return false;
-        this.manager.worker.highlight(this.app.getRecipeConfig(), "forward", pos);
+
+        // Confirm this was a user-generated event to prevent looping
+        // from setting the selection in this class
+        if (!e.transactions[0].isUserEvent("select")) return false;
+
+        this.currentSelectionRanges = [];
+
+        // Confirm some non-empty ranges are set
+        const selectionRanges = e.state.selection.ranges;
+
+        // Adjust offsets based on the width of the character set
+        const inputCharacterWidth = chrEncWidth(this.manager.input.getChrEnc());
+        const outputCharacterWidth = chrEncWidth(this.manager.output.getChrEnc());
+        let ratio = 1;
+        if (inputCharacterWidth !== outputCharacterWidth &&
+            inputCharacterWidth !== 0 && outputCharacterWidth !== 0) {
+            ratio = io === "input" ?
+                inputCharacterWidth / outputCharacterWidth :
+                outputCharacterWidth / inputCharacterWidth;
+        }
+
+        // Loop through ranges and send request for output offsets for each one
+        const direction = io === "input" ? "forward" : "reverse";
+        for (const range of selectionRanges) {
+            const pos = [{
+                start: Math.floor(range.from * ratio),
+                end: Math.floor(range.to * ratio)
+            }];
+            this.manager.worker.highlight(this.app.getRecipeConfig(), direction, pos);
+        }
     }
 
-
-    /**
-     * Highlights the given offsets in the input.
-     * We will only highlight if:
-     *     - input hasn't changed since last bake
-     *     - last bake was a full bake
-     *     - all operations in the recipe support highlighting
-     *
-     * @param {Object} pos - The position object for the highlight.
-     * @param {number} pos.start - The start offset.
-     * @param {number} pos.end - The end offset.
-     */
-    highlightInput(pos) {
-        if (!this.app.autoBake_ || this.app.baking) return false;
-        this.manager.worker.highlight(this.app.getRecipeConfig(), "reverse", pos);
-    }
-
-
     /**
      * Displays highlight offsets sent back from the Chef.
      *
-     * @param {Object} pos - The position object for the highlight.
+     * @param {Object[]} pos - The position object for the highlight.
      * @param {number} pos.start - The start offset.
      * @param {number} pos.end - The end offset.
      * @param {string} direction
      */
     displayHighlights(pos, direction) {
         if (!pos) return;
-
-        if (this.manager.tabs.getActiveInputTab() !== this.manager.tabs.getActiveOutputTab()) return;
+        if (this.manager.tabs.getActiveTab("input") !== this.manager.tabs.getActiveTab("output")) return;
 
         const io = direction === "forward" ? "output" : "input";
-
-        document.getElementById(io + "-selection-info").innerHTML = this.selectionInfo(pos[0].start, pos[0].end);
-        this.highlight(
-            document.getElementById(io + "-text"),
-            document.getElementById(io + "-highlighter"),
-            pos);
+        this.highlight(io, pos);
     }
 
-
     /**
-     * Adds the relevant HTML to the specified highlight element such that highlighting appears
-     * underneath the correct offset.
+     * Sends selection updates to the relevant EditorView.
      *
-     * @param {element} textarea - The input or output textarea.
-     * @param {element} highlighter - The input or output highlighter element.
-     * @param {Object} pos - The position object for the highlight.
-     * @param {number} pos.start - The start offset.
-     * @param {number} pos.end - The end offset.
+     * @param {string} io - The input or output
+     * @param {Object[]} ranges - An array of position objects to highlight
+     * @param {number} ranges.start - The start offset
+     * @param {number} ranges.end - The end offset
      */
-    async highlight(textarea, highlighter, pos) {
+    async highlight(io, ranges) {
         if (!this.app.options.showHighlighter) return false;
         if (!this.app.options.attemptHighlight) return false;
+        if (!ranges || !ranges.length) return false;
 
-        // Check if there is a carriage return in the output dish as this will not
-        // be displayed by the HTML textarea and will mess up highlighting offsets.
-        if (await this.manager.output.containsCR()) return false;
+        const view = io === "input" ?
+            this.manager.input.inputEditorView :
+            this.manager.output.outputEditorView;
 
-        const startPlaceholder = "[startHighlight]";
-        const startPlaceholderRegex = /\[startHighlight\]/g;
-        const endPlaceholder = "[endHighlight]";
-        const endPlaceholderRegex = /\[endHighlight\]/g;
-        let text = textarea.value;
+        // Add new SelectionRanges to existing ones
+        for (const range of ranges) {
+            if (typeof range.start !== "number" ||
+                typeof range.end !== "number")
+                continue;
+            const selection = range.end <= range.start ?
+                EditorSelection.cursor(range.start) :
+                EditorSelection.range(range.start, range.end);
 
-        // Put placeholders in position
-        // If there's only one value, select that
-        // If there are multiple, ignore the first one and select all others
-        if (pos.length === 1) {
-            if (pos[0].end < pos[0].start) return;
-            text = text.slice(0, pos[0].start) +
-                startPlaceholder + text.slice(pos[0].start, pos[0].end) + endPlaceholder +
-                text.slice(pos[0].end, text.length);
-        } else {
-            // O(n^2) - Can anyone improve this without overwriting placeholders?
-            let result = "",
-                endPlaced = true;
-
-            for (let i = 0; i < text.length; i++) {
-                for (let j = 1; j < pos.length; j++) {
-                    if (pos[j].end < pos[j].start) continue;
-                    if (pos[j].start === i) {
-                        result += startPlaceholder;
-                        endPlaced = false;
-                    }
-                    if (pos[j].end === i) {
-                        result += endPlaceholder;
-                        endPlaced = true;
-                    }
-                }
-                result += text[i];
-            }
-            if (!endPlaced) result += endPlaceholder;
-            text = result;
+            this.currentSelectionRanges.push(selection);
         }
 
-        const cssClass = "hl1";
-
-        // Remove HTML tags
-        text = text
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/\n/g, "&#10;")
-            // Convert placeholders to tags
-            .replace(startPlaceholderRegex, "<span class=\""+cssClass+"\">")
-            .replace(endPlaceholderRegex, "</span>") + "&nbsp;";
-
-        // Adjust width to allow for scrollbars
-        highlighter.style.width = textarea.clientWidth + "px";
-        highlighter.innerHTML = text;
-        highlighter.scrollTop = textarea.scrollTop;
-        highlighter.scrollLeft = textarea.scrollLeft;
+        // Set selection
+        if (this.currentSelectionRanges.length) {
+            try {
+                view.dispatch({
+                    selection: EditorSelection.create(this.currentSelectionRanges),
+                    scrollIntoView: true
+                });
+            } catch (err) {
+                // Ignore Range Errors
+                if (!err.toString().startsWith("RangeError")) {
+                    log.error(err);
+                }
+            }
+        }
     }
 
 }

src/web/waiters/OptionsWaiter.mjs

@@ -26,33 +26,30 @@ class OptionsWaiter {
      * @param {Object} options
      */
     load(options) {
-        for (const option in options) {
-            this.app.options[option] = options[option];
-        }
+        Object.assign(this.app.options, options);
 
         // Set options to match object
-        const cboxes = document.querySelectorAll("#options-body input[type=checkbox]");
-        let i;
-        for (i = 0; i < cboxes.length; i++) {
-            cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")];
-        }
+        document.querySelectorAll("#options-body input[type=checkbox]").forEach(cbox => {
+            cbox.checked = this.app.options[cbox.getAttribute("option")];
+        });
 
-        const nboxes = document.querySelectorAll("#options-body input[type=number]");
-        for (i = 0; i < nboxes.length; i++) {
-            nboxes[i].value = this.app.options[nboxes[i].getAttribute("option")];
-            nboxes[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
-        }
+        document.querySelectorAll("#options-body input[type=number]").forEach(nbox => {
+            nbox.value = this.app.options[nbox.getAttribute("option")];
+            nbox.dispatchEvent(new CustomEvent("change", {bubbles: true}));
+        });
 
-        const selects = document.querySelectorAll("#options-body select");
-        for (i = 0; i < selects.length; i++) {
-            const val = this.app.options[selects[i].getAttribute("option")];
+        document.querySelectorAll("#options-body select").forEach(select => {
+            const val = this.app.options[select.getAttribute("option")];
             if (val) {
-                selects[i].value = val;
-                selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
+                select.value = val;
+                select.dispatchEvent(new CustomEvent("change", {bubbles: true}));
             } else {
-                selects[i].selectedIndex = 0;
+                select.selectedIndex = 0;
             }
-        }
+        });
+
+        // Initialise options
+        this.setWordWrap();
     }
 
 
@@ -136,19 +133,8 @@ class OptionsWaiter {
      * Sets or unsets word wrap on the input and output depending on the wordWrap option value.
      */
     setWordWrap() {
-        document.getElementById("input-text").classList.remove("word-wrap");
-        document.getElementById("output-text").classList.remove("word-wrap");
-        document.getElementById("output-html").classList.remove("word-wrap");
-        document.getElementById("input-highlighter").classList.remove("word-wrap");
-        document.getElementById("output-highlighter").classList.remove("word-wrap");
-
-        if (!this.app.options.wordWrap) {
-            document.getElementById("input-text").classList.add("word-wrap");
-            document.getElementById("output-text").classList.add("word-wrap");
-            document.getElementById("output-html").classList.add("word-wrap");
-            document.getElementById("input-highlighter").classList.add("word-wrap");
-            document.getElementById("output-highlighter").classList.add("word-wrap");
-        }
+        this.manager.input.setWordWrap(this.app.options.wordWrap);
+        this.manager.output.setWordWrap(this.app.options.wordWrap);
     }
 
 
@@ -159,7 +145,6 @@ class OptionsWaiter {
      */
     themeChange(e) {
         const themeClass = e.target.value;
-
         this.changeTheme(themeClass);
     }
 
@@ -188,6 +173,8 @@ class OptionsWaiter {
         log.setLevel(level, false);
         this.manager.worker.setLogLevel();
         this.manager.input.setLogLevel();
+        this.manager.output.setLogLevel();
+        this.manager.background.setLogLevel();
     }
 }
 

src/web/waiters/RecipeWaiter.mjs

@@ -7,6 +7,7 @@
 import HTMLOperation from "../HTMLOperation.mjs";
 import Sortable from "sortablejs";
 import Utils from "../../core/Utils.mjs";
+import {escapeControlChars} from "../utils/editorUtils.mjs";
 
 
 /**
@@ -132,7 +133,7 @@ class RecipeWaiter {
         // Reinitialise the popover on the original element in the ops list because for some reason it
         // gets destroyed and recreated. If the clone isn't in the ops list, we use the original item instead.
         let enableOpsElement;
-        if (evt.clone.parentNode && evt.clone.parentNode.classList.contains("op-list")) {
+        if (evt.clone?.parentNode?.classList?.contains("op-list")) {
             enableOpsElement = evt.clone;
         } else {
             enableOpsElement = evt.item;
@@ -162,13 +163,13 @@ class RecipeWaiter {
 
         e.stopPropagation();
         e.preventDefault();
-        if (e.target.className && e.target.className.indexOf("category-title") > -1) {
+        if (e.target?.className?.indexOf("category-title") > -1) {
             // Hovering over the a
             e.target.classList.add("favourites-hover");
-        } else if (e.target.parentNode.className && e.target.parentNode.className.indexOf("category-title") > -1) {
+        } else if (e.target?.parentNode?.className?.indexOf("category-title") > -1) {
             // Hovering over the Edit button
             e.target.parentNode.classList.add("favourites-hover");
-        } else if (e.target.parentNode.parentNode.className && e.target.parentNode.parentNode.className.indexOf("category-title") > -1) {
+        } else if (e.target?.parentNode?.parentNode?.className?.indexOf("category-title") > -1) {
             // Hovering over the image on the Edit button
             e.target.parentNode.parentNode.classList.add("favourites-hover");
         }
@@ -210,7 +211,7 @@ class RecipeWaiter {
      * @fires Manager#statechange
      */
     ingChange(e) {
-        if (e && e.target && e.target.classList.contains("no-state-change")) return;
+        if (e && e?.target?.classList?.contains("no-state-change")) return;
         window.dispatchEvent(this.manager.statechange);
     }
 
@@ -568,7 +569,7 @@ class RecipeWaiter {
 
         const registerList = [];
         for (let i = 0; i < registers.length; i++) {
-            registerList.push(`$R${numPrevRegisters + i} = ${Utils.escapeHtml(Utils.truncate(Utils.printable(registers[i]), 100))}`);
+            registerList.push(`$R${numPrevRegisters + i} = ${escapeControlChars(Utils.escapeHtml(Utils.truncate(registers[i], 100)))}`);
         }
         const registerListEl = `<div class="register-list">
                 ${registerList.join("<br>")}
@@ -584,42 +585,6 @@ class RecipeWaiter {
     adjustWidth() {
         const recList = document.getElementById("rec-list");
 
-        if (!this.ingredientRuleID) {
-            this.ingredientRuleID = null;
-            this.ingredientChildRuleID = null;
-
-            // Find relevant rules in the stylesheet
-            // try/catch for chrome 64+ CORS error on cssRules.
-            try {
-                for (const i in document.styleSheets[0].cssRules) {
-                    if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients") {
-                        this.ingredientRuleID = i;
-                    }
-                    if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients > div") {
-                        this.ingredientChildRuleID = i;
-                    }
-                }
-            } catch (e) {
-                // Do nothing.
-            }
-        }
-
-        if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
-
-        const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID];
-        const ingredientChildRule = document.styleSheets[0].cssRules[this.ingredientChildRuleID];
-
-        if (recList.clientWidth < 450) {
-            ingredientRule.style.gridTemplateColumns = "auto auto";
-            ingredientChildRule.style.gridColumn = "1 / span 2";
-        } else if (recList.clientWidth < 620) {
-            ingredientRule.style.gridTemplateColumns = "auto auto auto";
-            ingredientChildRule.style.gridColumn = "1 / span 3";
-        } else {
-            ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
-            ingredientChildRule.style.gridColumn = "1 / span 4";
-        }
-
         // Hide Chef icon on Bake button if the page is compressed
         const bakeIcon = document.querySelector("#bake img");
 
@@ -635,7 +600,7 @@ class RecipeWaiter {
         const controlsContent = document.getElementById("controls-content");
         const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
 
-        controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
+        controlsContent.style.transform = `scale(${scale})`;
     }
 
 }

src/web/waiters/SeasonalWaiter.mjs

@@ -30,8 +30,7 @@ class SeasonalWaiter {
         window.addEventListener("keydown", this.konamiCodeListener.bind(this));
 
         // CyberChef Challenge
-        // eslint-disable-next-line no-console
-        console.log("43 6f 6e 67 72 61 74 75 6c 61 74 69 6f 6e 73 2c 20 79 6f 75 20 68 61 76 65 20 63 6f 6d 70 6c 65 74 65 64 20 43 79 62 65 72 43 68 65 66 20 63 68 61 6c 6c 65 6e 67 65 20 23 31 21 0a 0a 54 68 69 73 20 63 68 61 6c 6c 65 6e 67 65 20 65 78 70 6c 6f 72 65 64 20 68 65 78 61 64 65 63 69 6d 61 6c 20 65 6e 63 6f 64 69 6e 67 2e 20 54 6f 20 6c 65 61 72 6e 20 6d 6f 72 65 2c 20 76 69 73 69 74 20 77 69 6b 69 70 65 64 69 61 2e 6f 72 67 2f 77 69 6b 69 2f 48 65 78 61 64 65 63 69 6d 61 6c 2e 0a 0a 54 68 65 20 63 6f 64 65 20 66 6f 72 20 74 68 69 73 20 63 68 61 6c 6c 65 6e 67 65 20 69 73 20 39 64 34 63 62 63 65 66 2d 62 65 35 32 2d 34 37 35 31 2d 61 32 62 32 2d 38 33 33 38 65 36 34 30 39 34 31 36 20 28 6b 65 65 70 20 74 68 69 73 20 70 72 69 76 61 74 65 29 2e 0a 0a 54 68 65 20 6e 65 78 74 20 63 68 61 6c 6c 65 6e 67 65 20 63 61 6e 20 62 65 20 66 6f 75 6e 64 20 61 74 20 68 74 74 70 73 3a 2f 2f 70 61 73 74 65 62 69 6e 2e 63 6f 6d 2f 47 53 6e 54 41 6d 6b 56 2e");
+        log.info("43 6f 6e 67 72 61 74 75 6c 61 74 69 6f 6e 73 2c 20 79 6f 75 20 68 61 76 65 20 63 6f 6d 70 6c 65 74 65 64 20 43 79 62 65 72 43 68 65 66 20 63 68 61 6c 6c 65 6e 67 65 20 23 31 21 0a 0a 54 68 69 73 20 63 68 61 6c 6c 65 6e 67 65 20 65 78 70 6c 6f 72 65 64 20 68 65 78 61 64 65 63 69 6d 61 6c 20 65 6e 63 6f 64 69 6e 67 2e 20 54 6f 20 6c 65 61 72 6e 20 6d 6f 72 65 2c 20 76 69 73 69 74 20 77 69 6b 69 70 65 64 69 61 2e 6f 72 67 2f 77 69 6b 69 2f 48 65 78 61 64 65 63 69 6d 61 6c 2e 0a 0a 54 68 65 20 63 6f 64 65 20 66 6f 72 20 74 68 69 73 20 63 68 61 6c 6c 65 6e 67 65 20 69 73 20 39 64 34 63 62 63 65 66 2d 62 65 35 32 2d 34 37 35 31 2d 61 32 62 32 2d 38 33 33 38 65 36 34 30 39 34 31 36 20 28 6b 65 65 70 20 74 68 69 73 20 70 72 69 76 61 74 65 29 2e 0a 0a 54 68 65 20 6e 65 78 74 20 63 68 61 6c 6c 65 6e 67 65 20 63 61 6e 20 62 65 20 66 6f 75 6e 64 20 61 74 20 68 74 74 70 73 3a 2f 2f 70 61 73 74 65 62 69 6e 2e 63 6f 6d 2f 47 53 6e 54 41 6d 6b 56 2e");
     }
 
 

src/web/waiters/TabWaiter.mjs

@@ -48,24 +48,6 @@ class TabWaiter {
         return -1;
     }
 
-    /**
-     * Gets the currently active input tab number
-     *
-     * @returns {number}
-     */
-    getActiveInputTab() {
-        return this.getActiveTab("input");
-    }
-
-    /**
-     * Gets the currently active output tab number
-     *
-     * @returns {number}
-     */
-    getActiveOutputTab() {
-        return this.getActiveTab("output");
-    }
-
     /**
      * Gets the li element for the tab of a given input number
      *
@@ -83,26 +65,6 @@ class TabWaiter {
         return null;
     }
 
-    /**
-     * Gets the li element for an input tab of the given input number
-     *
-     * @param {inputNum} - The inputNum of the tab we're trying to get
-     * @returns {Element}
-     */
-    getInputTabItem(inputNum) {
-        return this.getTabItem(inputNum, "input");
-    }
-
-    /**
-     * Gets the li element for an output tab of the given input number
-     *
-     * @param {number} inputNum
-     * @returns {Element}
-     */
-    getOutputTabItem(inputNum) {
-        return this.getTabItem(inputNum, "output");
-    }
-
     /**
      * Gets a list of tab numbers for the currently displayed tabs
      *
@@ -120,24 +82,6 @@ class TabWaiter {
         return nums;
     }
 
-    /**
-     * Gets a list of tab numbers for the currently displayed input tabs
-     *
-     * @returns {number[]}
-     */
-    getInputTabList() {
-        return this.getTabList("input");
-    }
-
-    /**
-     * Gets a list of tab numbers for the currently displayed output tabs
-     *
-     * @returns {number[]}
-     */
-    getOutputTabList() {
-        return this.getTabList("output");
-    }
-
     /**
      * Creates a new tab element for the tab bar
      *
@@ -154,11 +98,8 @@ class TabWaiter {
 
         const newTabContent = document.createElement("div");
         newTabContent.classList.add(`${io}-tab-content`);
-
         newTabContent.innerText = `Tab ${inputNum.toString()}`;
-
         newTabContent.addEventListener("wheel", this.manager[io].scrollTab.bind(this.manager[io]), {passive: false});
-
         newTab.appendChild(newTabContent);
 
         if (io === "input") {
@@ -166,52 +107,24 @@ class TabWaiter {
                 newTabButtonIcon = document.createElement("i");
             newTabButton.type = "button";
             newTabButton.className = "btn btn-primary bmd-btn-icon btn-close-tab";
-
             newTabButtonIcon.classList.add("material-icons");
             newTabButtonIcon.innerText = "clear";
-
             newTabButton.appendChild(newTabButtonIcon);
-
             newTabButton.addEventListener("click", this.manager.input.removeTabClick.bind(this.manager.input));
-
             newTab.appendChild(newTabButton);
         }
 
         return newTab;
     }
 
-    /**
-     * Creates a new tab element for the input tab bar
-     *
-     * @param {number} inputNum - The inputNum of the new input tab
-     * @param {boolean} [active=false] - If true, sets the tab to active
-     * @returns {Element}
-     */
-    createInputTabElement(inputNum, active=false) {
-        return this.createTabElement(inputNum, active, "input");
-    }
-
-    /**
-     * Creates a new tab element for the output tab bar
-     *
-     * @param {number} inputNum - The inputNum of the new output tab
-     * @param {boolean} [active=false] - If true, sets the tab to active
-     * @returns {Element}
-     */
-    createOutputTabElement(inputNum, active=false) {
-        return this.createTabElement(inputNum, active, "output");
-    }
-
     /**
      * Displays the tab bar for both the input and output
      */
     showTabBar() {
         document.getElementById("input-tabs-wrapper").style.display = "block";
         document.getElementById("output-tabs-wrapper").style.display = "block";
-
         document.getElementById("input-wrapper").classList.add("show-tabs");
         document.getElementById("output-wrapper").classList.add("show-tabs");
-
         document.getElementById("save-all-to-file").style.display = "inline-block";
     }
 
@@ -221,10 +134,8 @@ class TabWaiter {
     hideTabBar() {
         document.getElementById("input-tabs-wrapper").style.display = "none";
         document.getElementById("output-tabs-wrapper").style.display = "none";
-
         document.getElementById("input-wrapper").classList.remove("show-tabs");
         document.getElementById("output-wrapper").classList.remove("show-tabs");
-
         document.getElementById("save-all-to-file").style.display = "none";
     }
 
@@ -271,30 +182,6 @@ class TabWaiter {
         }
     }
 
-    /**
-     * Refreshes the input tabs, and changes to activeTab
-     *
-     * @param {number[]} nums - The inputNums to be displayed as tabs
-     * @param {number} activeTab - The tab to change to
-     * @param {boolean} tabsLeft - True if there are input tabs to the left of the displayed tabs
-     * @param {boolean} tabsRight - True if there are input tabs to the right of the displayed tabs
-     */
-    refreshInputTabs(nums, activeTab, tabsLeft, tabsRight) {
-        this.refreshTabs(nums, activeTab, tabsLeft, tabsRight, "input");
-    }
-
-    /**
-     * Refreshes the output tabs, and changes to activeTab
-     *
-     * @param {number[]} nums - The inputNums to be displayed as tabs
-     * @param {number} activeTab - The tab to change to
-     * @param {boolean} tabsLeft - True if there are output tabs to the left of the displayed tabs
-     * @param {boolean} tabsRight - True if there are output tabs to the right of the displayed tabs
-     */
-    refreshOutputTabs(nums, activeTab, tabsLeft, tabsRight) {
-        this.refreshTabs(nums, activeTab, tabsLeft, tabsRight, "output");
-    }
-
     /**
      * Changes the active tab to a different tab
      *
@@ -305,9 +192,6 @@ class TabWaiter {
     changeTab(inputNum, io) {
         const tabsList = document.getElementById(`${io}-tabs`);
 
-        this.manager.highlighter.removeHighlights();
-        getSelection().removeAllRanges();
-
         let found = false;
         for (let i = 0; i < tabsList.children.length; i++) {
             const tabNum = parseInt(tabsList.children.item(i).getAttribute("inputNum"), 10);
@@ -322,26 +206,6 @@ class TabWaiter {
         return found;
     }
 
-    /**
-     * Changes the active input tab to a different tab
-     *
-     * @param {number} inputNum
-     * @returns {boolean} - False if the tab is not currently being displayed
-     */
-    changeInputTab(inputNum) {
-        return this.changeTab(inputNum, "input");
-    }
-
-    /**
-     * Changes the active output tab to a different tab
-     *
-     * @param {number} inputNum
-     * @returns {boolean} - False if the tab is not currently being displayed
-     */
-    changeOutputTab(inputNum) {
-        return this.changeTab(inputNum, "output");
-    }
-
     /**
      * Updates the tab header to display a preview of the tab contents
      *
@@ -361,26 +225,6 @@ class TabWaiter {
         tab.firstElementChild.innerText = headerData;
     }
 
-    /**
-     * Updates the input tab header to display a preview of the tab contents
-     *
-     * @param {number} inputNum - The inputNum of the tab to update the header of
-     * @param {string} data - The data to display in the tab header
-     */
-    updateInputTabHeader(inputNum, data) {
-        this.updateTabHeader(inputNum, data, "input");
-    }
-
-    /**
-     * Updates the output tab header to display a preview of the tab contents
-     *
-     * @param {number} inputNum - The inputNum of the tab to update the header of
-     * @param {string} data - The data to display in the tab header
-     */
-    updateOutputTabHeader(inputNum, data) {
-        this.updateTabHeader(inputNum, data, "output");
-    }
-
     /**
      * Updates the tab background to display the progress of the current tab
      *
@@ -401,28 +245,6 @@ class TabWaiter {
         }
     }
 
-    /**
-     * Updates the input tab background to display its progress
-     *
-     * @param {number} inputNum
-     * @param {number} progress
-     * @param {number} total
-     */
-    updateInputTabProgress(inputNum, progress, total) {
-        this.updateTabProgress(inputNum, progress, total, "input");
-    }
-
-    /**
-     * Updates the output tab background to display its progress
-     *
-     * @param {number} inputNum
-     * @param {number} progress
-     * @param {number} total
-     */
-    updateOutputTabProgress(inputNum, progress, total) {
-        this.updateTabProgress(inputNum, progress, total, "output");
-    }
-
 }
 
 export default TabWaiter;

src/web/waiters/TimingWaiter.mjs

@@ -0,0 +1,182 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2023
+ * @license Apache-2.0
+ */
+
+/**
+ * Waiter to handle timing of the baking process.
+ */
+class TimingWaiter {
+
+    /**
+     * TimingWaiter constructor.
+     *
+     * @param {App} app - The main view object for CyberChef.
+     * @param {Manager} manager - The CyberChef event manager.
+     */
+    constructor(app, manager) {
+        this.app = app;
+        this.manager = manager;
+
+        this.inputs = {};
+        /*
+            Inputs example:
+            "1": {
+                "inputEncodingStart": 0,
+                "inputEncodingEnd": 0,
+                "trigger": 0
+                "chefWorkerTasked": 0,
+                "bakeComplete": 0,
+                "bakeDuration": 0,
+                "settingOutput": 0,
+                "outputDecodingStart": 0,
+                "outputDecodingEnd": 0,
+                "complete": 0
+            }
+        */
+    }
+
+
+    /**
+     * Record the time for an input
+     *
+     * @param {string} event
+     * @param {number} inputNum
+     * @param {number} value
+     */
+    recordTime(event, inputNum, value=Date.now()) {
+        inputNum = inputNum.toString();
+        if (!Object.keys(this.inputs).includes(inputNum)) {
+            this.inputs[inputNum] = {};
+        }
+        log.debug(`Recording ${event} for input ${inputNum}`);
+        this.inputs[inputNum][event] = value;
+    }
+
+    /**
+     * The duration of the main stages of a bake
+     *
+     * @param {number} inputNum
+     * @returns {number}
+     */
+    duration(inputNum) {
+        const input = this.inputs[inputNum.toString()];
+
+        // If this input has not been encoded yet, we cannot calculate a time
+        if (!input ||
+            !input.trigger ||
+            !input.inputEncodingEnd ||
+            !input.inputEncodingStart)
+            return 0;
+
+        // input encoding can happen before a bake is triggered, so it is calculated separately
+        const inputEncodingTotal = input.inputEncodingEnd - input.inputEncodingStart;
+
+        let total = 0, outputDecodingTotal = 0;
+
+        if (input.bakeComplete && input.bakeComplete > input.trigger)
+            total = input.bakeComplete - input.trigger;
+
+        if (input.settingOutput && input.settingOutput > input.trigger)
+            total = input.settingOutput - input.trigger;
+
+        if (input.outputDecodingStart && (input.outputDecodingStart > input.trigger) &&
+            input.outputDecodingEnd && (input.outputDecodingEnd > input.trigger)) {
+            total = input.outputDecodingEnd - input.trigger;
+            outputDecodingTotal = input.outputDecodingEnd - input.outputDecodingStart;
+        }
+
+        if (input.complete && input.complete > input.trigger)
+            total = inputEncodingTotal + input.bakeDuration + outputDecodingTotal;
+
+        return total;
+    }
+
+    /**
+     * The total time for a completed bake
+     *
+     * @param {number} inputNum
+     * @returns {number}
+     */
+    overallDuration(inputNum) {
+        const input = this.inputs[inputNum.toString()];
+
+        // If this input has not been encoded yet, we cannot calculate a time
+        if (!input ||
+            !input.trigger ||
+            !input.inputEncodingEnd ||
+            !input.inputEncodingStart)
+            return 0;
+
+        // input encoding can happen before a bake is triggered, so it is calculated separately
+        const inputEncodingTotal = input.inputEncodingEnd - input.inputEncodingStart;
+
+        let total = 0;
+        if (input.bakeComplete && input.bakeComplete > input.trigger)
+            total = input.bakeComplete - input.trigger;
+
+        if (input.settingOutput && input.settingOutput > input.trigger)
+            total = input.settingOutput - input.trigger;
+
+        if (input.outputDecodingStart && input.outputDecodingStart > input.trigger)
+            total = input.outputDecodingStart - input.trigger;
+
+        if (input.outputDecodingEnd && input.outputDecodingEnd > input.trigger)
+            total = input.outputDecodingEnd - input.trigger;
+
+        if (input.complete && input.complete > input.trigger)
+            total = input.complete - input.trigger;
+
+        return total + inputEncodingTotal;
+    }
+
+    /**
+     * Prints out the time between stages
+     *
+     * @param {number} inputNum
+     * @returns {string}
+     */
+    printStages(inputNum) {
+        const input = this.inputs[inputNum.toString()];
+        if (!input || !input.trigger) return "";
+
+        const total = this.overallDuration(inputNum),
+            inputEncoding = input.inputEncodingEnd - input.inputEncodingStart,
+            outputDecoding = input.outputDecodingEnd - input.outputDecodingStart,
+            overhead = total - inputEncoding - outputDecoding - input.bakeDuration;
+
+        return `Input encoding: ${inputEncoding}ms
+Recipe duration: ${input.bakeDuration}ms
+Output decoding: ${outputDecoding}ms
+<span class="small">Threading overhead: ${overhead}ms</span>`;
+    }
+
+    /**
+     * Logs every interval
+     *
+     * @param {number} inputNum
+     */
+    logAllTimes(inputNum) {
+        const input = this.inputs[inputNum.toString()];
+        if (!input || !input.trigger) return;
+
+        try {
+            log.debug(`Trigger:             ${input.trigger}
+inputEncodingStart:  ${input.inputEncodingStart} | ${input.inputEncodingStart - input.trigger}ms since trigger
+inputEncodingEnd:    ${input.inputEncodingEnd} | ${input.inputEncodingEnd - input.inputEncodingStart}ms input encoding time
+chefWorkerTasked:    ${input.chefWorkerTasked} | ${input.chefWorkerTasked - input.trigger}ms since trigger
+bakeDuration:                      | ${input.bakeDuration}ms duration in worker
+bakeComplete:        ${input.bakeComplete} | ${input.bakeComplete - input.chefWorkerTasked}ms since worker tasked
+settingOutput:       ${input.settingOutput} | ${input.settingOutput - input.bakeComplete}ms since worker finished
+outputDecodingStart: ${input.outputDecodingStart} | ${input.outputDecodingStart - input.settingOutput}ms since output set
+outputDecodingEnd:   ${input.outputDecodingEnd} | ${input.outputDecodingEnd - input.outputDecodingStart}ms output encoding time
+complete:            ${input.complete} | ${input.complete - input.outputDecodingEnd}ms since output decoded
+Total:                             | ${input.complete - input.trigger}ms since trigger`);
+        } catch (err) {}
+
+    }
+
+}
+
+export default TimingWaiter;

src/web/waiters/WorkerWaiter.mjs

@@ -72,6 +72,10 @@ class WorkerWaiter {
 
         this.dishWorker.worker = new DishWorker();
         this.dishWorker.worker.addEventListener("message", this.handleDishMessage.bind(this));
+        this.dishWorker.worker.postMessage({
+            action: "setLogLevel",
+            data: log.getLevel()
+        });
 
         if (this.dishWorkerQueue.length > 0) {
             this.postDishMessage(this.dishWorkerQueue.splice(0, 1)[0]);
@@ -89,22 +93,27 @@ class WorkerWaiter {
             return -1;
         }
 
-        log.debug("Adding new ChefWorker");
+        log.debug(`Adding new ChefWorker (${this.chefWorkers.length + 1}/${this.maxWorkers})`);
 
         // Create a new ChefWorker and send it the docURL
         const newWorker = new ChefWorker();
         newWorker.addEventListener("message", this.handleChefMessage.bind(this));
+        newWorker.postMessage({
+            action: "setLogPrefix",
+            data: "ChefWorker"
+        });
+        newWorker.postMessage({
+            action: "setLogLevel",
+            data: log.getLevel()
+        });
+
         let docURL = document.location.href.split(/[#?]/)[0];
         const index = docURL.lastIndexOf("/");
         if (index > 0) {
             docURL = docURL.substring(0, index);
         }
-
         newWorker.postMessage({"action": "docURL", "data": docURL});
-        newWorker.postMessage({
-            action: "setLogLevel",
-            data: log.getLevel()
-        });
+
 
         // Store the worker, whether or not it's active, and the inputNum as an object
         const newWorkerObj = {
@@ -177,7 +186,7 @@ class WorkerWaiter {
     handleChefMessage(e) {
         const r = e.data;
         let inputNum = 0;
-        log.debug(`Receiving ${r.action} from ChefWorker.`);
+        log.debug(`Receiving '${r.action}' from ChefWorker.`);
 
         if (Object.prototype.hasOwnProperty.call(r.data, "inputNum")) {
             inputNum = r.data.inputNum;
@@ -188,6 +197,8 @@ class WorkerWaiter {
         switch (r.action) {
             case "bakeComplete":
                 log.debug(`Bake ${inputNum} complete.`);
+                this.manager.timing.recordTime("bakeComplete", inputNum);
+                this.manager.timing.recordTime("bakeDuration", inputNum, r.data.duration);
 
                 if (r.data.error) {
                     this.app.handleError(r.data.error);
@@ -217,7 +228,7 @@ class WorkerWaiter {
                 break;
             case "workerLoaded":
                 this.app.workerLoaded = true;
-                log.debug("ChefWorker loaded.");
+                log.debug("ChefWorker loaded");
                 if (!this.loaded) {
                     this.app.loaded();
                     this.loaded = true;
@@ -266,7 +277,7 @@ class WorkerWaiter {
         if (progress !== false) {
             this.manager.output.updateOutputStatus("error", inputNum);
 
-            if (inputNum === this.manager.tabs.getActiveInputTab()) {
+            if (inputNum === this.manager.tabs.getActiveTab("input")) {
                 this.manager.recipe.updateBreakpointIndicator(progress);
             }
 
@@ -315,36 +326,42 @@ class WorkerWaiter {
      * Cancels the current bake by terminating and removing all ChefWorkers
      *
      * @param {boolean} [silent=false] - If true, don't set the output
-     * @param {boolean} killAll - If true, kills all chefWorkers regardless of status
+     * @param {boolean} [killAll=false] - If true, kills all chefWorkers regardless of status
      */
-    cancelBake(silent, killAll) {
+    cancelBake(silent=false, killAll=false) {
+        const deactiveOutputs = new Set();
+
         for (let i = this.chefWorkers.length - 1; i >= 0; i--) {
             if (this.chefWorkers[i].active || killAll) {
                 const inputNum = this.chefWorkers[i].inputNum;
                 this.removeChefWorker(this.chefWorkers[i]);
-                this.manager.output.updateOutputStatus("inactive", inputNum);
+                deactiveOutputs.add(inputNum);
             }
         }
         this.setBakingStatus(false);
 
-        for (let i = 0; i < this.inputs.length; i++) {
-            this.manager.output.updateOutputStatus("inactive", this.inputs[i].inputNum);
-        }
+        this.inputs.forEach(input => {
+            deactiveOutputs.add(input.inputNum);
+        });
 
-        for (let i = 0; i < this.inputNums.length; i++) {
-            this.manager.output.updateOutputStatus("inactive", this.inputNums[i]);
-        }
+        this.inputNums.forEach(inputNum => {
+            deactiveOutputs.add(inputNum);
+        });
 
-        const tabList = this.manager.tabs.getOutputTabList();
-        for (let i = 0; i < tabList.length; i++) {
-            this.manager.tabs.getOutputTabItem(tabList[i]).style.background = "";
-        }
+        deactiveOutputs.forEach(num => {
+            this.manager.output.updateOutputStatus("inactive", num);
+        });
+
+        const tabList = this.manager.tabs.getTabList("output");
+        tabList.forEach(tab => {
+            this.manager.tabs.getTabItem(tab, "output").style.background = "";
+        });
 
         this.inputs = [];
         this.inputNums = [];
         this.totalOutputs = 0;
         this.loadingOutputs = 0;
-        if (!silent) this.manager.output.set(this.manager.tabs.getActiveOutputTab());
+        if (!silent) this.manager.output.set(this.manager.tabs.getActiveTab("output"));
     }
 
     /**
@@ -455,6 +472,7 @@ class WorkerWaiter {
         if (input instanceof ArrayBuffer || ArrayBuffer.isView(input)) {
             transferable = [input];
         }
+        this.manager.timing.recordTime("chefWorkerTasked", nextInput.inputNum);
         this.chefWorkers[workerIdx].worker.postMessage({
             action: "bake",
             data: {
@@ -550,10 +568,12 @@ class WorkerWaiter {
      * @param {boolean} inputData.step - If true, only execute the next operation in the recipe
      * @param {number} inputData.progress - The current progress through the recipe. Used when stepping
      */
-    async bakeAllInputs(inputData) {
+    async bakeInputs(inputData) {
+        log.debug(`Baking input list [${inputData.nums.join(",")}]`);
+
         return await new Promise(resolve => {
             if (this.app.baking) return;
-            const inputNums = inputData.nums;
+            const inputNums = inputData.nums.filter(n => n > 0);
             const step = inputData.step;
 
             // Use cancelBake to clear out the inputs
@@ -586,6 +606,7 @@ class WorkerWaiter {
                 numBakes = this.inputNums.length;
             }
             for (let i = 0; i < numBakes; i++) {
+                this.manager.timing.recordTime("trigger", this.inputNums[0]);
                 this.manager.input.inputWorker.postMessage({
                     action: "bakeNext",
                     data: {
@@ -595,6 +616,7 @@ class WorkerWaiter {
                 });
                 this.loadingOutputs++;
             }
+            if (numBakes === 0) this.bakingComplete();
         });
     }
 
@@ -626,7 +648,7 @@ class WorkerWaiter {
      */
     handleDishMessage(e) {
         const r = e.data;
-        log.debug(`Receiving ${r.action} from DishWorker`);
+        log.debug(`Receiving '${r.action}' from DishWorker`);
 
         switch (r.action) {
             case "dishReturned":
@@ -645,7 +667,7 @@ class WorkerWaiter {
     }
 
     /**
-     * Asks the ChefWorker to return the dish as the specified type
+     * Asks the DishWorker to return the dish as the specified type
      *
      * @param {Dish} dish
      * @param {string} type
@@ -653,10 +675,9 @@ class WorkerWaiter {
      */
     getDishAs(dish, type, callback) {
         const id = this.callbackID++;
-
         this.callbacks[id] = callback;
-
         if (this.dishWorker.worker === null) this.setupDishWorker();
+
         this.postDishMessage({
             action: "getDishAs",
             data: {
@@ -668,7 +689,7 @@ class WorkerWaiter {
     }
 
     /**
-     * Asks the ChefWorker to get the title of the dish
+     * Asks the DishWorker to get the title of the dish
      *
      * @param {Dish} dish
      * @param {number} maxLength
@@ -677,9 +698,7 @@ class WorkerWaiter {
      */
     getDishTitle(dish, maxLength, callback) {
         const id = this.callbackID++;
-
         this.callbacks[id] = callback;
-
         if (this.dishWorker.worker === null) this.setupDishWorker();
 
         this.postDishMessage({
@@ -692,6 +711,29 @@ class WorkerWaiter {
         });
     }
 
+    /**
+     * Asks the DishWorker to translate a buffer into a specific character encoding
+     *
+     * @param {ArrayBuffer} buffer
+     * @param {number} encoding
+     * @param {Function} callback
+     * @returns {string}
+     */
+    bufferToStr(buffer, encoding, callback) {
+        const id = this.callbackID++;
+        this.callbacks[id] = callback;
+        if (this.dishWorker.worker === null) this.setupDishWorker();
+
+        this.postDishMessage({
+            action: "bufferToStr",
+            data: {
+                buffer: buffer,
+                encoding: encoding,
+                id: id
+            }
+        });
+    }
+
     /**
      * Queues a message to be sent to the dishWorker
      *
@@ -729,12 +771,18 @@ class WorkerWaiter {
      * Sets the console log level in the workers.
      */
     setLogLevel() {
-        for (let i = 0; i < this.chefWorkers.length; i++) {
-            this.chefWorkers[i].worker.postMessage({
+        this.chefWorkers.forEach(cw => {
+            cw.worker.postMessage({
                 action: "setLogLevel",
                 data: log.getLevel()
             });
-        }
+        });
+
+        if (!this.dishWorker.worker) return;
+        this.dishWorker.worker.postMessage({
+            action: "setLogLevel",
+            data: log.getLevel()
+        });
     }
 
     /**
@@ -794,7 +842,7 @@ class WorkerWaiter {
      *
      * @param {Object[]} recipeConfig
      * @param {string} direction
-     * @param {Object} pos - The position object for the highlight.
+     * @param {Object[]} pos - The position object for the highlight.
      * @param {number} pos.start - The start offset.
      * @param {number} pos.end - The end offset.
      */

src/web/workers/DishWorker.mjs

@@ -7,11 +7,19 @@
  */
 
 import Dish from "../../core/Dish.mjs";
+import Utils from "../../core/Utils.mjs";
+import cptable from "codepage";
+import loglevelMessagePrefix from "loglevel-message-prefix";
+
+loglevelMessagePrefix(log, {
+    prefixes: [],
+    staticPrefixes: ["DishWorker"]
+});
 
 self.addEventListener("message", function(e) {
     // Handle message from the main thread
     const r = e.data;
-    log.debug(`DishWorker receiving command '${r.action}'`);
+    log.debug(`Receiving command '${r.action}'`);
 
     switch (r.action) {
         case "getDishAs":
@@ -20,8 +28,14 @@ self.addEventListener("message", function(e) {
         case "getDishTitle":
             getDishTitle(r.data);
             break;
+        case "bufferToStr":
+            bufferToStr(r.data);
+            break;
+        case "setLogLevel":
+            log.setLevel(r.data, false);
+            break;
         default:
-            log.error(`DishWorker sent invalid action: '${r.action}'`);
+            log.error(`Unknown action: '${r.action}'`);
     }
 });
 
@@ -67,3 +81,32 @@ async function getDishTitle(data) {
         }
     });
 }
+
+/**
+ * Translates a buffer to a string using a specified encoding
+ *
+ * @param {object} data
+ * @param {ArrayBuffer} data.buffer
+ * @param {number} data.id
+ * @param {number} data.encoding
+ */
+async function bufferToStr(data) {
+    let str;
+    if (data.encoding === 0) {
+        str = Utils.arrayBufferToStr(data.buffer);
+    } else {
+        try {
+            str = cptable.utils.decode(data.encoding, new Uint8Array(data.buffer));
+        } catch (err) {
+            str = err;
+        }
+    }
+
+    self.postMessage({
+        action: "dishReturned",
+        data: {
+            value: str,
+            id: data.id
+        }
+    });
+}

src/web/workers/InputWorker.mjs

@@ -3,21 +3,43 @@
  * Handles storage, modification and retrieval of the inputs.
  *
  * @author j433866 [j433866@gmail.com]
+ * @author n1474335 [n1474335@gmail.com]
  * @copyright Crown Copyright 2019
  * @license Apache-2.0
  */
 
 import Utils from "../../core/Utils.mjs";
-import {detectFileType} from "../../core/lib/FileType.mjs";
+import loglevelMessagePrefix from "loglevel-message-prefix";
+
+loglevelMessagePrefix(log, {
+    prefixes: [],
+    staticPrefixes: ["InputWorker"]
+});
 
 // Default max values
 // These will be correctly calculated automatically
 self.maxWorkers = 4;
 self.maxTabs = 1;
 
-self.pendingFiles = [];
+/**
+ * Dictionary of inputs keyed on the inputNum
+ * Each entry is an object with the following type:
+ * @typedef {Object} Input
+ * @property {string} type
+ * @property {ArrayBuffer} buffer
+ * @property {string} stringSample
+ * @property {Object} file
+ *     @property {string} file.name
+ *     @property {number} file.size
+ *     @property {string} file.type
+ * @property {string} status
+ * @property {number} progress
+ * @property {number} encoding
+ * @property {string} eolSequence
+ */
 self.inputs = {};
 self.loaderWorkers = [];
+self.pendingFiles = [];
 self.currentInputNum = 1;
 self.numInputs = 0;
 self.pendingInputs = 0;
@@ -35,7 +57,7 @@ self.addEventListener("message", function(e) {
         return;
     }
 
-    log.debug(`Receiving ${r.action} from InputWaiter.`);
+    log.debug(`Receiving command '${r.action}'`);
 
     switch (r.action) {
         case "loadUIFiles":
@@ -53,9 +75,6 @@ self.addEventListener("message", function(e) {
         case "updateInputValue":
             self.updateInputValue(r.data);
             break;
-        case "updateInputObj":
-            self.updateInputObj(r.data);
-            break;
         case "updateInputProgress":
             self.updateInputProgress(r.data);
             break;
@@ -75,7 +94,7 @@ self.addEventListener("message", function(e) {
             log.setLevel(r.data, false);
             break;
         case "addInput":
-            self.addInput(r.data, "string");
+            self.addInput(r.data, "userinput");
             break;
         case "refreshTabs":
             self.refreshTabs(r.data.inputNum, r.data.direction);
@@ -98,9 +117,6 @@ self.addEventListener("message", function(e) {
         case "loaderWorkerMessage":
             self.handleLoaderMessage(r.data);
             break;
-        case "inputSwitch":
-            self.inputSwitch(r.data);
-            break;
         case "updateTabHeader":
             self.updateTabHeader(r.data);
             break;
@@ -155,10 +171,10 @@ self.getLoadProgress = function(inputNum) {
  * whole recipe
  */
 self.autoBake = function(inputNum, progress, step=false) {
-    const input = self.getInputObj(inputNum);
+    const input = self.inputs[inputNum];
     if (input) {
         self.postMessage({
-            action: "bakeAllInputs",
+            action: "bakeInputs",
             data: {
                 nums: [parseInt(inputNum, 10)],
                 step: step,
@@ -173,16 +189,14 @@ self.autoBake = function(inputNum, progress, step=false) {
  * Sends a list of inputNums to the workerwaiter
  */
 self.bakeAllInputs = function() {
-    const inputNums = Object.keys(self.inputs),
-        nums = [];
+    const inputNums = Object.keys(self.inputs);
+
+    const nums = inputNums
+        .filter(n => self.inputs[n].status === "loaded")
+        .map(n => parseInt(n, 10));
 
-    for (let i = 0; i < inputNums.length; i++) {
-        if (self.inputs[inputNums[i]].status === "loaded") {
-            nums.push(parseInt(inputNums[i], 10));
-        }
-    }
     self.postMessage({
-        action: "bakeAllInputs",
+        action: "bakeInputs",
         data: {
             nums: nums,
             step: false,
@@ -198,7 +212,7 @@ self.bakeAllInputs = function() {
  * @param {number} bakeId
  */
 self.bakeInput = function(inputNum, bakeId) {
-    const inputObj = self.getInputObj(inputNum);
+    const inputObj = self.inputs[inputNum];
     if (inputObj === null ||
         inputObj === undefined ||
         inputObj.status !== "loaded") {
@@ -213,46 +227,16 @@ self.bakeInput = function(inputNum, bakeId) {
         return;
     }
 
-    let inputData = inputObj.data;
-    if (typeof inputData !== "string") inputData = inputData.fileBuffer;
-
     self.postMessage({
         action: "queueInput",
         data: {
-            input: inputData,
+            input: inputObj.buffer,
             inputNum: inputNum,
             bakeId: bakeId
         }
     });
 };
 
-/**
- * Gets the stored object for a specific inputNum
- *
- * @param {number} inputNum - The input we want to get the object for
- * @returns {object}
- */
-self.getInputObj = function(inputNum) {
-    return self.inputs[inputNum];
-};
-
-/**
- * Gets the stored value for a specific inputNum.
- *
- * @param {number} inputNum - The input we want to get the value of
- * @returns {string | ArrayBuffer}
- */
-self.getInputValue = function(inputNum) {
-    if (self.inputs[inputNum]) {
-        if (typeof self.inputs[inputNum].data === "string") {
-            return self.inputs[inputNum].data;
-        } else {
-            return self.inputs[inputNum].data.fileBuffer;
-        }
-    }
-    return "";
-};
-
 /**
  * Gets the stored value or object for a specific inputNum and sends it to the inputWaiter.
  *
@@ -262,12 +246,11 @@ self.getInputValue = function(inputNum) {
  * @param {number} inputData.id - The callback ID for the callback to run when returned to the inputWaiter
  */
 self.getInput = function(inputData) {
-    const inputNum = inputData.inputNum,
-        data = (inputData.getObj) ? self.getInputObj(inputNum) : self.getInputValue(inputNum);
+    const input = self.inputs[inputData.inputNum];
     self.postMessage({
         action: "getInput",
         data: {
-            data: data,
+            data: inputData.getObj ? input : input.buffer,
             id: inputData.id
         }
     });
@@ -301,8 +284,8 @@ self.getInputNums = function(id) {
  * @returns {number | string} - Returns "error" if there was a load error
  */
 self.getInputProgress = function(inputNum) {
-    const inputObj = self.getInputObj(inputNum);
-    if (inputObj === undefined || inputObj === null) return;
+    const inputObj = self.inputs[inputNum];
+    if (!inputObj) return;
     if (inputObj.status === "error") {
         return "error";
     }
@@ -419,19 +402,17 @@ self.getNearbyNums = function(inputNum, direction) {
  * @param {number} inputNum - The inputNum of the tab header
  */
 self.updateTabHeader = function(inputNum) {
-    const input = self.getInputObj(inputNum);
-    if (input === null || input === undefined) return;
-    let inputData = input.data;
-    if (typeof inputData !== "string") {
-        inputData = input.data.name;
-    }
-    inputData = inputData.replace(/[\n\r]/g, "");
+    const input = self.inputs[inputNum];
+    if (!input) return;
+
+    let header = input.type === "file" ? input.file.name : input.stringSample;
+    header = header.slice(0, 100).replace(/[\n\r\u2028\u2029]/g, "");
 
     self.postMessage({
         action: "updateTabHeader",
         data: {
             inputNum: inputNum,
-            input: inputData.slice(0, 100)
+            input: header
         }
     });
 };
@@ -445,42 +426,19 @@ self.updateTabHeader = function(inputNum) {
  * @param {boolean} inputData.silent - If false, the manager statechange event will be fired
  */
 self.setInput = function(inputData) {
-    const inputNum = inputData.inputNum;
-    const silent = inputData.silent;
-    const input = self.getInputObj(inputNum);
-    if (input === undefined || input === null) return;
+    const {inputNum, silent} = inputData;
+    const input = self.inputs[inputNum];
+    if (!input) return;
 
-    let inputVal = input.data;
-    const inputObj = {
-        inputNum: inputNum,
-        input: inputVal
-    };
-    if (typeof inputVal !== "string") {
-        inputObj.name = inputVal.name;
-        inputObj.size = inputVal.size;
-        inputObj.type = inputVal.type;
-        inputObj.progress = input.progress;
-        inputObj.status = input.status;
-        inputVal = inputVal.fileBuffer;
-        const fileSlice = inputVal.slice(0, 512001);
-        inputObj.input = fileSlice;
+    self.postMessage({
+        action: "setInput",
+        data: {
+            inputNum: inputNum,
+            inputObj: input,
+            silent: silent
+        }
+    });
 
-        self.postMessage({
-            action: "setInput",
-            data: {
-                inputObj: inputObj,
-                silent: silent
-            }
-        }, [fileSlice]);
-    } else {
-        self.postMessage({
-            action: "setInput",
-            data: {
-                inputObj: inputObj,
-                silent: silent
-            }
-        });
-    }
     self.updateTabHeader(inputNum);
 };
 
@@ -533,8 +491,7 @@ self.updateInputStatus = function(inputNum, status) {
  * @param {number} inputData.progress - The load progress of the input
  */
 self.updateInputProgress = function(inputData) {
-    const inputNum = inputData.inputNum;
-    const progress = inputData.progress;
+    const {inputNum, progress} = inputData;
 
     if (self.inputs[inputNum] !== undefined) {
         self.inputs[inputNum].progress = progress;
@@ -546,54 +503,31 @@ self.updateInputProgress = function(inputData) {
  *
  * @param {object} inputData
  * @param {number} inputData.inputNum - The input that's having its value updated
- * @param {string | ArrayBuffer} inputData.value - The new value of the input
- * @param {boolean} inputData.force - If true, still updates the input value if the input type is different to the stored value
+ * @param {ArrayBuffer} inputData.buffer - The new value of the input as a buffer
+ * @param {number} [inputData.encoding] - The character encoding of the input data
+ * @param {string} [inputData.eolSequence] - The end of line sequence of the input data
+ * @param {string} [inputData.stringSample] - A sample of the value as a string (truncated to 4096 chars)
  */
 self.updateInputValue = function(inputData) {
-    const inputNum = inputData.inputNum;
+    const inputNum = parseInt(inputData.inputNum, 10);
     if (inputNum < 1) return;
-    if (Object.prototype.hasOwnProperty.call(self.inputs[inputNum].data, "fileBuffer") &&
-    typeof inputData.value === "string" && !inputData.force) return;
-    const value = inputData.value;
-    if (self.inputs[inputNum] !== undefined) {
-        if (typeof value === "string") {
-            self.inputs[inputNum].data = value;
-        } else {
-            self.inputs[inputNum].data.fileBuffer = value;
-        }
-        self.inputs[inputNum].status = "loaded";
-        self.inputs[inputNum].progress = 100;
-        return;
+
+    if (!Object.prototype.hasOwnProperty.call(self.inputs, inputNum))
+        throw new Error(`No input with ID ${inputNum} exists`);
+
+    self.inputs[inputNum].buffer = inputData.buffer;
+    if ("encoding" in inputData) {
+        self.inputs[inputNum].encoding = inputData.encoding;
     }
-
-    // If we get to here, an input for inputNum could not be found,
-    // so create a new one. Only do this if the value is a string, as
-    // loadFiles will create the input object for files
-    if (typeof value === "string") {
-        self.inputs.push({
-            inputNum: inputNum,
-            data: value,
-            status: "loaded",
-            progress: 100
-        });
+    if ("eolSequence" in inputData) {
+        self.inputs[inputNum].eolSequence = inputData.eolSequence;
     }
-};
-
-/**
- * Update the stored data object for an input.
- * Used if we need to change a string to an ArrayBuffer
- *
- * @param {object} inputData
- * @param {number} inputData.inputNum - The number of the input we're updating
- * @param {object} inputData.data - The new data object for the input
- */
-self.updateInputObj = function(inputData) {
-    const inputNum = inputData.inputNum;
-    const data = inputData.data;
-
-    if (self.getInputObj(inputNum) === undefined) return;
-
-    self.inputs[inputNum].data = data;
+    if (!("stringSample" in inputData)) {
+        inputData.stringSample = Utils.arrayBufferToStr(inputData.buffer.slice(0, 4096));
+    }
+    self.inputs[inputNum].stringSample = inputData.stringSample;
+    self.inputs[inputNum].status = "loaded";
+    self.inputs[inputNum].progress = 100;
 };
 
 /**
@@ -632,8 +566,7 @@ self.loaderWorkerReady = function(workerData) {
 
 /**
  * Handler for messages sent by loaderWorkers.
- * (Messages are sent between the inputWorker and
- * loaderWorkers via the main thread)
+ * (Messages are sent between the inputWorker and loaderWorkers via the main thread)
  *
  * @param {object} r - The data sent by the loaderWorker
  * @param {number} r.inputNum - The inputNum which the message corresponds to
@@ -667,7 +600,7 @@ self.handleLoaderMessage = function(r) {
 
         self.updateInputValue({
             inputNum: inputNum,
-            value: r.fileBuffer
+            buffer: r.fileBuffer
         });
 
         self.postMessage({
@@ -752,12 +685,12 @@ self.terminateLoaderWorker = function(id) {
  * @param {number} filesData.activeTab - The active tab in the UI
  */
 self.loadFiles = function(filesData) {
-    const files = filesData.files;
-    const activeTab = filesData.activeTab;
+    const {files, activeTab} = filesData;
     let lastInputNum = -1;
     const inputNums = [];
     for (let i = 0; i < files.length; i++) {
-        if (i === 0 && self.getInputValue(activeTab) === "") {
+        // If the first input is empty, replace it rather than adding a new one
+        if (i === 0 && (!self.inputs[activeTab].buffer || self.inputs[activeTab].buffer.byteLength === 0)) {
             self.removeInput({
                 inputNum: activeTab,
                 refreshTabs: false,
@@ -791,14 +724,14 @@ self.loadFiles = function(filesData) {
     }
 
     self.getLoadProgress();
-    self.setInput({inputNum: activeTab, silent: true});
+    self.setInput({inputNum: lastInputNum, silent: true});
 };
 
 /**
  * Adds an input to the input dictionary
  *
  * @param {boolean} [changetab=false] - Whether or not to change to the new input
- * @param {string} type - Either "string" or "file"
+ * @param {string} type - Either "userinput" or "file"
  * @param {Object} fileData - Contains information about the file to be added to the input (only used when type is "file")
  * @param {string} fileData.name - The filename of the input being added
  * @param {number} fileData.size - The file size (in bytes) of the input being added
@@ -810,25 +743,32 @@ self.addInput = function(
     type,
     fileData = {
         name: "unknown",
-        size: "unknown",
+        size: 0,
         type: "unknown"
     },
     inputNum = self.currentInputNum++
 ) {
     self.numInputs++;
     const newInputObj = {
-        inputNum: inputNum
+        type: null,
+        buffer: new ArrayBuffer(),
+        stringSample: "",
+        file: null,
+        status: "pending",
+        progress: 0,
+        encoding: 0,
+        eolSequence: "\u000a"
     };
 
     switch (type) {
-        case "string":
-            newInputObj.data = "";
+        case "userinput":
+            newInputObj.type = "userinput";
             newInputObj.status = "loaded";
             newInputObj.progress = 100;
             break;
         case "file":
-            newInputObj.data = {
-                fileBuffer: new ArrayBuffer(),
+            newInputObj.type = "file";
+            newInputObj.file = {
                 name: fileData.name,
                 size: fileData.size,
                 type: fileData.type
@@ -837,7 +777,7 @@ self.addInput = function(
             newInputObj.progress = 0;
             break;
         default:
-            log.error(`Invalid type '${type}'.`);
+            log.error(`Invalid input type '${type}'.`);
             return -1;
     }
     self.inputs[inputNum] = newInputObj;
@@ -976,18 +916,18 @@ self.filterTabs = function(searchData) {
             self.inputs[iNum].status === "loading" && showLoading ||
             self.inputs[iNum].status === "loaded" && showLoaded) {
             try {
-                if (typeof self.inputs[iNum].data === "string") {
+                if (self.inputs[iNum].type === "userinput") {
                     if (filterType.toLowerCase() === "content" &&
-                        filterExp.test(self.inputs[iNum].data.slice(0, 4096))) {
-                        textDisplay = self.inputs[iNum].data.slice(0, 4096);
+                        filterExp.test(self.inputs[iNum].stringSample)) {
+                        textDisplay = self.inputs[iNum].stringSample;
                         addInput = true;
                     }
                 } else {
                     if ((filterType.toLowerCase() === "filename" &&
-                        filterExp.test(self.inputs[iNum].data.name)) ||
-                        filterType.toLowerCase() === "content" &&
-                        filterExp.test(Utils.arrayBufferToStr(self.inputs[iNum].data.fileBuffer.slice(0, 4096)))) {
-                        textDisplay = self.inputs[iNum].data.name;
+                        filterExp.test(self.inputs[iNum].file.name)) ||
+                        (filterType.toLowerCase() === "content" &&
+                        filterExp.test(self.inputs[iNum].stringSample))) {
+                        textDisplay = self.inputs[iNum].file.name;
                         addInput = true;
                     }
                 }
@@ -1021,61 +961,3 @@ self.filterTabs = function(searchData) {
         data: inputs
     });
 };
-
-/**
- * Swaps the input and outputs, and sends the old input back to the main thread.
- *
- * @param {object} switchData
- * @param {number} switchData.inputNum - The inputNum of the input to be switched to
- * @param {string | ArrayBuffer} switchData.outputData - The data to switch to
- */
-self.inputSwitch = function(switchData) {
-    const currentInput = self.getInputObj(switchData.inputNum);
-    const currentData = currentInput.data;
-    if (currentInput === undefined || currentInput === null) return;
-
-    if (typeof switchData.outputData !== "string") {
-        const output = new Uint8Array(switchData.outputData),
-            types = detectFileType(output);
-        let type = "unknown",
-            ext = "dat";
-        if (types.length) {
-            type = types[0].mime;
-            ext = types[0].extension.split(",", 1)[0];
-        }
-
-        // ArrayBuffer
-        self.updateInputObj({
-            inputNum: switchData.inputNum,
-            data: {
-                fileBuffer: switchData.outputData,
-                name: `output.${ext}`,
-                size: switchData.outputData.byteLength.toLocaleString(),
-                type: type
-            }
-        });
-    } else {
-        // String
-        self.updateInputValue({
-            inputNum: switchData.inputNum,
-            value: switchData.outputData,
-            force: true
-        });
-    }
-
-    self.postMessage({
-        action: "inputSwitch",
-        data: {
-            data: currentData,
-            inputNum: switchData.inputNum
-        }
-    });
-
-    self.postMessage({
-        action: "fileLoaded",
-        data: {
-            inputNum: switchData.inputNum
-        }
-    });
-
-};

src/web/workers/LoaderWorker.js

@@ -6,32 +6,36 @@
  * @license Apache-2.0
  */
 
+import loglevelMessagePrefix from "loglevel-message-prefix";
+
+loglevelMessagePrefix(log, {
+    prefixes: [],
+    staticPrefixes: ["LoaderWorker"]
+});
+
 self.id = null;
 
 
-self.handleMessage = function(e) {
-    const r = e.data;
-    log.debug(`LoaderWorker receiving command '${r.action}'`);
-
-    switch (r.action) {
-        case "loadInput":
-            self.loadFile(r.data.file, r.data.inputNum);
-            break;
-    }
-};
-
-
 /**
  * Respond to message from parent thread.
  */
 self.addEventListener("message", function(e) {
+    // Handle message
     const r = e.data;
-    if (Object.prototype.hasOwnProperty.call(r, "file") && Object.prototype.hasOwnProperty.call(r, "inputNum")) {
-        self.loadFile(r.file, r.inputNum);
-    } else if (Object.prototype.hasOwnProperty.call(r, "file")) {
-        self.loadFile(r.file, "");
-    } else if (Object.prototype.hasOwnProperty.call(r, "id")) {
-        self.id = r.id;
+    log.debug(`Receiving command '${r.action}'`);
+
+    switch (r.action) {
+        case "setID":
+            self.id = r.data.id;
+            break;
+        case "loadFile":
+            self.loadFile(r.data.file, r.data?.inputNum ?? "");
+            break;
+        case "setLogLevel":
+            log.setLevel(r.data, false);
+            break;
+        default:
+            log.error(`Unknown action '${r.action}'.`);
     }
 });
 

src/web/workers/ZipWorker.mjs

@@ -10,6 +10,12 @@ import zip from "zlibjs/bin/zip.min.js";
 import Utils from "../../core/Utils.mjs";
 import Dish from "../../core/Dish.mjs";
 import {detectFileType} from "../../core/lib/FileType.mjs";
+import loglevelMessagePrefix from "loglevel-message-prefix";
+
+loglevelMessagePrefix(log, {
+    prefixes: [],
+    staticPrefixes: ["ZipWorker"],
+});
 
 const Zlib = zip.Zlib;
 
@@ -17,17 +23,20 @@ const Zlib = zip.Zlib;
  * Respond to message from parent thread.
  */
 self.addEventListener("message", function(e) {
+    // Handle message from the main thread
     const r = e.data;
-    if (!("outputs" in r)) {
-        log.error("No files were passed to the ZipWorker.");
-        return;
-    }
-    if (!("filename" in r)) {
-        log.error("No filename was passed to the ZipWorker");
-        return;
-    }
+    log.debug(`Receiving command '${r.action}'`);
 
-    self.zipFiles(r.outputs, r.filename, r.fileExtension);
+    switch (r.action) {
+        case "zipFiles":
+            self.zipFiles(r.data.outputs, r.data.filename, r.data.fileExtension);
+            break;
+        case "setLogLevel":
+            log.setLevel(r.data, false);
+            break;
+        default:
+            log.error(`Unknown action: '${r.action}'`);
+    }
 });
 
 self.setOption = function(...args) {};