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

Merge with ui-improvements

This commit is contained in:
j433866 2019-03-29 13:35:30 +00:00
parent c289e1beef 757176727d
commit 0d8584f499
17 changed files with 482 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/web/InputWaiter.mjs
View File

@ -7,6 +7,8 @@
import LoaderWorker from "worker-loader?inline&fallback=false!./LoaderWorker";
import Utils from "../core/Utils";
import { toBase64 } from "../core/lib/Base64";
import { isImage } from "../core/lib/FileType";
/**
@ -176,15 +178,18 @@ class InputWaiter {
fileSize = document.getElementById("input-file-size"),
fileType = document.getElementById("input-file-type"),
fileLoaded = document.getElementById("input-file-loaded");
fileOverlay.style.display = "none";
fileName.textContent = "";
fileSize.textContent = "";
fileType.textContent = "";
fileLoaded.textContent = "";
const inputText = document.getElementById("input-text");
const inputText = document.getElementById("input-text"),
fileThumb = document.getElementById("input-file-thumbnail");
inputText.style.overflow = "auto";
inputText.classList.remove("blur");
fileThumb.src = require("./static/images/file-128x128.png");
}
}
@ -695,8 +700,16 @@ class InputWaiter {
displayFilePreview() {
const inputNum = this.getActiveTab(),
inputText = document.getElementById("input-text"),
fileSlice = this.getInput(inputNum).slice(0, 4096);
fileSlice = this.fileBuffer.slice(0, 4096),
fileThumb = document.getElementById("input-file-thumbnail"),
arrBuffer = new Uint8Array(this.fileBuffer),
type = isImage(arrBuffer);
if (type && type !== "image/tiff" && this.app.options.imagePreview) {
// Don't show TIFFs as not much supports them
fileThumb.src = `data:${type};base64,${toBase64(arrBuffer)}`;
} else {
fileThumb.src = require("./static/images/file-128x128.png");
}
inputText.style.overflow = "hidden";
inputText.classList.add("blur");
inputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice));

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

@ -464,6 +464,8 @@
<option value="classic">Classic</option>
<option value="dark">Dark</option>
<option value="geocities">GeoCities</option>
<option value="solarizedDark">Solarized Dark</option>
<option value="solarizedLight">Solarized Light</option>
</select>
</div>
@ -537,6 +539,13 @@
Attempt to detect encoded data automagically
</label>
</div>
<div class="checkbox option-item">
<label for="imagePreview">
<input type="checkbox" option="imagePreview" id="imagePreview">
Render a preview of the input if it's detected to be an image.
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>

1
src/web/index.js
View File

@ -53,6 +53,7 @@ function main() {
ioDisplayThreshold: 512,
logLevel: "info",
autoMagic: true,
imagePreview: true,
};
document.removeEventListener("DOMContentLoaded", main, false);

50
src/web/stylesheets/components/_operation.css
View File

@ -82,7 +82,43 @@ div.toggle-string {
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused label,
.operation .checkbox label:hover {
color: #1976d2;
color: var(--input-highlight-colour);
}
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
border-color: var(--input-border-colour);
color: var(--input-highlight-colour);
}
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--input-highlight-colour);
color: var(--input-highlight-colour);
}
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--disabled-font-colour);
color: var(--disabled-font-colour);
}
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--breakpoint-font-colour);
color: var(--breakpoint-font-colour);
}
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--fc-breakpoint-operation-font-colour);
color: var(--fc-breakpoint-operation-font-colour);
}
.operation .form-control {
@ -97,7 +133,7 @@ div.toggle-string {
.operation .form-control:hover {
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(97%);
}
@ -105,7 +141,7 @@ div.toggle-string {
.operation .form-control:focus {
background-color: var(--arg-background);
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(100%);
}
@ -205,19 +241,19 @@ div.toggle-string {
}
.disable-icon {
color: #9e9e9e;
color: var(--disable-icon-colour);
}
.disable-icon-selected {
color: #f44336;
color: var(--disable-icon-selected-colour);
}
.breakpoint {
color: #9e9e9e;
color: var(--breakpoint-icon-colour);
}
.breakpoint-selected {
color: #f44336;
color: var(--breakpoint-icon-selected-colour);
}
.break {

15
src/web/stylesheets/components/_pane.css
View File

@ -53,6 +53,7 @@
line-height: 30px;
background-color: var(--primary-background-colour);
flex-direction: row;
padding-left: 10px;
}
.io-card.card:hover {
@ -61,10 +62,16 @@
.io-card.card>img {
float: left;
width: 128px;
height: 128px;
margin-left: 10px;
margin-top: 11px;
width: auto;
height: auto;
max-width: 128px;
max-height: 128px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
padding: 0px;
}
.io-card.card .card-body .close {

2
src/web/stylesheets/index.css
View File

@ -10,6 +10,8 @@
@import "./themes/_classic.css";
@import "./themes/_dark.css";
@import "./themes/_geocities.css";
@import "./themes/_solarizedDark.css";
@import "./themes/_solarizedLight.css";
/* Utilities */
@import "./utils/_overrides.css";

