Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-11-02 22:21:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

Turn output tabs into progress bars!

Browse Source
This commit is contained in:
j433866 2019-06-10 15:39:21 +01:00
parent 5a52e5e9b3
commit 9d60ef5f72
5 changed files with 101 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/core/ChefWorker.js
View File

@ -212,6 +212,24 @@ self.sendStatusMessage = function(msg) {
};
/**
* Send progress update to the app.
*
* @param {number} progress
* @param {number} total
*/
self.sendProgressMessage = function(progress, total) {
self.postMessage({
action: "progressMessage",
data: {
progress: progress,
total: total,
inputNum: self.inputNum
}
});
};
/**
* Send an option value update to the app.
*

1
src/core/Recipe.mjs
View File

@ -204,6 +204,7 @@ class Recipe {
if (ENVIRONMENT_IS_WORKER()) {
self.sendStatusMessage(`Baking... (${i+1}/${this.opList.length})`);
self.sendProgressMessage(i + 1, this.opList.length);
}
if (op.flowControl) {

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

@ -154,6 +154,9 @@ class OutputWaiter {
this.outputs[inputNum].data = data;
const tabItem = this.manager.tabs.getOutputTabItem(inputNum);
if (tabItem) tabItem.style.background = "";
if (set) this.set(inputNum);
}
@ -223,11 +226,15 @@ class OutputWaiter {
* Updates the stored progress value for the output in the output array
*
* @param {number} progress
* @param {number} total
* @param {number} inputNum
*/
updateOutputProgress(progress, inputNum) {
updateOutputProgress(progress, total, inputNum) {
if (!this.outputExists(inputNum)) return;
this.outputs[inputNum].progress = progress;
this.manager.tabs.updateOutputTabProgress(inputNum, progress, total);
}
/**
@ -283,7 +290,7 @@ class OutputWaiter {
this.manager.controls.hideStaleIndicator();
}
if (output.progress !== undefined) {
if (output.progress !== undefined && !this.app.baking) {
this.manager.recipe.updateBreakpointIndicator(output.progress);
} else {
this.manager.recipe.updateBreakpointIndicator(false);
@ -305,7 +312,11 @@ class OutputWaiter {
outputHighlighter.display = "none";
inputHighlighter.display = "none";
if (output.error) {
outputText.value = output.error;
} else {
outputText.value = output.data.result;
}
outputHtml.innerHTML = "";
} else if (output.status === "baked" || output.status === "inactive") {
document.querySelector("#output-loader .loading-msg").textContent = `Loading output ${inputNum}`;
@ -953,6 +964,8 @@ class OutputWaiter {
* @param {number} inputNum
*/
async displayTabInfo(inputNum) {
if (!this.outputExists(inputNum)) return;
const dish = this.getOutputDish(inputNum);
let tabStr = "";
@ -960,11 +973,18 @@ class OutputWaiter {
tabStr = await this.getDishStr(this.getOutputDish(inputNum));
tabStr = tabStr.replace(/[\n\r]/g, "");
}
tabStr = tabStr.slice(0, 200);
this.manager.tabs.updateOutputTabHeader(inputNum, tabStr);
this.manager.tabs.updateOutputTabProgress(inputNum, this.outputs[inputNum].progress, this.manager.worker.recipeConfig.length);
const tabItem = this.manager.tabs.getOutputTabItem(inputNum);
if (tabItem) {
if (this.outputs[inputNum].status === "error") {
tabItem.style.color = "#FF0000";
} else {
tabItem.style.color = "";
}
}
}
/**

42
src/web/waiters/TabWaiter.mjs
View File

@ -400,6 +400,48 @@ class TabWaiter {
this.updateTabHeader(inputNum, data, "output");
}
/**
* Updates the tab background to display the progress of the current tab
*
* @param {number} inputNum - The inputNum of the tab
* @param {number} progress - The current progress
* @param {number} total - The total which the progress is a percent of
* @param {string} io - Either "input" or "output"
*/
updateTabProgress(inputNum, progress, total, io) {
const tabItem = this.getTabItem(inputNum, io);
if (tabItem === null) return;
const percentComplete = (progress / total) * 100;
if (percentComplete === 100 || progress === false) {
tabItem.style.background = "";
} else {
tabItem.style.background = `linear-gradient(to right, var(--title-background-colour) ${percentComplete}%, var(--primary-background-colour) ${percentComplete}%)`;
}
}
/**
* Updates the input tab background to display its progress
*
* @param {number} inputNum
* @param {number} progress
* @param {number} total
*/
updateInputTabProgress(inputNum, progress, total) {
this.updateTabProgress(inputNum, progress, total, "input");
}
/**
* Updates the output tab background to display its progress
*
* @param {number} inputNum
* @param {number} progress
* @param {number} total
*/
updateOutputTabProgress(inputNum, progress, total) {
this.updateTabProgress(inputNum, progress, total, "output");
}
}
export default TabWaiter;

16
src/web/waiters/WorkerWaiter.mjs
View File

@ -221,9 +221,11 @@ class WorkerWaiter {
}
break;
case "statusMessage":
// Status message should be done per output
this.manager.output.updateOutputMessage(r.data.message, r.data.inputNum, true);
break;
case "progressMessage":
this.manager.output.updateOutputProgress(r.data.progress, r.data.total, r.data.inputNum);
break;
case "optionUpdate":
log.debug(`Setting ${r.data.option} to ${r.data.value}`);
this.app.options[r.data.option] = r.data.value;
@ -256,8 +258,13 @@ class WorkerWaiter {
}
this.manager.output.updateOutputProgress(progress, inputNum);
this.manager.output.updateOutputValue(data, inputNum, false);
if (progress !== false) {
this.manager.output.updateOutputStatus("error", inputNum);
} else {
this.manager.output.updateOutputStatus("baked", inputNum);
}
}
/**
* Updates the UI to show if baking is in process or not.
@ -319,6 +326,11 @@ class WorkerWaiter {
this.manager.output.updateOutputStatus("inactive", this.inputNums[i]);
}
const tabList = this.manager.tabs.getOutputTabList();
for (let i = 0; i < tabList.length; i++) {
this.manager.tabs.getOutputTabItem(tabList[i]).style.background = "";
}
this.inputs = [];
this.inputNums = [];
this.totalOutputs = 0;
@ -642,7 +654,7 @@ class WorkerWaiter {
const bakeButton = document.getElementById("bake");
if (this.app.baking) {
if (percentComplete < 100) {
document.getElementById("bake").style.background = `linear-gradient(to left, #fea79a ${percentComplete}%, #f44336 ${percentComplete}%)`;
bakeButton.style.background = `linear-gradient(to left, #fea79a ${percentComplete}%, #f44336 ${percentComplete}%)`;
} else {
bakeButton.style.background = "";
}