Merge branch 'pr/5'

src/web/App.js

@@ -1,5 +1,4 @@
 import Utils from "../core/Utils.js";
-import Chef from "../core/Chef.js";
 import Manager from "./Manager.js";
 import HTMLCategory from "./HTMLCategory.js";
 import HTMLOperation from "./HTMLOperation.js";
@@ -27,7 +26,6 @@ const App = function(categories, operations, defaultFavourites, defaultOptions)
     this.doptions      = defaultOptions;
     this.options       = Utils.extend({}, defaultOptions);
 
-    this.chef          = new Chef();
     this.manager       = new Manager(this);
 
     this.baking        = false;
@@ -35,8 +33,6 @@ const App = function(categories, operations, defaultFavourites, defaultOptions)
     this.autoBakePause = false;
     this.progress      = 0;
     this.ingId         = 0;
-
-    window.chef        = this.chef;
 };
 
 
@@ -54,14 +50,23 @@ App.prototype.setup = function() {
     this.resetLayout();
     this.setCompileMessage();
     this.loadURIParams();
+
+    this.appLoaded = true;
     this.loaded();
 };
 
 
 /**
  * Fires once all setup activities have completed.
+ *
+ * @fires Manager#apploaded
  */
 App.prototype.loaded = function() {
+    // 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 ||
+        !document.getElementById("loader-wrapper")) return;
+
     // Trigger CSS animations to remove preloader
     document.body.classList.add("loaded");
 
@@ -73,7 +78,9 @@ App.prototype.loaded = function() {
     }, 1000);
 
     // Clear the loading message interval
-    clearInterval(window.loadingMsgInt);
+    clearInterval(window.loadingMsgsInt);
+
+    document.dispatchEvent(this.manager.apploaded);
 };
 
 