4
src/web/stylesheets/layout/_banner.css
View File

@ -22,6 +22,10 @@
padding-right: 10px;
}
#banner a {
color: var(--banner-url-colour);
}
#notice-wrapper {
text-align: center;
overflow: hidden;

6
src/web/stylesheets/layout/_controls.css
View File

@ -32,6 +32,12 @@
cursor: pointer;
}
#auto-bake-label .check,
#auto-bake-label .check::before {
border-color: var(--input-highlight-colour);
color: var(--input-highlight-colour);
}
#auto-bake-label .checkbox-decorator {
position: relative;
}

31
src/web/stylesheets/layout/_modals.css
View File

@ -77,3 +77,34 @@
padding: 20px;
border-left: 2px solid var(--primary-border-colour);
}
.checkbox label input[type=checkbox]+.checkbox-decorator .check,
.checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
border-color: var(--input-border-colour);
color: var(--input-highlight-colour);
}
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
border-color: var(--input-highlight-colour);
color: var(--input-highlight-colour);
}
.bmd-form-group.is-focused .option-item label {
color: var(--input-highlight-colour);
}
.bmd-form-group.is-focused [class^='bmd-label'],
.bmd-form-group.is-focused [class*=' bmd-label'],
.bmd-form-group.is-focused [class^='bmd-label'],
.bmd-form-group.is-focused [class*=' bmd-label'],
.bmd-form-group.is-focused label,
.checkbox label:hover {
color: var(--input-highlight-colour);
}
.bmd-form-group.option-item label+.form-control{
background-image:
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}

4
src/web/stylesheets/layout/_operations.css
View File

@ -16,7 +16,7 @@
padding-left: 10px;
padding-right: 10px;
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}
@ -33,7 +33,7 @@
}
#categories a {
color: #1976d2;
color: var(--category-list-font-colour);
cursor: pointer;
}

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

@ -6,14 +6,14 @@
* @license Apache-2.0
*/
#loader-wrapper {
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: var(--secondary-border-colour);
background-color: var(--loader-background-colour);
}
.loader {
@ -26,7 +26,7 @@
margin: -75px 0 0 -75px;
border: 3px solid transparent;
border-top-color: #3498db;
border-top-color: var(--loader-outer-colour);
border-radius: 50%;
animation: spin 2s linear infinite;
@ -45,7 +45,7 @@
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #e74c3c;
border-top-color: var(--loader-middle-colour);
animation: spin 3s linear infinite;
}
@ -54,7 +54,7 @@
left: 13px;
right: 13px;
bottom: 13px;
border-top-color: #f9c922;
border-top-color: var(--loader-inner-colour);
animation: spin 1.5s linear infinite;
}

