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

Fix more tab weirdness. 

Move tab buttons onto tab bar.
Calculate size of maxTabs automatically on page load.
Display total execution time when a bake finishes.
This commit is contained in:
j433866 2019-04-04 10:15:13 +01:00
parent 1eadc08098
commit b90cca77a9
4 changed files with 88 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/web/App.mjs
View File

@ -96,6 +96,9 @@ class App {
window.removeEventListener("error", window.loadingErrorHandler);
document.dispatchEvent(this.manager.apploaded);
this.manager.input.calcMaxTabs();
this.manager.output.calcMaxTabs();
}

103
src/web/InputWaiter.mjs
View File

@ -51,6 +51,14 @@ class InputWaiter {
this.maxTabs = 4; // Calculate this
}
/**
* Calculates the maximum number of tabs to display
*/
calcMaxTabs() {
const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120);
this.maxTabs = numTabs;
}
/**
* Terminates any existing loader workers and sets up a new worker
*/
@ -779,11 +787,6 @@ class InputWaiter {
if (numTabs > 0) {
tabsWrapper.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
@ -851,22 +854,12 @@ class InputWaiter {
if (newInputs.length > 1) {
tabsList.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
} else {
tabsList.parentElement.style.display = "none";
const tabButtons = document.getElementsByClassName("input-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "none";
}
document.getElementById("input-wrapper").style.height = "calc(100% - var(--title-height))";
document.getElementById("input-highlighter").style.height = "calc(100% - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--title-height))";
@ -898,65 +891,40 @@ class InputWaiter {
/**
* Generates a list of the nearby inputNums
*
* @param {number} inputNum
* @param {string} direction
* @param inputNum
* @param direction
*/
getNearbyNums(inputNum, direction) {
const inputs = [];
if (direction === "left") {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
newNum = this.getNextInputNum(inputs[i-1]);
}
if (newNum === inputs[i-1]) {
reachedEnd = true;
inputs.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getPreviousInputNum(inputs[i-1]);
}
if (newNum >= 0) {
inputs.push(newNum);
const nums = [];
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
switch (direction) {
case "left":
newNum = this.getNextInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "right";
newNum = this.getPreviousInputNum(nums[i - 1]);
}
break;
case "right":
newNum = this.getPreviousInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "left";
newNum = this.getNextInputNum(nums[i - 1]);
}
}
}
} else {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
if (!reachedEnd) {
newNum = this.getPreviousInputNum(inputs[i-1]);
}
if (newNum === inputs[i-1]) {
reachedEnd = true;
inputs.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getNextInputNum(inputs[i-1]);
}
}
if (newNum >= 0) {
inputs.push(newNum);
}
if (!nums.includes(newNum) && (newNum > 0)) {
nums.push(newNum);
}
}
inputs.sort(function(a, b) {
nums.sort(function(a, b) {
return a - b;
});
return inputs;
return nums;
}
/**
@ -1162,7 +1130,8 @@ class InputWaiter {
clearAllIoClick() {
this.manager.worker.cancelBake();
for (let i = this.inputs.length - 1; i >= 0; i--) {
this.removeTab(this.inputs[i].inputNum);
this.manager.output.removeOutput(this.inputs[i].inputNum);
this.removeInput(this.inputs[i].inputNum);
}
this.refreshTabs();
}

97
src/web/OutputWaiter.mjs
View File

@ -27,9 +27,18 @@ class OutputWaiter {
this.manager = manager;
this.outputs = [];
this.maxTabs = 4; // Calculate this
}
/**
* Calculates the maximum number of tabs to display
*/
calcMaxTabs() {
const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120);
this.maxTabs = numTabs;
}
/**
* Gets the output for the specified input number
*
@ -40,7 +49,6 @@ class OutputWaiter {
const index = this.getOutputIndex(inputNum);
if (index === -1) return -1;
log.error(this.outputs[index]);
if (typeof this.outputs[index].data.dish.value === "string") {
return this.outputs[index].data.dish.value;
} else {
@ -112,6 +120,7 @@ class OutputWaiter {
let index = this.getOutputIndex(inputNum);
if (index === -1) {
index = this.addOutput(inputNum);
this.addTab(inputNum, true);
}
this.outputs[index].data = data;
@ -439,11 +448,6 @@ class OutputWaiter {
if (numTabs > 0) {
tabsWrapper.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
@ -547,59 +551,34 @@ class OutputWaiter {
/**
* Generates a list of the nearby inputNums
*
* @param {number} inputNum
* @param {string} direction
* @param inputNum
* @param direction
*/
getNearbyNums(inputNum, direction) {
const nums = [];
if (direction === "left") {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
newNum = this.getNextInputNum(nums[i-1]);
}
if (newNum === nums[i-1]) {
reachedEnd = true;
nums.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getPreviousInputNum(nums[i-1]);
}
if (newNum >= 0) {
nums.push(newNum);
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
switch (direction) {
case "left":
newNum = this.getNextInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "right";
newNum = this.getPreviousInputNum(nums[i - 1]);
}
break;
case "right":
newNum = this.getPreviousInputNum(nums[i - 1]);
if (newNum === nums[i - 1]) {
direction = "left";
newNum = this.getNextInputNum(nums[i - 1]);
}
}
}
} else {
let reachedEnd = false;
for (let i = 0; i < this.maxTabs; i++) {
let newNum;
if (i === 0) {
newNum = inputNum;
} else {
if (!reachedEnd) {
newNum = this.getPreviousInputNum(nums[i-1]);
}
if (newNum === nums[i-1]) {
reachedEnd = true;
nums.sort(function(a, b) {
return b - a;
});
break;
}
if (reachedEnd) {
newNum = this.getNextInputNum(nums[i-1]);
}
}
if (newNum >= 0) {
nums.push(newNum);
}
if (!nums.includes(newNum) && (newNum > 0)) {
nums.push(newNum);
}
}
nums.sort(function(a, b) {
@ -722,11 +701,6 @@ class OutputWaiter {
if (newInputs.length > 1) {
tabsList.parentElement.style.display = "block";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "inline-block";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
@ -735,11 +709,6 @@ class OutputWaiter {
} else {
tabsList.parentElement.style.display = "none";
const tabButtons = document.getElementsByClassName("output-tab-buttons");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons.item(i).style.display = "none";
}
document.getElementById("output-wrapper").style.height = "calc(100% - var(--title-height))";
document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))";
document.getElementById("output-file").style.height = "calc(100% - var(--title-height))";

16
src/web/WorkerWaiter.mjs
View File

@ -275,7 +275,22 @@ class WorkerWaiter {
*/
bakingComplete() {
this.setBakingStatus(false);
let duration = new Date().getTime() - this.bakeStartTime;
duration = duration.toString() + "ms";
const progress = this.getBakeProgress();
let width = progress.total.toString().length;
if (duration.length > width) {
width = duration.length;
}
width = width < 2 ? 2 : width;
const totalStr = progress.total.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
const durationStr = duration.padStart(width, " ").replace(/ /g, "&nbsp;");
const msg = `Total: ${totalStr}<br>Time: ${durationStr}`;
document.getElementById("bake-info").innerHTML = msg;
// look into changing this to something better
// for (let i = 0; i < this.outputs.length; i++) {
// if (this.outputs[i].data.error) {
@ -308,6 +323,7 @@ class WorkerWaiter {
*/
bake(input, recipeConfig, options, progress, step) {
this.setBakingStatus(true);
this.bakeStartTime = new Date().getTime();
if (typeof input === "string") {
input = [{