Merge pull request #541 from TheZ3ro/hide-recipe-options

src/web/HTMLOperation.mjs

@@ -85,6 +85,7 @@ class HTMLOperation {
         <div class="recip-icons">
             <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>
+            <i class="material-icons hide-args-icon" title="Hide operation's arguments" hide-args="false" data-help-title="Hide operation's arguments" data-help="Hiding an operation's argument will save space in the Recipe window. Execution will still take place with the selected argument options.">keyboard_arrow_up</i>
         </div>
         <div class="clearfix">&nbsp;</div>`;
 

src/web/Manager.mjs

@@ -139,6 +139,7 @@ class Manager {
         document.getElementById("load-delete-button").addEventListener("click", this.controls.loadDeleteClick.bind(this.controls));
         document.getElementById("load-name").addEventListener("change", this.controls.loadNameChange.bind(this.controls));
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
+        document.getElementById("hide-icon").addEventListener("click", this.controls.hideRecipeArgsClick.bind(this.recipe));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
 
@@ -154,6 +155,7 @@ class Manager {
         // Recipe
         this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe);
         this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
+        this.addDynamicListener(".hide-args-icon", "click", this.recipe.hideArgsClick, this.recipe);
         this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
         this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
         this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);

src/web/html/index.html

@@ -181,6 +181,9 @@
                     <div class="title no-select">
                         Recipe
                         <span class="pane-controls hide-on-maximised-output">
+                            <button type="button" aria-label="Hide arguments" class="btn btn-primary bmd-btn-icon" id="hide-icon" data-toggle="tooltip" title="Hide arguments" hide-args="false" data-help-title="Hiding every Operation's argument view in a Recipe" data-help="Clicking 'Hide arguments' will hide all the argument views for every Operation in the Recipe, to save space when you have too many Operation in your Recipe">
+                                <i class="material-icons">keyboard_arrow_up</i>
+                            </button>
                             <button type="button" aria-label="Save recipe" 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" aria-hidden="true">save</i>
                             </button>

src/web/waiters/ControlsWaiter.mjs

@@ -345,6 +345,36 @@ class ControlsWaiter {
     }
 
 
+    /**
+     * Hides the arguments for all the operations in the current recipe.
+     */
+    hideRecipeArgsClick() {
+        const icon = document.getElementById("hide-icon");
+
+        if (icon.getAttribute("hide-args") === "false") {
+            icon.setAttribute("hide-args", "true");
+            icon.setAttribute("data-original-title", "Show arguments");
+            icon.children[0].innerText = "keyboard_arrow_down";
+            Array.from(document.getElementsByClassName("hide-args-icon")).forEach(function(item) {
+                item.setAttribute("hide-args", "true");
+                item.innerText = "keyboard_arrow_down";
+                item.classList.add("hide-args-selected");
+                item.parentNode.previousElementSibling.style.display = "none";
+            });
+        } else {
+            icon.setAttribute("hide-args", "false");
+            icon.setAttribute("data-original-title", "Hide arguments");
+            icon.children[0].innerText = "keyboard_arrow_up";
+            Array.from(document.getElementsByClassName("hide-args-icon")).forEach(function(item) {
+                item.setAttribute("hide-args", "false");
+                item.innerText = "keyboard_arrow_up";
+                item.classList.remove("hide-args-selected");
+                item.parentNode.previousElementSibling.style.display = "grid";
+            });
+        }
+    }
+
+
     /**
      * Populates the bug report information box with useful technical info.
      *

src/web/waiters/RecipeWaiter.mjs

@@ -215,6 +215,45 @@ class RecipeWaiter {
         window.dispatchEvent(this.manager.statechange);
     }
 
+    /**
+     * Handler for hide-args click events.
+     * Updates the icon status.
+     *
+     * @fires Manager#statechange
+     * @param {event} e
+     */
+    hideArgsClick(e) {
+        const icon = e.target;
+
+        if (icon.getAttribute("hide-args") === "false") {
+            icon.setAttribute("hide-args", "true");
+            icon.innerText = "keyboard_arrow_down";
+            icon.classList.add("hide-args-selected");
+            icon.parentNode.previousElementSibling.style.display = "none";
+        } else {
+            icon.setAttribute("hide-args", "false");
+            icon.innerText = "keyboard_arrow_up";
+            icon.classList.remove("hide-args-selected");
+            icon.parentNode.previousElementSibling.style.display = "grid";
+        }
+
+        const icons = Array.from(document.getElementsByClassName("hide-args-icon"));
+        if (icons.length > 1) {
+            // Check if ALL the icons are hidden/shown
+            const uniqueIcons = icons.map(function(item) {
+                return item.getAttribute("hide-args");
+            }).unique();
+
+            const controlsIconStatus = document.getElementById("hide-icon").getAttribute("hide-args");
+
+            // If all icons are in the same state and the global icon isn't, fix it
+            if (uniqueIcons.length === 1 && icon.getAttribute("hide-args") !== controlsIconStatus) {
+                this.manager.controls.hideRecipeArgsClick();
+            }
+        }
+
+        window.dispatchEvent(this.manager.statechange);
+    }
 
     /**
      * Handler for disable click events.