10.0.0

.eslintrc.json

@@ -1,7 +1,7 @@
 {
     "parser": "@babel/eslint-parser",
     "parserOptions": {
-        "ecmaVersion": 9,
+        "ecmaVersion": 2022,
         "ecmaFeatures": {
             "impliedStrict": true
         },

.github/workflows/codeql.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
     # The branches below must be a subset of the branches above
     branches: [ master ]
+    types: [synchronize, opened, reopened]
   schedule:
     - cron: '22 17 * * 5'
 
@@ -14,6 +15,10 @@ jobs:
   analyze:
     name: Analyze
     runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
 
     strategy:
       fail-fast: false
@@ -31,3 +36,5 @@ jobs:
 
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/master.yml

@@ -32,14 +32,16 @@ jobs:
 
     - name: Production Build
       if: success()
-      run: npx grunt prod
+      run: npx grunt prod --msg="Version 10 is here! Read more about the new features <a href='https://github.com/gchq/CyberChef/wiki/Character-encoding,-EOL-separators,-and-editor-features'>here</a>"
 
     - name: Generate sitemap
       run: npx grunt exec:sitemap
 
-    # - name: UI Tests
-    #   if: success()
-    #   run: xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui
+    - name: UI Tests
+      if: success()
+      run: |
+        sudo apt-get install xvfb
+        xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui
 
     - name: Prepare for GitHub Pages
       if: success()

.github/workflows/pull_requests.yml

@@ -33,6 +33,8 @@ jobs:
       if: success()
       run: npx grunt prod
 
-    # - name: UI Tests
-    #   if: success()
-    #   run: xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui
+    - name: UI Tests
+      if: success()
+      run: |
+        sudo apt-get install xvfb
+        xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui

.github/workflows/releases.yml

@@ -34,9 +34,11 @@ jobs:
       if: success()
       run: npx grunt prod
 
-    # - name: UI Tests
-    #   if: success()
-    #   run: xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui
+    - name: UI Tests
+      if: success()
+      run: |
+        sudo apt-get install xvfb
+        xvfb-run --server-args="-screen 0 1200x800x24" npx grunt testui
 
     - name: Upload Release Assets
       if: success()

CHANGELOG.md

@@ -13,6 +13,20 @@ All major and minor version changes will be documented in this file. Details of
 
 ## Details
 
+## [10.0.0] - 2023-03-22
+- [Full details explained here](https://github.com/gchq/CyberChef/wiki/Character-encoding,-EOL-separators,-and-editor-features)
+- Status bars added to the Input and Output [@n1474335] | [#1405]
+- Character encoding selection added to the Input and Output [@n1474335] | [#1405]
+- End of line separator selection added to the Input and Output [@n1474335] | [#1405]
+- Non-printable characters are rendered as control character pictures [@n1474335] | [#1405]
+- Loaded files can now be edited in the Input [@n1474335] | [#1405]
+- Various editor features added such as multiple selections and bracket matching [@n1474335] | [#1405]
+- Contextual help added, activated by pressing F1 while hovering over features [@n1474335] | [#1405]
+- Many, many UI tests added for I/O features and operations [@n1474335] | [#1405]
+
+<details>
+    <summary>Click to expand v9 minor versions</summary>
+
 ### [9.55.0] - 2022-12-09
 - Added 'AMF Encode' and 'AMF Decode' operations [@n1474335] | [760eff4]
 
@@ -181,6 +195,8 @@ All major and minor version changes will be documented in this file. Details of
 - 'Parse SSH Host Key' operation added [@j433866] | [#595]
 - 'Defang IP Addresses' operation added [@h345983745] | [#556]
 
+</details>
+
 ## [9.0.0] - 2019-07-09
 - [Multiple inputs](https://github.com/gchq/CyberChef/wiki/Multiple-Inputs) are now supported in the main web UI, allowing you to upload and process multiple files at once [@j433866] | [#566]
 - A [Node.js API](https://github.com/gchq/CyberChef/wiki/Node-API) has been implemented, meaning that CyberChef can now be used as a library, either to provide specific operations, or an entire baking environment [@d98762625] | [#291]
@@ -342,6 +358,7 @@ All major and minor version changes will be documented in this file. Details of
 
 
 
+[10.0.0]: https://github.com/gchq/CyberChef/releases/tag/v10.0.0
 [9.55.0]: https://github.com/gchq/CyberChef/releases/tag/v9.55.0
 [9.54.0]: https://github.com/gchq/CyberChef/releases/tag/v9.54.0
 [9.53.0]: https://github.com/gchq/CyberChef/releases/tag/v9.53.0
@@ -592,6 +609,7 @@ All major and minor version changes will be documented in this file. Details of
 [#1266]: https://github.com/gchq/CyberChef/pull/1266
 [#1250]: https://github.com/gchq/CyberChef/pull/1250
 [#1308]: https://github.com/gchq/CyberChef/pull/1308
+[#1405]: https://github.com/gchq/CyberChef/pull/1405
 [#1421]: https://github.com/gchq/CyberChef/pull/1421
 [#1427]: https://github.com/gchq/CyberChef/pull/1427
 [#1472]: https://github.com/gchq/CyberChef/pull/1472

Gruntfile.js

@@ -29,7 +29,7 @@ module.exports = function (grunt) {
         "Creates a production-ready build. Use the --msg flag to add a compile message.",
         [
             "eslint", "clean:prod", "clean:config", "exec:generateConfig", "findModules", "webpack:web",
-            "copy:standalone", "zip:standalone", "clean:standalone", "chmod"
+            "copy:standalone", "zip:standalone", "clean:standalone", "exec:calcDownloadHash", "chmod"
         ]);
 
     grunt.registerTask("node",
@@ -323,6 +323,22 @@ module.exports = function (grunt) {
             }
         },
         exec: {
+            calcDownloadHash: {
+                command: function () {
+                    switch (process.platform) {
+                        case "darwin":
+                            return chainCommands([
+                                `shasum -a 256 build/prod/CyberChef_v${pkg.version}.zip | awk '{print $1;}' > build/prod/sha256digest.txt`,
+                                `sed -i '' -e "s/DOWNLOAD_HASH_PLACEHOLDER/$(cat build/prod/sha256digest.txt)/" build/prod/index.html`
+                            ]);
+                        default:
+                            return chainCommands([
+                                `sha256sum build/prod/CyberChef_v${pkg.version}.zip | awk '{print $1;}' > build/prod/sha256digest.txt`,
+                                `sed -i -e "s/DOWNLOAD_HASH_PLACEHOLDER/$(cat build/prod/sha256digest.txt)/" build/prod/index.html`
+                            ]);
+                    }
+                },
+            },
             repoSize: {
                 command: chainCommands([
                     "git ls-files | wc -l | xargs printf '\n%b\ttracked files\n'",
@@ -390,13 +406,25 @@ module.exports = function (grunt) {
                 stdout: false,
             },
             fixCryptoApiImports: {
-                command: [
-                    `[[ "$OSTYPE" == "darwin"* ]]`,
-                    "&&",
-                    `find ./node_modules/crypto-api/src/ \\( -type d -name .git -prune \\) -o -type f -print0 | xargs -0 sed -i '' -e '/\\.mjs/!s/\\(from "\\.[^"]*\\)";/\\1.mjs";/g'`,
-                    "||",
-                    `find ./node_modules/crypto-api/src/ \\( -type d -name .git -prune \\) -o -type f -print0 | xargs -0 sed -i -e '/\\.mjs/!s/\\(from "\\.[^"]*\\)";/\\1.mjs";/g'`
-                ].join(" "),
+                command: function () {
+                    switch (process.platform) {
+                        case "darwin":
+                            return `find ./node_modules/crypto-api/src/ \\( -type d -name .git -prune \\) -o -type f -print0 | xargs -0 sed -i '' -e '/\\.mjs/!s/\\(from "\\.[^"]*\\)";/\\1.mjs";/g'`;
+                        default:
+                            return `find ./node_modules/crypto-api/src/ \\( -type d -name .git -prune \\) -o -type f -print0 | xargs -0 sed -i -e '/\\.mjs/!s/\\(from "\\.[^"]*\\)";/\\1.mjs";/g'`;
+                    }
+                },
+                stdout: false
+            },
+            fixSnackbarMarkup: {
+                command: function () {
+                    switch (process.platform) {
+                        case "darwin":
+                            return `sed -i '' 's/<div id=snackbar-container\\/>/<div id=snackbar-container>/g' ./node_modules/snackbarjs/src/snackbar.js`;
+                        default:
+                            return `sed -i 's/<div id=snackbar-container\\/>/<div id=snackbar-container>/g' ./node_modules/snackbarjs/src/snackbar.js`;
+                    }
+                },
                 stdout: false
             }
         },

README.md

@@ -1,7 +1,6 @@
 # CyberChef
 
 [![](https://github.com/gchq/CyberChef/workflows/Master%20Build,%20Test%20&%20Deploy/badge.svg)](https://github.com/gchq/CyberChef/actions?query=workflow%3A%22Master+Build%2C+Test+%26+Deploy%22)
-[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/gchq/CyberChef.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/gchq/CyberChef/context:javascript)
 [![npm](https://img.shields.io/npm/v/cyberchef.svg)](https://www.npmjs.com/package/cyberchef)
 [![](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/gchq/CyberChef/blob/master/LICENSE)
 [![Gitter](https://badges.gitter.im/gchq/CyberChef.svg)](https://gitter.im/gchq/CyberChef?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

nightwatch.json

@@ -1,5 +1,6 @@
 {
   "src_folders": ["tests/browser"],
+  "exclude": ["tests/browser/browserUtils.js"],
   "output_folder": "tests/browser/output",
 
   "test_settings": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "9.55.0",
+  "version": "10.0.0",
   "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
   "author": "n1474335 <n1474335@gmail.com>",
   "homepage": "https://gchq.github.io/CyberChef",
@@ -39,49 +39,54 @@
     "node >= 16"
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-syntax-import-assertions": "^7.17.12",
-    "@babel/plugin-transform-runtime": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/runtime": "^7.18.3",
-    "autoprefixer": "^10.4.7",
-    "babel-loader": "^8.2.5",
+    "@babel/core": "^7.21.0",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-import-assertions": "^7.20.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/runtime": "^7.21.0",
+    "@codemirror/commands": "^6.2.1",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/search": "^6.2.3",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.9.2",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-transform-builtin-extend": "1.1.2",
-    "chromedriver": "^103.0.0",
-    "cli-progress": "^3.11.1",
+    "chromedriver": "^110.0.0",
+    "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
     "copy-webpack-plugin": "^11.0.0",
-    "core-js": "^3.22.8",
-    "css-loader": "6.7.1",
-    "eslint": "^8.16.0",
-    "grunt": "^1.5.3",
+    "core-js": "^3.29.0",
+    "css-loader": "6.7.3",
+    "eslint": "^8.35.0",
+    "grunt": "^1.6.1",
     "grunt-chmod": "~1.1.1",
     "grunt-concurrent": "^3.0.0",
     "grunt-contrib-clean": "~2.0.1",
     "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "~1.0.0",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-eslint": "^24.0.0",
+    "grunt-eslint": "^24.0.1",
     "grunt-exec": "~3.0.0",
     "grunt-webpack": "^5.0.0",
-    "grunt-zip": "^0.18.2",
+    "grunt-zip": "^0.20.0",
     "html-webpack-plugin": "^5.5.0",
-    "imports-loader": "^4.0.0",
-    "mini-css-extract-plugin": "2.6.0",
+    "imports-loader": "^4.0.1",
+    "mini-css-extract-plugin": "2.7.3",
     "modify-source-webpack-plugin": "^3.0.0",
-    "nightwatch": "^2.1.7",
-    "postcss": "^8.4.14",
+    "nightwatch": "^2.6.16",
+    "postcss": "^8.4.21",
     "postcss-css-variables": "^0.18.0",
-    "postcss-import": "^14.1.0",
-    "postcss-loader": "^7.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.0.2",
     "prompt": "^1.3.0",
     "sitemap": "^7.1.1",
-    "terser": "^5.14.0",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "4.9.1",
+    "terser": "^5.16.6",
+    "webpack": "^5.76.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "^3.0.0",
     "worker-loader": "^3.0.8"
   },
@@ -90,15 +95,15 @@
     "@babel/polyfill": "^7.12.1",
     "@blu3r4y/lzma": "^2.3.3",
     "arrive": "^2.4.1",
-    "avsc": "^5.7.4",
+    "avsc": "^5.7.7",
     "bcryptjs": "^2.4.3",
-    "bignumber.js": "^9.0.2",
+    "bignumber.js": "^9.1.1",
     "blakejs": "^1.2.1",
-    "bootstrap": "4.6.1",
+    "bootstrap": "4.6.2",
     "bootstrap-colorpicker": "^3.4.0",
     "bootstrap-material-design": "^4.1.3",
     "browserify-zlib": "^0.2.0",
-    "bson": "^4.6.4",
+    "bson": "^4.7.2",
     "buffer": "^6.0.3",
     "cbor": "8.1.0",
     "chi-squared": "^1.1.0",
@@ -107,7 +112,7 @@
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
     "ctph.js": "0.0.5",
-    "d3": "7.4.4",
+    "d3": "7.8.2",
     "d3-hexbin": "^0.2.2",
     "diff": "^5.1.0",
     "es6-promisify": "^7.0.0",
@@ -117,28 +122,28 @@
     "file-saver": "^2.0.5",
     "flat": "^5.0.2",
     "geodesy": "1.1.3",
-    "highlight.js": "^11.5.1",
-    "jimp": "^0.16.1",
-    "jquery": "3.6.0",
+    "highlight.js": "^11.7.0",
+    "jimp": "^0.16.13",
+    "jquery": "3.6.4",
     "js-crc": "^0.2.0",
     "js-sha3": "^0.8.0",
     "jsesc": "^3.0.2",
-    "json5": "^2.2.1",
+    "json5": "^2.2.3",
     "jsonpath-plus": "^7.2.0",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "8.5.1",
     "jsqr": "^1.4.0",
-    "jsrsasign": "^10.5.23",
+    "jsrsasign": "^10.6.1",
     "kbpgp": "2.1.15",
     "libbzip2-wasm": "0.0.4",
     "libyara-wasm": "^1.2.1",
     "lodash": "^4.17.21",
-    "loglevel": "^1.8.0",
+    "loglevel": "^1.8.1",
     "loglevel-message-prefix": "^3.0.0",
-    "lz-string": "^1.4.4",
+    "lz-string": "^1.5.0",
     "lz4js": "^0.2.0",
     "markdown-it": "^13.0.1",
-    "moment": "^2.29.3",
-    "moment-timezone": "^0.5.34",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.41",
     "ngeohash": "^0.6.3",
     "node-forge": "^1.3.1",
     "node-md6": "^0.1.0",
@@ -150,7 +155,7 @@
     "path": "^0.12.7",
     "popper.js": "^1.16.1",
     "process": "^0.11.10",
-    "protobufjs": "^6.11.3",
+    "protobufjs": "^7.2.2",
     "qr-image": "^3.2.0",
     "reflect-metadata": "^0.1.13",
     "scryptsy": "^2.1.0",
@@ -159,14 +164,14 @@
     "split.js": "^1.6.5",
     "ssdeep.js": "0.0.3",
     "stream-browserify": "^3.0.0",
-    "tesseract.js": "3.0.2",
-    "ua-parser-js": "^1.0.2",
+    "tesseract.js": "3.0.3",
+    "ua-parser-js": "^1.0.34",
     "unorm": "^1.6.0",
     "utf8": "^3.0.0",
     "vkbeautify": "^0.99.3",
     "xmldom": "^0.6.0",
     "xpath": "0.0.32",
-    "xregexp": "^5.1.0",
+    "xregexp": "^5.1.1",
     "zlibjs": "^0.3.1"
   },
   "scripts": {
@@ -179,7 +184,7 @@
     "testui": "npx grunt testui",
     "testuidev": "npx nightwatch --env=dev",
     "lint": "npx grunt lint",
-    "postinstall": "npx grunt exec:fixCryptoApiImports",
+    "postinstall": "npx grunt exec:fixCryptoApiImports && npx grunt exec:fixSnackbarMarkup",
     "newop": "node --experimental-modules --experimental-json-modules src/core/config/scripts/newOperation.mjs",
     "minor": "node --experimental-modules --experimental-json-modules src/core/config/scripts/newMinorVersion.mjs",
     "getheapsize": "node -e 'console.log(`node heap limit = ${require(\"v8\").getHeapStatistics().heap_size_limit / (1024 * 1024)} Mb`)'",

src/core/Chef.mjs

@@ -27,8 +27,8 @@ class Chef {
      *
      * @param {string|ArrayBuffer} input - The input data as a string or ArrayBuffer
      * @param {Object[]} recipeConfig - The recipe configuration object
-     * @param {Object} options - The options object storing various user choices
-     * @param {boolean} options.attempHighlight - Whether or not to attempt highlighting
+     * @param {Object} [options={}] - The options object storing various user choices
+     * @param {string} [options.returnType] - What type to return the result as
      *
      * @returns {Object} response
      * @returns {string} response.result - The output of the recipe
@@ -37,12 +37,11 @@ class Chef {
      * @returns {number} response.duration - The number of ms it took to execute the recipe
      * @returns {number} response.error - The error object thrown by a failed operation (false if no error)
     */
-    async bake(input, recipeConfig, options) {
+    async bake(input, recipeConfig, options={}) {
         log.debug("Chef baking");
         const startTime = Date.now(),
             recipe      = new Recipe(recipeConfig),
-            containsFc  = recipe.containsFlowControl(),
-            notUTF8     = options && "treatAsUtf8" in options && !options.treatAsUtf8;
+            containsFc  = recipe.containsFlowControl();
         let error = false,
             progress = 0;
 
@@ -68,20 +67,13 @@ class Chef {
         // Present the raw result
         await recipe.present(this.dish);
 
-        // Depending on the size of the output, we may send it back as a string or an ArrayBuffer.
-        // This can prevent unnecessary casting as an ArrayBuffer can be easily downloaded as a file.
-        // The threshold is specified in KiB.
-        const threshold = (options.ioDisplayThreshold || 1024) * 1024;
         const returnType =
-            this.dish.type === Dish.HTML ?
-                Dish.HTML :
-                this.dish.size > threshold ?
-                    Dish.ARRAY_BUFFER :
-                    Dish.STRING;
+            this.dish.type === Dish.HTML ? Dish.HTML :
+                options?.returnType ? options.returnType : Dish.ARRAY_BUFFER;
 
         return {
             dish: rawDish,
-            result: await this.dish.get(returnType, notUTF8),
+            result: await this.dish.get(returnType),
             type: Dish.enumLookup(this.dish.type),
             progress: progress,
             duration: Date.now() - startTime,

src/core/ChefWorker.js

@@ -9,16 +9,8 @@
 import Chef from "./Chef.mjs";
 import OperationConfig from "./config/OperationConfig.json" assert {type: "json"};
 import OpModules from "./config/modules/OpModules.mjs";
-
-// Add ">" to the start of all log messages in the Chef Worker
 import loglevelMessagePrefix from "loglevel-message-prefix";
 
-loglevelMessagePrefix(log, {
-    prefixes: [],
-    staticPrefixes: [">"],
-    prefixFormat: "%p"
-});
-
 
 // Set up Chef instance
 self.chef = new Chef();
@@ -56,7 +48,7 @@ self.postMessage({
 self.addEventListener("message", function(e) {
     // Handle message
     const r = e.data;
-    log.debug("ChefWorker receiving command '" + r.action + "'");
+    log.debug(`Receiving command '${r.action}'`);
 
     switch (r.action) {
         case "bake":
@@ -86,6 +78,12 @@ self.addEventListener("message", function(e) {
         case "setLogLevel":
             log.setLevel(r.data, false);
             break;
+        case "setLogPrefix":
+            loglevelMessagePrefix(log, {
+                prefixes: [],
+                staticPrefixes: [r.data]
+            });
+            break;
         default:
             break;
     }
@@ -101,14 +99,17 @@ async function bake(data) {
     // Ensure the relevant modules are loaded
     self.loadRequiredModules(data.recipeConfig);
     try {
-        self.inputNum = (data.inputNum !== undefined) ? data.inputNum : -1;
+        self.inputNum = data.inputNum === undefined ? -1 : data.inputNum;
         const response = await self.chef.bake(
             data.input,          // The user's input
             data.recipeConfig,   // The configuration of the recipe
             data.options         // Options set by the user
         );
 
-        const transferable = (data.input instanceof ArrayBuffer) ? [data.input] : undefined;
+        const transferable = (response.dish.value instanceof ArrayBuffer) ?
+            [response.dish.value] :
+            undefined;
+
         self.postMessage({
             action: "bakeComplete",
             data: Object.assign(response, {
@@ -186,7 +187,7 @@ async function getDishTitle(data) {
  *
  * @param {Object[]} recipeConfig
  * @param {string} direction
- * @param {Object} pos - The position object for the highlight.
+ * @param {Object[]} pos - The position object for the highlight.
  * @param {number} pos.start - The start offset.
  * @param {number} pos.end - The end offset.
  */

src/core/Dish.mjs

@@ -128,10 +128,9 @@ class Dish {
      * If running in a browser, get is asynchronous.
      *
      * @param {number} type - The data type of value, see Dish enums.
-     * @param {boolean} [notUTF8=false] - Do not treat strings as UTF8.
      * @returns {* | Promise} - (Browser) A promise | (Node) value of dish in given type
      */
-    get(type, notUTF8=false) {
+    get(type) {
         if (typeof type === "string") {
             type = Dish.typeEnum(type);
         }
@@ -140,13 +139,13 @@ class Dish {
 
             // Node environment => _translate is sync
             if (isNodeEnvironment()) {
-                this._translate(type, notUTF8);
+                this._translate(type);
                 return this.value;
 
             // Browser environment => _translate is async
             } else {
                 return new Promise((resolve, reject) => {
-                    this._translate(type, notUTF8)
+                    this._translate(type)
                         .then(() => {
                             resolve(this.value);
                         })
@@ -190,12 +189,11 @@ class Dish {
      * @Node
      *
      * @param {number} type - The data type of value, see Dish enums.
-     * @param {boolean} [notUTF8=false] - Do not treat strings as UTF8.
      * @returns {Dish | Promise} - (Browser) A promise | (Node) value of dish in given type
      */
-    presentAs(type, notUTF8=false) {
+    presentAs(type) {
         const clone = this.clone();
-        return clone.get(type, notUTF8);
+        return clone.get(type);
     }
 
 
@@ -414,17 +412,16 @@ class Dish {
      * If running in the browser, _translate is asynchronous.
      *
      * @param {number} toType - The data type of value, see Dish enums.
-     * @param {boolean} [notUTF8=false] - Do not treat strings as UTF8.
      * @returns {Promise || undefined}
      */
-    _translate(toType, notUTF8=false) {
+    _translate(toType) {
         log.debug(`Translating Dish from ${Dish.enumLookup(this.type)} to ${Dish.enumLookup(toType)}`);
 
         // Node environment => translate is sync
         if (isNodeEnvironment()) {
             this._toArrayBuffer();
             this.type = Dish.ARRAY_BUFFER;
-            this._fromArrayBuffer(toType, notUTF8);
+            this._fromArrayBuffer(toType);
 
         // Browser environment => translate is async
         } else {
@@ -486,18 +483,17 @@ class Dish {
      * Convert this.value to the given type from ArrayBuffer
      *
      * @param {number} toType - the Dish enum to convert to
-     * @param {boolean} [notUTF8=false] - Do not treat strings as UTF8.
     */
-    _fromArrayBuffer(toType, notUTF8) {
+    _fromArrayBuffer(toType) {
 
         // Using 'bind' here to allow this.value to be mutated within translation functions
         const toTypeFunctions = {
-            [Dish.STRING]:          () => DishString.fromArrayBuffer.bind(this)(notUTF8),
-            [Dish.NUMBER]:          () => DishNumber.fromArrayBuffer.bind(this)(notUTF8),
-            [Dish.HTML]:            () => DishHTML.fromArrayBuffer.bind(this)(notUTF8),
+            [Dish.STRING]:          () => DishString.fromArrayBuffer.bind(this)(),
+            [Dish.NUMBER]:          () => DishNumber.fromArrayBuffer.bind(this)(),
+            [Dish.HTML]:            () => DishHTML.fromArrayBuffer.bind(this)(),
             [Dish.ARRAY_BUFFER]:    () => {},
-            [Dish.BIG_NUMBER]:      () => DishBigNumber.fromArrayBuffer.bind(this)(notUTF8),
-            [Dish.JSON]:            () => DishJSON.fromArrayBuffer.bind(this)(notUTF8),
+            [Dish.BIG_NUMBER]:      () => DishBigNumber.fromArrayBuffer.bind(this)(),
+            [Dish.JSON]:            () => DishJSON.fromArrayBuffer.bind(this)(),
             [Dish.FILE]:            () => DishFile.fromArrayBuffer.bind(this)(),
             [Dish.LIST_FILE]:       () => DishListFile.fromArrayBuffer.bind(this)(),
             [Dish.BYTE_ARRAY]:      () => DishByteArray.fromArrayBuffer.bind(this)(),

src/core/Recipe.mjs

@@ -230,14 +230,12 @@ class Recipe  {
                 this.lastRunOp = op;
             } catch (err) {
                 // Return expected errors as output
-                if (err instanceof OperationError ||
-                    (err.type && err.type === "OperationError")) {
+                if (err instanceof OperationError || err?.type === "OperationError") {
                     // Cannot rely on `err instanceof OperationError` here as extending
                     // native types is not fully supported yet.
                     dish.set(err.message, "string");
                     return i;
-                } else if (err instanceof DishError ||
-                    (err.type && err.type === "DishError")) {
+                } else if (err instanceof DishError || err?.type === "DishError") {
                     dish.set(err.message, "string");
                     return i;
                 } else {

src/core/Utils.mjs

@@ -4,6 +4,8 @@
  * @license Apache-2.0
  */
 
+// loglevel import required for Node API
+import log from "loglevel";
 import utf8 from "utf8";
 import {fromBase64, toBase64} from "./lib/Base64.mjs";
 import {fromHex} from "./lib/Hex.mjs";
@@ -174,17 +176,13 @@ class Utils {
      * @returns {string}
      */
     static printable(str, preserveWs=false, onlyAscii=false) {
-        if (isWebEnvironment() && window.app && !window.app.options.treatAsUtf8) {
-            str = Utils.byteArrayToChars(Utils.strToByteArray(str));
-        }
-
         if (onlyAscii) {
             return str.replace(/[^\x20-\x7f]/g, ".");
         }
 
         // eslint-disable-next-line no-misleading-character-class
         const re = /[\0-\x08\x0B-\x0C\x0E-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u202A-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g;
-        const wsRe = /[\x09-\x10\x0D\u2028\u2029]/g;
+        const wsRe = /[\x09-\x10\u2028\u2029]/g;
 
         str = str.replace(re, ".");
         if (!preserveWs) str = str.replace(wsRe, ".");
@@ -192,6 +190,21 @@ class Utils {
     }
 
 
+    /**
+     * Returns a string with whitespace represented as special characters from the
+     * Unicode Private Use Area, which CyberChef will display as control characters.
+     * Private Use Area characters are in the range U+E000..U+F8FF.
+     * https://en.wikipedia.org/wiki/Private_Use_Areas
+     * @param {string} str
+     * @returns {string}
+     */
+    static escapeWhitespace(str) {
+        return str.replace(/[\x09-\x10]/g, function(c) {
+            return String.fromCharCode(0xe000 + c.charCodeAt(0));
+        });
+    }
+
+
     /**
      * Parse a string entered by a user and replace escaped chars with the bytes they represent.
      *
@@ -461,6 +474,9 @@ class Utils {
      * Utils.strToArrayBuffer("你好");
      */
     static strToArrayBuffer(str) {
+        log.debug(`Converting string[${str?.length}] to array buffer`);
+        if (!str) return new ArrayBuffer;
+
         const arr = new Uint8Array(str.length);
         let i = str.length, b;
         while (i--) {
@@ -487,17 +503,20 @@ class Utils {
      * Utils.strToUtf8ArrayBuffer("你好");
      */
     static strToUtf8ArrayBuffer(str) {
-        const utf8Str = utf8.encode(str);
+        log.debug(`Converting string[${str?.length}] to UTF8 array buffer`);
+        if (!str) return new ArrayBuffer;
 
-        if (str.length !== utf8Str.length) {
-            if (isWorkerEnvironment()) {
+        const buffer = new TextEncoder("utf-8").encode(str);
+
+        if (str.length !== buffer.length) {
+            if (isWorkerEnvironment() && self && typeof self.setOption === "function") {
                 self.setOption("attemptHighlight", false);
             } else if (isWebEnvironment()) {
                 window.app.options.attemptHighlight = false;
             }
         }
 
-        return Utils.strToArrayBuffer(utf8Str);
+        return buffer.buffer;
     }
 
 
@@ -516,6 +535,8 @@ class Utils {
      * Utils.strToByteArray("你好");
      */
     static strToByteArray(str) {
+        log.debug(`Converting string[${str?.length}] to byte array`);
+        if (!str) return [];
         const byteArray = new Array(str.length);
         let i = str.length, b;
         while (i--) {
@@ -542,6 +563,8 @@ class Utils {
      * Utils.strToUtf8ByteArray("你好");
      */
     static strToUtf8ByteArray(str) {
+        log.debug(`Converting string[${str?.length}] to UTF8 byte array`);
+        if (!str) return [];
         const utf8Str = utf8.encode(str);
 
         if (str.length !== utf8Str.length) {
@@ -570,6 +593,8 @@ class Utils {
      * Utils.strToCharcode("你好");
      */
     static strToCharcode(str) {
+        log.debug(`Converting string[${str?.length}] to charcode`);
+        if (!str) return [];
         const charcode = [];
 
         for (let i = 0; i < str.length; i++) {
@@ -604,20 +629,26 @@ class Utils {
      * Utils.byteArrayToUtf8([228,189,160,229,165,189]);
      */
     static byteArrayToUtf8(byteArray) {
-        const str = Utils.byteArrayToChars(byteArray);
+        log.debug(`Converting byte array[${byteArray?.length}] to UTF8`);
+        if (!byteArray || !byteArray.length) return "";
+        if (!(byteArray instanceof Uint8Array))
+            byteArray = new Uint8Array(byteArray);
+
         try {
-            const utf8Str = utf8.decode(str);
-            if (str.length !== utf8Str.length) {
+            const str = new TextDecoder("utf-8", {fatal: true}).decode(byteArray);
+
+            if (str.length !== byteArray.length) {
                 if (isWorkerEnvironment()) {
                     self.setOption("attemptHighlight", false);
                 } else if (isWebEnvironment()) {
                     window.app.options.attemptHighlight = false;
                 }
             }
-            return utf8Str;
+
+            return str;
         } catch (err) {
             // If it fails, treat it as ANSI
-            return str;
+            return Utils.byteArrayToChars(byteArray);
         }
     }
 
@@ -636,11 +667,13 @@ class Utils {
      * Utils.byteArrayToChars([20320,22909]);
      */
     static byteArrayToChars(byteArray) {
-        if (!byteArray) return "";
+        log.debug(`Converting byte array[${byteArray?.length}] to chars`);
+        if (!byteArray || !byteArray.length) return "";
         let str = "";
-        // String concatenation appears to be faster than an array join
-        for (let i = 0; i < byteArray.length;) {
-            str += String.fromCharCode(byteArray[i++]);
+        // Maxiumum arg length for fromCharCode is 65535, but the stack may already be fairly deep,
+        // so don't get too near it.
+        for (let i = 0; i < byteArray.length; i += 20000) {
+            str += String.fromCharCode(...(byteArray.slice(i, i+20000)));
         }
         return str;
     }
@@ -658,6 +691,8 @@ class Utils {
      * Utils.arrayBufferToStr(Uint8Array.from([104,101,108,108,111]).buffer);
      */
     static arrayBufferToStr(arrayBuffer, utf8=true) {
+        log.debug(`Converting array buffer[${arrayBuffer?.byteLength}] to str`);
+        if (!arrayBuffer || !arrayBuffer.byteLength) return "";
         const arr = new Uint8Array(arrayBuffer);
         return utf8 ? Utils.byteArrayToUtf8(arr) : Utils.byteArrayToChars(arr);
     }
@@ -789,10 +824,10 @@ class Utils {
         }
 
         if (removeScriptAndStyle) {
-            htmlStr = recursiveRemove(/<script[^>]*>.*?<\/script[^>]*>/gi, htmlStr);
-            htmlStr = recursiveRemove(/<style[^>]*>.*?<\/style[^>]*>/gi, htmlStr);
+            htmlStr = recursiveRemove(/<script[^>]*>(\s|\S)*?<\/script[^>]*>/gi, htmlStr);
+            htmlStr = recursiveRemove(/<style[^>]*>(\s|\S)*?<\/style[^>]*>/gi, htmlStr);
         }
-        return htmlStr.replace(/<[^>]+>/g, "");
+        return recursiveRemove(/<[^>]+>/g, htmlStr);
     }
 
 
@@ -800,6 +835,11 @@ class Utils {
      * Escapes HTML tags in a string to stop them being rendered.
      * https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet
      *
+     * Null bytes are a special case and are converted to a character from the Unicode
+     * Private Use Area, which CyberChef will display as a control character picture.
+     * This is done due to null bytes not being rendered or stored correctly in HTML
+     * DOM building.
+     *
      * @param {string} str
      * @returns string
      *
@@ -814,12 +854,13 @@ class Utils {
             ">": "&gt;",
             '"': "&quot;",
             "'": "&#x27;", // &apos; not recommended because it's not in the HTML spec
-            "`": "&#x60;"
+            "`": "&#x60;",
+            "\u0000": "\ue000"
         };
 
-        return str.replace(/[&<>"'`]/g, function (match) {
+        return str ? str.replace(/[&<>"'`\u0000]/g, function (match) {
             return HTML_CHARS[match];
-        });
+        }) : str;
     }
 
 
@@ -841,10 +882,11 @@ class Utils {
             "&quot;": '"',
             "&#x27;": "'",
             "&#x2F;": "/",
-            "&#x60;": "`"
+            "&#x60;": "`",
+            "\ue000": "\u0000"
         };
 
-        return str.replace(/&#?x?[a-z0-9]{2,4};/ig, function (match) {
+        return str.replace(/(&#?x?[a-z0-9]{2,4};|\ue000)/ig, function (match) {
             return HTML_CHARS[match] || match;
         });
     }

src/core/dishTypes/DishBigNumber.mjs

@@ -24,12 +24,11 @@ class DishBigNumber extends DishType {
 
     /**
      * convert the given value from a ArrayBuffer
-     * @param {boolean} notUTF8
      */
-    static fromArrayBuffer(notUTF8) {
+    static fromArrayBuffer() {
         DishBigNumber.checkForValue(this.value);
         try {
-            this.value = new BigNumber(Utils.arrayBufferToStr(this.value, !notUTF8));
+            this.value = new BigNumber(Utils.arrayBufferToStr(this.value));
         } catch (err) {
             this.value = new BigNumber(NaN);
         }

src/core/dishTypes/DishJSON.mjs

@@ -22,11 +22,10 @@ class DishJSON extends DishType {
 
     /**
      * convert the given value from a ArrayBuffer
-     * @param {boolean} notUTF8
      */
-    static fromArrayBuffer(notUTF8) {
+    static fromArrayBuffer() {
         DishJSON.checkForValue(this.value);
-        this.value = JSON.parse(Utils.arrayBufferToStr(this.value, !notUTF8));
+        this.value = JSON.parse(Utils.arrayBufferToStr(this.value));
     }
 }
 

src/core/dishTypes/DishNumber.mjs

@@ -23,11 +23,10 @@ class DishNumber extends DishType {
 
     /**
      * convert the given value from a ArrayBuffer
-     * @param {boolean} notUTF8
      */
-    static fromArrayBuffer(notUTF8) {
+    static fromArrayBuffer() {
         DishNumber.checkForValue(this.value);
-        this.value = this.value ? parseFloat(Utils.arrayBufferToStr(this.value, !notUTF8)) : 0;
+        this.value = this.value ? parseFloat(Utils.arrayBufferToStr(this.value)) : 0;
     }
 }
 

src/core/dishTypes/DishString.mjs

@@ -23,11 +23,10 @@ class DishString extends DishType {
 
     /**
      * convert the given value from a ArrayBuffer
-     * @param {boolean} notUTF8
      */
-    static fromArrayBuffer(notUTF8) {
+    static fromArrayBuffer() {
         DishString.checkForValue(this.value);
-        this.value = this.value ? Utils.arrayBufferToStr(this.value, !notUTF8) : "";
+        this.value = this.value ? Utils.arrayBufferToStr(this.value) : "";
     }
 }
 

src/core/dishTypes/DishType.mjs

@@ -29,9 +29,8 @@ class DishType {
 
     /**
      * convert the given value from a ArrayBuffer
-     * @param {boolean} notUTF8
      */
-    static fromArrayBuffer(notUTF8=undefined) {
+    static fromArrayBuffer() {
         throw new Error("fromArrayBuffer has not been implemented");
     }
 }

src/core/lib/Base64.mjs

@@ -25,12 +25,12 @@ import OperationError from "../errors/OperationError.mjs";
  */
 export function toBase64(data, alphabet="A-Za-z0-9+/=") {
     if (!data) return "";
+    if (typeof data == "string") {
+        data = Utils.strToArrayBuffer(data);
+    }
     if (data instanceof ArrayBuffer) {
         data = new Uint8Array(data);
     }
-    if (typeof data == "string") {
-        data = Utils.strToByteArray(data);
-    }
 
     alphabet = Utils.expandAlphRange(alphabet).join("");
     if (alphabet.length !== 64 && alphabet.length !== 65) { // Allow for padding

src/core/lib/ChrEnc.mjs

@@ -6,10 +6,12 @@
  * @license Apache-2.0
  */
 
+import cptable from "codepage";
+
 /**
  * Character encoding format mappings.
  */
-export const IO_FORMAT = {
+export const CHR_ENC_CODE_PAGES = {
     "UTF-8 (65001)": 65001,
     "UTF-7 (65000)": 65000,
     "UTF-16LE (1200)": 1200,
@@ -164,6 +166,57 @@ export const IO_FORMAT = {
     "Simplified Chinese GB18030 (54936)": 54936,
 };
 
+
+export const CHR_ENC_SIMPLE_LOOKUP = {};
+export const CHR_ENC_SIMPLE_REVERSE_LOOKUP = {};
+
+for (const name in CHR_ENC_CODE_PAGES) {
+    const simpleName = name.match(/(^.+)\([\d/]+\)$/)[1];
+
+    CHR_ENC_SIMPLE_LOOKUP[simpleName] = CHR_ENC_CODE_PAGES[name];
+    CHR_ENC_SIMPLE_REVERSE_LOOKUP[CHR_ENC_CODE_PAGES[name]] = simpleName;
+}
+
+
+/**
+ * Returns the width of the character set for the given codepage.
+ * For example, UTF-8 is a Single Byte Character Set, whereas
+ * UTF-16 is a Double Byte Character Set.
+ *
+ * @param {number} page - The codepage number
+ * @returns {number}
+ */
+export function chrEncWidth(page) {
+    if (typeof page !== "number") return 0;
+
+    // Raw Bytes have a width of 1
+    if (page === 0) return 1;
+
+    const pageStr = page.toString();
+    // Confirm this page is legitimate
+    if (!Object.prototype.hasOwnProperty.call(CHR_ENC_SIMPLE_REVERSE_LOOKUP, pageStr))
+        return 0;
+
+    // Statically defined code pages
+    if (Object.prototype.hasOwnProperty.call(cptable, pageStr))
+        return cptable[pageStr].dec.length > 256 ? 2 : 1;
+
+    // Cached code pages
+    if (cptable.utils.cache.sbcs.includes(pageStr))
+        return 1;
+    if (cptable.utils.cache.dbcs.includes(pageStr))
+        return 2;
+
+    // Dynamically generated code pages
+    if (Object.prototype.hasOwnProperty.call(cptable.utils.magic, pageStr)) {
+        // Generate a single character and measure it
+        const a = cptable.utils.encode(page, "a");
+        return a.length;
+    }
+
+    return 0;
+}
+
 /**
  * Unicode Normalisation Forms
  *

src/core/lib/QRCode.mjs

@@ -10,8 +10,7 @@ import OperationError from "../errors/OperationError.mjs";
 import jsQR from "jsqr";
 import qr from "qr-image";
 import Utils from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Parses a QR code image from an image

src/core/operations/AddTextToImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Add Text To Image operation

src/core/operations/BlurImage.mjs

@@ -10,8 +10,7 @@ import { isWorkerEnvironment } from "../Utils.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { gaussianBlur } from "../lib/ImageManipulation.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Blur Image operation

src/core/operations/ContainImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Contain Image operation

src/core/operations/ConvertImageFormat.mjs

@@ -8,8 +8,7 @@ import Operation from "../Operation.mjs";
 import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Convert Image Format operation

src/core/operations/CoverImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Cover Image operation

src/core/operations/CropImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Crop Image operation

src/core/operations/DecodeText.mjs

@@ -6,7 +6,7 @@
 
 import Operation from "../Operation.mjs";
 import cptable from "codepage";
-import {IO_FORMAT} from "../lib/ChrEnc.mjs";
+import {CHR_ENC_CODE_PAGES} from "../lib/ChrEnc.mjs";
 
 /**
  * Decode text operation
@@ -26,7 +26,7 @@ class DecodeText extends Operation {
             "<br><br>",
             "Supported charsets are:",
             "<ul>",
-            Object.keys(IO_FORMAT).map(e => `<li>${e}</li>`).join("\n"),
+            Object.keys(CHR_ENC_CODE_PAGES).map(e => `<li>${e}</li>`).join("\n"),
             "</ul>",
         ].join("\n");
         this.infoURL = "https://wikipedia.org/wiki/Character_encoding";
@@ -36,7 +36,7 @@ class DecodeText extends Operation {
             {
                 "name": "Encoding",
                 "type": "option",
-                "value": Object.keys(IO_FORMAT)
+                "value": Object.keys(CHR_ENC_CODE_PAGES)
             }
         ];
     }
@@ -47,7 +47,7 @@ class DecodeText extends Operation {
      * @returns {string}
      */
     run(input, args) {
-        const format = IO_FORMAT[args[0]];
+        const format = CHR_ENC_CODE_PAGES[args[0]];
         return cptable.utils.decode(format, new Uint8Array(input));
     }
 

src/core/operations/DetectFileType.mjs

@@ -65,7 +65,7 @@ class DetectFileType extends Operation {
 Extension:   ${type.extension}
 MIME type:   ${type.mime}\n`;
 
-                if (type.description && type.description.length) {
+                if (type?.description?.length) {
                     output += `Description: ${type.description}\n`;
                 }
 

src/core/operations/DitherImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Image Dither operation

src/core/operations/EncodeText.mjs

@@ -6,7 +6,7 @@
 
 import Operation from "../Operation.mjs";
 import cptable from "codepage";
-import {IO_FORMAT} from "../lib/ChrEnc.mjs";
+import {CHR_ENC_CODE_PAGES} from "../lib/ChrEnc.mjs";
 
 /**
  * Encode text operation
@@ -26,7 +26,7 @@ class EncodeText extends Operation {
             "<br><br>",
             "Supported charsets are:",
             "<ul>",
-            Object.keys(IO_FORMAT).map(e => `<li>${e}</li>`).join("\n"),
+            Object.keys(CHR_ENC_CODE_PAGES).map(e => `<li>${e}</li>`).join("\n"),
             "</ul>",
         ].join("\n");
         this.infoURL = "https://wikipedia.org/wiki/Character_encoding";
@@ -36,7 +36,7 @@ class EncodeText extends Operation {
             {
                 "name": "Encoding",
                 "type": "option",
-                "value": Object.keys(IO_FORMAT)
+                "value": Object.keys(CHR_ENC_CODE_PAGES)
             }
         ];
     }
@@ -47,7 +47,7 @@ class EncodeText extends Operation {
      * @returns {ArrayBuffer}
      */
     run(input, args) {
-        const format = IO_FORMAT[args[0]];
+        const format = CHR_ENC_CODE_PAGES[args[0]];
         const encoded = cptable.utils.encode(format, input);
         return new Uint8Array(encoded).buffer;
     }

src/core/operations/Entropy.mjs

@@ -358,7 +358,7 @@ class Entropy extends Operation {
 
         <br><script>
             var canvas = document.getElementById("chart-area"),
-                parentRect = canvas.parentNode.getBoundingClientRect(),
+                parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
                 entropy = ${entropy},
                 height = parentRect.height * 0.25;
 

src/core/operations/ExtractLSB.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import Utils from "../Utils.mjs";
 import { fromBinary } from "../lib/Binary.mjs";
 import { isImage } from "../lib/FileType.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Extract LSB operation

src/core/operations/ExtractRGBA.mjs

@@ -7,8 +7,7 @@
 import Operation from "../Operation.mjs";
 import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 import {RGBA_DELIM_OPTIONS} from "../lib/Delim.mjs";
 

src/core/operations/FlipImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Flip Image operation

src/core/operations/FrequencyDistribution.mjs

@@ -91,7 +91,7 @@ Number of bytes not represented: ${256 - freq.bytesRepresented}
 
 <script>
     var canvas = document.getElementById("chart-area"),
-        parentRect = canvas.parentNode.getBoundingClientRect(),
+        parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
         scores = ${JSON.stringify(freq.percentages)};
 
     canvas.width = parentRect.width * 0.95;

src/core/operations/FromBCD.mjs

@@ -84,7 +84,7 @@ class FromBCD extends Operation {
                 break;
             case "Raw":
             default:
-                byteArray = Utils.strToByteArray(input);
+                byteArray = new Uint8Array(Utils.strToArrayBuffer(input));
                 byteArray.forEach(b => {
                     nibbles.push(b >>> 4);
                     nibbles.push(b & 15);

src/core/operations/FromCharcode.mjs

@@ -26,7 +26,7 @@ class FromCharcode extends Operation {
         this.description = "Converts unicode character codes back into text.<br><br>e.g. <code>0393 03b5 03b9 03ac 20 03c3 03bf 03c5</code> becomes <code>Γειά σου</code>";
         this.infoURL = "https://wikipedia.org/wiki/Plane_(Unicode)";
         this.inputType = "string";
-        this.outputType = "byteArray";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 "name": "Delimiter",
@@ -44,7 +44,7 @@ class FromCharcode extends Operation {
     /**
      * @param {string} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      *
      * @throws {OperationError} if base out of range
      */
@@ -59,7 +59,7 @@ class FromCharcode extends Operation {
         }
 
         if (input.length === 0) {
-            return [];
+            return new ArrayBuffer;
         }
 
         if (base !== 16 && isWorkerEnvironment()) self.setOption("attemptHighlight", false);
@@ -77,7 +77,7 @@ class FromCharcode extends Operation {
         for (i = 0; i < bites.length; i++) {
             latin1 += Utils.chr(parseInt(bites[i], base));
         }
-        return Utils.strToByteArray(latin1);
+        return Utils.strToArrayBuffer(latin1);
     }
 
 }

src/core/operations/GenerateImage.mjs

@@ -10,8 +10,7 @@ import Utils from "../Utils.mjs";
 import {isImage} from "../lib/FileType.mjs";
 import {toBase64} from "../lib/Base64.mjs";
 import {isWorkerEnvironment} from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Generate Image operation

src/core/operations/HammingDistance.mjs

@@ -68,8 +68,8 @@ class HammingDistance extends Operation {
             samples[0] = fromHex(samples[0]);
             samples[1] = fromHex(samples[1]);
         } else {
-            samples[0] = Utils.strToByteArray(samples[0]);
-            samples[1] = Utils.strToByteArray(samples[1]);
+            samples[0] = new Uint8Array(Utils.strToArrayBuffer(samples[0]));
+            samples[1] = new Uint8Array(Utils.strToArrayBuffer(samples[1]));
         }
 
         let dist = 0;

src/core/operations/ImageBrightnessContrast.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Image Brightness / Contrast operation

src/core/operations/ImageFilter.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Image Filter operation

src/core/operations/ImageHueSaturationLightness.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Image Hue/Saturation/Lightness operation

src/core/operations/ImageOpacity.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Image Opacity operation

src/core/operations/IndexOfCoincidence.mjs

@@ -78,7 +78,7 @@ The graph shows the IC of the input data. A low IC generally means that the text
 
 <script type='application/javascript'>
   var canvas = document.getElementById("chart-area"),
-      parentRect = canvas.parentNode.getBoundingClientRect(),
+      parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
       ic = ${ic};
 
   canvas.width = parentRect.width * 0.95;

src/core/operations/InvertImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Invert Image operation

src/core/operations/Magic.mjs

@@ -149,7 +149,7 @@ class Magic extends Operation {
 
             output += `<tr>
                 <td><a href="#${recipeURL}">${Utils.generatePrettyRecipe(option.recipe, true)}</a></td>
-                <td>${Utils.escapeHtml(Utils.printable(Utils.truncate(option.data, 99)))}</td>
+                <td>${Utils.escapeHtml(Utils.escapeWhitespace(Utils.truncate(option.data, 99)))}</td>
                 <td>${language}${fileType}${matchingOps}${useful}${validUTF8}${entropy}</td>
             </tr>`;
         });

src/core/operations/NTHash.mjs

@@ -5,8 +5,6 @@
  */
 
 import Operation from "../Operation.mjs";
-
-import cptable from "codepage";
 import {runHash} from "../lib/Hash.mjs";
 
 /**
@@ -35,10 +33,14 @@ class NTHash extends Operation {
      * @returns {string}
      */
     run(input, args) {
-        const format = 1200; // UTF-16LE
-        const encoded = cptable.utils.encode(format, input);
-        const hashed = runHash("md4", encoded);
+        // Convert to UTF-16LE
+        const buf = new ArrayBuffer(input.length * 2);
+        const bufView = new Uint16Array(buf);
+        for (let i = 0; i < input.length; i++) {
+            bufView[i] = input.charCodeAt(i);
+        }
 
+        const hashed = runHash("md4", buf);
         return hashed.toUpperCase();
     }
 }

src/core/operations/NormaliseImage.mjs

@@ -8,8 +8,7 @@ import Operation from "../Operation.mjs";
 import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Normalise Image operation

src/core/operations/PLISTViewer.mjs

@@ -48,7 +48,7 @@ class PlistViewer extends Operation {
             .replace(/<true\/>/g, m => "true")
             .replace(/<\/plist>/g, "/plist")
             .replace(/<date>.+<\/date>/g, m => `${m.slice(6, m.indexOf(/<\/integer>/g)-6)}`)
-            .replace(/<data>(\s|.)+?<\/data>/g, m => `${m.slice(6, m.indexOf(/<\/data>/g)-6)}`)
+            .replace(/<data>[\s\S]+?<\/data>/g, m => `${m.slice(6, m.indexOf(/<\/data>/g)-6)}`)
             .replace(/[ \t\r\f\v]/g, "");
 
         /**

src/core/operations/ParseColourCode.mjs

@@ -112,8 +112,8 @@ CMYK: ${cmyk}
         useAlpha: true
     }).on('colorpickerChange', function(e) {
         var color = e.color.string('rgba');
-        document.getElementById('input-text').value = color;
-        window.app.manager.input.debounceInputChange(new Event("keyup"));
+        window.app.manager.input.setInput(color);
+        window.app.manager.input.inputChange(new Event("keyup"));
     });
 </script>`;
     }

src/core/operations/ParseIPv4Header.mjs

@@ -49,7 +49,7 @@ class ParseIPv4Header extends Operation {
         if (format === "Hex") {
             input = fromHex(input);
         } else if (format === "Raw") {
-            input = Utils.strToByteArray(input);
+            input = new Uint8Array(Utils.strToArrayBuffer(input));
         } else {
             throw new OperationError("Unrecognised input format.");
         }

src/core/operations/ParseX509Certificate.mjs

@@ -71,7 +71,7 @@ class ParseX509Certificate extends Operation {
                     cert.readCertHex(toHex(fromBase64(input, null, "byteArray"), ""));
                     break;
                 case "Raw":
-                    cert.readCertHex(toHex(Utils.strToByteArray(input), ""));
+                    cert.readCertHex(toHex(Utils.strToArrayBuffer(input), ""));
                     break;
                 default:
                     undefinedInputFormat = true;

src/core/operations/PlayMedia.mjs

@@ -77,7 +77,7 @@ class PlayMedia extends Operation {
      * Displays an audio or video element that may be able to play the media
      * file.
      *
-     * @param data {byteArray} Data containing an audio or video file.
+     * @param {byteArray} data Data containing an audio or video file.
      * @returns {string} Markup to display a media player.
      */
     async present(data) {

src/core/operations/ROT13BruteForce.mjs

@@ -86,12 +86,12 @@ class ROT13BruteForce extends Operation {
             }
             const rotatedString = Utils.byteArrayToUtf8(rotated);
             if (rotatedString.toLowerCase().indexOf(cribLower) >= 0) {
-                const rotatedStringPrintable = Utils.printable(rotatedString, false);
+                const rotatedStringEscaped = Utils.escapeWhitespace(rotatedString);
                 if (printAmount) {
                     const amountStr = "Amount = " + (" " + amount).slice(-2) + ": ";
-                    result.push(amountStr + rotatedStringPrintable);
+                    result.push(amountStr + rotatedStringEscaped);
                 } else {
-                    result.push(rotatedStringPrintable);
+                    result.push(rotatedStringEscaped);
                 }
             }
         }

src/core/operations/ROT47BruteForce.mjs

@@ -66,12 +66,12 @@ class ROT47BruteForce extends Operation {
             }
             const rotatedString = Utils.byteArrayToUtf8(rotated);
             if (rotatedString.toLowerCase().indexOf(cribLower) >= 0) {
-                const rotatedStringPrintable = Utils.printable(rotatedString, false);
+                const rotatedStringEscaped = Utils.escapeWhitespace(rotatedString);
                 if (printAmount) {
                     const amountStr = "Amount = " + (" " + amount).slice(-2) + ": ";
-                    result.push(amountStr + rotatedStringPrintable);
+                    result.push(amountStr + rotatedStringEscaped);
                 } else {
-                    result.push(rotatedStringPrintable);
+                    result.push(rotatedStringEscaped);
                 }
             }
         }

src/core/operations/RandomizeColourPalette.mjs

@@ -10,8 +10,7 @@ import Utils from "../Utils.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { runHash } from "../lib/Hash.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Randomize Colour Palette operation

src/core/operations/ResizeImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Resize Image operation

src/core/operations/RotateImage.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Rotate Image operation

src/core/operations/ScanForEmbeddedFiles.mjs

@@ -60,7 +60,7 @@ class ScanForEmbeddedFiles extends Operation {
   Extension:   ${type.fileDetails.extension}
   MIME type:   ${type.fileDetails.mime}\n`;
 
-                if (type.fileDetails.description && type.fileDetails.description.length) {
+                if (type?.fileDetails?.description?.length) {
                     output += `  Description: ${type.fileDetails.description}\n`;
                 }
             });

src/core/operations/SharpenImage.mjs

@@ -10,8 +10,7 @@ import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
 import { gaussianBlur } from "../lib/ImageManipulation.mjs";
 import { isWorkerEnvironment } from "../Utils.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Sharpen Image operation

src/core/operations/ShowOnMap.mjs

@@ -90,7 +90,14 @@ class ShowOnMap extends Operation {
             leafletUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.js",
             leafletCssUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.css";
         return `<link rel="stylesheet" href="${leafletCssUrl}" crossorigin=""/>
-<style>#output-html { white-space: normal; padding: 0; }</style>
+<style>
+    #output-text .cm-content,
+    #output-text .cm-line,
+    #output-html {
+        padding: 0;
+        white-space: normal;
+    }
+</style>
 <div id="presentedMap" style="width: 100%; height: 100%;"></div>
 <script type="text/javascript">
 var mapscript = document.createElement('script');

src/core/operations/SplitColourChannels.mjs

@@ -8,8 +8,7 @@ import Operation from "../Operation.mjs";
 import OperationError from "../errors/OperationError.mjs";
 import Utils from "../Utils.mjs";
 import {isImage} from "../lib/FileType.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * Split Colour Channels operation

src/core/operations/TextEncodingBruteForce.mjs

@@ -8,7 +8,7 @@
 import Operation from "../Operation.mjs";
 import Utils from "../Utils.mjs";
 import cptable from "codepage";
-import {IO_FORMAT} from "../lib/ChrEnc.mjs";
+import {CHR_ENC_CODE_PAGES} from "../lib/ChrEnc.mjs";
 
 /**
  * Text Encoding Brute Force operation
@@ -28,7 +28,7 @@ class TextEncodingBruteForce extends Operation {
             "<br><br>",
             "Supported charsets are:",
             "<ul>",
-            Object.keys(IO_FORMAT).map(e => `<li>${e}</li>`).join("\n"),
+            Object.keys(CHR_ENC_CODE_PAGES).map(e => `<li>${e}</li>`).join("\n"),
             "</ul>"
         ].join("\n");
         this.infoURL = "https://wikipedia.org/wiki/Character_encoding";
@@ -51,15 +51,15 @@ class TextEncodingBruteForce extends Operation {
      */
     run(input, args) {
         const output = {},
-            charsets = Object.keys(IO_FORMAT),
+            charsets = Object.keys(CHR_ENC_CODE_PAGES),
             mode = args[0];
 
         charsets.forEach(charset => {
             try {
                 if (mode === "Decode") {
-                    output[charset] = cptable.utils.decode(IO_FORMAT[charset], input);
+                    output[charset] = cptable.utils.decode(CHR_ENC_CODE_PAGES[charset], input);
                 } else {
-                    output[charset] = Utils.arrayBufferToStr(cptable.utils.encode(IO_FORMAT[charset], input));
+                    output[charset] = Utils.arrayBufferToStr(cptable.utils.encode(CHR_ENC_CODE_PAGES[charset], input));
                 }
             } catch (err) {
                 output[charset] = "Could not decode.";
@@ -79,7 +79,7 @@ class TextEncodingBruteForce extends Operation {
         let table = "<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Encoding</th><th>Value</th></tr>";
 
         for (const enc in encodings) {
-            const value = Utils.escapeHtml(Utils.printable(encodings[enc], true));
+            const value = Utils.escapeHtml(Utils.escapeWhitespace(encodings[enc]));
             table += `<tr><td>${enc}</td><td>${value}</td></tr>`;
         }
 

src/core/operations/ToHex.mjs

@@ -76,7 +76,7 @@ class ToHex extends Operation {
         }
 
         const lineSize = args[1],
-            len = (delim === "\r\n" ? 1 : delim.length) + commaLen;
+            len = delim.length + commaLen;
 
         const countLF = function(p) {
             // Count the number of LFs from 0 upto p
@@ -105,7 +105,7 @@ class ToHex extends Operation {
      * @returns {Object[]} pos
      */
     highlightReverse(pos, args) {
-        let delim, commaLen;
+        let delim, commaLen = 0;
         if (args[0] === "0x with comma") {
             delim = "0x";
             commaLen = 1;
@@ -114,7 +114,7 @@ class ToHex extends Operation {
         }
 
         const lineSize = args[1],
-            len = (delim === "\r\n" ? 1 : delim.length) + commaLen,
+            len = delim.length + commaLen,
             width = len + 2;
 
         const countLF = function(p) {

src/core/operations/ToHexdump.mjs

@@ -63,33 +63,32 @@ class ToHexdump extends Operation {
         if (length < 1 || Math.round(length) !== length)
             throw new OperationError("Width must be a positive integer");
 
-        let output = "";
+        const lines = [];
         for (let i = 0; i < data.length; i += length) {
-            const buff = data.slice(i, i+length);
-            let hexa = "";
-            for (let j = 0; j < buff.length; j++) {
-                hexa += Utils.hex(buff[j], padding) + " ";
-            }
-
             let lineNo = Utils.hex(i, 8);
 
+            const buff = data.slice(i, i+length);
+            const hex = [];
+            buff.forEach(b => hex.push(Utils.hex(b, padding)));
+            let hexStr = hex.join(" ").padEnd(length*(padding+1), " ");
+
+            const ascii = Utils.printable(Utils.byteArrayToChars(buff), false, unixFormat);
+            const asciiStr = ascii.padEnd(buff.length, " ");
+
             if (upperCase) {
-                hexa = hexa.toUpperCase();
+                hexStr = hexStr.toUpperCase();
                 lineNo = lineNo.toUpperCase();
             }
 
-            output += lineNo + "  " +
-                hexa.padEnd(length*(padding+1), " ") +
-                " |" +
-                Utils.printable(Utils.byteArrayToChars(buff), false, unixFormat).padEnd(buff.length, " ") +
-                "|\n";
+            lines.push(`${lineNo}  ${hexStr} |${asciiStr}|`);
+
 
             if (includeFinalLength && i+buff.length === data.length) {
-                output += Utils.hex(i+buff.length, 8) + "\n";
+                lines.push(Utils.hex(i+buff.length, 8));
             }
         }
 
-        return output.slice(0, -1);
+        return lines.join("\n");
     }
 
     /**

src/core/operations/TranslateDateTimeFormat.mjs

@@ -5,6 +5,7 @@
  */
 
 import Operation from "../Operation.mjs";
+import Utils from "../Utils.mjs";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime.mjs";
 
@@ -24,7 +25,8 @@ class TranslateDateTimeFormat extends Operation {
         this.description = "Parses a datetime string in one format and re-writes it in another.<br><br>Run with no input to see the relevant format string examples.";
         this.infoURL = "https://momentjs.com/docs/#/parsing/string-format/";
         this.inputType = "string";
-        this.outputType = "html";
+        this.outputType = "string";
+        this.presentType = "html";
         this.args = [
             {
                 "name": "Built in formats",
@@ -53,12 +55,14 @@ class TranslateDateTimeFormat extends Operation {
                 "value": ["UTC"].concat(moment.tz.names())
             }
         ];
+
+        this.invalidFormatMessage = "Invalid format.";
     }
 
     /**
      * @param {string} input
      * @param {Object[]} args
-     * @returns {html}
+     * @returns {string}
      */
     run(input, args) {
         const [inputFormat, inputTimezone, outputFormat, outputTimezone] = args.slice(1);
@@ -68,12 +72,22 @@ class TranslateDateTimeFormat extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
+            return this.invalidFormatMessage;
         }
 
-        return date.tz(outputTimezone).format(outputFormat);
+        return date.tz(outputTimezone).format(outputFormat.replace(/[<>]/g, ""));
     }
 
+    /**
+     * @param {string} data
+     * @returns {html}
+     */
+    present(data) {
+        if (data === this.invalidFormatMessage) {
+            return `${data}\n\n${FORMAT_EXAMPLES}`;
+        }
+        return Utils.escapeHtml(data);
+    }
 }
 
 export default TranslateDateTimeFormat;

src/core/operations/ViewBitPlane.mjs

@@ -9,8 +9,7 @@ import OperationError from "../errors/OperationError.mjs";
 import Utils from "../Utils.mjs";
 import { isImage } from "../lib/FileType.mjs";
 import { toBase64 } from "../lib/Base64.mjs";
-import jimplib from "jimp/es/index.js";
-const jimp = jimplib.default ? jimplib.default : jimplib;
+import jimp from "jimp";
 
 /**
  * View Bit Plane operation

src/core/operations/XORBruteForce.mjs

@@ -126,11 +126,7 @@ class XORBruteForce extends Operation {
 
             if (crib && resultUtf8.toLowerCase().indexOf(crib) < 0) continue;
             if (printKey) record += "Key = " + Utils.hex(key, (2*keyLength)) + ": ";
-            if (outputHex) {
-                record += toHex(result);
-            } else {
-                record += Utils.printable(resultUtf8, false);
-            }
+            record += outputHex ? toHex(result) : Utils.escapeWhitespace(resultUtf8);
 
             output.push(record);
         }

src/core/vendor/gost/gostCipher.mjs

@@ -198,7 +198,7 @@ function randomSeed(e) {
 function buffer(d) {
     if (d instanceof CryptoOperationData)
         return d;
-    else if (d && d.buffer && d.buffer instanceof CryptoOperationData)
+    else if (d && d?.buffer instanceof CryptoOperationData)
         return d.byteOffset === 0 && d.byteLength === d.buffer.byteLength ?
                 d.buffer : new Uint8Array(new Uint8Array(d, d.byteOffset, d.byteLength)).buffer;
     else
@@ -2076,7 +2076,7 @@ function GostCipher(algorithm) // <editor-fold defaultstate="collapsed">
                     ((algorithm.keyWrapping || 'NO') !== 'NO' ? algorithm.keyWrapping : '') + 'KW' :
                     (algorithm.block || 'ECB') + ((algorithm.block === 'CFB' || algorithm.block === 'OFB' ||
                     (algorithm.block === 'CTR' && algorithm.version === 2015)) &&
-                    algorithm.shiftBits && algorithm.shiftBits !== this.blockLength ? '-' + algorithm.shiftBits : '') +
+                    algorithm?.shiftBits !== this.blockLength ? '-' + algorithm.shiftBits : '') +
                     (algorithm.padding ? '-' + (algorithm.padding || (algorithm.block === 'CTR' ||
                             algorithm.block === 'CFB' || algorithm.block === 'OFB' ? 'NO' : 'ZERO')) + 'PADDING' : '') +
                     ((algorithm.keyMeshing || 'NO') !== 'NO' ? '-CPKEYMESHING' : '')) +

src/core/vendor/gost/gostCoding.mjs

@@ -48,7 +48,7 @@ var Date = Date;
 function buffer(d) {
     if (d instanceof CryptoOperationData)
         return d;
-    else if (d && d.buffer && d.buffer instanceof CryptoOperationData)
+    else if (d && d?.buffer instanceof CryptoOperationData)
         return d.byteOffset === 0 && d.byteLength === d.buffer.byteLength ?
                 d.buffer : new Uint8Array(new Uint8Array(d, d.byteOffset, d.byteLength)).buffer;
     else
@@ -311,7 +311,7 @@ var Hex = {// <editor-fold defaultstate="collapsed">
      * @returns {CryptoOperationData} Decoded binary data
      */
     decode: function (s, endean) {
-        s = s.replace(/[^A-fa-f0-9]/g, '');
+        s = s.replace(/[^A-Fa-f0-9]/g, '');
         var n = Math.ceil(s.length / 2), r = new Uint8Array(n);
         s = (s.length % 2 > 0 ? '0' : '') + s;
         if (endean && ((typeof endean !== 'string') ||
@@ -370,7 +370,7 @@ var Int16 = {// <editor-fold defaultstate="collapsed">
      * @returns {CryptoOperationData} Decoded binary data
      */
     decode: function (s) {
-        s = (s || '').replace(/[^\-A-fa-f0-9]/g, '');
+        s = (s || '').replace(/[^\-A-Fa-f0-9]/g, '');
         if (s.length === 0)
             s = '0';
         // Signature

src/core/vendor/gost/gostCrypto.mjs

@@ -611,7 +611,7 @@ if (!Promise) {
                             return;
                         }
                         value = mswrap(value);
-                        if (value && value.then && value.then.call) {
+                        if (value && value?.then?.call) {
                             value.then(resolve, reject);
                         } else {
                             resolve(value);
@@ -627,7 +627,7 @@ if (!Promise) {
                             return;
                         }
                         reason = mswrap(reason);
-                        if (reason && reason.then && reason.then.call) {
+                        if (reason && reason?.then?.call) {
                             reason.then(resolve, reject);
                         } else {
                             reject(reason);
@@ -698,7 +698,7 @@ if (!Promise) {
 
                 for (var i = 0, n = promises.length; i < n; i++) {
                     var data = promises[i];
-                    if (data.then && data.then.call)
+                    if (data?.then?.call)
                         data.then(asyncResolve(i), asyncReject);
                     else
                         result[i] = data;
@@ -1492,7 +1492,7 @@ SubtleCrypto.prototype.exportKey = function (format, key) // <editor-fold defaul
         var raw = extractKey(null, null, key);
         if (format === 'raw')
             return raw;
-        else if (format === 'pkcs8' && key.algorithm && key.algorithm.id) {
+        else if (format === 'pkcs8' && key?.algorithm?.id) {
             if (key.algorithm.procreator === 'VN') {
                 // Add masks for ViPNet
                 var algorithm = key.algorithm, mask;
@@ -1514,7 +1514,7 @@ SubtleCrypto.prototype.exportKey = function (format, key) // <editor-fold defaul
                 });
             } else
                 return gostCrypto.asn1.GostPrivateKeyInfo.encode(key);
-        } else if (format === 'spki' && key.algorithm && key.algorithm.id)
+        } else if (format === 'spki' && key?.algorithm?.id)
             return gostCrypto.asn1.GostSubjectPublicKeyInfo.encode(key);
         else
             throw new NotSupportedError('Key format not supported');

src/core/vendor/gost/gostDigest.mjs

@@ -113,7 +113,7 @@ function getSeed(length) {
 function buffer(d) {
     if (d instanceof ArrayBuffer)
         return d;
-    else if (d && d.buffer && d.buffer instanceof ArrayBuffer)
+    else if (d && d?.buffer instanceof ArrayBuffer)
         return d.byteOffset === 0 && d.byteLength === d.buffer.byteLength ?
                 d.buffer : new Uint8Array(new Uint8Array(d, d.byteOffset, d.byteLength)).buffer;
     else

src/core/vendor/gost/gostSign.mjs

@@ -1445,7 +1445,7 @@ function hash(d) {
 function buffer(d) {
     if (d instanceof CryptoOperationData)
         return d;
-    else if (d && d.buffer && d.buffer instanceof CryptoOperationData)
+    else if (d && d?.buffer instanceof CryptoOperationData)
         return d.byteOffset === 0 && d.byteLength === d.buffer.byteLength ?
                 d.buffer : new Uint8Array(new Uint8Array(d, d.byteOffset, d.byteLength)).buffer;
     else

src/web/App.mjs

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

src/web/HTMLCategory.mjs

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

src/web/HTMLIngredient.mjs

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

src/web/HTMLOperation.mjs

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

src/web/Manager.mjs

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

src/web/html/index.html

@@ -146,7 +146,9 @@
         <div id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">
-                    <a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download>Download CyberChef <i class="material-icons">file_download</i></a>
+                    <a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">
+                        Download CyberChef <i class="material-icons">file_download</i>
+                    </a>
                 </div>
                 <div class="col-md-6" id="notice-wrapper">
                     <span id="notice">
@@ -161,29 +163,35 @@
                     </span>
                 </div>
                 <div class="col" style="text-align: right; padding-right: 0;">
-                    <a href="#" id="options">Options <i class="material-icons">settings</i></a>
-                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support <i class="material-icons">help</i></a>
+                    <a href="#" id="options" data-help-title="Options and Settings" data-help="Configurable options to change how CyberChef behaves. These settings are stored in your browser's local storage, meaning they will persist between sessions that use the same browser profile.">
+                        Options <i class="material-icons">settings</i>
+                    </a>
+                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal" data-help-title="About / Support" data-help="This pane provides information about the CyberChef web app, how to use some of the features, and how to raise bug reports.">
+                        About / Support <i class="material-icons">help</i>
+                    </a>
                 </div>
             </div>
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
-                    <div class="title no-select">Operations</div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2">
+                    <div class="title no-select" data-help-title="Operations list" data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
+                        Operations
+                    </div>
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
 
-                <div id="recipe" class="split split-horizontal no-select">
+                <div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
                     <div class="title no-select">
                         Recipe
                         <span class="pane-controls hide-on-maximised-output">
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe" data-help-title="Saving a recipe" data-help="<p>Recipes can be represented in a few different formats and saved for use at a later date. You can either copy the Recipe configuration and save it somewhere offline for later use, or use your browser's local storage.</p><ul><li><b>Deep link:</b> The easiest way to share a CyberChef Recipe is to copy the deep link, either from the address bar (which is updated as the Recipe or Input changes), or from the 'Save recipe' pane. When you visit this link, the Recipe and Input should be populated from where you left off.</li><li><b>Chef format:</b> This custom format is designed to be compact and easily readable. It is the format used in CyberChef's URL, so it largely uses characters that do not have to be escaped in URL encoding, making it a little easier to understand what a CyberChef URL contains.</li><li><b>Clean JSON:</b> This JSON format uses whitespace and indentation in a way that makes the Recipe easy to read.</li><li><b>Compact JSON:</b> This is the most compact way that the Recipe can be represented in JSON.</li><li><b>Local storage:</b> Alternatively, you can enter a name into the 'Recipe name' field and save to your browser's local storage. The Recipe will then be available to load from the 'Load Recipe' pane as long as you are using the same browser profile. Be aware that if your browser profile is cleaned, you may lose this data.</li></ul>">
                                 <i class="material-icons">save</i>
                             </button>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe" data-help-title="Loading a recipe" data-help="<p>Saved recipes can be loaded using one of the following methods:</p><ul><li>If you have a CyberChef deep link, simply visit that link and the Recipe and Input should be populated automatically.</li><li>If you have a Recipe string in any of the accepted formats, paste it into the 'Load recipe' pane textbox and click 'Load'.</li><li>If you have saved a Recipe to your browser's local storage, it should be available in the dropdown menu in the 'Load recipe' pane. If it is not there, you may not be using the same browser profile, or your profile may have been cleared.</li></ul>">
                                 <i class="material-icons">folder</i>
                             </button>
-                            <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe" data-help-title="Clearing a recipe" data-help="Clicking the 'Clear recipe' button will remove all operations from the Recipe. It will not clear the Input, but it will trigger a Bake if Auto-bake is turned on, which will change the value of the Output.">
                                 <i class="material-icons">delete</i>
                             </button>
                         </span>
@@ -191,18 +199,18 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select hide-on-maximised-output">
-                        <div id="controls-content" class="d-flex align-items-center">
-                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
+                        <div id="controls-content">
+                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
                                 Step
                             </button>
 
-                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
+                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
                                 <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
                                 <span>Bake!</span>
                             </button>
 
                             <div class="form-group" style="display: contents;">
-                                <div class="mx-1 checkbox">
+                                <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
                                     <label id="auto-bake-label">
                                         <input type="checkbox" checked="checked" id="auto-bake">
                                         <br>Auto Bake
@@ -214,34 +222,33 @@
                 </div>
 
                 <div class="split split-horizontal" id="IO">
-                    <div id="input" class="split no-select">
+                    <div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="input-files-info"></div>
-                                <div class="io-info" id="input-selection-info"></div>
-                                <div class="io-info" id="input-info"></div>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab" data-help-title="Tabs" data-help="<p>New tabs can be created to support multiple Inputs. These tabs have their own associated character encodings and EOL separators, as defined in their status bars.</p><p>The deep link in the URL bar only contains information about the currently active tab.</p>">
                                     <i class="material-icons">add</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input" data-help-title="Opening a folder" data-help="<p>You can open a whole folder into CyberChef, which will result in each file being loaded into a separate Input tab.</p><p>CyberChef can handle lots of Input files, but be aware that performance may suffer, especially if the files are large in size.</p><p>Folders can also be loaded by dragging them over the Input pane and dropping them.</p>">
                                     <i class="material-icons">folder_open</i>
                                     <input type="file" id="open-folder" style="display: none" multiple directory webkitdirectory>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input" data-help-title="Opening a file" data-help="<p>Files can be loaded into CyberChef individually or in groups, either using the 'Open file as input' button, or by dragging and dropping them over the Input pane.</p><p>CyberChef can handle reasonably large files (at least 500MB, depending on hardware), but performance may be impacted and some Operations will run very slowly over large Inputs.</p>">
                                     <i class="material-icons">input</i>
                                     <input type="file" id="open-file" style="display: none" multiple>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output" data-help-title="Clearing the Input and Output" data-help="Clicking the 'Clear input and output' button will remove all Inputs and Outputs. It will not clear the Recipe.">
                                     <i class="material-icons">delete</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout" data-help-title="Resetting the pane layout" data-help="CyberChef's panes can be resized to suit your area of focus. This button will reset the pane sizes to their default configuration.">
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
-
                         </div>
-                        <div id="input-tabs-wrapper" style="display: none;" class="no-select">
+
+                        <div id="input-wrapper" class="no-select">
+                            <div id="input-tabs-wrapper" style="display: none;" class="no-select" data-help-proxy="#btn-new-tab">
                                 <span id="btn-previous-input-tab" class="input-tab-buttons">
                                     &lt;
                                 </span>
@@ -265,64 +272,43 @@
                                 <ul id="input-tabs">
                                 </ul>
                             </div>
-                        <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
-                            <div id="input-highlighter" class="no-select"></div>
-                            <textarea id="input-text" class="input-text" spellcheck="false" tabindex="1" autofocus></textarea>
-                            <div class="input-file" id="input-file">
-                                <div class="file-overlay" id="file-overlay"></div>
-                                <div style="position: relative; height: 100%;">
-                                    <div class="io-card card">
-                                        <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon" id="input-file-thumbnail"/>
-                                        <div class="card-body">
-                                            <button type="button" class="close" id="input-file-close">&times;</button>
-                                            Name: <span id="input-file-name"></span><br>
-                                            Size: <span id="input-file-size"></span><br>
-                                            Type: <span id="input-file-type"></span><br>
-                                            Loaded: <span id="input-file-loaded"></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                            <div id="input-text"></div>
                         </div>
                     </div>
 
-                    <div id="output" class="split">
+                    <div id="output" class="split" data-help-title="Output pane" data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
                             <span class="pane-controls">
                                 <div class="io-info" id="bake-info"></div>
-                                <div class="io-info" id="output-selection-info"></div>
-                                <div class="io-info" id="output-info"></div>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none" data-help-title="Saving all outputs to a zip file" data-help="<p>When operating with multiple tabbed Inputs and Outputs, you can use this button to save off all the Outputs at once in a ZIP file.</p><p>Use the 'Bake' button to bake all Inputs at once.</p><p>You will be given the choice to specify the file extension for the Outputs, or you can let CyberChef attempt to detect the filetype of each one. If an Output's type is not clear, CyberChef will use the '.dat' extension.</p>">
                                         <i class="material-icons">archive</i>
                                     </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file" data-help-title="Saving output to a file" data-help="The currently active Output can be saved to a file. You will be asked to specify a filename. CyberChef will attempt to guess the correct file extension based on the data. If a file type cannot be detected, the extension defaults to '.dat' but can be changed manually.">
                                     <i class="material-icons">save</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard" data-help-title="Copying raw output to the clipboard" data-help="<p>Data can be copied from the Output in the normal way by selecting text and copying it. This button provides a quick way of copying the entire output to the clipboard without having to select it. It directly copies the raw data rather than selecting text in the Output editor. Each method should have the same result, but the button may be more efficient for large Outputs as it does not require any DOM interaction.</p>">
                                     <i class="material-icons">content_copy</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Replace input with output">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Replace input with output" data-help-title="Replacing input with output" data-help="<p>This button moves the currently active Output data into the currently active Input tab, overwriting whatever data was already there.</p><p>The Input character encoding and EOL sequence will be changed to match the current Output values, so that the data is interpreted correctly.</p>">
                                     <i class="material-icons">open_in_browser</i>
                                 </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="undo-switch" data-toggle="tooltip" title="Undo" disabled="disabled">
-                                    <i class="material-icons">undo</i>
-                                </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane" data-help-title="Maximising the Output pane" data-help="This button allows you to view the Output pane at maximum size, hiding the Operations, Recipe and Input panes. You can restore the pane to its normal size by clicking the same button again.">
                                     <i class="material-icons">fullscreen</i>
                                 </button>
                             </span>
 
-                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
+                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true" data-help-title="CyberChef Magic!" data-help="<p>One of CyberChef's best features is its ability to automatically detect which Operations might make more sense of your data. The Magic button appears when CyberChef has a suggested Operation for you based on the data in the Output.</p><p>Clicking on the button will add the suggested Operation(s) to your Recipe.</p><p>This background Magic detection will inspect your Output up to three levels deep and attempt to unwrap it using a range of techniques. For more control, use the 'Magic' operation, which allows you to configure greater depth and filter based on various parameters.</p><p>Further information about CyberChef Magic can be found <a href='https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic'>here</a>.</p>">
                                 <svg width="22" height="22" viewBox="0 0 24 24">
                                     <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
                                 </svg>
                             </button>
-                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
+                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value." data-help-title="Staleness indicator" data-help="The staleness indicator is displayed when the Recipe or Input has changed but the Output has not yet been updated to reflect this. It is most commonly displayed when Auto-bake is turned off and indicates that you need to Bake in order to see an accurate Output.">
                                 <i class="material-icons">access_time</i>
                             </span>
                         </div>
-                        <div id="output-wrapper">
+
+                        <div id="output-wrapper" class="no-select">
                             <div id="output-tabs-wrapper" style="display: none" class="no-select">
                                 <span id="btn-previous-output-tab" class="output-tab-buttons">
                                     &lt;
@@ -344,38 +330,10 @@
                                 <ul id="output-tabs">
                                 </ul>
                             </div>
-                            <div class="textarea-wrapper">
-                                <div id="output-highlighter" class="no-select"></div>
-                                <div id="output-html"></div>
-                                <textarea id="output-text" readonly="readonly" spellcheck="false"></textarea>
-                                <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
-                                <div id="output-file">
-                                    <div class="file-overlay"></div>
-                                    <div style="position: relative; height: 100%;">
-                                        <div class="io-card card">
-                                            <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
-                                            <div class="card-body">
-                                                Size: <span id="output-file-size"></span><br>
-                                                <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
-                                                <button id="output-file-show-all" type="button" class="btn btn-warning btn-outline" data-toggle="tooltip" title="Warning: This could crash your browser. Use at your own risk.">Show all</button>
-                                                <div class="input-group">
-                                                    <span class="input-group-prepend">
-                                                        <button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" data-toggle="tooltip" title="View slice">
-                                                            <i class="material-icons">search</i>
-                                                        </button>
-                                                    </span>
-                                                    <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="128" min="0">
-                                                    <div class="input-group-addon">to</div>
-                                                    <input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="256" step="128" min="0">
-                                                    <div class="input-group-addon">KiB</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+                            <div id="output-text"></div>
                             <div id="output-loader">
                                 <div id="output-loader-animation">
-                                        <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
+                                    <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%" data-help-title="Loading animation" data-help="This loading animation shows an accurate representation of how rotors moved on The Bombe, an electro-mechanical device built at Bletchley Park in 1939 by Alan Turing with refinements by Gordon Welchman in 1940. The Bombe was used by the Government Code and Cipher School (the precursor to GCHQ) to discover daily settings of Enigma machines used by the German military in World War 2.<br><br>More information can be found on <a href='https://wikipedia.org/wiki/Bombe'>Wikipedia</a>."></object>
                                 </div>
                                 <div class="loading-msg"></div>
                             </div>
@@ -384,11 +342,10 @@
                 </div>
             </div>
         </div>
-        </div>
 
         <div class="modal fade" id="save-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#save">
                     <div class="modal-header">
                         <h5 class="modal-title">Save recipe</h5>
                     </div>
@@ -429,7 +386,7 @@
                     </div>
                     <div class="modal-body">
                         <div class="form-group" id="save-link-group">
-                            <h6 style="display: inline">Data link</h6>
+                            <h6 style="display: inline">Deep link</h6>
                             <div class="save-link-options">
                                 <label class="checkbox-inline">
                                     <input type="checkbox" id="save-link-recipe-checkbox" checked> Include recipe
@@ -448,7 +405,7 @@
 
         <div class="modal fade" id="load-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#load">
                     <div class="modal-header">
                         <h5 class="modal-title">Load recipe</h5>
                     </div>
@@ -475,7 +432,7 @@
 
         <div class="modal fade" id="options-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#options">
                     <div class="modal-header">
                         <h5 class="modal-title">Options</h5>
                     </div>
@@ -493,25 +450,6 @@
                             </select>
                         </div>
 
-                        <div class="form-group option-item">
-                            <label for="preserveCR" class="bmd-label-floating"> Preserve carriage returns (0x0d)</label>
-                            <select class="form-control" option="preserveCR" id="preserveCR" data-toggle="tooltip" data-placement="bottom" data-offset="-10%" data-html="true" title="HTML textareas don't support carriage returns, so if we want to preserve them in our input, we have to disable editing.<br><br>The default option is to only do this for high-entropy inputs, but you can force the choice using this dropdown.">
-                                <option value="entropy">For high-entropy inputs</option>
-                                <option value="always">Always</option>
-                                <option value="never">Never</option>
-                            </select>
-                        </div>
-
-                        <div class="form-group option-item">
-                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
-                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
-                        </div>
-
-                        <div class="form-group option-item">
-                            <label for="ioDisplayThreshold" class="bmd-label-floating">Size threshold for treating the input and output as a file (KiB)</label>
-                            <input type="number" class="form-control" option="ioDisplayThreshold" id="ioDisplayThreshold">
-                        </div>
-
                         <div class="form-group option-item">
                             <label for="logLevel" class="bmd-label-floating">Console logging level</label>
                             <select class="form-control" option="logLevel" id="logLevel">
@@ -538,13 +476,6 @@
                             </label>
                         </div>
 
-                        <div class="checkbox option-item">
-                            <label for="treatAsUtf8">
-                                <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked>
-                                Treat output as UTF-8 if possible
-                            </label>
-                        </div>
-
                         <div class="checkbox option-item">
                             <label for="wordWrap">
                                 <input type="checkbox" option="wordWrap" id="wordWrap" checked>
@@ -552,13 +483,18 @@
                             </label>
                         </div>
 
-                        <div class="checkbox option-item">
+                        <div class="checkbox option-item mb-0">
                             <label for="showErrors">
                                 <input type="checkbox" option="showErrors" id="showErrors" checked>
-                                Operation error reporting (recommended)
+                                Show errors from operations (recommended)
                             </label>
                         </div>
 
+                        <div class="form-group option-item">
+                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
+                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
+                        </div>
+
                         <div class="checkbox option-item">
                             <label for="useMetaKey">
                                 <input type="checkbox" option="useMetaKey" id="useMetaKey">
@@ -597,15 +533,15 @@
 
         <div class="modal fade" id="favourites-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="a[data-target='#catFavourites']">
                     <div class="modal-header">
                         <h5 class="modal-title">Edit Favourites</h5>
                     </div>
                     <div class="modal-body" id="favourites-body">
                         <ul>
-                            <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category</li>
+                            <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category and drop it</li>
                             <li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below</li>
-                            <li><span style="font-weight: bold">To remove:</span> hit the red cross or drag out of the list below</li>
+                            <li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li>
                         </ul>
                         <br>
                         <ul id="edit-favourites-list" class="op-list"></ul>
@@ -623,7 +559,7 @@
 
         <div class="modal fade" id="support-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content">
+                <div class="modal-content" data-help-proxy="#support">
                     <div class="modal-header">
                         <h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
                     </div>
@@ -662,8 +598,16 @@
                             </li>
                         </ul>
                         <div class="tab-content">
-                            <div role="tabpanel" class="tab-pane active" id="faqs">
+                            <div role="tabpanel" class="tab-pane active" id="faqs" data-help-title="FAQ pane" data-help="The Frequently Asked Questions pane provides answers to some of the most common queries people have about CyberChef.">
                                 <br>
+                                <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-contextual-help">
+                                    How does X feature work?
+                                </a>
+                                <div class="collapse" id="faq-contextual-help">
+                                    <p>CyberChef has a contextual help feature. Just hover your cursor over a feature that you want to learn more about and press <code>F1</code> on your keyboard to get some information about it. Give it a try by hovering over this text and pressing <code>F1</code> now!</code></p>
+                                </div>
+                                <br>
+
                                 <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-examples">
                                     What sort of things can I do with CyberChef?
                                 </a>
@@ -896,5 +840,63 @@
                 </div>
             </div>
         </div>
+
+        <div class="modal fade" id="download-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content" data-help-proxy="a[data-target='#download-modal']">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Download CyberChef</h5>
+                    </div>
+                    <div class="modal-body">
+                        <p>
+                            CyberChef runs entirely within your browser with no server-side component, meaning that your Input data and Recipe configuration are not sent anywhere, whether you use the live, official version of CyberChef or a downloaded, standalone version (assuming it is unmodified).
+                        </p>
+                        <p>
+                            There are three operations that make calls to external services, those being the 'Show on map' operation which downloads map tiles from wikimedia.org, the 'DNS over HTTPS' operation which resolves DNS requests using either Google or Cloudflare services, and the 'HTTP request' operation that calls out to the configured URL you enter. You can confirm what network requests are made using your browser's developer console (F12) and viewing the Network tab.
+                        </p>
+                        <p>
+                            If you would like to download your own standalone copy of CyberChef to run in a segregated network or where there is limited or no Internet connectivity, you can get a ZIP file containing the whole web app below. This can be run locally or hosted on a web server with no configuration required.
+                        </p>
+                        <p>
+                            Be aware that the standalone version will never update itself, meaning it will not receive bug fixes or new features until you re-download newer versions manually.
+                        </p>
+
+                        <h6>CyberChef v<%= htmlWebpackPlugin.options.version %></h6>
+                        <ul>
+                            <li>Build time: <%= htmlWebpackPlugin.options.compileTime %></li>
+                            <li>The changelog for this version can be viewed <a href="https://github.com/gchq/CyberChef/blob/master/CHANGELOG.md">here</a></li>
+                            <li>&copy; Crown Copyright 2016</li>
+                            <li>Released under the Apache Licence, Version 2.0</li>
+                            <li>SHA256 hash: DOWNLOAD_HASH_PLACEHOLDER</li>
+                        </ul>
+                        <a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download class="btn btn-outline-primary">Download ZIP file</a>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- The Help modal should be last to ensure it has the highest z-index -->
+        <div class="modal fade" id="help-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            <i class="material-icons modal-icon">info_outline</i>
+                            <span id="help-title"></span>
+                        </h5>
+                    </div>
+                    <div class="modal-body">
+
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" id="help-ok" data-dismiss="modal">Ok</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </body>
 </html>

src/web/index.js

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

src/web/static/ga.html

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

src/web/stylesheets/components/_operation.css

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

src/web/stylesheets/components/_pane.css

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

src/web/stylesheets/layout/_controls.css

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

src/web/stylesheets/layout/_io.css

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

src/web/stylesheets/layout/_recipe.css

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

src/web/stylesheets/themes/_classic.css

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

src/web/stylesheets/themes/_dark.css

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

src/web/stylesheets/themes/_solarizedDark.css

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

src/web/stylesheets/themes/_solarizedLight.css

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

src/web/stylesheets/utils/_general.css

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

src/web/stylesheets/utils/_overrides.css

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

src/web/utils/copyOverride.mjs

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

src/web/utils/editorUtils.mjs

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