From 91cdd50ba753131265da6350204ea9949f3c6d49 Mon Sep 17 00:00:00 2001 From: j433866 Date: Tue, 13 Aug 2019 14:03:21 +0100 Subject: [PATCH 1/6] Increase size limit for inlined fonts / icons --- webpack.config.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 46878282..1258a5c4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -103,11 +103,17 @@ module.exports = { "sass-loader", ] }, + /** + * The limit for these files has been increased to 60,000 (60KB) + * to ensure the material icons font is inlined. + * + * See: https://github.com/gchq/CyberChef/issues/612 + */ { test: /\.(ico|eot|ttf|woff|woff2)$/, loader: "url-loader", options: { - limit: 10000, + limit: 60000, name: "[hash].[ext]", outputPath: "assets" } From 082d939f7d02889b9125d35cfe5a553167ec25f8 Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 22 Aug 2019 11:26:04 +0100 Subject: [PATCH 2/6] Add customisations for confirm box. Can change the text of the accept and reject buttons. Now returns undefined if the user clicks off it --- src/web/App.mjs | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 56746a41..60491ef4 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -670,18 +670,22 @@ class App { * * @param {string} title - The title of the box * @param {string} body - The question (HTML supported) + * @param {string} accept - The text of the accept button + * @param {string} reject - The text of the reject button * @param {function} callback - A function accepting one boolean argument which handles the * response e.g. function(answer) {...} * @param {Object} [scope=this] - The object to bind to the callback function * * @example * // Pops up a box asking if the user would like a cookie. Prints the answer to the console. - * this.confirm("Question", "Would you like a cookie?", function(answer) {console.log(answer);}); + * this.confirm("Question", "Would you like a cookie?", "Yes", "No", function(answer) {console.log(answer);}); */ - confirm(title, body, callback, scope) { + confirm(title, body, accept, reject, callback, scope) { scope = scope || this; document.getElementById("confirm-title").innerHTML = title; document.getElementById("confirm-body").innerHTML = body; + document.getElementById("confirm-yes").innerText = accept; + document.getElementById("confirm-no").innerText = reject; document.getElementById("confirm-modal").style.display = "block"; this.confirmClosed = false; @@ -694,9 +698,14 @@ class App { callback.bind(scope)(true); $("#confirm-modal").modal("hide"); }.bind(this)) + .one("click", "#confirm-no", function() { + this.confirmClosed = true; + callback.bind(scope)(false); + }.bind(this)) .one("hide.bs.modal", function(e) { - if (!this.confirmClosed) - callback.bind(scope)(false); + if (!this.confirmClosed) { + callback.bind(scope)(undefined); + } this.confirmClosed = true; }.bind(this)); } From 9f2d1453edda0190279fae8c45f6b17885302be7 Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 22 Aug 2019 11:26:43 +0100 Subject: [PATCH 3/6] Make the wordWrap change event only fire when the word wrap checkbox is changed --- src/web/Manager.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 5ab44b21..cb579721 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -224,7 +224,7 @@ class Manager { document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options)); document.getElementById("reset-options").addEventListener("click", this.options.resetOptionsClick.bind(this.options)); this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.switchChange, this.options); - this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.setWordWrap, this.options); + this.addDynamicListener(".option-item input[type=checkbox]#wordWrap", "change", this.options.setWordWrap, this.options); this.addDynamicListener(".option-item input[type=checkbox]#useMetaKey", "change", this.bindings.updateKeybList, this.bindings); this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options); this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options); From f43a868607832f58929ada59797ffb4a53003f45 Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 22 Aug 2019 11:53:41 +0100 Subject: [PATCH 4/6] Add carriage return detection for pasted and switched inputs. Fix switching the output to input not working properly. Add nicer confirmation boxes for zipping outputs. --- src/web/html/index.html | 17 +- src/web/index.js | 4 +- src/web/waiters/InputWaiter.mjs | 101 +++++++--- src/web/waiters/OptionsWaiter.mjs | 308 +++++++++++++++--------------- src/web/waiters/OutputWaiter.mjs | 170 ++++++++++++----- src/web/workers/InputWorker.mjs | 45 +++-- 6 files changed, 399 insertions(+), 246 deletions(-) diff --git a/src/web/html/index.html b/src/web/html/index.html index 011742d3..cb9c3dbe 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -568,11 +568,18 @@
- -
+ + + +
+ +
diff --git a/src/web/index.js b/src/web/index.js index 1d2bc242..736b512f 100755 --- a/src/web/index.js +++ b/src/web/index.js @@ -53,7 +53,9 @@ function main() { logLevel: "info", autoMagic: true, imagePreview: true, - syncTabs: true + syncTabs: true, + preserveCR: true, + userSetCR: false }; document.removeEventListener("DOMContentLoaded", main, false); diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs index 40ec412f..58b794b6 100644 --- a/src/web/waiters/InputWaiter.mjs +++ b/src/web/waiters/InputWaiter.mjs @@ -222,8 +222,6 @@ class InputWaiter { if (Object.prototype.hasOwnProperty.call(r, "progress") && Object.prototype.hasOwnProperty.call(r, "inputNum")) { this.manager.tabs.updateInputTabProgress(r.inputNum, r.progress, 100); - } else if (Object.prototype.hasOwnProperty.call(r, "fileBuffer")) { - this.manager.tabs.updateInputTabProgress(r.inputNum, 100, 100); } const transferable = Object.prototype.hasOwnProperty.call(r, "fileBuffer") ? [r.fileBuffer] : undefined; @@ -305,6 +303,9 @@ class InputWaiter { case "removeChefWorker": this.removeChefWorker(); break; + case "fileLoaded": + this.fileLoaded(r.data.inputNum); + break; default: log.error(`Unknown action ${r.action}.`); } @@ -331,7 +332,7 @@ class InputWaiter { * @param {number} inputData.size - The size in bytes of the input file * @param {string} inputData.type - The MIME type of the input file * @param {number} inputData.progress - The load progress of the input file - * @param {boolean} [silent=false] - If true, fires the manager statechange event + * @param {boolean} [silent=false] - If false, fires the manager statechange event */ async set(inputData, silent=false) { return new Promise(function(resolve, reject) { @@ -373,7 +374,7 @@ class InputWaiter { if (!silent) window.dispatchEvent(this.manager.statechange); } else { - this.setFile(inputData); + this.setFile(inputData, silent); } }.bind(this)); @@ -389,8 +390,9 @@ class InputWaiter { * @param {number} inputData.size - The size in bytes of the input file * @param {string} inputData.type - The MIME type of the input file * @param {number} inputData.progress - The load progress of the input file + * @param {boolean} [silent=true] - If false, fires the manager statechange event */ - setFile(inputData) { + setFile(inputData, silent=true) { const activeTab = this.manager.tabs.getActiveInputTab(); if (inputData.inputNum !== activeTab) return; @@ -414,6 +416,30 @@ class InputWaiter { this.setInputInfo(inputData.size, null); this.displayFilePreview(inputData); + + if (!silent) window.dispatchEvent(this.manager.statechange); + } + + /** + * Update file details when a file completes loading + * + * @param {number} inputNum - The inputNum of the input which has finished loading + */ + fileLoaded(inputNum) { + this.manager.tabs.updateInputTabProgress(inputNum, 100, 100); + + const activeTab = this.manager.tabs.getActiveInputTab(); + if (activeTab !== inputNum) return; + + this.inputWorker.postMessage({ + action: "setInput", + data: { + inputNum: inputNum, + silent: false + } + }); + + this.updateFileProgress(inputNum, 100); } /** @@ -495,19 +521,6 @@ class InputWaiter { fileLoaded.textContent = progress + "%"; fileLoaded.style.color = ""; } - - if (progress === 100 && progress !== oldProgress) { - // Don't set the input if the progress hasn't changed - this.inputWorker.postMessage({ - action: "setInput", - data: { - inputNum: inputNum, - silent: false - } - }); - window.dispatchEvent(this.manager.statechange); - - } } /** @@ -711,13 +724,17 @@ class InputWaiter { * * @param {event} e */ - inputPaste(e) { + async inputPaste(e) { + e.preventDefault(); + e.stopPropagation(); + const pastedData = e.clipboardData.getData("Text"); - if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024)) { + const preserve = await this.preserveCarriageReturns(pastedData); + + if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024) && !preserve) { // Pasting normally fires the inputChange() event before // changing the value, so instead change it here ourselves // and manually fire inputChange() - e.preventDefault(); const inputText = document.getElementById("input-text"); const selStart = inputText.selectionStart; const selEnd = inputText.selectionEnd; @@ -728,9 +745,6 @@ class InputWaiter { inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length); this.debounceInputChange(e); } else { - e.preventDefault(); - e.stopPropagation(); - const file = new File([pastedData], "PastedData", { type: "text/plain", lastModified: Date.now() @@ -815,6 +829,45 @@ class InputWaiter { } } + /** + * Checks if an input contains carriage returns. + * If a CR is detected, checks if the preserve CR option has been set, + * and if not, asks the user for their preference. + * + * @param {string} input - The input to be checked + * @returns {boolean} - If true, the input contains a CR which should be + * preserved, so display an overlay so it can't be edited + */ + async preserveCarriageReturns(input) { + if (input.indexOf("\r") >= 0) { + const optionsStr = "This behaviour can be changed in the options"; + if (!this.app.options.userSetCR) { + let preserve = await new Promise(function(resolve, reject) { + this.app.confirm( + "Carriage Return Detected", + "A carriage return was detected in your input. As HTML textareas can't display carriage returns, editing must be turned off to preserve them.
Alternatively, you can enable editing but your carriage returns will not be preserved.

This preference will be saved, and can be toggled in the options.", + "Preserve Carriage Returns", + "Enable Editing", resolve, this); + }.bind(this)); + if (preserve === undefined) { + this.app.alert(`Not preserving carriage returns. ${optionsStr}`, 4000); + preserve = false; + } + this.manager.options.updateOption("preserveCR", preserve); + this.manager.options.updateOption("userSetCR", true); + } else { + if (this.app.options.preserveCR) { + this.app.alert(`Carriage return(s) detected in input, so editing has been disabled to preserve them. ${optionsStr}`, 6000); + } else { + this.app.alert(`Carriage return(s) detected in input. Editing is remaining enabled, but any carriage returns will be removed. ${optionsStr}`, 6000); + } + } + return this.app.options.preserveCR; + } else { + return false; + } + } + /** * Load files from the UI into the inputWorker * diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs index eb6bac18..3dde372d 100755 --- a/src/web/waiters/OptionsWaiter.mjs +++ b/src/web/waiters/OptionsWaiter.mjs @@ -1,174 +1,180 @@ /** - * Waiter to handle events related to the CyberChef options. - * * @author n1474335 [n1474335@gmail.com] * @copyright Crown Copyright 2016 * @license Apache-2.0 - * - * @constructor - * @param {App} app - The main view object for CyberChef. */ -const OptionsWaiter = function(app, manager) { - this.app = app; - this.manager = manager; -}; - /** - * Loads options and sets values of switches and inputs to match them. - * - * @param {Object} options + * Waiter to handle events related to the CyberChef options. */ -OptionsWaiter.prototype.load = function(options) { - for (const option in options) { - this.app.options[option] = options[option]; +class OptionsWaiter { + + /** + * OptionsWaiter constructor. + * + * @param {App} app - The main view object for CyberChef. + * @param {Manager} manager - The CyberChef event manager. + */ + constructor(app, manager) { + this.app = app; + this.manager = manager; } - // Set options to match object - const cboxes = document.querySelectorAll("#options-body input[type=checkbox]"); - let i; - for (i = 0; i < cboxes.length; i++) { - cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")]; - } + /** + * Loads options and sets values of switches and inputs to match them. + * + * @param {Object} options + */ + load(options) { + for (const option in options) { + this.app.options[option] = options[option]; + } - const nboxes = document.querySelectorAll("#options-body input[type=number]"); - for (i = 0; i < nboxes.length; i++) { - nboxes[i].value = this.app.options[nboxes[i].getAttribute("option")]; - nboxes[i].dispatchEvent(new CustomEvent("change", {bubbles: true})); - } + // Set options to match object + const cboxes = document.querySelectorAll("#options-body input[type=checkbox]"); + let i; + for (i = 0; i < cboxes.length; i++) { + cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")]; + } - const selects = document.querySelectorAll("#options-body select"); - for (i = 0; i < selects.length; i++) { - const val = this.app.options[selects[i].getAttribute("option")]; - if (val) { - selects[i].value = val; - selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true})); - } else { - selects[i].selectedIndex = 0; + const nboxes = document.querySelectorAll("#options-body input[type=number]"); + for (i = 0; i < nboxes.length; i++) { + nboxes[i].value = this.app.options[nboxes[i].getAttribute("option")]; + nboxes[i].dispatchEvent(new CustomEvent("change", {bubbles: true})); + } + + const selects = document.querySelectorAll("#options-body select"); + for (i = 0; i < selects.length; i++) { + const val = this.app.options[selects[i].getAttribute("option")]; + if (val) { + selects[i].value = val; + selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true})); + } else { + selects[i].selectedIndex = 0; + } } } -}; -/** - * Handler for options click events. - * Dispays the options pane. - * - * @param {event} e - */ -OptionsWaiter.prototype.optionsClick = function(e) { - e.preventDefault(); - $("#options-modal").modal(); -}; - - -/** - * Handler for reset options click events. - * Resets options back to their default values. - */ -OptionsWaiter.prototype.resetOptionsClick = function() { - this.load(this.app.doptions); -}; - - -/** - * Handler for switch change events. - * Modifies the option state and saves it to local storage. - * - * @param {event} e - */ -OptionsWaiter.prototype.switchChange = function(e) { - const el = e.target; - const option = el.getAttribute("option"); - const state = el.checked; - - log.debug(`Setting ${option} to ${state}`); - this.app.options[option] = state; - - if (this.app.isLocalStorageAvailable()) - localStorage.setItem("options", JSON.stringify(this.app.options)); -}; - - -/** - * Handler for number change events. - * Modifies the option value and saves it to local storage. - * - * @param {event} e - */ -OptionsWaiter.prototype.numberChange = function(e) { - const el = e.target; - const option = el.getAttribute("option"); - const val = parseInt(el.value, 10); - - log.debug(`Setting ${option} to ${val}`); - this.app.options[option] = val; - - if (this.app.isLocalStorageAvailable()) - localStorage.setItem("options", JSON.stringify(this.app.options)); -}; - - -/** - * Handler for select change events. - * Modifies the option value and saves it to local storage. - * - * @param {event} e - */ -OptionsWaiter.prototype.selectChange = function(e) { - const el = e.target; - const option = el.getAttribute("option"); - - log.debug(`Setting ${option} to ${el.value}`); - this.app.options[option] = el.value; - - if (this.app.isLocalStorageAvailable()) - localStorage.setItem("options", JSON.stringify(this.app.options)); -}; - - -/** - * Sets or unsets word wrap on the input and output depending on the wordWrap option value. - */ -OptionsWaiter.prototype.setWordWrap = function() { - document.getElementById("input-text").classList.remove("word-wrap"); - document.getElementById("output-text").classList.remove("word-wrap"); - document.getElementById("output-html").classList.remove("word-wrap"); - document.getElementById("input-highlighter").classList.remove("word-wrap"); - document.getElementById("output-highlighter").classList.remove("word-wrap"); - - if (!this.app.options.wordWrap) { - document.getElementById("input-text").classList.add("word-wrap"); - document.getElementById("output-text").classList.add("word-wrap"); - document.getElementById("output-html").classList.add("word-wrap"); - document.getElementById("input-highlighter").classList.add("word-wrap"); - document.getElementById("output-highlighter").classList.add("word-wrap"); + /** + * Handler for options click events. + * Dispays the options pane. + * + * @param {event} e + */ + optionsClick(e) { + e.preventDefault(); + $("#options-modal").modal(); } -}; -/** - * Changes the theme by setting the class of the element. - * - * @param {Event} e - */ -OptionsWaiter.prototype.themeChange = function (e) { - const themeClass = e.target.value; - - document.querySelector(":root").className = themeClass; -}; + /** + * Handler for reset options click events. + * Resets options back to their default values. + */ + resetOptionsClick() { + this.load(this.app.doptions); + } -/** - * Changes the console logging level. - * - * @param {Event} e - */ -OptionsWaiter.prototype.logLevelChange = function (e) { - const level = e.target.value; - log.setLevel(level, false); - this.manager.worker.setLogLevel(); - this.manager.input.setLogLevel(); -}; + /** + * Handler for switch change events. + * + * @param {event} e + */ + switchChange(e) { + const el = e.target; + const option = el.getAttribute("option"); + const state = el.checked; + + this.updateOption(option, state); + } + + + /** + * Handler for number change events. + * + * @param {event} e + */ + numberChange(e) { + const el = e.target; + const option = el.getAttribute("option"); + const val = parseInt(el.value, 10); + + this.updateOption(option, val); + } + + + /** + * Handler for select change events. + * + * @param {event} e + */ + selectChange(e) { + const el = e.target; + const option = el.getAttribute("option"); + + this.updateOption(option, el.value); + } + + /** + * Modifies an option value and saves it to local storage. + * + * @param {string} option - The option to be updated + * @param {string|number|boolean} value - The new value of the option + */ + updateOption(option, value) { + log.debug(`Setting ${option} to ${value}`); + this.app.options[option] = value; + + if (this.app.isLocalStorageAvailable()) + localStorage.setItem("options", JSON.stringify(this.app.options)); + } + + + /** + * Sets or unsets word wrap on the input and output depending on the wordWrap option value. + */ + setWordWrap() { + document.getElementById("input-text").classList.remove("word-wrap"); + document.getElementById("output-text").classList.remove("word-wrap"); + document.getElementById("output-html").classList.remove("word-wrap"); + document.getElementById("input-highlighter").classList.remove("word-wrap"); + document.getElementById("output-highlighter").classList.remove("word-wrap"); + + if (!this.app.options.wordWrap) { + document.getElementById("input-text").classList.add("word-wrap"); + document.getElementById("output-text").classList.add("word-wrap"); + document.getElementById("output-html").classList.add("word-wrap"); + document.getElementById("input-highlighter").classList.add("word-wrap"); + document.getElementById("output-highlighter").classList.add("word-wrap"); + } + } + + + /** + * Changes the theme by setting the class of the element. + * + * @param {Event} e + */ + themeChange(e) { + const themeClass = e.target.value; + + document.querySelector(":root").className = themeClass; + } + + + /** + * Changes the console logging level. + * + * @param {Event} e + */ + logLevelChange(e) { + const level = e.target.value; + log.setLevel(level, false); + this.manager.worker.setLogLevel(); + this.manager.input.setLogLevel(); + } +} export default OptionsWaiter; diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index 005d9533..af39b80c 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -217,6 +217,9 @@ class OutputWaiter { */ removeAllOutputs() { this.outputs = {}; + + this.resetSwitch(); + const tabsList = document.getElementById("output-tabs"); const tabsListChildren = tabsList.children; @@ -516,9 +519,10 @@ class OutputWaiter { this.app.alert("Could not find any output data to download. Has this output been baked?", 3000); return; } - let fileName = window.prompt("Please enter a filename: ", "download.dat"); + const fileName = window.prompt("Please enter a filename: ", "download.dat"); - if (fileName === null) fileName = "download.dat"; + // Assume if the user clicks cancel they don't want to download + if (fileName === null) return; const data = await dish.get(Dish.ARRAY_BUFFER), file = new File([data], fileName); @@ -529,12 +533,22 @@ class OutputWaiter { * Handler for save all click event * Saves all outputs to a single archvie file */ - saveAllClick() { + async saveAllClick() { const downloadButton = document.getElementById("save-all-to-file"); if (downloadButton.firstElementChild.innerHTML === "archive") { this.downloadAllFiles(); - } else if (window.confirm("Cancel zipping of outputs?")) { - this.terminateZipWorker(); + } else { + const cancel = await new Promise(function(resolve, reject) { + this.app.confirm( + "Cancel zipping?", + "The outputs are currently being zipped for download.
Cancel zipping?", + "Continue zipping", + "Cancel zipping", + resolve, this); + }.bind(this)); + if (!cancel && cancel !== undefined) { + this.terminateZipWorker(); + } } } @@ -544,57 +558,61 @@ class OutputWaiter { * be zipped for download */ async downloadAllFiles() { - return new Promise(resolve => { - const inputNums = Object.keys(this.outputs); - for (let i = 0; i < inputNums.length; i++) { - const iNum = inputNums[i]; - if (this.outputs[iNum].status !== "baked" || - this.outputs[iNum].bakeId !== this.manager.worker.bakeId) { - if (window.confirm("Not all outputs have been baked yet. Continue downloading outputs?")) { - break; - } else { - return; - } + const inputNums = Object.keys(this.outputs); + for (let i = 0; i < inputNums.length; i++) { + const iNum = inputNums[i]; + if (this.outputs[iNum].status !== "baked" || + this.outputs[iNum].bakeId !== this.manager.worker.bakeId) { + const continueDownloading = await new Promise(function(resolve, reject) { + this.app.confirm( + "Incomplete outputs", + "Not all outputs have been baked yet. Continue downloading outputs?", + "Download", "Cancel", resolve, this); + }.bind(this)); + if (continueDownloading) { + break; + } else { + return; } } + } - let fileName = window.prompt("Please enter a filename: ", "download.zip"); + let fileName = window.prompt("Please enter a filename: ", "download.zip"); - if (fileName === null || fileName === "") { - // Don't zip the files if there isn't a filename - this.app.alert("No filename was specified.", 3000); - return; - } + if (fileName === null || fileName === "") { + // Don't zip the files if there isn't a filename + this.app.alert("No filename was specified.", 3000); + return; + } - if (!fileName.match(/.zip$/)) { - fileName += ".zip"; - } + if (!fileName.match(/.zip$/)) { + fileName += ".zip"; + } - let fileExt = window.prompt("Please enter a file extension for the files, or leave blank to detect automatically.", ""); + let fileExt = window.prompt("Please enter a file extension for the files, or leave blank to detect automatically.", ""); - if (fileExt === null) fileExt = ""; + if (fileExt === null) fileExt = ""; - if (this.zipWorker !== null) { - this.terminateZipWorker(); - } + if (this.zipWorker !== null) { + this.terminateZipWorker(); + } - const downloadButton = document.getElementById("save-all-to-file"); + const downloadButton = document.getElementById("save-all-to-file"); - downloadButton.classList.add("spin"); - downloadButton.title = `Zipping ${inputNums.length} files...`; - downloadButton.setAttribute("data-original-title", `Zipping ${inputNums.length} files...`); + downloadButton.classList.add("spin"); + downloadButton.title = `Zipping ${inputNums.length} files...`; + downloadButton.setAttribute("data-original-title", `Zipping ${inputNums.length} files...`); - downloadButton.firstElementChild.innerHTML = "autorenew"; + downloadButton.firstElementChild.innerHTML = "autorenew"; - log.debug("Creating ZipWorker"); - this.zipWorker = new ZipWorker(); - this.zipWorker.postMessage({ - outputs: this.outputs, - filename: fileName, - fileExtension: fileExt - }); - this.zipWorker.addEventListener("message", this.handleZipWorkerMessage.bind(this)); + log.debug("Creating ZipWorker"); + this.zipWorker = new ZipWorker(); + this.zipWorker.postMessage({ + outputs: this.outputs, + filename: fileName, + fileExtension: fileExt }); + this.zipWorker.addEventListener("message", this.handleZipWorkerMessage.bind(this)); } /** @@ -1213,14 +1231,39 @@ class OutputWaiter { * Moves the current output into the input textarea. */ async switchClick() { - const active = await this.getDishBuffer(this.getOutputDish(this.manager.tabs.getActiveOutputTab())); + const activeTab = this.manager.tabs.getActiveOutputTab(); + const transferable = []; + + const switchButton = document.getElementById("switch"); + switchButton.classList.add("spin"); + switchButton.disabled = true; + switchButton.firstElementChild.innerHTML = "autorenew"; + $(switchButton).tooltip("hide"); + + let active = await this.getDishBuffer(this.getOutputDish(activeTab)); + + if (!this.outputExists(activeTab)) { + this.resetSwitchButton(); + return; + } + + if (this.outputs[activeTab].data.type === "string" && + active.byteLength <= this.app.options.ioDisplayThreshold * 1024) { + const dishString = await this.getDishStr(this.getOutputDish(activeTab)); + if (!await this.manager.input.preserveCarriageReturns(dishString)) { + active = dishString; + } + } else { + transferable.push(active); + } + this.manager.input.inputWorker.postMessage({ action: "inputSwitch", data: { - inputNum: this.manager.tabs.getActiveInputTab(), + inputNum: activeTab, outputData: active } - }, [active]); + }, transferable); } /** @@ -1238,6 +1281,9 @@ class OutputWaiter { inputSwitch(switchData) { this.switchOrigData = switchData; document.getElementById("undo-switch").disabled = false; + + this.resetSwitchButton(); + } /** @@ -1246,17 +1292,35 @@ class OutputWaiter { */ undoSwitchClick() { this.manager.input.updateInputObj(this.switchOrigData.inputNum, this.switchOrigData.data); + + this.manager.input.fileLoaded(this.switchOrigData.inputNum); + + this.resetSwitch(); + } + + /** + * Removes the switch data and resets the switch buttons + */ + resetSwitch() { + if (this.switchOrigData !== undefined) { + delete this.switchOrigData; + } + const undoSwitch = document.getElementById("undo-switch"); undoSwitch.disabled = true; $(undoSwitch).tooltip("hide"); - this.manager.input.inputWorker.postMessage({ - action: "setInput", - data: { - inputNum: this.switchOrigData.inputNum, - silent: false - } - }); + this.resetSwitchButton(); + } + + /** + * Resets the switch button to its usual state + */ + resetSwitchButton() { + const switchButton = document.getElementById("switch"); + switchButton.classList.remove("spin"); + switchButton.disabled = false; + switchButton.firstElementChild.innerHTML = "open_in_browser"; } /** diff --git a/src/web/workers/InputWorker.mjs b/src/web/workers/InputWorker.mjs index cec68627..521539c5 100644 --- a/src/web/workers/InputWorker.mjs +++ b/src/web/workers/InputWorker.mjs @@ -202,6 +202,7 @@ self.bakeInput = function(inputNum, bakeId) { if (inputObj === null || inputObj === undefined || inputObj.status !== "loaded") { + self.postMessage({ action: "queueInputError", data: { @@ -441,7 +442,7 @@ self.updateTabHeader = function(inputNum) { * * @param {object} inputData * @param {number} inputData.inputNum - The input to get the data for - * @param {boolean} inputData.silent - If false, the manager statechange event won't be fired + * @param {boolean} inputData.silent - If false, the manager statechange event will be fired */ self.setInput = function(inputData) { const inputNum = inputData.inputNum; @@ -590,7 +591,7 @@ self.updateInputObj = function(inputData) { const inputNum = inputData.inputNum; const data = inputData.data; - if (self.getInputObj(inputNum) === -1) return; + if (self.getInputObj(inputNum) === undefined) return; self.inputs[inputNum].data = data; }; @@ -663,11 +664,19 @@ self.handleLoaderMessage = function(r) { if ("fileBuffer" in r) { log.debug(`Input file ${inputNum} loaded.`); self.loadingInputs--; + self.updateInputValue({ inputNum: inputNum, value: r.fileBuffer }); + self.postMessage({ + action: "fileLoaded", + data: { + inputNum: inputNum + } + }); + const idx = self.getLoaderWorkerIdx(r.id); self.loadNextFile(idx); } else if ("progress" in r) { @@ -782,7 +791,7 @@ self.loadFiles = function(filesData) { } self.getLoadProgress(); - self.setInput({inputNum: activeTab, silent: false}); + self.setInput({inputNum: activeTab, silent: true}); }; /** @@ -1025,7 +1034,7 @@ self.inputSwitch = function(switchData) { const currentData = currentInput.data; if (currentInput === undefined || currentInput === null) return; - if (typeof switchData.outputData === "object") { + if (typeof switchData.outputData !== "string") { const output = new Uint8Array(switchData.outputData), types = detectFileType(output); let type = "unknown", @@ -1036,15 +1045,22 @@ self.inputSwitch = function(switchData) { } // ArrayBuffer - currentInput.data = { - fileBuffer: switchData.outputData, - name: `output.${ext}`, - size: switchData.outputData.byteLength.toLocaleString(), - type: type - }; + self.updateInputObj({ + inputNum: switchData.inputNum, + data: { + fileBuffer: switchData.outputData, + name: `output.${ext}`, + size: switchData.outputData.byteLength.toLocaleString(), + type: type + } + }); } else { // String - currentInput.data = switchData.outputData; + self.updateInputValue({ + inputNum: switchData.inputNum, + value: switchData.outputData, + force: true + }); } self.postMessage({ @@ -1055,6 +1071,11 @@ self.inputSwitch = function(switchData) { } }); - self.setInput({inputNum: switchData.inputNum, silent: false}); + self.postMessage({ + action: "fileLoaded", + data: { + inputNum: switchData.inputNum + } + }); }; From c43f829854858448902cca73ef703045051c0ecb Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 22 Aug 2019 11:56:14 +0100 Subject: [PATCH 5/6] Slightly change wording of alerts --- src/web/waiters/InputWaiter.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs index 58b794b6..36b5f05c 100644 --- a/src/web/waiters/InputWaiter.mjs +++ b/src/web/waiters/InputWaiter.mjs @@ -857,9 +857,9 @@ class InputWaiter { this.manager.options.updateOption("userSetCR", true); } else { if (this.app.options.preserveCR) { - this.app.alert(`Carriage return(s) detected in input, so editing has been disabled to preserve them. ${optionsStr}`, 6000); + this.app.alert(`A carriage return was detected in your input, so editing has been disabled to preserve it. ${optionsStr}`, 6000); } else { - this.app.alert(`Carriage return(s) detected in input. Editing is remaining enabled, but any carriage returns will be removed. ${optionsStr}`, 6000); + this.app.alert(`A carriage return was detected in your input. Editing is remaining enabled, but any carriage returns will be removed. ${optionsStr}`, 6000); } } return this.app.options.preserveCR; From 9774a4bd268e0f0ac73f9324c56fcff3e9343499 Mon Sep 17 00:00:00 2001 From: n1474335 Date: Thu, 22 Aug 2019 16:31:21 +0100 Subject: [PATCH 6/6] Tidied up CR preservation code --- src/web/html/index.html | 8 +-- src/web/waiters/InputWaiter.mjs | 101 ++++++++++++++++++------------- src/web/waiters/OutputWaiter.mjs | 2 +- 3 files changed, 64 insertions(+), 47 deletions(-) diff --git a/src/web/html/index.html b/src/web/html/index.html index cb9c3dbe..13b06d61 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -563,21 +563,21 @@
-
diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs index 36b5f05c..e519b963 100644 --- a/src/web/waiters/InputWaiter.mjs +++ b/src/web/waiters/InputWaiter.mjs @@ -728,30 +728,46 @@ class InputWaiter { e.preventDefault(); e.stopPropagation(); - const pastedData = e.clipboardData.getData("Text"); - const preserve = await this.preserveCarriageReturns(pastedData); - - if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024) && !preserve) { - // Pasting normally fires the inputChange() event before - // changing the value, so instead change it here ourselves - // and manually fire inputChange() - const inputText = document.getElementById("input-text"); - const selStart = inputText.selectionStart; - const selEnd = inputText.selectionEnd; - const startVal = inputText.value.slice(0, selStart); - const endVal = inputText.value.slice(selEnd); - - inputText.value = startVal + pastedData + endVal; - inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length); - this.debounceInputChange(e); - } else { + const self = this; + /** + * Triggers the input file/binary data overlay + * + * @param {string} pastedData + */ + function triggerOverlay(pastedData) { const file = new File([pastedData], "PastedData", { type: "text/plain", lastModified: Date.now() }); - this.loadUIFiles([file]); + self.loadUIFiles([file]); + } + + const pastedData = e.clipboardData.getData("Text"); + const inputText = document.getElementById("input-text"); + const selStart = inputText.selectionStart; + const selEnd = inputText.selectionEnd; + const startVal = inputText.value.slice(0, selStart); + const endVal = inputText.value.slice(selEnd); + const val = startVal + pastedData + endVal; + + if (val.length >= (this.app.options.ioDisplayThreshold * 1024)) { + // Data too large to display, use overlay + triggerOverlay(val); return false; + } else if (await this.preserveCarriageReturns(val)) { + // Data contains a carriage return and the user doesn't wish to edit it, use overlay + // We check this in a separate condition to make sure it is not run unless absolutely + // necessary. + triggerOverlay(val); + return false; + } else { + // Pasting normally fires the inputChange() event before + // changing the value, so instead change it here ourselves + // and manually fire inputChange() + inputText.value = val; + inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length); + this.debounceInputChange(e); } } @@ -839,33 +855,34 @@ class InputWaiter { * preserved, so display an overlay so it can't be edited */ async preserveCarriageReturns(input) { - if (input.indexOf("\r") >= 0) { - const optionsStr = "This behaviour can be changed in the options"; - if (!this.app.options.userSetCR) { - let preserve = await new Promise(function(resolve, reject) { - this.app.confirm( - "Carriage Return Detected", - "A carriage return was detected in your input. As HTML textareas can't display carriage returns, editing must be turned off to preserve them.
Alternatively, you can enable editing but your carriage returns will not be preserved.

This preference will be saved, and can be toggled in the options.", - "Preserve Carriage Returns", - "Enable Editing", resolve, this); - }.bind(this)); - if (preserve === undefined) { - this.app.alert(`Not preserving carriage returns. ${optionsStr}`, 4000); - preserve = false; - } - this.manager.options.updateOption("preserveCR", preserve); - this.manager.options.updateOption("userSetCR", true); - } else { - if (this.app.options.preserveCR) { - this.app.alert(`A carriage return was detected in your input, so editing has been disabled to preserve it. ${optionsStr}`, 6000); - } else { - this.app.alert(`A carriage return was detected in your input. Editing is remaining enabled, but any carriage returns will be removed. ${optionsStr}`, 6000); - } + if (input.indexOf("\r") < 0) return false; + + const optionsStr = "This behaviour can be changed in the Options pane"; + if (!this.app.options.userSetCR) { + // User has not set a CR preference yet + let preserve = await new Promise(function(resolve, reject) { + this.app.confirm( + "Carriage Return Detected", + "A carriage return (\\r, 0x0d) was detected in your input. As HTML textareas can't display carriage returns, editing must be turned off to preserve them.
Alternatively, you can enable editing but your carriage returns will not be preserved.

This preference will be saved but can be toggled in the options pane.", + "Preserve Carriage Returns", + "Enable Editing", resolve, this); + }.bind(this)); + if (preserve === undefined) { + // The confirm pane was closed without picking a specific choice + this.app.alert(`Not preserving carriage returns.\n${optionsStr}`, 5000); + preserve = false; } - return this.app.options.preserveCR; + this.manager.options.updateOption("preserveCR", preserve); + this.manager.options.updateOption("userSetCR", true); } else { - return false; + if (this.app.options.preserveCR) { + this.app.alert(`A carriage return (\\r, 0x0d) was detected in your input, so editing has been disabled to preserve it.
${optionsStr}`, 10000); + } else { + this.app.alert(`A carriage return (\\r, 0x0d) was detected in your input. Editing is remaining enabled, but carriage returns will not be preserved.
${optionsStr}`, 10000); + } } + + return this.app.options.preserveCR; } /** diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index af39b80c..6bbe8f4a 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -546,7 +546,7 @@ class OutputWaiter { "Cancel zipping", resolve, this); }.bind(this)); - if (!cancel && cancel !== undefined) { + if (!cancel) { this.terminateZipWorker(); } }