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

Removed output-file markup and handlers

This commit is contained in:
n1474335 2022-12-09 20:12:15 +00:00
parent b354f61502
commit 771a013c9f
5 changed files with 0 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/Manager.mjs
View File

@ -198,10 +198,6 @@ class Manager {
document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output));
document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
this.addDynamicListener("#output-file-show-all", "click", this.output.showAllFile, this.output);
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-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output);
document.getElementById("btn-previous-output-tab").addEventListener("mousedown", this.output.previousTabClick.bind(this.output));

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

@ -323,31 +323,6 @@
</div>
<div class="textarea-wrapper">
<div id="output-text"></div>
<img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
<div id="output-file"> <!-- TODO - is this still a thing? -->
<div class="file-overlay"></div>
<div style="position: relative; height: 100%;">
<div class="io-card card">
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
<div class="card-body">
Size: <span id="output-file-size"></span><br>
<button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
<button id="output-file-show-all" type="button" class="btn btn-warning btn-outline" data-toggle="tooltip" title="Warning: This could crash your browser. Use at your own risk.">Show all</button>
<div class="input-group">
<span class="input-group-prepend">
<button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" data-toggle="tooltip" title="View slice">
<i class="material-icons">search</i>
</button>
</span>
<input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="128" min="0">
<div class="input-group-addon">to</div>
<input type="number" class="form-control" id="output-file-slice-to" placeholder="To" value="256" step="128" min="0">
<div class="input-group-addon">KiB</div>
</div>
</div>
</div>
</div>
</div>
<div id="output-loader">
<div id="output-loader-animation">
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>

66
src/web/stylesheets/components/_pane.css
View File

@ -46,72 +46,6 @@
padding: 0;
}
.io-card.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 400px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--primary-font-family);
color: var(--primary-font-colour);
line-height: 30px;
background-color: var(--primary-background-colour);
flex-direction: row;
padding-left: 10px;
}
.io-card.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.io-card.card>img {
float: left;
width: auto;
height: auto;
max-width: 128px;
max-height: 128px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
padding: 0px;
}
.io-card.card .card-body .close {
position: absolute;
right: 10px;
top: 4px;
}
.io-card.card .card-body {
float: left;
padding: 16px;
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: text;
}
.io-card.card .card-body>.btn {
margin-bottom: 5px;
margin-top: 5px;
}
.io-card.card input[type=number] {
padding-right: 6px;
padding-left: 6px;
height: unset;
}
.io-card.card .input-group {
padding-top: 5px;
}
#files .card-header .float-right a:hover {
text-decoration: none;
}

28
src/web/stylesheets/layout/_io.css
View File

