mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-20 06:55:08 -04:00
Merge 1f09c6b1ce into 7c8be12d52
This commit is contained in:
j264415
GitHub
commit
25476c0763
4 changed files with 111 additions and 6 deletions
|
|
@ -145,7 +145,7 @@
|
|||
<button type="button" aria-label="Edit Favourites" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
|
||||
<i class="material-icons" aria-hidden="true">star</i>
|
||||
</button>
|
||||
<div id="content-wrapper">
|
||||
<div tabindex="0" id="content-wrapper">
|
||||
<div id="banner" class="row">
|
||||
<div class="col" style="text-align: left; padding-left: 10px;">
|
||||
<a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">Download CyberChef <i class="material-icons">file_download</i></a>
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
Operations
|
||||
<span class="op-count"></span>
|
||||
</div>
|
||||
<input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
|
||||
<input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="0" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
|
||||
<ul id="search-results" class="op-list"></ul>
|
||||
<div id="categories" class="panel-group no-select"></div>
|
||||
</div>
|
||||
|
|
@ -584,22 +584,22 @@
|
|||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
|
||||
<a id="tab-1" class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
|
||||
FAQs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
<a id="tab-2" class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
Report a bug
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
<a id="tab-3" class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
<a id="tab-4" class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
|
||||
Keybindings
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,36 @@
|
|||
color: var(--banner-url-colour);
|
||||
}
|
||||
|
||||
#options:focus {
|
||||
background-color: #eef3ec;
|
||||
border: solid black 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#support:focus {
|
||||
background-color: #eef3ec;
|
||||
border: solid black 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#notice:focus {
|
||||
background-color: #eef3ec;
|
||||
border: solid black 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#banner .col a:focus {
|
||||
background-color: #eef3ec;
|
||||
border: solid black 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#notice-wrapper #notice:focus {
|
||||
background-color: #eef3ec;
|
||||
border: solid black 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#notice-wrapper {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -78,6 +78,11 @@
|
|||
border-left: 2px solid var(--primary-border-colour);
|
||||
}
|
||||
|
||||
p a:focus {
|
||||
color: #0a6ebd;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
|
||||
border-color: var(--input-border-colour);
|
||||
|
|
|
|||
|
|
@ -387,6 +387,18 @@ class ControlsWaiter {
|
|||
*/
|
||||
supportButtonClick(e) {
|
||||
e.preventDefault();
|
||||
const faqs = document.getElementById("faqs");
|
||||
const faqsAElement = faqs.getElementsByTagName("a");
|
||||
for (let i = 0; i < faqsAElement.length; i++) {
|
||||
faqsAElement[i].setAttribute("tabindex", "0");
|
||||
faqsAElement[i].addEventListener("keydown", this.navigateFAQList, false);
|
||||
}
|
||||
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
tabs[i].addEventListener("keydown", this.changeTabs, false);
|
||||
}
|
||||
|
||||
const reportBugInfo = document.getElementById("report-bug-info");
|
||||
const saveLink = this.generateStateUrl(true, true, null, null, "https://gchq.github.io/CyberChef/");
|
||||
|
|
@ -403,6 +415,64 @@ ${navigator.userAgent}
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {Event} ev
|
||||
*/
|
||||
changeTabs(ev) {
|
||||
const tab = ev.target;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if (ev.key === "ArrowRight") {
|
||||
const nextTab = tab.parentElement;
|
||||
if (nextTab.nextElementSibling === null) {
|
||||
tab.parentElement.parentElement.firstElementChild.firstElementChild.focus();
|
||||
} else {
|
||||
nextTab.nextElementSibling.firstElementChild.focus();
|
||||
}
|
||||
|
||||
} else if (ev.key === "ArrowLeft") {
|
||||
const prevTab = tab.parentElement;
|
||||
|
||||
if (prevTab.previousElementSibling === null) {
|
||||
tab.parentElement.parentElement.lastElementChild.firstElementChild.focus();
|
||||
} else {
|
||||
prevTab.previousElementSibling.firstElementChild.focus();
|
||||
}
|
||||
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-1")) {
|
||||
document.getElementById("faqs").querySelector("[class='btn btn-primary']").focus();
|
||||
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-2")) {
|
||||
document.getElementById("report-bug").querySelector("[class='btn btn-primary']").focus();
|
||||
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-3")) {
|
||||
document.getElementById("about").querySelector("[href]").focus();
|
||||
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-4")) {
|
||||
const button = document.getElementById("support-modal").getElementsByClassName("modal-footer");
|
||||
const close = button[0].firstElementChild;
|
||||
close.focus();
|
||||
} else if (ev.key === "Enter" || ev.key === "Space" || ev.key === " ") {
|
||||
tab.click();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} ev
|
||||
*/
|
||||
navigateFAQList(ev) {
|
||||
|
||||
const el = ev.target.nextElementSibling;
|
||||
if (ev.key === "Enter" || ev.key === "Space" || ev.key === " ") {
|
||||
ev.preventDefault();
|
||||
const question = el.classList;
|
||||
if (question !== undefined && question.value) {
|
||||
if (!question.value.includes("show")) {
|
||||
question.add("show");
|
||||
} else if (question.contains("show")) {
|
||||
question.remove("show");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the stale indicator to show that the input or recipe has changed
|
||||
* since the last bake.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue