Mirrors/CyberChef
2
0
Fork 0
mirror of https://github.com/gchq/CyberChef synced 2025-01-09 19:18:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Go back to sending messages via the main thread.

Browse source 
A MessageChannel is faster on Chrome, but causes issues in Firefox.
Bake button now says "Loading..." when the inputWorker is gathering inputs for baking
This commit is contained in:
j433866 2019-05-01 14:12:36 +01:00
parent 2fff18cb61
commit 55beb433f3
3 changed files with 80 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/web/ControlsWaiter.mjs
View file

@ -57,9 +57,10 @@ class ControlsWaiter {
* Handler to trigger baking. * Handler to trigger baking.
*/ */
bakeClick() { bakeClick() {
if (document.getElementById("bake").textContent.indexOf("Bake") > 0) { const btnBake = document.getElementById("bake");
if (btnBake.textContent.indexOf("Bake") > 0) {
this.app.manager.input.getAll(); this.app.manager.input.getAll();
} else { } else if (btnBake.textContent.indexOf("Cancel") > 0) {
this.manager.worker.cancelBake(); this.manager.worker.cancelBake();
} }
} }
@ -370,11 +371,12 @@ ${navigator.userAgent}
/** /**
* Switches the Bake button between 'Bake' and 'Cancel' functions. * Switches the Bake button between 'Bake', 'Cancel' and 'Loading' functions.
* *
* @param {boolean} cancel - Whether to change to cancel or not * @param {boolean} cancel - Whether to change to cancel or not
* @param {boolean} loading - Whether to change to loading or not
*/ */
toggleBakeButtonFunction(cancel) { toggleBakeButtonFunction(cancel, loading) {
const bakeButton = document.getElementById("bake"), const bakeButton = document.getElementById("bake"),
btnText = bakeButton.querySelector("span"); btnText = bakeButton.querySelector("span");
@ -383,10 +385,17 @@ ${navigator.userAgent}
if (cancel) { if (cancel) {
btnText.innerText = "Cancel"; btnText.innerText = "Cancel";
bakeButton.classList.remove("btn-success"); bakeButton.classList.remove("btn-success");
bakeButton.classList.remove("btn-warning");
bakeButton.classList.add("btn-danger"); bakeButton.classList.add("btn-danger");
} else if (loading) {
btnText.innerText = "Loading...";
bakeButton.classList.remove("btn-success");
bakeButton.classList.remove("btn-danger");
bakeButton.classList.add("btn-warning");
} else { } else {
btnText.innerText = "Bake!"; btnText.innerText = "Bake!";
bakeButton.classList.remove("btn-danger"); bakeButton.classList.remove("btn-danger");
bakeButton.classList.remove("btn-warning");
bakeButton.classList.add("btn-success"); bakeButton.classList.add("btn-success");
} }
} }

66
src/web/InputWaiter.mjs
View file

@ -105,10 +105,9 @@ class InputWaiter {
this.inputWorker.postMessage({ this.inputWorker.postMessage({
action: "loaderWorkerReady", action: "loaderWorkerReady",
data: { data: {
id: workerObj.id, id: workerObj.id
port: workerObj.port
} }
}, [workerObj.port]); });
} }
/** /**
@ -122,17 +121,12 @@ class InputWaiter {
} }
log.debug("Adding new LoaderWorker."); log.debug("Adding new LoaderWorker.");
const newWorker = new LoaderWorker(); const newWorker = new LoaderWorker();
const messageChannel = new MessageChannel();
const workerId = this.workerId++; const workerId = this.workerId++;
// newWorker.addEventListener("message", this.handleLoaderMessage.bind(this)); newWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
newWorker.postMessage({ newWorker.postMessage({id: workerId});
port: messageChannel.port1,
id: workerId
}, [messageChannel.port1]);
const newWorkerObj = { const newWorkerObj = {
worker: newWorker, worker: newWorker,
id: workerId, id: workerId
port: messageChannel.port2
}; };
this.loaderWorkers.push(newWorkerObj); this.loaderWorkers.push(newWorkerObj);
return this.loaderWorkers.indexOf(newWorkerObj); return this.loaderWorkers.indexOf(newWorkerObj);
@ -151,10 +145,6 @@ class InputWaiter {
log.debug(`Terminating worker ${this.loaderWorkers[idx].id}`); log.debug(`Terminating worker ${this.loaderWorkers[idx].id}`);
this.loaderWorkers[idx].worker.terminate(); this.loaderWorkers[idx].worker.terminate();
this.loaderWorkers.splice(idx, 1); this.loaderWorkers.splice(idx, 1);
if (this.loaderWorkers.length === 0) {
// There should always be 1 loaderworker loaded
this.addLoaderWorker();
}
} }
/** /**
@ -182,6 +172,44 @@ class InputWaiter {
return -1; return -1;
} }
/**
* Sends an input to be loaded to the loaderWorker
*
* @param {object} inputData
* @param {File} inputData.file
* @param {number} inputData.inputNum
* @param {number} inputData.workerId
*/
loadInput(inputData) {
const idx = this.getLoaderWorkerIndex(inputData.workerId);
if (idx === -1) return;
this.loaderWorkers[idx].worker.postMessage({
file: inputData.file,
inputNum: inputData.inputNum
});
}
/**
* Handler for messages sent back by the loaderWorker
*
* @param {MessageEvent} e
*/
handleLoaderMessage(e) {
const r = e.data;
if (r.hasOwnProperty("fileBuffer")) {
this.inputWorker.postMessage({
action: "loaderWorkerMessage",
data: r
}, [r.fileBuffer]);
} else {
this.inputWorker.postMessage({
action: "loaderWorkerMessage",
data: r
});
}
}
/** /**
* Handler for messages sent back by the inputWorker * Handler for messages sent back by the inputWorker
@ -203,12 +231,7 @@ class InputWaiter {
this.activateLoaderWorker(); this.activateLoaderWorker();
break; break;
case "loadInput": case "loadInput":
this.loaderWorkers[r.data.workerIdx].worker.postMessage({ this.loadInput(r.data);
file: r.data.file,
inputNum: r.data.inputNum
});
this.loaderWorkers[r.data.workerIdx].inputNum = r.data.inputNum;
this.loaderWorkers[r.data.workerIdx].active = true;
break; break;
case "terminateLoaderWorker": case "terminateLoaderWorker":
this.removeLoaderWorker(this.getLoaderWorker(r.data)); this.removeLoaderWorker(this.getLoaderWorker(r.data));
@ -271,6 +294,7 @@ class InputWaiter {
* Gets the input for all tabs * Gets the input for all tabs
*/ */
getAll() { getAll() {
this.manager.controls.toggleBakeButtonFunction(false, true);
this.inputWorker.postMessage({ this.inputWorker.postMessage({
action: "getAll" action: "getAll"
}); });

45
src/web/InputWorker.mjs
View file

@ -12,7 +12,7 @@ self.maxWorkers = 4;
self.maxTabs = 1; self.maxTabs = 1;
self.pendingFiles = []; self.pendingFiles = [];
self.inputs = {}; self.inputs = {};
self.loaderWorkerPorts = []; self.loaderWorkers = [];
self.currentInputNum = 1; self.currentInputNum = 1;
self.numInputs = 0; self.numInputs = 0;
self.pendingInputs = 0; self.pendingInputs = 0;
@ -83,6 +83,9 @@ self.addEventListener("message", function(e) {
case "filterTabs": case "filterTabs":
self.filterTabs(r.data); self.filterTabs(r.data);
break; break;
case "loaderWorkerMessage":
self.handleLoaderMessage(r.data);
break;
default: default:
log.error(`Unknown action '${r.action}'.`); log.error(`Unknown action '${r.action}'.`);
} }
@ -390,8 +393,8 @@ self.updateInputValue = function(inputData) {
}; };
self.getLoaderWorkerIdx = function(workerId) { self.getLoaderWorkerIdx = function(workerId) {
for (let i = 0; i < self.loaderWorkerPorts.length; i++) { for (let i = 0; i < self.loaderWorkers.length; i++) {
if (self.loaderWorkerPorts[i].id === workerId) { if (self.loaderWorkers[i].id === workerId) {
return i; return i;
} }
} }
@ -401,19 +404,14 @@ self.getLoaderWorkerIdx = function(workerId) {
self.loaderWorkerReady = function(workerData) { self.loaderWorkerReady = function(workerData) {
const newWorkerObj = { const newWorkerObj = {
id: workerData.id, id: workerData.id,
port: workerData.port,
inputNum: -1, inputNum: -1,
active: true active: true
}; };
newWorkerObj.port.onmessage = function (e) { self.loaderWorkers.push(newWorkerObj);
self.handleLoaderMessage(e); self.loadNextFile(self.loaderWorkers.indexOf(newWorkerObj));
};
self.loaderWorkerPorts.push(newWorkerObj);
self.loadNextFile(self.loaderWorkerPorts.indexOf(newWorkerObj));
}; };
self.handleLoaderMessage = function(e) { self.handleLoaderMessage = function(r) {
const r = e.data;
let inputNum = 0; let inputNum = 0;
if (r.hasOwnProperty("inputNum")) { if (r.hasOwnProperty("inputNum")) {
@ -451,30 +449,31 @@ self.handleLoaderMessage = function(e) {
}; };
self.loadNextFile = function(workerIdx) { self.loadNextFile = function(workerIdx) {
if (workerIdx === -1) return; // No more workers can be created if (workerIdx === -1) return;
const port = self.loaderWorkerPorts[workerIdx].port; const id = self.loaderWorkers[workerIdx].id;
if (self.pendingFiles.length === 0) { if (self.pendingFiles.length === 0) {
const workerObj = self.loaderWorkerPorts.splice(workerIdx, 1)[0]; const workerObj = self.loaderWorkers.splice(workerIdx, 1)[0];
self.terminateLoaderWorker(workerObj.id); self.terminateLoaderWorker(workerObj.id);
return; return;
} }
const nextFile = self.pendingFiles.splice(0, 1)[0]; const nextFile = self.pendingFiles.splice(0, 1)[0];
self.loaderWorkerPorts[workerIdx].inputNum = nextFile.inputNum; self.loaderWorkers[workerIdx].inputNum = nextFile.inputNum;
self.loadingInputs++; self.loadingInputs++;
port.postMessage({ self.postMessage({
action: "loadInput", action: "loadInput",
data: { data: {
file: nextFile.file, file: nextFile.file,
inputNum: nextFile.inputNum inputNum: nextFile.inputNum,
workerId: id
} }
}); });
}; };
self.activateLoaderWorker = function() { self.activateLoaderWorker = function() {
for (let i = 0; i < self.loaderWorkerPorts.length; i++) { for (let i = 0; i < self.loaderWorkers.length; i++) {
if (!self.loaderWorkerPorts[i].active) { if (!self.loaderWorkers[i].active) {
self.loaderWorkerPorts[i].active = true; self.loaderWorkers[i].active = true;
self.loadNextFile(i); self.loadNextFile(i);
return; return;
} }
@ -603,10 +602,10 @@ self.removeInput = function(removeInputData) {
delete self.inputs[inputNum]; delete self.inputs[inputNum];
for (let i = 0; i < self.loaderWorkerPorts.length; i++) { for (let i = 0; i < self.loaderWorkers.length; i++) {
if (self.loaderWorkerPorts[i].inputNum === inputNum) { if (self.loaderWorkers[i].inputNum === inputNum) {
self.loadingInputs--; self.loadingInputs--;
self.terminateLoaderWorker(self.loaderWorkerPorts[i].id); self.terminateLoaderWorker(self.loaderWorkers[i].id);
} }
} }