17
src/web/stylesheets/themes/_classic.css
View File

@ -35,6 +35,14 @@
--banner-font-colour: #468847;
--banner-bg-colour: #dff0d8;
--banner-url-colour: #1976d2;
--category-list-font-colour: #1976d2;
--loader-background-colour: var(--secondary-border-colour);
--loader-outer-colour: #3498db;
--loader-middle-colour: #e74c3c;
--loader-inner-colour: #f9c922;
/* Operation colours */
@ -76,6 +84,13 @@
--arg-label-colour: #388e3c;
/* Operation buttons */
--disable-icon-colour: #9e9e9e;
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
/* Buttons */
--btn-default-font-colour: #333;
--btn-default-bg-colour: #fff;
@ -114,4 +129,6 @@
--popover-border-colour: #ccc;
--code-background: #f9f2f4;
--code-font-colour: #c7254e;
--input-highlight-colour: #1976d2;
--input-border-colour: #424242;
}

17
src/web/stylesheets/themes/_dark.css
View File

@ -31,6 +31,14 @@
--banner-font-colour: #c5c5c5;
--banner-bg-colour: #252525;
--banner-url-colour: #1976d2;
--category-list-font-colour: #1976d2;
--loader-background-colour: var(--secondary-border-colour);
--loader-outer-colour: #3498db;
--loader-middle-colour: #e74c3c;
--loader-inner-colour: #f9c922;
/* Operation colours */
@ -72,6 +80,13 @@
--arg-label-colour: rgb(25, 118, 210);
/* Operation buttons */
--disable-icon-colour: #9e9e9e;
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
/* Buttons */
--btn-default-font-colour: #c5c5c5;
--btn-default-bg-colour: #2d2d2d;
@ -110,4 +125,6 @@
--popover-border-colour: #555;
--code-background: #0e639c;
--code-font-colour: #fff;
--input-highlight-colour: #1976d2;
--input-border-colour: #424242;
}

17
src/web/stylesheets/themes/_geocities.css
View File

@ -31,6 +31,14 @@
--banner-font-colour: white;
--banner-bg-colour: maroon;
--banner-url-colour: yellow;
--category-list-font-colour: yellow;
--loader-background-colour: #00f;
--loader-outer-colour: #0f0;
--loader-middle-colour: red;
--loader-inner-colour: yellow;
/* Operation colours */
@ -72,6 +80,13 @@
--arg-label-colour: red;
/* Operation buttons */
--disable-icon-colour: #0f0;
--disable-icon-selected-colour: yellow;
--breakpoint-icon-colour: #0f0;
--breakpoint-icon-selected-colour: yellow;
/* Buttons */
--btn-default-font-colour: black;
--btn-default-bg-colour: white;
@ -110,4 +125,6 @@
--popover-border-colour: violet;
--code-background: black;
--code-font-colour: limegreen;
--input-highlight-colour: limegreen;
--input-border-colour: limegreen;
}

147
src/web/stylesheets/themes/_solarizedDark.css Executable file
View File

