From 57c8c6dbc6bf8213071c4c027436c485a0ef58fe Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Mon, 13 May 2024 17:48:09 +0100
Subject: [PATCH] Added operation counts to categories and ops list with option
 to hide by default for categories.

---
 src/web/HTMLCategory.mjs                 |  3 +++
 src/web/Manager.mjs                      |  1 +
 src/web/html/index.html                  |  8 ++++++++
 src/web/index.js                         |  3 ++-
 src/web/stylesheets/components/_list.css | 11 ++++++++++-
 src/web/stylesheets/utils/_general.css   |  4 ++++
 src/web/waiters/OperationsWaiter.mjs     | 16 ++++++++++++++++
 src/web/waiters/OptionsWaiter.mjs        |  1 +
 8 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/web/HTMLCategory.mjs b/src/web/HTMLCategory.mjs
index 0414fd71..b61a6740 100755
--- a/src/web/HTMLCategory.mjs
+++ b/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">`;
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index b188b3b9..2020b2a0 100755
--- a/src/web/Manager.mjs
+++ b/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);
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 13e7b8e3..38bf7ccc 100755
--- a/src/web/html/index.html
+++ b/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>
diff --git a/src/web/index.js b/src/web/index.js
index 82039931..90142b34 100755
--- a/src/web/index.js
+++ b/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);
diff --git a/src/web/stylesheets/components/_list.css b/src/web/stylesheets/components/_list.css
index 31e40837..b732b4c1 100755
--- a/src/web/stylesheets/components/_list.css
+++ b/src/web/stylesheets/components/_list.css
@@ -40,4 +40,13 @@
     margin: 0 !important;
     border-radius: 0 !important;
     border: none;
-}
\ No newline at end of file
+}
+
+.op-count {
+    float: right;
+    color: var(--subtext-font-colour);
+    font-weight: normal;
+    font-size: xx-small;
+    opacity: 0.5;
+    padding-left: .5em;
+}
diff --git a/src/web/stylesheets/utils/_general.css b/src/web/stylesheets/utils/_general.css
index 56a8cbfe..fd4a7d34 100755
--- a/src/web/stylesheets/utils/_general.css
+++ b/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;
diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index dee0dd06..45a40c82 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/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;
diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs
index b09ddd87..f5134133 100755
--- a/src/web/waiters/OptionsWaiter.mjs
+++ b/src/web/waiters/OptionsWaiter.mjs
@@ -50,6 +50,7 @@ class OptionsWaiter {
 
         // Initialise options
         this.setWordWrap();
+        this.manager.ops.setCatCount();
     }