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

Added loader for long bakes and improved initial loading sequence

Browse Source
This commit is contained in:
n1474335 2017-07-28 14:43:44 +01:00
parent cc3aad17e1
commit 78d0369e71
6 changed files with 49 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/ChefWorker.js
View File

@ -12,6 +12,12 @@ import Chef from "./Chef.js";
// Set up Chef instance // Set up Chef instance
self.chef = new Chef(); self.chef = new Chef();
// Tell the app that the worker has loaded and is ready to operate
self.postMessage({
action: "workerLoaded",
data: {}
});
/** /**
* Respond to message from parent thread. * Respond to message from parent thread.
* *

33
src/web/App.js
View File

@ -54,6 +54,8 @@ App.prototype.setup = function() {
this.resetLayout(); this.resetLayout();
this.setCompileMessage(); this.setCompileMessage();
this.loadURIParams(); this.loadURIParams();
this.appLoaded = true;
this.loaded(); this.loaded();
}; };
@ -62,6 +64,10 @@ App.prototype.setup = function() {
* Fires once all setup activities have completed. * Fires once all setup activities have completed.
*/ */
App.prototype.loaded = function() { App.prototype.loaded = function() {
// Check that both the app and the worker have loaded successfully before
// removing the loading screen.
if (!this.worderLoaded || !this.appLoaded) return;
// Trigger CSS animations to remove preloader // Trigger CSS animations to remove preloader
document.body.classList.add("loaded"); document.body.classList.add("loaded");
@ -97,25 +103,20 @@ App.prototype.handleError = function(err) {
App.prototype.setBakingStatus = function(bakingStatus) { App.prototype.setBakingStatus = function(bakingStatus) {
this.baking = bakingStatus; this.baking = bakingStatus;
let inputLoadingIcon = document.querySelector("#input .title .loading-icon"), let outputLoader = document.getElementById("output-loader"),
outputLoadingIcon = document.querySelector("#output .title .loading-icon"), outputElement = document.getElementById("output-text");
inputElement = document.querySelector("#input-text"),
outputElement = document.querySelector("#output-text");
if (bakingStatus) { if (bakingStatus) {
inputLoadingIcon.style.display = "inline-block"; this.bakingStatusTimeout = setTimeout(function() {
outputLoadingIcon.style.display = "inline-block";
inputElement.classList.add("disabled");
inputElement.disabled = true;
outputElement.classList.add("disabled");
outputElement.disabled = true; outputElement.disabled = true;
outputLoader.style.visibility = "visible";
outputLoader.style.opacity = 1;
}, 200);
} else { } else {
inputLoadingIcon.style.display = "none"; clearTimeout(this.bakingStatusTimeout);
outputLoadingIcon.style.display = "none";
inputElement.classList.remove("disabled");
inputElement.disabled = false;
outputElement.classList.remove("disabled");
outputElement.disabled = false; outputElement.disabled = false;
outputLoader.style.opacity = 0;
outputLoader.style.visibility = "hidden";
} }
}; };
@ -160,6 +161,10 @@ App.prototype.handleChefMessage = function(e) {
break; break;
case "silentBakeComplete": case "silentBakeComplete":
break; break;
case "workerLoaded":
this.worderLoaded = true;
this.loaded();
break;
default: default:
console.error("Unrecognised message from ChefWorker", e); console.error("Unrecognised message from ChefWorker", e);
break; break;

6
src/web/ControlsWaiter.js
View File

@ -79,9 +79,6 @@ ControlsWaiter.prototype.setAutoBake = function(value) {
*/ */
ControlsWaiter.prototype.bakeClick = function() { ControlsWaiter.prototype.bakeClick = function() {
this.app.bake(); this.app.bake();
const outputText = document.getElementById("output-text");
outputText.focus();
outputText.setSelectionRange(0, 0);
}; };
@ -90,9 +87,6 @@ ControlsWaiter.prototype.bakeClick = function() {
*/ */
ControlsWaiter.prototype.stepClick = function() { ControlsWaiter.prototype.stepClick = function() {
this.app.bake(true); this.app.bake(true);
const outputText = document.getElementById("output-text");
outputText.focus();
outputText.setSelectionRange(0, 0);
}; };

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

@ -76,7 +76,7 @@
<body> <body>
<!-- Preloader overlay --> <!-- Preloader overlay -->
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="preloader"></div> <div id="preloader" class="loader"></div>
<div id="preloader-msg"></div> <div id="preloader-msg"></div>
</div> </div>
<!-- End preloader overlay --> <!-- End preloader overlay -->
@ -148,7 +148,6 @@
<div id="input" class="split no-select"> <div id="input" class="split no-select">
<div class="title no-select"> <div class="title no-select">
<label for="input-text">Input</label> <label for="input-text">Input</label>
<div class="loading-icon" style="display: none"></div>
<div class="btn-group io-btn-group"> <div class="btn-group io-btn-group">
<button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button> <button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
<button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button> <button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
@ -165,7 +164,6 @@
<div id="output" class="split"> <div id="output" class="split">
<div class="title no-select"> <div class="title no-select">
<label for="output-text">Output</label> <label for="output-text">Output</label>
<div class="loading-icon" style="display: none"></div>
<div class="btn-group io-btn-group"> <div class="btn-group io-btn-group">
<button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button> <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
<button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button> <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
@ -179,6 +177,9 @@
<div id="output-highlighter" class="no-select"></div> <div id="output-highlighter" class="no-select"></div>
<div id="output-html"></div> <div id="output-html"></div>
<textarea id="output-text" readonly="readonly"></textarea> <textarea id="output-text" readonly="readonly"></textarea>
<div id="output-loader">
<div class="loader"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -22,8 +22,6 @@
background-color: transparent; background-color: transparent;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
transition: all 0.5s ease;
} }
#output-html { #output-html {
@ -65,6 +63,20 @@
border: none; border: none;
} }
#output-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
background-color: var(--primary-background-colour);
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.io-btn-group { .io-btn-group {
float: right; float: right;
margin-top: -4px; margin-top: -4px;
@ -89,23 +101,3 @@
.dropping-file { .dropping-file {
border: 5px dashed var(--drop-file-border-colour) !important; border: 5px dashed var(--drop-file-border-colour) !important;
} }
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.loading-icon::before {
content: "\21bb";
}
.loading-icon {
animation-name: spinner;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

12
src/web/stylesheets/preloader.css
View File

@ -16,7 +16,7 @@
background-color: var(--secondary-border-colour); background-color: var(--secondary-border-colour);
} }
#preloader { .loader {
display: block; display: block;
position: relative; position: relative;
left: 50%; left: 50%;
@ -28,20 +28,19 @@
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #3498db; border-top-color: #3498db;
border-radius: 50%; border-radius: 50%;
z-index: 1500;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
#preloader:before, .loader:before,
#preloader:after { .loader:after {
content: ""; content: "";
position: absolute; position: absolute;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 50%; border-radius: 50%;
} }
#preloader:before { .loader:before {
top: 5px; top: 5px;
left: 5px; left: 5px;
right: 5px; right: 5px;
@ -50,7 +49,7 @@
animation: spin 3s linear infinite; animation: spin 3s linear infinite;
} }
#preloader:after { .loader:after {
top: 13px; top: 13px;
left: 13px; left: 13px;
right: 13px; right: 13px;
@ -77,7 +76,6 @@
/* Loaded */ /* Loaded */
.loaded #preloader,
.loaded #preloader-msg { .loaded #preloader-msg {
opacity: 0; opacity: 0;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;