10.18.4

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cyberchef",
-  "version": "10.18.3",
+  "version": "10.18.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cyberchef",
-      "version": "10.18.3",
+      "version": "10.18.4",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "10.18.3",
+  "version": "10.18.4",
   "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
   "author": "n1474335 <n1474335@gmail.com>",
   "homepage": "https://gchq.github.io/CyberChef",

src/web/HTMLCategory.mjs

@@ -42,6 +42,9 @@ class HTMLCategory {
         let html = `<div class="panel category">
         <a class="category-title" data-toggle="collapse" data-target="#${catName}">
             ${this.name}
+            <span class="op-count hidden">
+                ${this.opList.length}
+            </span>
         </a>
         <div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}" data-parent="#categories">
             <ul class="op-list">`;

src/web/Manager.mjs

@@ -229,6 +229,7 @@ class Manager {
         this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.switchChange, this.options);
         this.addDynamicListener(".option-item input[type=checkbox]#wordWrap", "change", this.options.setWordWrap, this.options);
         this.addDynamicListener(".option-item input[type=checkbox]#useMetaKey", "change", this.bindings.updateKeybList, this.bindings);
+        this.addDynamicListener(".option-item input[type=checkbox]#showCatCount", "change", this.ops.setCatCount, this.ops);
         this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options);
         this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);
         this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);

src/web/html/index.html

@@ -171,6 +171,7 @@
                 <div id="operations" class="split split-horizontal no-select">
                     <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
+                        <span class="op-count"></span>
                     </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>
@@ -521,6 +522,13 @@
                                 Keep the current tab in sync between the input and output
                             </label>
                         </div>
+
+                        <div class="checkbox option-item">
+                            <label for="showCatCount">
+                                <input type="checkbox" option="showCatCount" id="showCatCount">
+                                Show the number of operations in each category
+                            </label>
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>

src/web/index.js

@@ -51,7 +51,8 @@ function main() {
         logLevel:            "info",
         autoMagic:           true,
         imagePreview:        true,
-        syncTabs:            true
+        syncTabs:            true,
+        showCatCount:        false,
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

src/web/stylesheets/components/_list.css

@@ -40,4 +40,13 @@
     margin: 0 !important;
     border-radius: 0 !important;
     border: none;
-}
+}
+
+.op-count {
+    float: right;
+    color: var(--subtext-font-colour);
+    font-weight: normal;
+    font-size: xx-small;
+    opacity: 0.5;
+    padding-left: .5em;
+}

src/web/stylesheets/utils/_general.css

@@ -36,6 +36,10 @@ body {
     line-height: 0;
 }
 
+.hidden {
+    display: none;
+}
+
 .blur {
     color: transparent !important;
     text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;

src/web/waiters/OperationsWaiter.mjs

@@ -168,6 +168,10 @@ class OperationsWaiter {
      */
     opListCreate(e) {
         this.manager.recipe.createSortableSeedList(e.target);
+
+        // Populate ops total
+        document.querySelector("#operations .title .op-count").innerText = Object.keys(this.app.operations).length;
+
         this.enableOpsListPopovers(e.target);
     }
 
@@ -293,6 +297,18 @@ class OperationsWaiter {
         this.app.resetFavourites();
     }
 
+
+    /**
+     * Sets whether operation counts are displayed next to a category title
+     */
+    setCatCount() {
+        if (this.app.options.showCatCount) {
+            document.querySelectorAll(".category-title .op-count").forEach(el => el.classList.remove("hidden"));
+        } else {
+            document.querySelectorAll(".category-title .op-count").forEach(el => el.classList.add("hidden"));
+        }
+    }
+
 }
 
 export default OperationsWaiter;

src/web/waiters/OptionsWaiter.mjs

@@ -50,6 +50,7 @@ class OptionsWaiter {
 
         // Initialise options
         this.setWordWrap();
+        this.manager.ops.setCatCount();
     }
 
 

tests/browser/01_io.js

@@ -173,25 +173,20 @@ module.exports = {
 
         browser.waitForElementVisible("#stale-indicator");
 
-        browser.expect.element("#auto-bake").to.not.be.selected;
-
         // Enable previously disabled autobake
+        browser.expect.element("#auto-bake").to.not.be.selected;
         browser.click("#auto-bake-label");
+        browser.expect.element("#auto-bake").to.be.selected.before(1000);
 
-        browser.waitUntil(() => {
-            return browser.expect.element("#auto-bake").to.be.selected;
-        }, 1000);
-
+        // Add content to the input
+        browser.pause(100);
         browser.sendKeys("#input-text .cm-content", "1");
-
         browser.waitForElementVisible("#output-loader");
-
         browser.pause(500);
 
         // Make another change while the previous input is being baked
-        browser.sendKeys("#input-text .cm-content", "2");
-
         browser
+            .sendKeys("#input-text .cm-content", "2")
             .waitForElementNotVisible("#stale-indicator")
             .waitForElementNotVisible("#output-loader");
 
@@ -200,6 +195,7 @@ module.exports = {
 
         // Turn autobake off again
         browser.click("#auto-bake-label");
+        browser.expect.element("#auto-bake").to.not.be.selected.before(1000);
     },
 
     "Special content": browser => {

tests/browser/browserUtils.js

@@ -39,6 +39,7 @@ function setInput(browser, input, type=true) {
         browser.execute(text => {
             window.app.setInput(text);
         }, [input]);
+        browser.pause(100);
     }
 }