Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
a3957273 2024-04-13 20:22:31 +01:00 committed by GitHub
parent cc28c6af1a 670c370b90
commit 4619a511d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/web/HTMLOperation.mjs
View File

@ -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>`;

2
src/web/Manager.mjs
View File

@ -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);

3
src/web/html/index.html
View File

@ -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>

30
src/web/waiters/ControlsWaiter.mjs
View File

@ -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.
*

39
src/web/waiters/RecipeWaiter.mjs
View File

@ -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.