@ -0,0 +1,147 @@
/**
* Solarized dark theme definitions
*
* @author j433866 [j433866@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
:root.solarizedDark {
--base03: #002b36;
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--sol-yellow: #b58900;
--sol-orange: #cb4b16;
--sol-red: #dc322f;
--sol-magenta: #d33682;
--sol-violet: #6c71c4;
--sol-blue: #268bd2;
--sol-cyan: #2aa198;
--sol-green: #859900;
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--primary-font-colour: var(--base0);
--primary-font-size: 14px;
--primary-line-height: 20px;
--fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
--subtext-font-colour: var(--base01);
--subtext-font-size: 13px;
--primary-background-colour: var(--base03);
--secondary-background-colour: var(--base02);
--primary-border-colour: var(--base00);
--secondary-border-colour: var(--base01);
--title-colour: var(--base1);
--title-weight: bold;
--title-background-colour: var(--base02);
--banner-font-colour: var(--base0);
--banner-bg-colour: var(--base03);
--banner-url-colour: var(--base1);
--category-list-font-colour: var(--base1);
--loader-background-colour: var(--base03);
--loader-outer-colour: var(--base1);
--loader-middle-colour: var(--base0);
--loader-inner-colour: var(--base00);
/* Operation colours */
--op-list-operation-font-colour: var(--base0);
--op-list-operation-bg-colour: var(--base03);
--op-list-operation-border-colour: var(--base02);
--rec-list-operation-font-colour: var(--base0);
--rec-list-operation-bg-colour: var(--base02);
--rec-list-operation-border-colour: var(--base01);
--selected-operation-font-color: var(--base1);
--selected-operation-bg-colour: var(--base02);
--selected-operation-border-colour: var(--base01);
--breakpoint-font-colour: var(--sol-red);
--breakpoint-bg-colour: var(--base02);
--breakpoint-border-colour: var(--base00);
--disabled-font-colour: var(--base01);
--disabled-bg-colour: var(--base03);
--disabled-border-colour: var(--base02);
--fc-operation-font-colour: var(--base1);
--fc-operation-bg-colour: var(--base02);
--fc-operation-border-colour: var(--base01);
--fc-breakpoint-operation-font-colour: var(--sol-orange);
--fc-breakpoint-operation-bg-colour: var(--base02);
--fc-breakpoint-operation-border-colour: var(--base00);
/* Operation arguments */
--op-title-font-weight: bold;
--arg-font-colour: var(--base0);
--arg-background: var(--base03);
--arg-border-colour: var(--base00);
--arg-disabled-background: var(--base03);
--arg-label-colour: var(--base1);
/* Operation buttons */
--disable-icon-colour: var(--base00);
--disable-icon-selected-colour: var(--sol-red);
--breakpoint-icon-colour: var(--base00);
--breakpoint-icon-selected-colour: var(--sol-red);
/* Buttons */
--btn-default-font-colour: var(--base0);
--btn-default-bg-colour: var(--base02);
--btn-default-border-colour: var(--base01);
--btn-default-hover-font-colour: var(--base1);
--btn-default-hover-bg-colour: var(--base01);
--btn-default-hover-border-colour: var(--base00);
--btn-success-font-colour: var(--base0);
--btn-success-bg-colour: var(--base03);
--btn-success-border-colour: var(--base00);
--btn-success-hover-font-colour: var(--base1);
--btn-success-hover-bg-colour: var(--base01);
--btn-success-hover-border-colour: var(--base00);
/* Highlighter colours */
--hl1: var(--base01);
--hl2: var(--sol-blue);
--hl3: var(--sol-magenta);
--hl4: var(--sol-yellow);
--hl5: var(--sol-green);
/* Scrollbar */
--scrollbar-track: var(--base03);
--scrollbar-thumb: var(--base00);
--scrollbar-hover: var(--base01);
/* Misc. */
--drop-file-border-colour: var(--base01);
--popover-background: var(--base02);
--popover-border-colour: var(--base01);
--code-background: var(--base03);
--code-font-colour: var(--base1);
--input-highlight-colour: var(--base1);
--input-border-colour: var(--base0);
}

149
src/web/stylesheets/themes/_solarizedLight.css Executable file
View File

