Mirrors/CyberChef
2
0
Fork 0
mirror of https://github.com/gchq/CyberChef synced 2025-01-08 10:38:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

Rewrite InputWaiter to be less messy.

Browse source 
Don't create a DOM element for every tab, just reuse the same ones.
Display file information while the files are loading.
(Output tabs no longer work)
This commit is contained in:
j433866 2019-03-29 13:29:24 +00:00
parent a2cc7a84db
commit c289e1beef
6 changed files with 884 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/App.mjs
View file

@ -181,7 +181,7 @@ class App {
* @returns {string}
*/
getInput() {
return this.manager.input.get();
return this.manager.input.getActive();
}
/**

1211
src/web/InputWaiter.mjs Executable file → Normal file
View file

File diff suppressed because it is too large Load diff

7
src/web/Manager.mjs
View file

@ -82,6 +82,8 @@ class Manager {
* Sets up the various components and listeners.
*/
setup() {
this.input.addTab();
this.input.setupLoaderWorker();
this.worker.setupChefWorkers();
this.recipe.initialiseOperationDragNDrop();
this.controls.initComponents();
@ -156,6 +158,9 @@ class Manager {
// this.addMultiEventListener("#input-text", "mousedown dblclick select", this.highlighter.inputMousedown, this.highlighter);
document.querySelector("#input-file .close").addEventListener("click", this.input.clearIoClick.bind(this.input));
document.getElementById("btn-new-tab").addEventListener("click", this.input.addTab.bind(this.input));
document.getElementById("btn-previous-tab").addEventListener("click", this.input.changeTabLeft.bind(this.input));
document.getElementById("btn-next-tab").addEventListener("click", this.input.changeTabRight.bind(this.input));
document.getElementById("btn-go-to-tab").addEventListener("click", this.input.goToTab.bind(this.input));
this.addDynamicListener("#input-tabs ul li .btn-close-tab i", "click", this.input.removeTabClick, this.input);
this.addDynamicListener("#input-tabs ul li .input-tab-content", "click", this.input.changeTabClick, this.input);
@ -177,7 +182,7 @@ class Manager {
this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
this.addDynamicListener("#output-tabs ul li .output-tab-content", "click", this.output.changeTabClick, this.output);
// this.addDynamicListener("#output-tabs ul li .output-tab-content", "click", this.output.changeTabClick, this.output);
// Options
document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));

2
src/web/WorkerWaiter.mjs
View file

@ -72,7 +72,7 @@ class WorkerWaiter {
inputNum: r.data.inputNum
});
if (this.pendingInputs.length > 0) {
log.debug("Bake complete. Baking next input");
log.debug(`Bake ${r.data.inputNum} complete. Baking next input`);
this.bakeNextInput(r.data.inputNum);
} else if (this.runningWorkers <= 0) {
this.runningWorkers = 0;

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

@ -229,6 +229,15 @@
<div class="title no-select">
<label for="input-text">Input</label>
<span class="float-right">
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-previous-tab" data-toggle="tooltip" title="Go to the previous tab">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-go-to-tab" data-toggle="tooltip" title="Go to a specific tab">
<i class="material-icons">more_horiz</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-next-tab" data-toggle="tooltip" title="Go to the next tab">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
<i class="material-icons">add</i>
</button>
@ -243,19 +252,12 @@
<i class="material-icons">view_compact</i>
</button>
</span>
<div class="io-info" id="input-files-info"></div>
<div class="io-info" id="input-info"></div>
<div class="io-info" id="input-selection-info"></div>
</div>
<div id="input-tabs" style="display: none;">
<ul>
<li id="input-tab-1" class="active-input-tab">
<div class="input-tab-content">
1: New Tab
</div>
<button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
<i class="material-icons">clear</i>
</button>
</li>
</ul>
</div>
<div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
@ -315,11 +317,8 @@
<ul>
<li id="output-tab-1" class="active-output-tab">
<div class="output-tab-content">
1: New Tab
Tab 1
</div>
<button type="button" class="btn btn-primary bmd-btn-icon btn-close-tab" id="btn-close-tab-1">
<i class="material-icons">clear</i>
</button>
</li>
</ul>
</div>

17
src/web/stylesheets/layout/_io.css
View file

@ -24,6 +24,21 @@
word-wrap: break-word;
}
#output-wrapper{
margin: 0;
padding: 0;
height: calc(100% - var(--title-height));
}
#output-wrapper .textarea-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
}
#output-html {
display: none;
overflow-y: auto;
@ -91,7 +106,7 @@
width: fit-content;
}
.textarea-wrapper {
.input-wrapper.textarea-wrapper {
width: 100%;
height: calc(100% - var(--title-height));
box-sizing: border-box;