@ -165,10 +165,6 @@
height: calc(100% - var(--tab-height) - var(--title-height));
}
#show-file-overlay {
height: 32px;
}
.input-wrapper.textarea-wrapper {
width: 100%;
box-sizing: border-box;
@ -221,30 +217,6 @@
transition: all 0.5s ease;
}
#output-file {
position: absolute;
left: 0;
top: 50%;
width: 100%;
display: none;
}
.file-overlay {
position: absolute;
opacity: 0.8;
background-color: var(--title-background-colour);
width: 100%;
height: 100%;
}
#show-file-overlay {
position: absolute;
right: 15px;
top: calc(var(--title-height) + 10px);
cursor: pointer;
display: none;
}
.io-info {
margin-right: 18px;
margin-top: 1px;

119
src/web/waiters/OutputWaiter.mjs
View File

@ -512,8 +512,6 @@ class OutputWaiter {
return new Promise(async function(resolve, reject) {
const output = this.outputs[inputNum];
const outputFile = document.getElementById("output-file");
// Update the EOL value
this.outputEditorView.dispatch({
effects: this.outputEditorConf.eol.reconfigure(
@ -539,18 +537,12 @@ class OutputWaiter {
this.manager.recipe.updateBreakpointIndicator(false);
}
document.getElementById("show-file-overlay").style.display = "none";
if (output.status === "pending" || output.status === "baking") {
// show the loader and the status message if it's being shown
// otherwise don't do anything
document.querySelector("#output-loader .loading-msg").textContent = output.statusMessage;
} else if (output.status === "error") {
// style the tab if it's being shown
this.toggleLoader(false);
this.outputTextEl.style.display = "block";
this.outputTextEl.classList.remove("blur");
outputFile.style.display = "none";
this.clearHTMLOutput();
if (output.error) {
@ -560,15 +552,10 @@ class OutputWaiter {
}
} else if (output.status === "baked" || output.status === "inactive") {
document.querySelector("#output-loader .loading-msg").textContent = `Loading output ${inputNum}`;
this.closeFile();
if (output.data === null) {
this.outputTextEl.style.display = "block";
outputFile.style.display = "none";
this.clearHTMLOutput();
this.setOutput("");
this.toggleLoader(false);
return;
}
@ -577,7 +564,6 @@ class OutputWaiter {
switch (output.data.type) {
case "html":
outputFile.style.display = "none";
// TODO what if the HTML content needs to be in a certain character encoding?
// Grey out chr enc selection? Set back to Raw Bytes?
@ -586,9 +572,6 @@ class OutputWaiter {
case "ArrayBuffer":
case "string":
default:
this.outputTextEl.style.display = "block";
outputFile.style.display = "none";
this.clearHTMLOutput();
this.setOutput(output.data.result);
break;
@ -600,34 +583,6 @@ class OutputWaiter {
}.bind(this));
}
/**
* Shows file details
*
* @param {ArrayBuffer} buf
* @param {number} activeTab
*/
setFile(buf, activeTab) {
if (activeTab !== this.manager.tabs.getActiveTab("output")) return;
// Display file overlay in output area with details
const fileOverlay = document.getElementById("output-file"),
fileSize = document.getElementById("output-file-size"),
fileSlice = buf.slice(0, 4096);
fileOverlay.style.display = "block";
fileSize.textContent = buf.byteLength.toLocaleString() + " bytes";
this.outputTextEl.classList.add("blur");
this.setOutput(Utils.arrayBufferToStr(fileSlice));
}
/**
* Clears output file details
*/
closeFile() {
document.getElementById("output-file").style.display = "none";
this.outputTextEl.classList.remove("blur");
}
/**
* Retrieves the dish as a string, returning the cached version if possible.
*
@ -1297,80 +1252,6 @@ class OutputWaiter {
magicButton.setAttribute("data-original-title", "Magic!");
}
/**
* Handler for file slice display events.
*/
async displayFileSlice() {
document.querySelector("#output-loader .loading-msg").textContent = "Loading file slice...";
this.toggleLoader(true);
const outputFile = document.getElementById("output-file"),
showFileOverlay = document.getElementById("show-file-overlay"),
sliceFromEl = document.getElementById("output-file-slice-from"),
sliceToEl = document.getElementById("output-file-slice-to"),
sliceFrom = parseInt(sliceFromEl.value, 10) * 1024,
sliceTo = parseInt(sliceToEl.value, 10) * 1024,
output = this.outputs[this.manager.tabs.getActiveTab("output")].data;
let str;
if (output.type === "ArrayBuffer") {
str = Utils.arrayBufferToStr(output.result.slice(sliceFrom, sliceTo));
} else {
str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish).slice(sliceFrom, sliceTo));
}
this.outputTextEl.classList.remove("blur");
showFileOverlay.style.display = "block";
this.clearHTMLOutput();
this.setOutput(str);
this.outputTextEl.style.display = "block";
outputFile.style.display = "none";
this.toggleLoader(false);
}
/**
* Handler for showing an entire file at user's discretion (even if it's way too big)
*/
async showAllFile() {
document.querySelector("#output-loader .loading-msg").textContent = "Loading entire file at user instruction. This may cause a crash...";
this.toggleLoader(true);
const outputFile = document.getElementById("output-file"),
showFileOverlay = document.getElementById("show-file-overlay"),
output = this.outputs[this.manager.tabs.getActiveTab("output")].data;
let str;
if (output.type === "ArrayBuffer") {
str = Utils.arrayBufferToStr(output.result);
} else {
str = Utils.arrayBufferToStr(await this.getDishBuffer(output.dish));
}
this.outputTextEl.classList.remove("blur");
showFileOverlay.style.display = "none";
this.clearHTMLOutput();
this.setOutput(str);
this.outputTextEl.style.display = "block";
outputFile.style.display = "none";
this.toggleLoader(false);
}
/**
* Handler for show file overlay events
*
* @param {Event} e
*/
showFileOverlayClick(e) {
const showFileOverlay = e.target;
this.outputTextEl.classList.add("blur");
showFileOverlay.style.display = "none";
this.set(this.manager.tabs.getActiveTab("output"));
}
/**
* Handler for extract file events.
*