@ -0,0 +1,149 @@
/**
* Solarized light theme definitions
*
* @author j433866 [j433866@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
:root.solarizedLight {
--base03: #002b36;
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--sol-yellow: #b58900;
--sol-orange: #cb4b16;
--sol-red: #dc322f;
--sol-magenta: #d33682;
--sol-violet: #6c71c4;
--sol-blue: #268bd2;
--sol-cyan: #2aa198;
--sol-green: #859900;
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--primary-font-colour: var(--base00);
--primary-font-size: 14px;
--primary-line-height: 20px;
--fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;
--subtext-font-colour: var(--base1);
--subtext-font-size: 13px;
--primary-background-colour: var(--base3);
--secondary-background-colour: var(--base2);
--primary-border-colour: var(--base0);
--secondary-border-colour: var(--base1);
--title-colour: var(--base01);
--title-weight: bold;
--title-background-colour: var(--base2);
--banner-font-colour: var(--base00);
--banner-bg-colour: var(--base3);
--banner-url-colour: var(--base01);
--category-list-font-colour: var(--base01);
--loader-background-colour: var(--base3);
--loader-outer-colour: var(--base01);
--loader-middle-colour: var(--base00);
--loader-inner-colour: var(--base0);
/* Operation colours */
--op-list-operation-font-colour: var(--base00);
--op-list-operation-bg-colour: var(--base3);
--op-list-operation-border-colour: var(--base2);
--rec-list-operation-font-colour: var(--base00);
--rec-list-operation-bg-colour: var(--base2);
--rec-list-operation-border-colour: var(--base1);
--selected-operation-font-color: var(--base01);
--selected-operation-bg-colour: var(--base2);
--selected-operation-border-colour: var(--base1);
--breakpoint-font-colour: var(--sol-red);
--breakpoint-bg-colour: var(--base2);
--breakpoint-border-colour: var(--base0);
--disabled-font-colour: var(--base1);
--disabled-bg-colour: var(--base3);
--disabled-border-colour: var(--base2);
--fc-operation-font-colour: var(--base01);
--fc-operation-bg-colour: var(--base2);
--fc-operation-border-colour: var(--base1);
--fc-breakpoint-operation-font-colour: var(--base02);
--fc-breakpoint-operation-bg-colour: var(--base1);
--fc-breakpoint-operation-border-colour: var(--base0);
/* Operation arguments */
--op-title-font-weight: bold;
--arg-font-colour: var(--base00);
--arg-background: var(--base3);
--arg-border-colour: var(--base0);
--arg-disabled-background: var(--base3);
--arg-label-colour: var(--base01);
/* Operation buttons */
--disable-icon-colour: #9e9e9e;
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
/* Buttons */
--btn-default-font-colour: var(--base00);
--btn-default-bg-colour: var(--base2);
--btn-default-border-colour: var(--base1);
--btn-default-hover-font-colour: var(--base01);
--btn-default-hover-bg-colour: var(--base1);
--btn-default-hover-border-colour: var(--base0);
--btn-success-font-colour: var(--base00);
--btn-success-bg-colour: var(--base3);
--btn-success-border-colour: var(--base0);
--btn-success-hover-font-colour: var(--base01);
--btn-success-hover-bg-colour: var(--base1);
--btn-success-hover-border-colour: var(--base0);
/* Highlighter colours */
--hl1: var(--base1);
--hl2: var(--sol-blue);
--hl3: var(--sol-magenta);
--hl4: var(--sol-yellow);
--hl5: var(--sol-green);
/* Scrollbar */
--scrollbar-track: var(--base3);
--scrollbar-thumb: var(--base1);
--scrollbar-hover: var(--base0);
/* Misc. */
--drop-file-border-colour: var(--base1);
--popover-background: var(--base2);
--popover-border-colour: var(--base1);
--code-background: var(--base3);
--code-font-colour: var(--base01);
--input-highlight-colour: var(--base01);
--input-border-colour: var(--base00);
}

7
src/web/stylesheets/utils/_overrides.css
View File

@ -104,8 +104,11 @@ select.form-control:not([size]):not([multiple]), select.custom-file-control:not(
color: var(--primary-font-colour);
}
.form-control {
background-image: linear-gradient(to top, rgb(25, 118, 210) 2px, rgba(25, 118, 210, 0) 2px), linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
.form-control
.is-focused .form-control {
background-image:
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}
code {