mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-08 15:25:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#181] restore overall desktop UI

Browse source
This commit is contained in:
Robin Scholtes 2023-04-19 21:21:04 +12:00
parent c56ffef988
commit 58d4eb855c
8 changed files with 85 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/web/App.mjs
View file

@ -60,6 +60,7 @@ class App {
document.dispatchEvent(this.manager.appstart);
this.initialiseSplitter();
this.adjustComponentSizes();
this.setCompileMessage();
this.loadLocalStorage();
this.populateOperationsList();

2
src/web/TODO.md
View file

@ -5,6 +5,7 @@
### Desktop UI:
- restore desktop UI
- `search-results` should really be at the top once input, with `categories` below it
### Mobile UI:
- bootstrap native 'x' in `input[type="search"]` should clear input value and
@ -13,6 +14,7 @@
- on invalid search input ( and no results ), categories should be displayed
- test with keyboard popping up because that messes with the viewheights on mobile probably
- make sure panels in `workspace-wrapper` grow and add up to 100%
- see how to make it work with `controls` nested in `recipe`
### General UI:
- fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot

71
src/web/html/index.html
View file

@ -152,15 +152,9 @@
</button>
<div id="content-wrapper">
<!-- banner -->
<div id="banner" class="row">
<div id="banner">
<div>
<a href="#"
class="banner-link"
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>">
<a href="#" class="banner-link" 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>">
<span>Download CyberChef</span>
<i class="material-icons">file_download</i>
</a>
@ -198,11 +192,9 @@
</a>
</div>
</div>
<div id="workspace-wrapper">
<!--operations-->
<div id="operations"
class="no-select">
<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>">
@ -235,7 +227,7 @@
</div>
<!--recipe-->
<div id="recipe" class="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 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">
@ -252,13 +244,35 @@
</div>
<!--selected recipes list-->
<ul id="rec-list" class="list-area no-select"></ul>
<!--controls-->
<div id="controls" class="no-select hide-on-maximised-output">
<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" 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" 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
</label>
</div>
</div>
</div>
</div>
</div>
<!--IO: input/output-->
<div id="IO">
<div id="IO" class="split split-horizontal">
<!--input-->
<div id="input" class="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 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">
@ -313,9 +327,7 @@
</div>
<!--output-->
<div id="output"
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 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>
<div class="flex-row-reverse">
@ -380,29 +392,6 @@
</div>
</div>
</div>
<!--controls-->
<div id="controls" class="no-select hide-on-maximised-output">
<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" 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" 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
</label>
</div>
</div>
</div>
</div>
</div>
</div>

22
src/web/stylesheets/components/_banner.css
View file

@ -7,13 +7,14 @@
*/
#banner {
display: flex;
justify-content: space-between;
padding-left: 12px;
padding-right: 4px;
line-height: var(--banner-height);
color: var(--banner-font-colour);
background-color: var(--banner-bg-colour);
border-bottom: 1px solid var(--primary-border-colour);
justify-content: space-between; /* flex is applied through .row on the banner element */
}
#banner i {
@ -21,6 +22,17 @@
padding-right: 10px;
}
/* Notice wrapper */
#notice-wrapper {
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Banner links ( options, about / support ) */
.banner-link {
color: var(--banner-url-colour);
}
@ -35,9 +47,5 @@
}
}
#notice-wrapper {
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

3
src/web/stylesheets/components/_controls.css
View file

@ -11,6 +11,9 @@
border-top: 1px solid var(--primary-border-colour);
background-color: var(--secondary-background-colour);
overflow: hidden;
position: absolute;
bottom: 0;
width: 100%;
}
#controls-content {

3
src/web/stylesheets/components/operations/_categories.css
View file

@ -36,8 +36,7 @@
#categories {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
left: 0;
right: 0;
width: 100%;
height: auto;
max-height: 60vh;
overflow: scroll;

3
src/web/stylesheets/components/operations/_search.css
View file

@ -9,8 +9,7 @@
#search-results {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
left: 0;
right: 0;
width: 100%;
height: auto;
max-height: 60vh;
overflow: scroll;

32
src/web/stylesheets/layout/_structure.css
View file

@ -52,6 +52,38 @@ body {
}
@media only screen and ( min-width: 768px ) {
#workspace-wrapper {
height: calc( 100vh - var(--banner-height));
}
#categories,
#search-results {
max-height: max-content;
overflow: revert;
}
#operations, #recipe, #IO {
height: 100%;
}
#operations.split {
overflow: auto;
}
.split {
box-sizing: border-box;
/* overflow: auto; */
/* Removed to enable Background Magic button pulse to overflow.
Replace this rule if it seems to be causing problems. */
position: relative;
}
.gutter.gutter-horizontal,
.split.split-horizontal {
float: left;
height: 100%;
}
.gutter {
background-color: var(--secondary-border-colour);
background-repeat: no-repeat;