mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 14:56:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reviewed HTML and options

Browse source
This commit is contained in:
n1474335 2023-01-19 17:47:07 +00:00
parent fa21768931
commit 84f0750525
4 changed files with 43 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/web/html/index.html
View file

@ -237,33 +237,33 @@
<i class="material-icons">view_compact</i> <i class="material-icons">view_compact</i>
</button> </button>
</span> </span>
</div>
</div> <div id="input-wrapper" class="no-select">
<div id="input-tabs-wrapper" style="display: none;" class="no-select"> <div id="input-tabs-wrapper" style="display: none;" class="no-select">
<span id="btn-previous-input-tab" class="input-tab-buttons"> <span id="btn-previous-input-tab" class="input-tab-buttons">
&lt; &lt;
</span> </span>
<span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
··· ···
</span> </span>
<div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown"> <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
<a id="btn-go-to-input-tab" class="dropdown-item"> <a id="btn-go-to-input-tab" class="dropdown-item">
Go to tab Go to tab
</a> </a>
<a id="btn-find-input-tab" class="dropdown-item"> <a id="btn-find-input-tab" class="dropdown-item">
Find tab Find tab
</a> </a>
<a id="btn-close-all-tabs" class="dropdown-item"> <a id="btn-close-all-tabs" class="dropdown-item">
Close all tabs Close all tabs
</a> </a>
</div>
<span id="btn-next-input-tab" class="input-tab-buttons">
&gt;
</span>
<ul id="input-tabs">
</ul>
</div> </div>
<span id="btn-next-input-tab" class="input-tab-buttons">
&gt;
</span>
<ul id="input-tabs">
</ul>
</div>
<div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
<div id="input-text"></div> <div id="input-text"></div>
</div> </div>
</div> </div>
@ -299,7 +299,8 @@
<i class="material-icons">access_time</i> <i class="material-icons">access_time</i>
</span> </span>
</div> </div>
<div id="output-wrapper">
<div id="output-wrapper" class="no-select">
<div id="output-tabs-wrapper" style="display: none" class="no-select"> <div id="output-tabs-wrapper" style="display: none" class="no-select">
<span id="btn-previous-output-tab" class="output-tab-buttons"> <span id="btn-previous-output-tab" class="output-tab-buttons">
&lt; &lt;
@ -321,14 +322,12 @@
<ul id="output-tabs"> <ul id="output-tabs">
</ul> </ul>
</div> </div>
<div class="textarea-wrapper"> <div id="output-text"></div>
<div id="output-text"></div> <div id="output-loader">
<div id="output-loader"> <div id="output-loader-animation">
<div id="output-loader-animation"> <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
</div>
<div class="loading-msg"></div>
</div> </div>
<div class="loading-msg"></div>
</div> </div>
</div> </div>
</div> </div>
@ -443,20 +442,6 @@
</select> </select>
</div> </div>
<div class="form-group option-item">
<label for="preserveCR" class="bmd-label-floating"> Preserve carriage returns (0x0d)</label>
<select class="form-control" option="preserveCR" id="preserveCR" data-toggle="tooltip" data-placement="bottom" data-offset="-10%" data-html="true" title="HTML textareas don't support carriage returns, so if we want to preserve them in our input, we have to disable editing.<br><br>The default option is to only do this for high-entropy inputs, but you can force the choice using this dropdown.">
<option value="entropy">For high-entropy inputs</option>
<option value="always">Always</option>
<option value="never">Never</option>
</select>
</div>
<div class="form-group option-item">
<label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
<input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
</div>
<div class="form-group option-item"> <div class="form-group option-item">
<label for="logLevel" class="bmd-label-floating">Console logging level</label> <label for="logLevel" class="bmd-label-floating">Console logging level</label>
<select class="form-control" option="logLevel" id="logLevel"> <select class="form-control" option="logLevel" id="logLevel">
@ -490,13 +475,18 @@
</label> </label>
</div> </div>
<div class="checkbox option-item"> <div class="checkbox option-item mb-0">
<label for="showErrors"> <label for="showErrors">
<input type="checkbox" option="showErrors" id="showErrors" checked> <input type="checkbox" option="showErrors" id="showErrors" checked>
Operation error reporting (recommended) Show errors from operations (recommended)
</label> </label>
</div> </div>
<div class="form-group option-item">
<label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
<input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
</div>
<div class="checkbox option-item"> <div class="checkbox option-item">
<label for="useMetaKey"> <label for="useMetaKey">
<input type="checkbox" option="useMetaKey" id="useMetaKey"> <input type="checkbox" option="useMetaKey" id="useMetaKey">

3
src/web/index.js
View file

@ -51,8 +51,7 @@ function main() {
logLevel: "info", logLevel: "info",
autoMagic: true, autoMagic: true,
imagePreview: true, imagePreview: true,
syncTabs: true, syncTabs: true
preserveCR: "entropy"
}; };
document.removeEventListener("DOMContentLoaded", main, false); document.removeEventListener("DOMContentLoaded", main, false);

28
src/web/stylesheets/layout/_io.css
View file

@ -13,6 +13,7 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
overflow: hidden;
} }
.cm-editor { .cm-editor {
@ -25,19 +26,6 @@
color: var(--fixed-width-font-colour); color: var(--fixed-width-font-colour);
} }
#output-wrapper{
margin: 0;
padding: 0;
}
#output-wrapper .textarea-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
}
#input-tabs-wrapper #input-tabs, #input-tabs-wrapper #input-tabs,
#output-tabs-wrapper #output-tabs { #output-tabs-wrapper #output-tabs {
list-style: none; list-style: none;
@ -165,20 +153,6 @@
height: calc(100% - var(--tab-height) - var(--title-height)); height: calc(100% - var(--tab-height) - var(--title-height));
} }
.input-wrapper.textarea-wrapper {
width: 100%;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
}
.textarea-wrapper textarea,
.textarea-wrapper #output-text {
font-family: var(--fixed-width-font-family);
font-size: var(--fixed-width-font-size);
color: var(--fixed-width-font-colour);
}
#output-loader { #output-loader {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

4
src/web/waiters/BindingsWaiter.mjs
View file

@ -40,11 +40,11 @@ class BindingsWaiter {
break; break;
case "KeyI": // Focus input case "KeyI": // Focus input
e.preventDefault(); e.preventDefault();
document.getElementById("input-text").focus(); this.manager.input.inputEditorView.focus();
break; break;
case "KeyO": // Focus output case "KeyO": // Focus output
e.preventDefault(); e.preventDefault();
document.getElementById("output-text").focus(); this.manager.output.outputEditorView.focus();
break; break;
case "Period": // Focus next operation case "Period": // Focus next operation
e.preventDefault(); e.preventDefault();