@@ -81,85 +88,34 @@ App.prototype.loaded = function() {
  * An error handler for displaying the error to the user.
  *
  * @param {Error} err
+ * @param {boolean} [logToConsole=false]
  */
-App.prototype.handleError = function(err) {
-    console.error(err);
+App.prototype.handleError = function(err, logToConsole) {
+    if (logToConsole) console.error(err);
     const msg = err.displayStr || err.toString();
     this.alert(msg, "danger", this.options.errorTimeout, !this.options.showErrors);
 };
 
 
 /**
- * Updates the UI to show if baking is in process or not.
- *
- * @param {bakingStatus}
- */
-App.prototype.setBakingStatus = function(bakingStatus) {
-    this.baking = bakingStatus;
-
-    let inputLoadingIcon = document.querySelector("#input .title .loading-icon"),
-        outputLoadingIcon = document.querySelector("#output .title .loading-icon"),
-        outputElement = document.querySelector("#output-text");
-
-    if (bakingStatus) {
-        inputLoadingIcon.style.display = "inline-block";
-        outputLoadingIcon.style.display = "inline-block";
-        outputElement.classList.add("disabled");
-        outputElement.disabled = true;
-    } else {
-        inputLoadingIcon.style.display = "none";
-        outputLoadingIcon.style.display = "none";
-        outputElement.classList.remove("disabled");
-        outputElement.disabled = false;
-    }
-};
-
-
-/**
- * Calls the Chef to bake the current input using the current recipe.
+ * Asks the ChefWorker to bake the current input using the current recipe.
  *
  * @param {boolean} [step] - Set to true if we should only execute one operation instead of the
  *   whole recipe.
  */
-App.prototype.bake = async function(step) {
-    let response;
-
+App.prototype.bake = function(step) {
     if (this.baking) return;
 
-    this.setBakingStatus(true);
+    // Reset attemptHighlight flag
+    this.options.attemptHighlight = true;
 
-    try {
-        response = await this.chef.bake(
-            this.getInput(),          // The user's input
-            this.getRecipeConfig(),   // The configuration of the recipe
-            this.options,             // Options set by the user
-            this.progress,            // The current position in the recipe
-            step                      // Whether or not to take one step or execute the whole recipe
-        );
-    } catch (err) {
-        this.handleError(err);
-    }
-
-    this.setBakingStatus(false);
-
-    if (!response) return;
-
-    if (response.error) {
-        this.handleError(response.error);
-    }
-
-    this.options  = response.options;
-    this.dishStr  = response.type === "html" ? Utils.stripHtmlTags(response.result, true) : response.result;
-    this.progress = response.progress;
-    this.manager.recipe.updateBreakpointIndicator(response.progress);
-    this.manager.output.set(response.result, response.type, response.duration);
-
-    // If baking took too long, disable auto-bake
-    if (response.duration > this.options.autoBakeThreshold && this.autoBake_) {
-        this.manager.controls.setAutoBake(false);
-        this.alert("Baking took longer than " + this.options.autoBakeThreshold +
-            "ms, Auto Bake has been disabled.", "warning", 5000);
-    }
+    this.manager.worker.bake(
+        this.getInput(),        // The user's input
+        this.getRecipeConfig(), // The configuration of the recipe
+        this.options,           // Options set by the user
+        this.progress,          // The current position in the recipe
+        step                    // Whether or not to take one step or execute the whole recipe
+    );
 };
 
 
@@ -167,30 +123,36 @@ App.prototype.bake = async function(step) {
  * Runs Auto Bake if it is set.
  */
 App.prototype.autoBake = function() {
-    if (this.autoBake_ && !this.autoBakePause) {
+    // If autoBakePause is set, we are loading a full recipe (and potentially input), so there is no
+    // need to set the staleness indicator. Just exit and wait until auto bake is called after loading
+    // has completed.
+    if (this.autoBakePause) return false;
+
+    if (this.autoBake_ && !this.baking) {
         this.bake();
+    } else {
+        this.manager.controls.showStaleIndicator();
     }
 };
 
 
 /**
- * Runs a silent bake forcing the browser to load and cache all the relevant JavaScript code needed
+ * Runs a silent bake, forcing the browser to load and cache all the relevant JavaScript code needed
  * to do a real bake.
  *
- * The output will not be modified (hence "silent" bake). This will only actually execute the
- * recipe if auto-bake is enabled, otherwise it will just load the recipe, ingredients and dish.
- *
- * @returns {number} - The number of miliseconds it took to run the silent bake.
+ * The output will not be modified (hence "silent" bake). This will only actually execute the recipe
+ * if auto-bake is enabled, otherwise it will just wake up the ChefWorker with an empty recipe.
  */
 App.prototype.silentBake = function() {
-    let startTime = new Date().getTime(),
-        recipeConfig = this.getRecipeConfig();
+    let recipeConfig = [];
 
     if (this.autoBake_) {
-        this.chef.silentBake(recipeConfig);
+        // If auto-bake is not enabled we don't want to actually run the recipe as it may be disabled
+        // for a good reason.
+        recipeConfig = this.getRecipeConfig();
     }
 
-    return new Date().getTime() - startTime;
+    this.manager.worker.silentBake(recipeConfig);
 };
 
 
@@ -200,13 +162,7 @@ App.prototype.silentBake = function() {
  * @returns {string}
  */
 App.prototype.getInput = function() {
-    const input = this.manager.input.get();
-
-    // Save to session storage in case we need to restore it later
-    sessionStorage.setItem("inputLength", input.length);
-    sessionStorage.setItem("input", input);
-
-    return input;
+    return this.manager.input.get();
 };
 
 
@@ -216,8 +172,6 @@ App.prototype.getInput = function() {
  * @param {string} input - The string to set the input to
  */
 App.prototype.setInput = function(input) {
-    sessionStorage.setItem("inputLength", input.length);
-    sessionStorage.setItem("input", input);
     this.manager.input.set(input);
 };
 
@@ -268,7 +222,7 @@ App.prototype.populateOperationsList = function() {
 App.prototype.initialiseSplitter = function() {
     this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
         sizes: [20, 30, 50],
-        minSize: [240, 325, 440],
+        minSize: [240, 325, 450],
         gutterSize: 4,
         onDrag: function() {
             this.manager.controls.adjustWidth();
@@ -292,7 +246,7 @@ App.prototype.initialiseSplitter = function() {
 App.prototype.loadLocalStorage = function() {
     // Load options
     let lOptions;
-    if (localStorage.options !== undefined) {
+    if (this.isLocalStorageAvailable() && localStorage.options !== undefined) {
         lOptions = JSON.parse(localStorage.options);
     }
     this.manager.options.load(lOptions);
@@ -308,13 +262,17 @@ App.prototype.loadLocalStorage = function() {
  * If the user currently has no saved favourites, the defaults from the view constructor are used.
  */
 App.prototype.loadFavourites = function() {
-    let favourites = localStorage.favourites &&
-        localStorage.favourites.length > 2 ?
-        JSON.parse(localStorage.favourites) :
-        this.dfavourites;
+    let favourites;
 
-    favourites = this.validFavourites(favourites);
-    this.saveFavourites(favourites);
+    if (this.isLocalStorageAvailable()) {
+        favourites = localStorage.favourites && localStorage.favourites.length > 2 ?
+            JSON.parse(localStorage.favourites) :
+            this.dfavourites;
+        favourites = this.validFavourites(favourites);
+        this.saveFavourites(favourites);
+    } else {
+        favourites = this.dfavourites;
+    }
 
     const favCat = this.categories.filter(function(c) {
         return c.name === "Favourites";
@@ -358,6 +316,15 @@ App.prototype.validFavourites = function(favourites) {
  * @param {string[]} favourites - A list of the user's favourite operations
  */
 App.prototype.saveFavourites = function(favourites) {
+    if (!this.isLocalStorageAvailable()) {
+        this.alert(
+            "Your security settings do not allow access to local storage so your favourites cannot be saved.",
+            "danger",
+            5000
+        );
+        return false;
+    }
+
     localStorage.setItem("favourites", JSON.stringify(this.validFavourites(favourites)));
 };
 
@@ -399,39 +366,29 @@ App.prototype.addFavourite = function(name) {
  * Checks for input and recipe in the URI parameters and loads them if present.
  */
 App.prototype.loadURIParams = function() {
-    // Load query string from URI
-    this.queryString = (function(a) {
-        if (a === "") return {};
-        const b = {};
-        for (let i = 0; i < a.length; i++) {
-            const p = a[i].split("=");
-            if (p.length !== 2) {
-                b[a[i]] = true;
-            } else {
-                b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
-            }
-        }
-        return b;
-    })(window.location.search.substr(1).split("&"));
+    // Load query string or hash from URI (depending on which is populated)
+    // We prefer getting the hash by splitting the href rather than referencing
+    // location.hash as some browsers (Firefox) automatically URL decode it,
+    // which cause issues.
+    const params = window.location.search ||
+        window.location.href.split("#")[1] ||
+        window.location.hash;
+    this.uriParams = Utils.parseURIParams(params);
 
-    // Pause auto-bake while loading but don't modify `this.autoBake_`
-    // otherwise `manualBake` cannot trigger.
-    this.autoBakePause = true;
-
-    // Read in recipe from query string
-    if (this.queryString.recipe) {
+    // Read in recipe from URI params
+    if (this.uriParams.recipe) {
         try {
-            const recipeConfig = JSON.parse(this.queryString.recipe);
+            const recipeConfig = Utils.parseRecipeConfig(this.uriParams.recipe);
             this.setRecipeConfig(recipeConfig);
         } catch (err) {}
-    } else if (this.queryString.op) {
+    } else if (this.uriParams.op) {
         // If there's no recipe, look for single operations
         this.manager.recipe.clearRecipe();
         try {
-            this.manager.recipe.addOperation(this.queryString.op);
+            this.manager.recipe.addOperation(this.uriParams.op);
         } catch (err) {
             // If no exact match, search for nearest match and add that
-            const matchedOps = this.manager.ops.filterOperations(this.queryString.op, false);
+            const matchedOps = this.manager.ops.filterOperations(this.uriParams.op, false);
             if (matchedOps.length) {
                 this.manager.recipe.addOperation(matchedOps[0].name);
             }
@@ -439,21 +396,23 @@ App.prototype.loadURIParams = function() {
             // Populate search with the string
             const search = document.getElementById("search");
 
-            search.value = this.queryString.op;
+            search.value = this.uriParams.op;
             search.dispatchEvent(new Event("search"));
         }
     }
 
-    // Read in input data from query string
-    if (this.queryString.input) {
+    // Read in input data from URI params
+    if (this.uriParams.input) {
+        this.autoBakePause = true;
         try {
-            const inputData = Utils.fromBase64(this.queryString.input);
+            const inputData = Utils.fromBase64(this.uriParams.input);
             this.setInput(inputData);
-        } catch (err) {}
+        } catch (err) {
+        } finally {
+            this.autoBakePause = false;
+        }
     }
 
-    // Unpause auto-bake
-    this.autoBakePause = false;
     this.autoBake();
 };
 
@@ -474,9 +433,7 @@ App.prototype.nextIngId = function() {
  * @returns {Object[]}
  */
 App.prototype.getRecipeConfig = function() {
-    const recipeConfig = this.manager.recipe.getConfig();
-    sessionStorage.setItem("recipeConfig", JSON.stringify(recipeConfig));
-    return recipeConfig;
+    return this.manager.recipe.getConfig();
 };
 
 
@@ -486,15 +443,19 @@ App.prototype.getRecipeConfig = function() {
  * @param {Object[]} recipeConfig - The recipe configuration
  */
 App.prototype.setRecipeConfig = function(recipeConfig) {
-    sessionStorage.setItem("recipeConfig", JSON.stringify(recipeConfig));
     document.getElementById("rec-list").innerHTML = null;
 
+    // Pause auto-bake while loading but don't modify `this.autoBake_`
+    // otherwise `manualBake` cannot trigger.
+    this.autoBakePause = true;
+
     for (let i = 0; i < recipeConfig.length; i++) {
         const item = this.manager.recipe.addOperation(recipeConfig[i].op);
 
         // Populate arguments
         const args = item.querySelectorAll(".arg");
         for (let j = 0; j < args.length; j++) {
+            if (recipeConfig[i].args[j] === undefined) continue;
             if (args[j].getAttribute("type") === "checkbox") {
                 // checkbox
                 args[j].checked = recipeConfig[i].args[j];
@@ -520,6 +481,9 @@ App.prototype.setRecipeConfig = function(recipeConfig) {
 
         this.progress = 0;
     }
+
+    // Unpause auto bake
+    this.autoBakePause = false;
 };
 
 
@@ -541,19 +505,44 @@ App.prototype.resetLayout = function() {
 App.prototype.setCompileMessage = function() {
     // Display time since last build and compile message
     let now = new Date(),
-        timeSinceCompile = Utils.fuzzyTime(now.getTime() - window.compileTime),
-        compileInfo = "<span style=\"font-weight: normal\">Last build: " +
-            timeSinceCompile.substr(0, 1).toUpperCase() + timeSinceCompile.substr(1) + " ago";
+        timeSinceCompile = Utils.fuzzyTime(now.getTime() - window.compileTime);
+
+    // Calculate previous version to compare to
+    let prev = PKG_VERSION.split(".").map(n => {
+        return parseInt(n, 10);
+    });
+    if (prev[2] > 0) prev[2]--;
+    else if (prev[1] > 0) prev[1]--;
+    else prev[0]--;
+
+    const compareURL = `https://github.com/gchq/CyberChef/compare/v${prev.join(".")}...v${PKG_VERSION}`;
+
+    let compileInfo = `<a href='${compareURL}'>Last build: ${timeSinceCompile.substr(0, 1).toUpperCase() + timeSinceCompile.substr(1)} ago</a>`;
 
     if (window.compileMessage !== "") {
         compileInfo += " - " + window.compileMessage;
     }
 
-    compileInfo += "</span>";
     document.getElementById("notice").innerHTML = compileInfo;
 };
 
 
+/**
+ * Determines whether the browser supports Local Storage and if it is accessible.
+ * 
+ * @returns {boolean}
+ */
+App.prototype.isLocalStorageAvailable = function() {
+    try {
+        if (!localStorage) return false;
+        return true;
+    } catch (err) {
+        // Access to LocalStorage is denied
+        return false;
+    }
+};
+
+
 /**
  * Pops up a message to the user and writes it to the console log.
  *
@@ -674,10 +663,27 @@ App.prototype.alertCloseClick = function() {
 App.prototype.stateChange = function(e) {
     this.autoBake();
 
+    // Set title
+    const recipeConfig = this.getRecipeConfig();
+    let title = "CyberChef";
+    if (recipeConfig.length === 1) {
+        title = `${recipeConfig[0].op} - ${title}`;
+    } else if (recipeConfig.length > 1) {
+        // See how long the full recipe is
+        const ops = recipeConfig.map(op => op.op).join(", ");
+        if (ops.length < 45) {
+            title = `${ops} - ${title}`;
+        } else {
+            // If it's too long, just use the first one and say how many more there are
+            title = `${recipeConfig[0].op}, ${recipeConfig.length - 1} more - ${title}`;
+        }
+    }
+    document.title = title;
+
     // Update the current history state (not creating a new one)
     if (this.options.updateUrl) {
-        this.lastStateUrl = this.manager.controls.generateStateUrl(true, true);
-        window.history.replaceState({}, "CyberChef", this.lastStateUrl);
+        this.lastStateUrl = this.manager.controls.generateStateUrl(true, true, recipeConfig);
+        window.history.replaceState({}, title, this.lastStateUrl);
     }
 };
 
@@ -689,9 +695,7 @@ App.prototype.stateChange = function(e) {
  * @param {event} e
  */
 App.prototype.popState = function(e) {
-    if (window.location.href.split("#")[0] !== this.lastStateUrl) {
-        this.loadURIParams();
-    }
+    this.loadURIParams();
 };
 
 

src/web/ControlsWaiter.js

@@ -78,10 +78,11 @@ ControlsWaiter.prototype.setAutoBake = function(value) {
  * Handler to trigger baking.
  */
 ControlsWaiter.prototype.bakeClick = function() {
-    this.app.bake();
-    const outputText = document.getElementById("output-text");
-    outputText.focus();
-    outputText.setSelectionRange(0, 0);
+    if (document.getElementById("bake").textContent.indexOf("Bake") > 0) {
+        this.app.bake();
+    } else {
+        this.manager.worker.cancelBake();
+    }
 };
 
 
@@ -90,9 +91,6 @@ ControlsWaiter.prototype.bakeClick = function() {
  */
 ControlsWaiter.prototype.stepClick = function() {
     this.app.bake(true);
-    const outputText = document.getElementById("output-text");
-    outputText.focus();
-    outputText.setSelectionRange(0, 0);
 };
 
 
@@ -170,24 +168,25 @@ ControlsWaiter.prototype.generateStateUrl = function(includeRecipe, includeInput
     const link = baseURL || window.location.protocol + "//" +
         window.location.host +
         window.location.pathname;
-    const recipeStr = JSON.stringify(recipeConfig);
+    const recipeStr = Utils.generatePrettyRecipe(recipeConfig);
     const inputStr = Utils.toBase64(this.app.getInput(), "A-Za-z0-9+/"); // B64 alphabet with no padding
 
     includeRecipe = includeRecipe && (recipeConfig.length > 0);
-    includeInput = includeInput && (inputStr.length > 0) && (inputStr.length < 8000);
+    // Only inlcude input if it is less than 50KB (51200 * 4/3 as it is Base64 encoded)
+    includeInput = includeInput && (inputStr.length > 0) && (inputStr.length <= 68267);
 
     const params = [
         includeRecipe ? ["recipe", recipeStr] : undefined,
         includeInput ? ["input", inputStr] : undefined,
     ];
 
-    const query = params
-       .filter(v => v)
-       .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
-       .join("&");
+    const hash = params
+        .filter(v => v)
+        .map(([key, value]) => `${key}=${Utils.encodeURIFragment(value)}`)
+        .join("&");
 
-    if (query) {
-        return `${link}?${query}`;
+    if (hash) {
+        return `${link}#${hash}`;
     }
 
     return link;
@@ -197,9 +196,9 @@ ControlsWaiter.prototype.generateStateUrl = function(includeRecipe, includeInput
 /**
  * Handler for changes made to the save dialog text area. Re-initialises the save link.
  */
-ControlsWaiter.prototype.saveTextChange = function() {
+ControlsWaiter.prototype.saveTextChange = function(e) {
     try {
-        const recipeConfig = JSON.parse(document.getElementById("save-text").value);
+        const recipeConfig = Utils.parseRecipeConfig(e.target.value);
         this.initialiseSaveLink(recipeConfig);
     } catch (err) {}
 };
@@ -210,9 +209,16 @@ ControlsWaiter.prototype.saveTextChange = function() {
  */
 ControlsWaiter.prototype.saveClick = function() {
     const recipeConfig = this.app.getRecipeConfig();
-    const recipeStr = JSON.stringify(recipeConfig).replace(/},{/g, "},\n{");
+    const recipeStr = JSON.stringify(recipeConfig);
 
-    document.getElementById("save-text").value = recipeStr;
+    document.getElementById("save-text-chef").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, "]")
+        .replace(/\s*\n\s*}/g, " }")
+        .replace(/\n\s{6,}/g, " ");
+    document.getElementById("save-text-compact").value = recipeStr;
 
     this.initialiseSaveLink(recipeConfig);
     $("#save-modal").modal();
@@ -248,8 +254,17 @@ ControlsWaiter.prototype.loadClick = function() {
  * Saves the recipe specified in the save textarea to local storage.
  */
 ControlsWaiter.prototype.saveButtonClick = function() {
+    if (!this.app.isLocalStorageAvailable()) {
+        this.app.alert(
+            "Your security settings do not allow access to local storage so your recipe cannot be saved.",
+            "danger",
+            5000
+        );
+        return false;
+    }
+
     const recipeName = Utils.escapeHtml(document.getElementById("save-name").value);
-    const recipeStr  = document.getElementById("save-text").value;
+    const recipeStr  = document.querySelector("#save-texts .tab-pane.active textarea").value;
 
     if (!recipeName) {
         this.app.alert("Please enter a recipe name", "danger", 2000);
@@ -277,6 +292,8 @@ ControlsWaiter.prototype.saveButtonClick = function() {
  * Populates the list of saved recipes in the load dialog box from local storage.
  */
 ControlsWaiter.prototype.populateLoadRecipesList = function() {
+    if (!this.app.isLocalStorageAvailable()) return false;
+
     const loadNameEl = document.getElementById("load-name");
 
     // Remove current recipes from select
@@ -287,7 +304,7 @@ ControlsWaiter.prototype.populateLoadRecipesList = function() {
 
     // Add recipes to select
     const savedRecipes = localStorage.savedRecipes ?
-            JSON.parse(localStorage.savedRecipes) : [];
+        JSON.parse(localStorage.savedRecipes) : [];
 
     for (i = 0; i < savedRecipes.length; i++) {
         const opt = document.createElement("option");
@@ -307,9 +324,11 @@ ControlsWaiter.prototype.populateLoadRecipesList = function() {
  * Removes the currently selected recipe from local storage.
  */
 ControlsWaiter.prototype.loadDeleteClick = function() {
+    if (!this.app.isLocalStorageAvailable()) return false;
+
     const id = parseInt(document.getElementById("load-name").value, 10);
     const rawSavedRecipes = localStorage.savedRecipes ?
-            JSON.parse(localStorage.savedRecipes) : [];
+        JSON.parse(localStorage.savedRecipes) : [];
 
     const savedRecipes = rawSavedRecipes.filter(r => r.id !== id);
 
@@ -322,9 +341,11 @@ ControlsWaiter.prototype.loadDeleteClick = function() {
  * Displays the selected recipe in the load text box.
  */
 ControlsWaiter.prototype.loadNameChange = function(e) {
+    if (!this.app.isLocalStorageAvailable()) return false;
+
     const el = e.target;
     const savedRecipes = localStorage.savedRecipes ?
-            JSON.parse(localStorage.savedRecipes) : [];
+        JSON.parse(localStorage.savedRecipes) : [];
     const id = parseInt(el.value, 10);
 
     const recipe = savedRecipes.find(r => r.id === id);
@@ -338,8 +359,9 @@ ControlsWaiter.prototype.loadNameChange = function(e) {
  */
 ControlsWaiter.prototype.loadButtonClick = function() {
     try {
-        const recipeConfig = JSON.parse(document.getElementById("load-text").value);
+        const recipeConfig = Utils.parseRecipeConfig(document.getElementById("load-text").value);
         this.app.setRecipeConfig(recipeConfig);
+        this.app.autoBake();
 
         $("#rec-list [data-toggle=popover]").popover();
     } catch (e) {
@@ -350,16 +372,66 @@ ControlsWaiter.prototype.loadButtonClick = function() {
 
 /**
  * Populates the bug report information box with useful technical info.
+ *
+ * @param {event} e
  */
-ControlsWaiter.prototype.supportButtonClick = function() {
+ControlsWaiter.prototype.supportButtonClick = function(e) {
+    e.preventDefault();
+
     const reportBugInfo = document.getElementById("report-bug-info");
     const saveLink = this.generateStateUrl(true, true, null, "https://gchq.github.io/CyberChef/");
 
     if (reportBugInfo) {
-        reportBugInfo.innerHTML = "* CyberChef compile time: " + COMPILE_TIME + "\n" +
+        reportBugInfo.innerHTML = "* Version: " + PKG_VERSION + "\n" +
+            "* Compile time: " + COMPILE_TIME + "\n" +
             "* User-Agent: \n" + navigator.userAgent + "\n" +
             "* [Link to reproduce](" + saveLink + ")\n\n";
     }
 };
 
+
+/**
+ * Shows the stale indicator to show that the input or recipe has changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.showStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.visibility = "visible";
+    staleIndicator.style.opacity = 1;
+};
+
+
+/**
+ * Hides the stale indicator to show that the input or recipe has not changed
+ * since the last bake.
+ */
+ControlsWaiter.prototype.hideStaleIndicator = function() {
+    const staleIndicator = document.getElementById("stale-indicator");
+
+    staleIndicator.style.opacity = 0;
+    staleIndicator.style.visibility = "hidden";
+};
+
+
+/**
+ * Switches the Bake button between 'Bake' and 'Cancel' functions.
+ *
+ * @param {boolean} cancel - Whether to change to cancel or not
+ */
+ControlsWaiter.prototype.toggleBakeButtonFunction = function(cancel) {
+    const bakeButton = document.getElementById("bake"),
+        btnText = bakeButton.querySelector("span");
+
+    if (cancel) {
+        btnText.innerText = "Cancel";
+        bakeButton.classList.remove("btn-success");
+        bakeButton.classList.add("btn-danger");
+    } else {
+        btnText.innerText = "Bake!";
+        bakeButton.classList.remove("btn-danger");
+        bakeButton.classList.add("btn-success");
+    }
+};
+
 export default ControlsWaiter;

src/web/HighlighterWaiter.js

@@ -10,9 +10,11 @@ import Utils from "../core/Utils.js";
  *
  * @constructor
  * @param {App} app - The main view object for CyberChef.
+ * @param {Manager} manager - The CyberChef event manager.
  */
-const HighlighterWaiter = function(app) {
+const HighlighterWaiter = function(app, manager) {
     this.app = app;
+    this.manager = manager;
 
     this.mouseButtonDown = false;
     this.mouseTarget = null;
@@ -329,41 +331,6 @@ HighlighterWaiter.prototype.removeHighlights = function() {
 };
 
 
-/**
- * Generates a list of all the highlight functions assigned to operations in the recipe, if the
- * entire recipe supports highlighting.
- *
- * @returns {Object[]} highlights
- * @returns {function} highlights[].f
- * @returns {function} highlights[].b
- * @returns {Object[]} highlights[].args
- */
-HighlighterWaiter.prototype.generateHighlightList = function() {
-    const recipeConfig = this.app.getRecipeConfig();
-    const highlights = [];
-
-    for (let i = 0; i < recipeConfig.length; i++) {
-        if (recipeConfig[i].disabled) continue;
-
-        // If any breakpoints are set, do not attempt to highlight
-        if (recipeConfig[i].breakpoint) return false;
-
-        const op = this.app.operations[recipeConfig[i].op];
-
-        // If any of the operations do not support highlighting, fail immediately.
-        if (op.highlight === false || op.highlight === undefined) return false;
-
-        highlights.push({
-            f: op.highlight,
-            b: op.highlightReverse,
-            args: recipeConfig[i].args
-        });
-    }
-
-    return highlights;
-};
-
-
 /**
  * Highlights the given offsets in the output.
  * We will only highlight if:
@@ -376,26 +343,8 @@ HighlighterWaiter.prototype.generateHighlightList = function() {
  * @param {number} pos.end - The end offset.
  */
 HighlighterWaiter.prototype.highlightOutput = function(pos) {
-    const highlights = this.generateHighlightList();
-
-    if (!highlights || !this.app.autoBake_) {
-        return false;
-    }
-
-    for (let i = 0; i < highlights.length; i++) {
-        // Remove multiple highlights before processing again
-        pos = [pos[0]];
-
-        if (typeof highlights[i].f == "function") {
-            pos = highlights[i].f(pos, highlights[i].args);
-        }
-    }
-
-    document.getElementById("output-selection-info").innerHTML = this.selectionInfo(pos[0].start, pos[0].end);
-    this.highlight(
-        document.getElementById("output-text"),
-        document.getElementById("output-highlighter"),
-        pos);
+    if (!this.app.autoBake_ || this.app.baking) return false;
+    this.manager.worker.highlight(this.app.getRecipeConfig(), "forward", pos);
 };
 
 
@@ -411,25 +360,28 @@ HighlighterWaiter.prototype.highlightOutput = function(pos) {
  * @param {number} pos.end - The end offset.
  */
 HighlighterWaiter.prototype.highlightInput = function(pos) {
-    const highlights = this.generateHighlightList();
+    if (!this.app.autoBake_ || this.app.baking) return false;
+    this.manager.worker.highlight(this.app.getRecipeConfig(), "reverse", pos);
+};
 
-    if (!highlights || !this.app.autoBake_) {
-        return false;
-    }
 
-    for (let i = 0; i < highlights.length; i++) {
-        // Remove multiple highlights before processing again
-        pos = [pos[0]];
+/**
+ * Displays highlight offsets sent back from the Chef.
+ *
+ * @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
+ */
+HighlighterWaiter.prototype.displayHighlights = function(pos, direction) {
+    if (!pos) return;
 
-        if (typeof highlights[i].b == "function") {
-            pos = highlights[i].b(pos, highlights[i].args);
-        }
-    }
+    const io = direction === "forward" ? "output" : "input";
 
-    document.getElementById("input-selection-info").innerHTML = this.selectionInfo(pos[0].start, pos[0].end);
+    document.getElementById(io + "-selection-info").innerHTML = this.selectionInfo(pos[0].start, pos[0].end);
     this.highlight(
-        document.getElementById("input-text"),
-        document.getElementById("input-highlighter"),
+        document.getElementById(io + "-text"),
+        document.getElementById(io + "-highlighter"),
         pos);
 };
 
@@ -493,13 +445,14 @@ HighlighterWaiter.prototype.highlight = function(textarea, highlighter, pos) {
     //if (colour) cssClass += "-"+colour;
 
     // 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;";
+    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";

src/web/InputWaiter.js

@@ -158,17 +158,13 @@ InputWaiter.prototype.inputDrop = function(e) {
     const CHUNK_SIZE = 20480; // 20KB
 
     const setInput = function() {
-        if (inputCharcode.length > 100000 && this.app.autoBake_) {
-            this.manager.controls.setAutoBake(false);
-            this.app.alert("Turned off Auto Bake as the input is large", "warning", 5000);
+        const recipeConfig = this.app.getRecipeConfig();
+        if (!recipeConfig[0] || recipeConfig[0].op !== "From Hex") {
+            recipeConfig.unshift({op: "From Hex", args: ["Space"]});
+            this.app.setRecipeConfig(recipeConfig);
         }
 
         this.set(inputCharcode);
-        const recipeConfig = this.app.getRecipeConfig();
-        if (!recipeConfig[0] || recipeConfig[0].op !== "From Hex") {
-            recipeConfig.unshift({op:"From Hex", args:["Space"]});
-            this.app.setRecipeConfig(recipeConfig);
-        }
 
         el.classList.remove("loadingFile");
     }.bind(this);

src/web/Manager.js

@@ -1,3 +1,4 @@
+import WorkerWaiter from "./WorkerWaiter.js";
 import WindowWaiter from "./WindowWaiter.js";
 import ControlsWaiter from "./ControlsWaiter.js";
 import RecipeWaiter from "./RecipeWaiter.js";
@@ -27,6 +28,10 @@ const Manager = function(app) {
      * @event Manager#appstart
      */
     this.appstart = new CustomEvent("appstart", {bubbles: true});
+    /**
+     * @event Manager#apploaded
+     */
+    this.apploaded = new CustomEvent("apploaded", {bubbles: true});
     /**
      * @event Manager#operationadd
      */
@@ -45,6 +50,7 @@ const Manager = function(app) {
     this.statechange = new CustomEvent("statechange", {bubbles: true});
 
     // Define Waiter objects to handle various areas
+    this.worker      = new WorkerWaiter(this.app, this);
     this.window      = new WindowWaiter(this.app);
     this.controls    = new ControlsWaiter(this.app, this);
     this.recipe      = new RecipeWaiter(this.app, this);
@@ -52,7 +58,7 @@ const Manager = function(app) {
     this.input       = new InputWaiter(this.app, this);
     this.output      = new OutputWaiter(this.app, this);
     this.options     = new OptionsWaiter(this.app);
-    this.highlighter = new HighlighterWaiter(this.app);
+    this.highlighter = new HighlighterWaiter(this.app, this);
     this.seasonal    = new SeasonalWaiter(this.app, this);
 
     // Object to store dynamic handlers to fire on elements that may not exist yet
@@ -66,6 +72,7 @@ const Manager = function(app) {
  * Sets up the various components and listeners.
  */
 Manager.prototype.setup = function() {
+    this.worker.registerChefWorker();
     this.recipe.initialiseOperationDragNDrop();
     this.controls.autoBakeChange();
     this.seasonal.load();
@@ -98,7 +105,7 @@ Manager.prototype.initialiseEventListeners = function() {
     document.getElementById("load-name").addEventListener("change", this.controls.loadNameChange.bind(this.controls));
     document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
     document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
-    this.addMultiEventListener("#save-text", "keyup paste", this.controls.saveTextChange, this.controls);
+    this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
 
     // Operations
     this.addMultiEventListener("#search", "keyup paste search", this.ops.searchOperations, this.ops);
@@ -112,8 +119,8 @@ Manager.prototype.initialiseEventListeners = function() {
     this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd.bind(this.recipe));
 
     // Recipe
-    this.addDynamicListener(".arg", "keyup", this.recipe.ingChange, this.recipe);
-    this.addDynamicListener(".arg", "change", this.recipe.ingChange, this.recipe);
+    this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe);
+    this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
     this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
     this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
     this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
@@ -145,6 +152,7 @@ Manager.prototype.initialiseEventListeners = function() {
     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(".file-switch", "click", this.output.fileSwitch, this.output);
 
     // Options
     document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));

src/web/OperationsWaiter.js

@@ -38,7 +38,6 @@ OperationsWaiter.prototype.searchOperations = function(e) {
             selected = this.getSelectedOp(ops);
             if (selected > -1) {
                 this.manager.recipe.addOperation(ops[selected].innerHTML);
-                this.app.autoBake();
             }
         }
     }
@@ -155,7 +154,35 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
  */
 OperationsWaiter.prototype.opListCreate = function(e) {
     this.manager.recipe.createSortableSeedList(e.target);
-    $("[data-toggle=popover]").popover();
+    this.enableOpsListPopovers(e.target);
+};
+
+
+/**
+ * Sets up popovers, allowing the popover itself to gain focus which enables scrolling
+ * and other interactions.
+ *
+ * @param {Element} el - The element to start selecting from
+ */
+OperationsWaiter.prototype.enableOpsListPopovers = function(el) {
+    $(el).find("[data-toggle=popover]").addBack("[data-toggle=popover]")
+        .popover({trigger: "manual"})
+        .on("mouseenter", function() {
+            const _this = this;
+            $(this).popover("show");
+            $(".popover").on("mouseleave", function () {
+                $(_this).popover("hide");
+            });
+        }).on("mouseleave", function () {
+            const _this = this;
+            setTimeout(function() {
+                // Determine if the popover associated with this element is being hovered over
+                if ($(_this).data("bs.popover") &&
+                    !$(_this).data("bs.popover").$tip.is(":hover")) {
+                    $(_this).popover("hide");
+                }
+            }, 50);
+        });
 };
 
 
@@ -169,7 +196,6 @@ OperationsWaiter.prototype.operationDblclick = function(e) {
     const li = e.target;
 
     this.manager.recipe.addOperation(li.textContent);
-    this.app.autoBake();
 };
 
 
@@ -203,7 +229,7 @@ OperationsWaiter.prototype.editFavouritesClick = function(e) {
         filter: ".remove-icon",
         onFilter: function (evt) {
             const el = editableList.closest(evt.item);
-            if (el) {
+            if (el && el.parentNode) {
                 $(el).popover("destroy");
                 el.parentNode.removeChild(el);
             }

src/web/OptionsWaiter.js

@@ -57,8 +57,11 @@ OptionsWaiter.prototype.load = function(options) {
 /**
  * Handler for options click events.
  * Dispays the options pane.
+ *
+ * @param {event} e
  */
-OptionsWaiter.prototype.optionsClick = function() {
+OptionsWaiter.prototype.optionsClick = function(e) {
+    e.preventDefault();
     $("#options-modal").modal();
 };
 
@@ -84,7 +87,9 @@ OptionsWaiter.prototype.switchChange = function(e, state) {
     const option = el.getAttribute("option");
 
     this.app.options[option] = state;
-    localStorage.setItem("options", JSON.stringify(this.app.options));
+
+    if (this.app.isLocalStorageAvailable())
+        localStorage.setItem("options", JSON.stringify(this.app.options));
 };
 
 
@@ -99,7 +104,9 @@ OptionsWaiter.prototype.numberChange = function(e) {
     const option = el.getAttribute("option");
 
     this.app.options[option] = parseInt(el.value, 10);
-    localStorage.setItem("options", JSON.stringify(this.app.options));
+
+    if (this.app.isLocalStorageAvailable())
+        localStorage.setItem("options", JSON.stringify(this.app.options));
 };
 
 
@@ -114,7 +121,9 @@ OptionsWaiter.prototype.selectChange = function(e) {
     const option = el.getAttribute("option");
 
     this.app.options[option] = el.value;
-    localStorage.setItem("options", JSON.stringify(this.app.options));
+
+    if (this.app.isLocalStorageAvailable())
+        localStorage.setItem("options", JSON.stringify(this.app.options));
 };
 
 

src/web/OutputWaiter.js

@@ -167,6 +167,17 @@ OutputWaiter.prototype.undoSwitchClick = function() {
     document.getElementById("undo-switch").disabled = true;
 };
 
+/**
+ * Handler for file switch click events.
+ * Moves a files data for items created via Utils.displayFilesAsHTML to the input.
+ */
+OutputWaiter.prototype.fileSwitch = function(e) {
+    e.preventDefault();
+    this.switchOrigData = this.manager.input.get();
+    this.app.setInput(e.target.getAttribute("fileValue"));
+    document.getElementById("undo-switch").disabled = false;
+};
+
 
 /**
  * Handler for maximise output click events.
@@ -190,4 +201,44 @@ OutputWaiter.prototype.maximiseOutputClick = function(e) {
     }
 };
 
+
+/**
+ * Shows or hides the loading icon.
+ *
+ * @param {boolean} value
+ */
+OutputWaiter.prototype.toggleLoader = function(value) {
+    const outputLoader = document.getElementById("output-loader"),
+        outputElement = document.getElementById("output-text");
+
+    if (value) {
+        this.manager.controls.hideStaleIndicator();
+        this.bakingStatusTimeout = setTimeout(function() {
+            outputElement.disabled = true;
+            outputLoader.style.visibility = "visible";
+            outputLoader.style.opacity = 1;
+            this.manager.controls.toggleBakeButtonFunction(true);
+        }.bind(this), 200);
+    } else {
+        clearTimeout(this.bakingStatusTimeout);
+        outputElement.disabled = false;
+        outputLoader.style.opacity = 0;
+        outputLoader.style.visibility = "hidden";
+        this.manager.controls.toggleBakeButtonFunction(false);
+        this.setStatusMsg("");
+    }
+};
+
+
+/**
+ * Sets the baking status message value.
+ *
+ * @param {string} msg
+ */
+OutputWaiter.prototype.setStatusMsg = function(msg) {
+    const el = document.querySelector("#output-loader .loading-msg");
+
+    el.textContent = msg;
+};
+
 export default OutputWaiter;

src/web/RecipeWaiter.js

@@ -1,5 +1,6 @@
 import HTMLOperation from "./HTMLOperation.js";
 import Sortable from "sortablejs";
+import Utils from "../core/Utils.js";
 
 
 /**
@@ -93,7 +94,7 @@ RecipeWaiter.prototype.createSortableSeedList = function(listEl) {
             // Removes popover element and event bindings from the dragged operation but not the
             // event bindings from the one left in the operations list. Without manually removing
             // these bindings, we cannot re-initialise the popover on the stub operation.
-            $(evt.item).popover("destroy");
+            $(evt.item).popover("destroy").removeData("bs.popover").off("mouseenter").off("mouseleave");
             $(evt.clone).off(".popover").removeData("bs.popover");
             evt.item.setAttribute("data-toggle", "popover-disabled");
         },
@@ -120,8 +121,7 @@ RecipeWaiter.prototype.opSortEnd = function(evt) {
 
     // Reinitialise the popover on the original element in the ops list because for some reason it
     // gets destroyed and recreated.
-    $(evt.clone).popover();
-    $(evt.clone).children("[data-toggle=popover]").popover();
+    this.manager.ops.enableOpsListPopovers(evt.clone);
 
     if (evt.item.parentNode.id !== "rec-list") {
         return;
@@ -192,7 +192,7 @@ RecipeWaiter.prototype.favDrop = function(e) {
  *
  * @fires Manager#statechange
  */
-RecipeWaiter.prototype.ingChange = function() {
+RecipeWaiter.prototype.ingChange = function(e) {
     window.dispatchEvent(this.manager.statechange);
 };
 
@@ -296,6 +296,9 @@ RecipeWaiter.prototype.getConfig = function() {
                     option: ingList[j].previousSibling.children[0].textContent.slice(0, -1),
                     string: ingList[j].value
                 };
+            } else if (ingList[j].getAttribute("type") === "number") {
+                // number
+                ingredients[j] = parseFloat(ingList[j].value, 10);
             } else {
                 // all others
                 ingredients[j] = ingList[j].value;
@@ -433,4 +436,30 @@ RecipeWaiter.prototype.opRemove = function(e) {
     window.dispatchEvent(this.manager.statechange);
 };
 
+
+/**
+ * Sets register values.
+ *
+ * @param {number} opIndex
+ * @param {number} numPrevRegisters
+ * @param {string[]} registers
+ */
+RecipeWaiter.prototype.setRegisters = function(opIndex, numPrevRegisters, registers) {
+    const op = document.querySelector(`#rec-list .operation:nth-child(${opIndex + 1})`),
+        prevRegList = op.querySelector(".register-list");
+
+    // Remove previous div
+    if (prevRegList) prevRegList.remove();
+
+    let registerList = [];
+    for (let i = 0; i < registers.length; i++) {
+        registerList.push(`$R${numPrevRegisters + i} = ${Utils.escapeHtml(Utils.truncate(Utils.printable(registers[i]), 100))}`);
+    }
+    const registerListEl = `<div class="register-list">
+            ${registerList.join("<br>")}
+        </div>`;
+
+    op.insertAdjacentHTML("beforeend", registerListEl);
+};
+
 export default RecipeWaiter;

src/web/WorkerWaiter.js

@@ -0,0 +1,183 @@
+import Utils from "../core/Utils.js";
+import ChefWorker from "worker-loader?inline&fallback=false!../core/ChefWorker.js";
+
+/**
+ * Waiter to handle conversations with the ChefWorker.
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ *
+ * @constructor
+ * @param {App} app - The main view object for CyberChef.
+ * @param {Manager} manager - The CyberChef event manager.
+ */
+const WorkerWaiter = function(app, manager) {
+    this.app = app;
+    this.manager = manager;
+};
+
+
+/**
+ * Sets up the ChefWorker and associated listeners.
+ */
+WorkerWaiter.prototype.registerChefWorker = function() {
+    this.chefWorker = new ChefWorker();
+    this.chefWorker.addEventListener("message", this.handleChefMessage.bind(this));
+
+    let docURL = document.location.href.split(/[#?]/)[0];
+    const index = docURL.lastIndexOf("/");
+    if (index > 0) {
+        docURL = docURL.substring(0, index);
+    }
+    this.chefWorker.postMessage({"action": "docURL", "data": docURL});
+};
+
+
+/**
+ * Handler for messages sent back by the ChefWorker.
+ *
+ * @param {MessageEvent} e
+ */
+WorkerWaiter.prototype.handleChefMessage = function(e) {
+    const r = e.data;
+    switch (r.action) {
+        case "bakeSuccess":
+            this.bakingComplete(r.data);
+            break;
+        case "bakeError":
+            this.app.handleError(r.data);
+            this.setBakingStatus(false);
+            break;
+        case "silentBakeComplete":
+            break;
+        case "workerLoaded":
+            this.app.workerLoaded = true;
+            this.app.loaded();
+            break;
+        case "statusMessage":
+            this.manager.output.setStatusMsg(r.data);
+            break;
+        case "optionUpdate":
+            this.app.options[r.data.option] = r.data.value;
+            break;
+        case "setRegisters":
+            this.manager.recipe.setRegisters(r.data.opIndex, r.data.numPrevRegisters, r.data.registers);
+            break;
+        case "highlightsCalculated":
+            this.manager.highlighter.displayHighlights(r.data.pos, r.data.direction);
+            break;
+        default:
+            console.error("Unrecognised message from ChefWorker", e);
+            break;
+    }
+};
+
+
+/**
+ * Updates the UI to show if baking is in process or not.
+ *
+ * @param {bakingStatus}
+ */
+WorkerWaiter.prototype.setBakingStatus = function(bakingStatus) {
+    this.app.baking = bakingStatus;
+
+    this.manager.output.toggleLoader(bakingStatus);
+};
+
+
+/**
+ * Cancels the current bake by terminating the ChefWorker and creating a new one.
+ */
+WorkerWaiter.prototype.cancelBake = function() {
+    this.chefWorker.terminate();
+    this.registerChefWorker();
+    this.setBakingStatus(false);
+    this.manager.controls.showStaleIndicator();
+};
+
+
+/**
+ * Handler for completed bakes.
+ *
+ * @param {Object} response
+ */
+WorkerWaiter.prototype.bakingComplete = function(response) {
+    this.setBakingStatus(false);
+
+    if (!response) return;
+
+    if (response.error) {
+        this.app.handleError(response.error);
+    }
+
+    this.app.dishStr  = response.type === "html" ? Utils.stripHtmlTags(response.result, true) : response.result;
+    this.app.progress = response.progress;
+    this.manager.recipe.updateBreakpointIndicator(response.progress);
+    this.manager.output.set(response.result, response.type, response.duration);
+};
+
+
+/**
+ * Asks the ChefWorker to bake the current input using the current recipe.
+ *
+ * @param {string} input
+ * @param {Object[]} recipeConfig
+ * @param {Object} options
+ * @param {number} progress
+ * @param {boolean} step
+ */
+WorkerWaiter.prototype.bake = function(input, recipeConfig, options, progress, step) {
+    this.setBakingStatus(true);
+
+    this.chefWorker.postMessage({
+        action: "bake",
+        data: {
+            input: input,
+            recipeConfig: recipeConfig,
+            options: options,
+            progress: progress,
+            step: step
+        }
+    });
+};
+
+
+/**
+ * Asks the ChefWorker to run a silent bake, forcing the browser to load and cache all the relevant
+ * JavaScript code needed to do a real bake.
+ *
+ * @param {Objectp[]} [recipeConfig]
+ */
+WorkerWaiter.prototype.silentBake = function(recipeConfig) {
+    this.chefWorker.postMessage({
+        action: "silentBake",
+        data: {
+            recipeConfig: recipeConfig
+        }
+    });
+};
+
+
+/**
+ * Asks the ChefWorker to calculate highlight offsets if possible.
+ *
+ * @param {Object[]} recipeConfig
+ * @param {string} direction
+ * @param {Object} pos - The position object for the highlight.
+ * @param {number} pos.start - The start offset.
+ * @param {number} pos.end - The end offset.
+ */
+WorkerWaiter.prototype.highlight = function(recipeConfig, direction, pos) {
+    this.chefWorker.postMessage({
+        action: "highlight",
+        data: {
+            recipeConfig: recipeConfig,
+            direction: direction,
+            pos: pos
+        }
+    });
+};
+
+
+export default WorkerWaiter;

src/web/html/index.html

@@ -26,14 +26,20 @@
         <title>CyberChef</title>
         
         <meta name="copyright" content="Crown Copyright 2016" />
-        <meta name="description" content="The Cyber Swiss Army Knife" />
+        <meta name="description" content="The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis" />
         <meta name="keywords" content="base64, hex, decode, encode, encrypt, decrypt, compress, decompress, regex, regular expressions, hash, crypt, hexadecimal, user agent, url, certificate, x.509, parser, JSON, gzip,  md5, sha1, aes, des, blowfish, xor" />
 
         <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
 
         <script type="application/javascript">
+            "use strict";
+
             // Load theme before the preloader is shown
-            document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
+            try {
+                document.querySelector(":root").className = (JSON.parse(localStorage.getItem("options")) || {}).theme;
+            } catch (err) {
+                // LocalStorage access is denied by security settings
+            }
 
             // Define loading messages
             const loadingMsgs = [
@@ -44,10 +50,15 @@
                 "Initialising Skynet...",
                 "[REDACTED]",
                 "Downloading more RAM...",
-                "Loading more loading messages...",
                 "Ordering 1s and 0s...",
                 "Navigating neural network...",
-                "Importing machine learning..."
+                "Importing machine learning...",
+                "Issuing Alice and Bob one-time pads...",
+                "Mining bitcoin cash...",
+                "Generating key material by trying to escape vim...",
+                "for i in range(additional): Pylon()",
+                "(creating unresolved tension...",
+                "Symlinking emacs and vim to ed...",
             ];
 
             // Shuffle array using Durstenfeld algorithm
@@ -58,26 +69,32 @@
                 loadingMsgs[j] = temp;
             }
 
-            // Show next loading message then move it to the end of the array
+            // Show next loading message and move it to the end of the array
             function changeLoadingMsg() {
                 const msg = loadingMsgs.shift();
+                loadingMsgs.push(msg);
                 try {
                     const el = document.getElementById("preloader-msg");
-                    el.className = "loading"; // Causes CSS transition on first message
+                    if (!el.classList.contains("loading"))
+                        el.classList.add("loading"); // Causes CSS transition on first message
                     el.innerHTML = msg;
                 } catch (err) {} // Ignore errors if DOM not yet ready
-                loadingMsgs.push(msg);
             }
 
             changeLoadingMsg();
-            window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 1000) + 1000);
+            window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 2000) + 1500);
         </script>
+        <% if (!htmlWebpackPlugin.options.inline) { %>
+            <script type="application/ld+json">
+                <% print(JSON.stringify(require("../static/structuredData.json"))); %>
+            </script>
+        <% } %>
     </head>
     <body>
         <!-- Preloader overlay -->
         <div id="loader-wrapper">
-            <div id="preloader"></div>
-            <div id="preloader-msg"></div>
+            <div id="preloader" class="loader"></div>
+            <div id="preloader-msg" class="loading-msg"></div>
         </div>
         <!-- End preloader overlay -->
         <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
@@ -87,23 +104,29 @@
         </div>
         <div id="content-wrapper">
             <div id="banner">
-                <% if (htmlWebpackPlugin.options.inline) { %>
-                    <span style="float: left; margin-left: 10px;">Compile time: <%= htmlWebpackPlugin.options.compileTime %></span>
-                <% } else { %>
-                    <a href="cyberchef.htm" style="float: left; margin-left: 10px; margin-right: 80px;" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
-                <% } %>
-                <span id="notice">
-                    <script type="text/javascript">
-                        // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
-                        if (navigator.userAgent && navigator.userAgent.match(/MSIE \d\d?\./)) {
-                            document.write("Internet Explorer is not supported, please use Firefox or Chrome instead");
-                            alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
-                        }
-                    </script>
-                    <noscript>JavaScript is not enabled. Good luck.</noscript>
-                </span>
-                <a href="#" id="support" class="banner-right" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
-                <a href="#" id="options" class="banner-right">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
+                <div class="col-md-4" style="text-align: left; padding-left: 10px;">
+                    <% if (htmlWebpackPlugin.options.inline) { %>
+                        <span>Version <%= htmlWebpackPlugin.options.version %></span>
+                    <% } else { %>
+                        <a href="cyberchef.htm" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
+                    <% } %>
+                </div>
+                <div class="col-md-4" style="text-align: center;">
+                    <span id="notice">
+                        <script type="text/javascript">
+                            // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
+                            if (navigator.userAgent && navigator.userAgent.match(/MSIE \d\d?\./)) {
+                                document.write("Internet Explorer is not supported, please use Firefox or Chrome instead");
+                                alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
+                            }
+                        </script>
+                        <noscript>JavaScript is not enabled. Good luck.</noscript>
+                    </span>
+                </div>
+                <div class="col-md-4" style="text-align: right; padding-right: 0;">
+                    <a href="#" id="options">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
+                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
+                </div>
             </div>
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
@@ -122,7 +145,7 @@
                             <div id="bake-group">
                                 <button type="button" class="btn btn-success btn-lg" id="bake">
                                     <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
-                                    Bake!
+                                    <span>Bake!</span>
                                 </button>
                                 <label class="btn btn-success btn-lg" id="auto-bake-label" for="auto-bake">
                                     <input type="checkbox" checked="checked" id="auto-bake">
@@ -148,7 +171,6 @@
                     <div id="input" class="split no-select">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
-                            <div class="loading-icon" style="display: none"></div>
                             <div class="btn-group io-btn-group">
                                 <button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
                                 <button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
@@ -165,7 +187,6 @@
                     <div id="output" class="split">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
-                            <div class="loading-icon" style="display: none"></div>
                             <div class="btn-group io-btn-group">
                                 <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
                                 <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
@@ -174,11 +195,16 @@
                             </div>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
+                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">&#x1F551;</span>
                         </div>
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>
                             <div id="output-html"></div>
                             <textarea id="output-text" readonly="readonly"></textarea>
+                            <div id="output-loader">
+                                <div class="loader"></div>
+                                <div class="loading-msg"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -195,7 +221,22 @@
                     <div class="modal-body">
                         <div class="form-group">
                             <label for="save-text">Save your recipe to local storage or copy the following string to load later</label>
-                            <textarea class="form-control" id="save-text" rows="5"></textarea>
+                            <ul class="nav nav-tabs" role="tablist">
+                                <li role="presentation" class="active"><a href="#chef-format" role="tab" data-toggle="tab">Chef format</a></li>
+                                <li role="presentation"><a href="#clean-json" role="tab" data-toggle="tab">Clean JSON</a></li>
+                                <li role="presentation"><a href="#compact-json" role="tab" data-toggle="tab">Compact JSON</a></li>
+                            </ul>
+                            <div class="tab-content" id="save-texts">
+                                <div role="tabpanel" class="tab-pane active" id="chef-format">
+                                    <textarea class="form-control" id="save-text-chef" rows="5"></textarea>
+                                </div>
+                                <div role="tabpanel" class="tab-pane" id="clean-json">
+                                    <textarea class="form-control" id="save-text-clean" rows="5"></textarea>
+                                </div>
+                                <div role="tabpanel" class="tab-pane" id="compact-json">
+                                    <textarea class="form-control" id="save-text-compact" rows="5"></textarea>
+                                </div>
+                            </div>
                         </div>
                         <div class="form-group">
                             <label for="save-name">Recipe name</label>
@@ -260,36 +301,33 @@
                             <select option="theme" id="theme">
                                 <option value="classic">Classic</option>
                                 <option value="dark">Dark</option>
+                                <option value="geocities">GeoCities</option>
                             </select>
                             <label for="theme"> Theme (only supported in modern browsers)</label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="update_url" id="update_url" checked />
-                            <label for="update_url"> Update the URL when the input or recipe changes </label>
+                            <input type="checkbox" option="updateUrl" id="updateUrl" checked />
+                            <label for="updateUrl"> Update the URL when the input or recipe changes </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="show_highlighter" id="show_highlighter" checked />
-                            <label for="show_highlighter"> Highlight selected bytes in output and input (when possible) </label>
+                            <input type="checkbox" option="showHighlighter" id="showHighlighter" checked />
+                            <label for="showHighlighter"> Highlight selected bytes in output and input (when possible) </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="treat_as_utf8" id="treat_as_utf8" checked />
-                            <label for="treat_as_utf8"> Treat output as UTF-8 if possible </label>
+                            <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked />
+                            <label for="treatAsUtf8"> Treat output as UTF-8 if possible </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="word_wrap" id="word_wrap" checked />
-                            <label for="word_wrap"> Word wrap the input and output </label>
+                            <input type="checkbox" option="wordWrap" id="wordWrap" checked />
+                            <label for="wordWrap"> Word wrap the input and output </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="show_errors" id="show_errors" checked />
-                            <label for="show_errors"> Operation error reporting (recommended) </label>
+                            <input type="checkbox" option="showErrors" id="showErrors" checked />
+                            <label for="showErrors"> Operation error reporting (recommended) </label>
                         </div>
                         <div class="option-item">
-                            <input type="number" option="error_timeout" id="error_timeout" />
-                            <label for="error_timeout"> Operation error timeout in ms (0 for never) </label>
-                        </div>
-                        <div class="option-item">
-                            <input type="number" option="auto_bake_threshold" id="auto_bake_threshold"/>
-                            <label for="auto_bake_threshold"> Auto Bake threshold in ms </label>
+                            <input type="number" option="errorTimeout" id="errorTimeout" />
+                            <label for="errorTimeout"> Operation error timeout in ms (0 for never) </label>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -341,7 +379,12 @@
                             Compile time: <%= htmlWebpackPlugin.options.compileTime %>
                         </p>
                         <p>&copy; Crown Copyright 2016.</p>
-                        <p>Licenced under the Apache Licence, Version 2.0.</p>
+                        <p>Released under the Apache Licence, Version 2.0.</p>
+                        <p>
+                            <a href="https://gitter.im/gchq/CyberChef">
+                                <img src="<%- require('../static/images/gitter-badge.svg') %>">
+                            </a>
+                        </p>
                         <br>
                         <br>
                         <div>
@@ -368,14 +411,16 @@
                                         </a>
                                     </blockquote>
                                     <div class="collapse" id="faq-examples">
-                                        <p>There are well over 100 operations in CyberChef allowing you to carry simple and complex tasks easily. Here are some examples:</p>
+                                        <p>There are around 200 operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
                                         <ul>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22From%20Base64%22%2C%22args%22%3A%5B%22A-Za-z0-9%2B%2F%3D%22%2Ctrue%5D%7D%5D&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22Translate%20DateTime%20Format%22%2C%22args%22%3A%5B%22Standard%20date%20and%20time%22%2C%22DD%2FMM%2FYYYY%20HH%3Amm%3Ass%22%2C%22UTC%22%2C%22dddd%20Do%20MMMM%20YYYY%20HH%3Amm%3Ass%20Z%20z%22%2C%22Australia%2FQueensland%22%5D%7D%5D&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22Parse%20IPv6%20address%22%2C%22args%22%3A%5B%5D%7D%5D&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse a Teredo IPv6 address</a></li>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22From%20Hexdump%22%2C%22args%22%3A%5B%5D%7D%2C%7B%22op%22%3A%22Gunzip%22%2C%22args%22%3A%5B%5D%7D%5D&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu%2Fy7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb%2F3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert data from a hexdump, then decompress</a></li>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22Fork%22%2C%22args%22%3A%5B%22%5C%5Cn%22%2C%22%5C%5Cn%22%5D%7D%2C%7B%22op%22%3A%22From%20UNIX%20Timestamp%22%2C%22args%22%3A%5B%22Seconds%20(s)%22%5D%7D%5D&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display multiple timestamps as full dates</a></li>
-                                            <li><a href="?recipe=%5B%7B%22op%22%3A%22Fork%22%2C%22args%22%3A%5B%22%5C%5Cn%22%2C%22%5C%5Cn%22%5D%7D%2C%7B%22op%22%3A%22Conditional%20Jump%22%2C%22args%22%3A%5B%221%22%2C%222%22%2C%2210%22%5D%7D%2C%7B%22op%22%3A%22To%20Hex%22%2C%22args%22%3A%5B%22Space%22%5D%7D%2C%7B%22op%22%3A%22Return%22%2C%22args%22%3A%5B%5D%7D%2C%7B%22op%22%3A%22To%20Base64%22%2C%22args%22%3A%5B%22A-Za-z0-9%2B%2F%3D%22%5D%7D%5D&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry out different operations on data of different types</a></li>
+                                            <li><a href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
+                                            <li><a href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>
+                                            <li><a href="#recipe=Parse_IPv6_address()&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse a Teredo IPv6 address</a></li>
+                                            <li><a href="#recipe=From_Hexdump()Gunzip()&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu/y7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb/3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert data from a hexdump, then decompress</a></li>
+                                            <li><a href="#recipe=RC4(%7B'option':'UTF8','string':'secret'%7D,'Hex','Hex')Disassemble_x86('64','Full%20x86%20architecture',16,0,true,true)&input=MjFkZGQyNTQwMTYwZWU2NWZlMDc3NzEwM2YyYTM5ZmJlNWJjYjZhYTBhYWJkNDE0ZjkwYzZjYWY1MzEyNzU0YWY3NzRiNzZiM2JiY2QxOTNjYjNkZGZkYmM1YTI2NTMzYTY4NmI1OWI4ZmVkNGQzODBkNDc0NDIwMWFlYzIwNDA1MDcxMzhlMmZlMmIzOTUwNDQ2ZGIzMWQyYmM2MjliZTRkM2YyZWIwMDQzYzI5M2Q3YTVkMjk2MmMwMGZlNmRhMzAwNzJkOGM1YTZiNGZlN2Q4NTlhMDQwZWVhZjI5OTczMzYzMDJmNWEwZWMxOQ">Decrypt and disassemble shellcode</a></li>
+                                            <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display multiple timestamps as full dates</a></li>
+                                            <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)Conditional_Jump('1',2,10)To_Hex('Space')Return()To_Base64('A-Za-z0-9%2B/%3D')&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry out different operations on data of different types</a></li>
+                                            <li><a href="#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ">Use parts of the input as arguments to operations</a></li>
                                         </ul>
                                     </div>
                                     <blockquote>
@@ -395,7 +440,7 @@
                                     <div class="collapse" id="faq-fork">
                                         <p>Maybe you have 10 timestamps that you want to parse or 16 encoded strings that all have the same key.</p>
                                         <p>The 'Fork' operation (found in the 'Flow control' category) splits up the input line by line and runs all subsequent operations on each line separately. Each output is then displayed on a separate line. These delimiters can be changed, so if your inputs are separated by commas, you can change the split delimiter to a comma instead.</p>
-                                        <p><a href='?recipe=%5B%7B"op"%3A"Fork"%2C"args"%3A%5B"%5C%5Cn"%2C"%5C%5Cn"%5D%7D%2C%7B"op"%3A"From%20UNIX%20Timestamp"%2C"args"%3A%5B"Seconds%20(s)"%5D%7D%5D&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA%3D%3D'>Click here</a> for an example.</p>
+                                        <p><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Click here</a> for an example.</p>
                                     </div>
                                 </div>
                                 <div role="tabpanel" class="tab-pane" id="report-bug">
@@ -407,21 +452,25 @@
                                     <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new" role="button">Raise issue on GitHub</a>
                                 </div>
                                 <div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
-                                    <h4>What</h4>
-                                    <p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p>
+                                    <h5><strong>What</strong></h5>
+                                    <p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p><br>
                                     
-                                    <h4>Why</h4>
-                                    <p>Digital data comes in all shapes, sizes and formats in the modern world – CyberChef helps to make sense of this data all on one easy-to-use platform.</p>
+                                    <h5><strong>Why</strong></h5>
+                                    <p>Digital data comes in all shapes, sizes and formats in the modern world – CyberChef helps to make sense of this data all on one easy-to-use platform.</p><br>
+
                                     
-                                    <h4>How</h4>
+                                    <h5><strong>How</strong></h5>
                                     <p>The interface is designed with simplicity at its heart. Complex techniques are now as trivial as drag-and-drop. Simple functions can be combined to build up a "recipe", potentially resulting in complex analysis, which can be shared with other users and used with their input.</p>
-                                    <p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype solutions to a problem which can then be scripted once proven to work.</p>
+                                    <p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype solutions to a problem which can then be scripted once proven to work.</p><br>
+
                                     
-                                    <h4>Who</h4>
-                                    <p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies. It should also appeal to the academic world and any individuals or companies involved in the analysis of digital data, be that software developers, analysts, mathematicians or casual puzzle solvers.</p>
+                                    <h5><strong>Who</strong></h5>
+                                    <p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies. It should also appeal to the academic world and any individuals or companies involved in the analysis of digital data, be that software developers, analysts, mathematicians or casual puzzle solvers.</p><br>
+
                                     
-                                    <h4>Aim</h4>
-                                    <p>It is hoped that by releasing CyberChef through <a href="https://github.com/gchq/cyberchef">GitHub</a>, contributions can be added which can be rolled out into future versions of the tool.</p>
+                                    <h5><strong>Aim</strong></h5>
+                                    <p>It is hoped that by releasing CyberChef through <a href="https://github.com/gchq/CyberChef">GitHub</a>, contributions can be added which can be rolled out into future versions of the tool.</p><br>
+
 
                                     <br>
                                     <p>There are around 150 useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p>

src/web/index.js

@@ -17,7 +17,7 @@ import CanvasComponents from "../core/lib/canvascomponents.js";
 // CyberChef
 import App from "./App.js";
 import Categories from "../core/config/Categories.js";
-import OperationConfig from "../core/config/OperationConfig.js";
+import OperationConfig from "../core/config/MetaConfig.js";
 
 
 /**
@@ -38,15 +38,14 @@ function main() {
     ];
 
     const defaultOptions = {
-        updateUrl         : true,
-        showHighlighter   : true,
-        treatAsUtf8       : true,
-        wordWrap          : true,
-        showErrors        : true,
-        errorTimeout      : 4000,
-        autoBakeThreshold : 200,
-        attemptHighlight  : true,
-        theme             : "classic",
+        updateUrl:         true,
+        showHighlighter:   true,
+        treatAsUtf8:       true,
+        wordWrap:          true,
+        showErrors:        true,
+        errorTimeout:      4000,
+        attemptHighlight:  true,
+        theme:             "classic",
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

src/web/static/ga.html

@@ -2,5 +2,12 @@
 
 <!-- Begin Google Analytics -->
 
+  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);
+
+</script>
 <!-- End Google Analytics -->
 

src/web/static/images/gitter-badge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="92" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h34v20H0z"/><path fill="#46BC99" d="M34 0h58v20H34z"/><path fill="url(#b)" d="M0 0h92v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="17" y="15" fill="#010101" fill-opacity=".3">chat</text><text x="17" y="14">chat</text><text x="62" y="15" fill="#010101" fill-opacity=".3">on gitter</text><text x="62" y="14">on gitter</text></g></svg>

src/web/static/structuredData.json

@@ -0,0 +1,23 @@
+[
+    {
+        "@context": "http://schema.org",
+        "@type": "Organization",
+        "url": "https://gchq.github.io/CyberChef/",
+        "logo": "https://gchq.github.io/CyberChef/images/cyberchef-128x128.png",
+        "sameAs": [
+            "https://github.com/gchq/CyberChef",
+            "https://www.npmjs.com/package/cyberchef"
+        ]
+    },
+    {
+        "@context": "http://schema.org",
+        "@type": "WebSite",
+        "url": "https://gchq.github.io/CyberChef/",
+        "name": "CyberChef",
+        "potentialAction": {
+            "@type": "SearchAction",
+            "target": "https://gchq.github.io/CyberChef/?op={operation_search_term}",
+            "query-input": "required name=operation_search_term"
+        }
+    }
+]

src/web/stylesheets/components/_operation.css

@@ -59,6 +59,7 @@
     background-color: var(--arg-background);
     border: 1px solid var(--arg-border-colour);
     font-family: var(--fixed-width-font-family);
+    text-overflow: ellipsis;
 }
 
 .short-string {
@@ -123,6 +124,12 @@ button.dropdown-toggle {
     background-color: var(--secondary-background-colour);
 }
 
+.register-list {
+    background-color: var(--fc-operation-border-colour);
+    font-family: var(--fixed-width-font-family);
+    padding: 10px;
+}
+
 .op-icon {
     float: right;
     margin-left: 10px;
@@ -194,3 +201,13 @@ button.dropdown-toggle {
     background-color: var(--disabled-bg-colour) !important;
     border-color: var(--disabled-border-colour) !important;
 }
+
+.break .register-list {
+    color: var(--fc-breakpoint-operation-font-colour) !important;
+    background-color: var(--fc-breakpoint-operation-border-colour) !important;
+}
+
+.disabled .register-list {
+    color: var(--disabled-font-colour) !important;
+    background-color: var(--disabled-border-colour) !important;
+}

src/web/stylesheets/index.css

@@ -9,6 +9,7 @@
 /* Themes */
 @import "./themes/_classic.css";
 @import "./themes/_dark.css";
+@import "./themes/_geocities.css";
 
 /* Utilities */
 @import "./utils/_overrides.css";

src/web/stylesheets/layout/_banner.css

@@ -10,19 +10,15 @@
     position: absolute;
     height: 30px;
     width: 100%;
-    text-align: center;
     line-height: 30px;
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
 }
 
-.banner-right {
-    float: right;
-    margin-right: 10px;
-}
-
 #banner img {
     margin-bottom: 2px;
     margin-left: 8px;
+    padding-right: 10px;
 }
+

src/web/stylesheets/layout/_controls.css

@@ -46,7 +46,7 @@
     width: 60px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-left: 1px solid var(--btn-success-bg-colour);
+    border-left: 1px solid transparent;
 }
 
 #auto-bake-label:hover {

src/web/stylesheets/layout/_io.css

@@ -63,6 +63,20 @@
     border: none;
 }
 
+#output-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-color: var(--primary-background-colour);
+    visibility: hidden;
+    opacity: 0;
+
+    transition: all 0.5s ease;
+}
+
 .io-btn-group {
     float: right;
     margin-top: -4px;
@@ -88,22 +102,21 @@
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
 
-@keyframes spinner {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(359deg);
-    }
+#stale-indicator {
+    visibility: hidden;
+    transition: all 0.3s;
+    margin-left: 5px;
+    font-size: larger;
+    font-weight: normal;
+    cursor: help;
 }
 
-.loading-icon::before {
-    content: "\21bb";
-}
-
-.loading-icon {
-    animation-name: spinner;
-    animation-duration: 1000ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+#output-loader .loading-msg {
+    opacity: 1;
+    font-family: var(--primary-font-family);
+    line-height: var(--primary-line-height);
+    color: var(--primary-font-colour);
+    top: 50%;
+    
+    transition: all 0.5s ease;
 }

src/web/stylesheets/layout/_modals.css

@@ -14,6 +14,10 @@
     margin: 10px;
 }
 
+.option-item label {
+    font-weight: normal;
+}
+
 .option-item input[type=number] {
     margin: 15px 10px;
     width: 80px;
@@ -74,7 +78,13 @@
     font-family: var(--primary-font-family);
 }
 
-#save-text,
+#save-texts textarea,
 #load-text {
     font-family: var(--fixed-width-font-family);
 }
+
+#save-texts textarea {
+    border-top: none;
+    box-shadow: none;
+    height: 200px;
+}

src/web/stylesheets/preloader.css

@@ -16,7 +16,7 @@
     background-color: var(--secondary-border-colour);
 }
 
-#preloader {
+.loader {
     display: block;
     position: relative;
     left: 50%;
@@ -28,53 +28,55 @@
     border: 3px solid transparent;
     border-top-color: #3498db;
     border-radius: 50%;
-    z-index: 1500;
 
     animation: spin 2s linear infinite;
 }
 
-#preloader:before,
-#preloader:after {
+.loader:before,
+.loader:after {
     content: "";
     position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
     border: 3px solid transparent;
     border-radius: 50%;
 }
 
-#preloader:before {
+.loader:before {
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
     border-top-color: #e74c3c;
     animation: spin 3s linear infinite;
 }
 
-#preloader:after {
+.loader:after {
+    top: 13px;
+    left: 13px;
+    right: 13px;
+    bottom: 13px;
     border-top-color: #f9c922;
     animation: spin 1.5s linear infinite;
 }
 
-#preloader-msg {
+.loading-msg {
     display: block;
     position: relative;
-    width: 300px;
-    left: calc(50% - 150px);
+    width: 400px;
+    left: calc(50% - 200px);
     top: calc(50% + 50px);
     text-align: center;
     margin-top: 50px;
     opacity: 0;
 }
 
-#preloader-msg.loading {
+.loading-msg.loading {
     opacity: 1;
     transition: all 0.1s ease-in;
 }
 
 
 /* Loaded */
-.loaded #preloader,
-.loaded #preloader-msg {
+.loaded .loading-msg {
     opacity: 0;
     transition: all 0.3s ease-out;
 }

src/web/stylesheets/themes/_geocities.css

@@ -0,0 +1,115 @@
+/**
+ * GeoCities theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root.geocities {
+    --primary-font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive, sans-serif;
+    --primary-font-colour: black;
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family: "Courier New", Courier, monospace;
+    --fixed-width-font-colour: yellow;
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: darkgrey;
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: #00f;
+    --secondary-background-colour: #f00;
+
+    --primary-border-colour: pink;
+    --secondary-border-colour: springgreen;
+
+    --title-colour: red;
+    --title-weight: bold;
+    --title-background-colour: yellow;
+
+    --banner-font-colour: white;
+    --banner-bg-colour: maroon;
+
+
+    /* Operation colours */
+    --op-list-operation-font-colour: blue;
+    --op-list-operation-bg-colour: yellow;
+    --op-list-operation-border-colour: green;
+
+    --rec-list-operation-font-colour: white;
+    --rec-list-operation-bg-colour: purple;
+    --rec-list-operation-border-colour: green;
+
+    --selected-operation-font-color: white;
+    --selected-operation-bg-colour: pink;
+    --selected-operation-border-colour: blue;
+
+    --breakpoint-font-colour: white;
+    --breakpoint-bg-colour: red;
+    --breakpoint-border-colour: blue;
+
+    --disabled-font-colour: grey;
+    --disabled-bg-colour: black;
+    --disabled-border-colour: grey;
+
+    --fc-operation-font-colour: sienna;
+    --fc-operation-bg-colour: pink;
+    --fc-operation-border-colour: yellow;
+
+    --fc-breakpoint-operation-font-colour: darkgrey;
+    --fc-breakpoint-operation-bg-colour: deeppink;
+    --fc-breakpoint-operation-border-colour: yellowgreen;
+
+
+    /* Operation arguments */
+    --arg-title-font-weight: bold;
+    --arg-input-height: 34px;
+    --arg-input-line-height: 20px;
+    --arg-input-font-size: 15px;
+    --arg-font-colour: white;
+    --arg-background: black;
+    --arg-border-colour: lime;
+    --arg-disabled-background: grey;
+
+
+    /* Buttons */
+    --btn-default-font-colour: black;
+    --btn-default-bg-colour: white;
+    --btn-default-border-colour: grey;
+
+    --btn-default-hover-font-colour: black;
+    --btn-default-hover-bg-colour: white;
+    --btn-default-hover-border-colour: grey;
+
+    --btn-success-font-colour: white;
+    --btn-success-bg-colour: lawngreen;
+    --btn-success-border-colour: grey;
+
+    --btn-success-hover-font-colour: white;
+    --btn-success-hover-bg-colour: lime;
+    --btn-success-hover-border-colour: grey;
+
+
+    /* Highlighter colours */
+    --hl1: #fff000;
+    --hl2: #95dfff;
+    --hl3: #ffb6b6;
+    --hl4: #fcf8e3;
+    --hl5: #8de768;
+
+
+    /* Scrollbar */
+    --scrollbar-track: lightsteelblue;
+    --scrollbar-thumb: lightslategrey;
+    --scrollbar-hover: grey;
+
+
+    /* Misc. */
+    --drop-file-border-colour: purple;
+    --popover-background: turquoise;
+    --popover-border-colour: violet;
+    --code-background: black;
+    --code-font-colour: limegreen;
+}

src/web/stylesheets/utils/_overrides.css

@@ -142,6 +142,10 @@ optgroup {
     border-color: var(--popover-border-colour);
 }
 
+.popover-content {
+    max-height: 90vh;
+    overflow-y: auto;
+}
 
 .popover.right>.arrow {
     border-right-color: var(--popover-border-colour);
@@ -202,6 +206,11 @@ optgroup {
     border-color: var(--primary-border-colour);
 }
 
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+    background-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
 
 /* Sortable */