formatting

src/web/utils/statusBar.mjs

@@ -82,7 +82,7 @@ class StatusBarPanel {
      * @param {Event} e
      */
     showDropUp(e) {
-        if (e.type === "click" || e.keyCode === 13) {
+        if (e.type === "click" || e.key === 'Enter'|| e.key === ' ') {
             const el = e.target
                 .closest(".cm-status-bar-select")
                 .querySelector(".cm-status-bar-select-content");
@@ -181,8 +181,7 @@ class StatusBarPanel {
         // 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 +=
+            docLength += (state.lineBreak.length * state.doc.lines) - state.doc.lines - 1;
-                state.lineBreak.length * state.doc.lines - state.doc.lines - 1;
         }
         length.textContent = docLength;
         lines.textContent = state.doc.lines;
@@ -237,6 +236,7 @@ class StatusBarPanel {
         }
     }
 
+
     /**
      * Sets the current EOL separator in the status bar
      * @param {EditorState} state
@@ -427,6 +427,7 @@ class StatusBarPanel {
                 </div>
             </div>`;
     }
+
 }
 
 const elementsWithListeners = {};
@@ -447,19 +448,14 @@ function hideOnClickOutside(element, instantiatingEvent) {
         // is not visible, or if this is the same click event that opened it.
         if (
             !element.contains(event.target) &&
-            event.timeStamp !== instantiatingEvent.timeStamp
+            event.timeStamp !== instantiatingEvent.timeStamp) {
-        ) {
             hideElement(element);
         }
     };
 
     if (!Object.prototype.hasOwnProperty.call(elementsWithListeners, element)) {
         elementsWithListeners[element] = outsideClickListener;
-        document.addEventListener(
+        document.addEventListener("click", elementsWithListeners[element], false);
-            "click",
-            elementsWithListeners[element],
-            false
-        );
     }
 }
 
@@ -555,20 +551,13 @@ const arrowNav = (event) => {
  */
 function hideElement(element) {
     element.classList.remove("show");
-    document.removeEventListener(
+    document.removeEventListener("click", elementsWithListeners[element], false);
-        "click",
+    document.removeEventListener("keydown", elementsWithKeyDownListeners[element], false);
-        elementsWithListeners[element],
-        false
-    );
-    document.removeEventListener(
-        "keydown",
-        elementsWithKeyDownListeners[element],
-        false
-    );
     delete elementsWithListeners[element];
     delete elementsWithKeyDownListeners[element];
 }
 
+
 /**
  * A panel constructor factory building a panel that re-counts the stats every time the document changes.
  * @param {Object} opts
@@ -586,7 +575,7 @@ function makePanel(opts) {
         sbPanel.monitorHTMLOutput();
 
         return {
-            dom: sbPanel.dom,
+            "dom": sbPanel.dom,
             update(update) {
                 sbPanel.updateEOL(update.state);
                 sbPanel.updateCharEnc();
@@ -599,7 +588,7 @@ function makePanel(opts) {
                 if (update.docChanged) {
                     sbPanel.updateStats(update.state);
                 }
-            },
+            }
         };
     };
 }

src/web/waiters/ControlsWaiter.mjs

@@ -6,10 +6,12 @@
 
 import Utils from "../../core/Utils.mjs";
 
+
 /**
  * Waiter to handle events related to the CyberChef controls (i.e. Bake, Step, Save, Load etc.)
  */
 class ControlsWaiter {
+
     /**
      * ControlsWaiter constructor.
      *
@@ -21,6 +23,7 @@ class ControlsWaiter {
         this.manager = manager;
     }
 
+
     /**
      * Initialise Bootstrap components
      */
@@ -30,10 +33,11 @@ class ControlsWaiter {
             animation: false,
             container: "body",
             boundary: "viewport",
-            trigger: "hover focus",
+            trigger: "hover focus"
         });
     }
 
+
     /**
      * Checks or unchecks the Auto Bake checkbox based on the given value.
      *
@@ -47,6 +51,7 @@ class ControlsWaiter {
         }
     }
 
+
     /**
      * Handler to trigger baking.
      */
@@ -59,6 +64,7 @@ class ControlsWaiter {
         }
     }
 
+
     /**
      * Handler for the 'Step through' command. Executes the next step of the recipe.
      */
@@ -66,6 +72,7 @@ class ControlsWaiter {
         this.app.step();
     }
 
+
     /**
      * Handler for changes made to the Auto Bake checkbox.
      */
@@ -73,6 +80,7 @@ class ControlsWaiter {
         this.app.autoBake_ = document.getElementById("auto-bake").checked;
     }
 
+
     /**
      * Handler for the 'Clear recipe' command. Removes all operations from the recipe.
      */
@@ -80,6 +88,7 @@ class ControlsWaiter {
         this.manager.recipe.clearRecipe();
     }
 
+
     /**
      * Populates the save dialog box with a URL incorporating the recipe and input.
      *
@@ -88,23 +97,16 @@ class ControlsWaiter {
     initialiseSaveLink(recipeConfig) {
         recipeConfig = recipeConfig || this.app.getRecipeConfig();
 
-        const includeRecipe = document.getElementById(
+        const includeRecipe = document.getElementById("save-link-recipe-checkbox").checked;
-            "save-link-recipe-checkbox"
+        const includeInput = document.getElementById("save-link-input-checkbox").checked;
-        ).checked;
-        const includeInput = document.getElementById("save-link-input-checkbox")
-            .checked;
         const saveLinkEl = document.getElementById("save-link");
-        const saveLink = this.generateStateUrl(
+        const saveLink = this.generateStateUrl(includeRecipe, includeInput, null, recipeConfig);
-            includeRecipe,
-            includeInput,
-            null,
-            recipeConfig
-        );
 
         saveLinkEl.innerHTML = Utils.escapeHtml(Utils.truncate(saveLink, 120));
         saveLinkEl.setAttribute("href", saveLink);
     }
 
+
     /**
      * Generates a URL containing the current recipe and input state.
      *
@@ -115,24 +117,15 @@ class ControlsWaiter {
      * @param {string} [baseURL] - The CyberChef URL, set to the current URL if not included
      * @returns {string}
      */
-    generateStateUrl(
+    generateStateUrl(includeRecipe, includeInput, input, recipeConfig, baseURL) {
-        includeRecipe,
-        includeInput,
-        input,
-        recipeConfig,
-        baseURL
-    ) {
         recipeConfig = recipeConfig || this.app.getRecipeConfig();
 
-        const link =
+        const link = baseURL || window.location.protocol + "//" +
-            baseURL ||
-            window.location.protocol +
-                "//" +
                 window.location.host +
                 window.location.pathname;
         const recipeStr = Utils.generatePrettyRecipe(recipeConfig);
 
-        includeRecipe = includeRecipe && recipeConfig.length > 0;
+        includeRecipe = includeRecipe && (recipeConfig.length > 0);
 
         // If we don't get passed an input, get it from the current URI
         if (input === null && includeInput) {
@@ -156,11 +149,11 @@ class ControlsWaiter {
             inputChrEnc !== 0 ? ["ienc", inputChrEnc] : undefined,
             outputChrEnc !== 0 ? ["oenc", outputChrEnc] : undefined,
             inputEOLSeq !== "\n" ? ["ieol", inputEOLSeq] : undefined,
-            outputEOLSeq !== "\n" ? ["oeol", outputEOLSeq] : undefined,
+            outputEOLSeq !== "\n" ? ["oeol", outputEOLSeq] : undefined
         ];
 
         const hash = params
-            .filter((v) => v)
+            .filter(v => v)
             .map(([key, value]) => `${key}=${Utils.encodeURIFragment(value)}`)
             .join("&");
 
@@ -171,6 +164,7 @@ class ControlsWaiter {
         return link;
     }
 
+
     /**
      * Handler for changes made to the save dialog text area. Re-initialises the save link.
      */
@@ -181,6 +175,7 @@ class ControlsWaiter {
         } catch (err) {}
     }
 
+
     /**
      * Handler for the 'Save' command. Pops up the save dialog box.
      */
@@ -188,14 +183,8 @@ class ControlsWaiter {
         const recipeConfig = this.app.getRecipeConfig();
         const recipeStr = JSON.stringify(recipeConfig);
 
-        document.getElementById(
+        document.getElementById("save-text-chef").value = Utils.generatePrettyRecipe(recipeConfig, true);
-            "save-text-chef"
+        document.getElementById("save-text-clean").value = JSON.stringify(recipeConfig, null, 2)
-        ).value = Utils.generatePrettyRecipe(recipeConfig, true);
-        document.getElementById("save-text-clean").value = JSON.stringify(
-            recipeConfig,
-            null,
-            2
-        )
             .replace(/{\n\s+"/g, '{ "')
             .replace(/\[\n\s{3,}/g, "[")
             .replace(/\n\s{3,}]/g, "]")
@@ -207,6 +196,7 @@ class ControlsWaiter {
         $("#save-modal").modal();
     }
 
+
     /**
      * Handler for the save link recipe checkbox change event.
      */
@@ -214,6 +204,7 @@ class ControlsWaiter {
         this.initialiseSaveLink();
     }
 
+
     /**
      * Handler for the save link input checkbox change event.
      */
@@ -221,6 +212,7 @@ class ControlsWaiter {
         this.initialiseSaveLink();
     }
 
+
     /**
      * Handler for the 'Load' command. Pops up the load dialog box.
      */
@@ -229,6 +221,7 @@ class ControlsWaiter {
         $("#load-modal").modal();
     }
 
+
     /**
      * Saves the recipe specified in the save textarea to local storage.
      */
@@ -241,25 +234,22 @@ class ControlsWaiter {
             return false;
         }
 
-        const recipeName = Utils.escapeHtml(
+        const recipeName = Utils.escapeHtml(document.getElementById("save-name").value);
-            document.getElementById("save-name").value
+        const recipeStr = document.querySelector("#save-texts .tab-pane.active textarea").value;
-        );
-        const recipeStr = document.querySelector(
-            "#save-texts .tab-pane.active textarea"
-        ).value;
 
         if (!recipeName) {
             this.app.alert("Please enter a recipe name", 3000);
             return;
         }
 
-        const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
+        const savedRecipes = localStorage.savedRecipes ? 
+            JSON.parse(localStorage.savedRecipes) : [];
         let recipeId = localStorage.recipeId || 0;
 
         savedRecipes.push({
             id: ++recipeId,
             name: recipeName,
-            recipe: recipeStr,
+            recipe: recipeStr
         });
 
         localStorage.savedRecipes = JSON.stringify(savedRecipes);
@@ -268,6 +258,7 @@ class ControlsWaiter {
         this.app.alert(`Recipe saved as "${recipeName}".`, 3000);
     }
 
+
     /**
      * Populates the list of saved recipes in the load dialog box from local storage.
      */
@@ -283,15 +274,14 @@ class ControlsWaiter {
         }
 
         // Add recipes to select
-        const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
+        const savedRecipes = localStorage.savedRecipes ? 
+            JSON.parse(localStorage.savedRecipes) : [];
 
         for (i = 0; i < savedRecipes.length; i++) {
             const opt = document.createElement("option");
             opt.value = savedRecipes[i].id;
             // Unescape then re-escape in case localStorage has been corrupted
-            opt.innerHTML = Utils.escapeHtml(
+            opt.innerHTML = Utils.escapeHtml(Utils.unescapeHtml(savedRecipes[i].name));
-                Utils.unescapeHtml(savedRecipes[i].name)
-            );
 
             loadNameEl.appendChild(opt);
         }
@@ -303,6 +293,7 @@ class ControlsWaiter {
         loadText.dispatchEvent(evt);
     }
 
+
     /**
      * Removes the currently selected recipe from local storage.
      */
@@ -310,14 +301,16 @@ class ControlsWaiter {
         if (!this.app.isLocalStorageAvailable()) return false;
 
         const id = parseInt(document.getElementById("load-name").value, 10);
-        const rawSavedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
+        const rawSavedRecipes = localStorage.savedRecipes ?
+            JSON.parse(localStorage.savedRecipes) : [];
 
-        const savedRecipes = rawSavedRecipes.filter((r) => r.id !== id);
+        const savedRecipes = rawSavedRecipes.filter(r => r.id !== id);
 
         localStorage.savedRecipes = JSON.stringify(savedRecipes);
         this.populateLoadRecipesList();
     }
 
+
     /**
      * Displays the selected recipe in the load text box.
      */
@@ -325,22 +318,22 @@ class ControlsWaiter {
         if (!this.app.isLocalStorageAvailable()) return false;
 
         const el = e.target;
-        const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
+        const savedRecipes = localStorage.savedRecipes ? 
+            JSON.parse(localStorage.savedRecipes) : [];
         const id = parseInt(el.value, 10);
 
-        const recipe = savedRecipes.find((r) => r.id === id);
+        const recipe = savedRecipes.find(r => r.id === id);
 
         document.getElementById("load-text").value = recipe.recipe;
     }
 
+
     /**
      * Loads the selected recipe and populates the Recipe with its operations.
      */
     loadButtonClick() {
         try {
-            const recipeConfig = Utils.parseRecipeConfig(
+            const recipeConfig = Utils.parseRecipeConfig(document.getElementById("load-text").value);
-                document.getElementById("load-text").value
-            );
             this.app.setRecipeConfig(recipeConfig);
             this.app.autoBake();
 
@@ -350,6 +343,7 @@ class ControlsWaiter {
         }
     }
 
+
     /**
      * Populates the bug report information box with useful technical info.
      *
@@ -359,13 +353,7 @@ class ControlsWaiter {
         e.preventDefault();
 
         const reportBugInfo = document.getElementById("report-bug-info");
-        const saveLink = this.generateStateUrl(
+        const saveLink = this.generateStateUrl(true, true, null, null, "https://gchq.github.io/CyberChef/");
-            true,
-            true,
-            null,
-            null,
-            "https://gchq.github.io/CyberChef/"
-        );
 
         if (reportBugInfo) {
             reportBugInfo.innerHTML = `* Version: ${PKG_VERSION}
@@ -378,6 +366,7 @@ ${navigator.userAgent}
         }
     }
 
+
     /**
      * Shows the stale indicator to show that the input or recipe has changed
      * since the last bake.
@@ -387,6 +376,7 @@ ${navigator.userAgent}
         staleIndicator.classList.remove("hidden");
     }
 
+
     /**
      * Hides the stale indicator to show that the input or recipe has not changed
      * since the last bake.
@@ -396,6 +386,7 @@ ${navigator.userAgent}
         staleIndicator.classList.add("hidden");
     }
 
+
     /**
      * Switches the Bake button between 'Bake', 'Cancel' and 'Loading' functions.
      *
@@ -438,6 +429,7 @@ ${navigator.userAgent}
 
         recList.style.bottom = controls.clientHeight + "px";
     }
+    
 }
 
 export default ControlsWaiter;