mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-07 15:07:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

set UI breakpoint to 1024 to ensure smooth UX for tablet users. Update the existing UI tests

Browse source
This commit is contained in:
Robin Scholtes 2023-08-16 16:42:05 +12:00
parent 047750fda4
commit 965659311e
10 changed files with 42 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/web/App.mjs
View file

@ -47,7 +47,7 @@ class App {
this.workerLoaded = false; this.workerLoaded = false;
this.waitersLoaded = false; this.waitersLoaded = false;
this.breakpoint = 768; this.breakpoint = 1024;
} }
/** /**

2
src/web/stylesheets/components/_banner.css
View file

@ -41,7 +41,7 @@
text-decoration: none; text-decoration: none;
} }
@media only screen and (min-width: 768px){ @media only screen and (min-width: 1024px){
.banner-link:hover span { .banner-link:hover span {
text-decoration: underline; text-decoration: underline;
} }

2
src/web/stylesheets/components/_dividers.css
View file

@ -1,5 +1,5 @@
/* Gutters and splitters */ /* Gutters and splitters */
@media only screen and (min-width: 768px){ @media only screen and (min-width: 1024px){
.split { .split {
box-sizing: border-box; box-sizing: border-box;
/* overflow: auto; */ /* overflow: auto; */

2
src/web/stylesheets/components/_operation.css
View file

@ -23,7 +23,7 @@
cursor: default; cursor: default;
} }
@media only screen and (min-width: 768px){ @media only screen and (min-width: 1024px){
.operation { .operation {
cursor: grab; cursor: grab;
} }

2
src/web/stylesheets/components/io/_io.css
View file

@ -88,7 +88,7 @@ label[for="output-text"] {
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@media only screen and (min-width: 768px){ @media only screen and (min-width: 1024px){
#output-loader { #output-loader {
bottom: 0; bottom: 0;
} }

2
src/web/stylesheets/components/operations/_operations.css
View file

@ -35,7 +35,7 @@
display: none; display: none;
} }
@media only screen and ( min-width: 768px ){ @media only screen and ( min-width: 1024px ){
#operations-dropdown { #operations-dropdown {
border-bottom: none; border-bottom: none;
} }

4
src/web/stylesheets/layout/_structure.css
View file

@ -10,7 +10,7 @@
#operations { height: var(--operations-height); } #operations { height: var(--operations-height); }
#controls { height: var(--controls-height); } #controls { height: var(--controls-height); }
@media only screen and ( min-width: 768px ) { @media only screen and ( min-width: 1024px ) {
#controls { height: var(--desktop-controls-height); } #controls { height: var(--desktop-controls-height); }
} }
@ -49,7 +49,7 @@
display: none; display: none;
} }
@media only screen and ( min-width: 768px ) { @media only screen and ( min-width: 1024px ) {
#recipe { #recipe {
padding-bottom: var(--desktop-controls-height); padding-bottom: var(--desktop-controls-height);
} }

4
src/web/stylesheets/utils/_general.css
View file

@ -73,13 +73,13 @@ body {
display: none; display: none;
} }
@media only screen and ( min-width: 768px ) { @media only screen and ( min-width: 1024px ) {
.desktop-only { .desktop-only {
display: inline-block; display: inline-block;
} }
} }
@media only screen and ( min-width: 768px ){ @media only screen and ( min-width: 1024px ){
.mobile-only { .mobile-only {
display: none; display: none;
} }

2
src/web/utils/statusBar.mjs
View file

@ -292,7 +292,7 @@ class StatusBarPanel {
this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach( this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach(
el => { el => {
el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : "250px"; el.style.maxHeight = window.innerWidth >= 1024 ? (viewHeight - 50) + "px" : "250px";
} }
); );
} }

55
tests/browser/00_nightwatch.js
View file

@ -9,9 +9,10 @@
const utils = require("./browserUtils.js"); const utils = require("./browserUtils.js");
module.exports = { module.exports = {
// desktop UI
before: browser => { before: browser => {
browser browser
.resizeWindow(1280, 800) .resizeWindow(1024, 800)
.url(browser.launchUrl); .url(browser.launchUrl);
}, },
@ -26,12 +27,18 @@ module.exports = {
browser.useCss(); browser.useCss();
// Check that various important elements are loaded // Check that various important elements are loaded
browser.expect.element("#operations").to.be.visible; browser.expect.element("#operations").to.be.visible;
browser.expect.element("#operations-dropdown").to.be.visible;
browser.expect.element("#search").to.be.visible;
browser.expect.element("#categories").to.be.visible;
browser.expect.element("c-category-list").to.be.visible;
browser.expect.element("c-category-li").to.be.present;
browser.expect.element("c-operation-list").to.be.present;
browser.expect.element("c-operation-li").to.be.present;
browser.expect.element("#recipe").to.be.visible; browser.expect.element("#recipe").to.be.visible;
browser.expect.element("#input").to.be.present;
browser.expect.element("#output").to.be.present;
browser.expect.element(".op-list").to.be.present;
browser.expect.element("#rec-list").to.be.visible; browser.expect.element("#rec-list").to.be.visible;
browser.expect.element("#controls").to.be.visible; browser.expect.element("#controls").to.be.visible;
browser.expect.element("#input").to.be.visible;
browser.expect.element("#output").to.be.visible;
browser.expect.element("#input-text").to.be.visible; browser.expect.element("#input-text").to.be.visible;
browser.expect.element("#output-text").to.be.visible; browser.expect.element("#output-text").to.be.visible;
}, },
@ -39,27 +46,27 @@ module.exports = {
"Operations loaded": browser => { "Operations loaded": browser => {
browser.useXpath(); browser.useXpath();
// Check that an operation in every category has been populated // Check that an operation in every category has been populated
browser.expect.element("//li[contains(@class, 'operation') and text()='To Base64']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To Base64']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='To Binary']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To Binary']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='AES Decrypt']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='AES Decrypt']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='PEM to Hex']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='PEM to Hex']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Power Set']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Power Set']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Parse IP range']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Parse IP range']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Remove Diacritics']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Remove Diacritics']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Sort']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Sort']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='To UNIX Timestamp']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To UNIX Timestamp']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Extract dates']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Extract dates']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Gzip']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Gzip']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Keccak']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Keccak']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='JSON Beautify']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='JSON Beautify']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Detect File Type']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Detect File Type']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Play Media']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Play Media']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Disassemble x86']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Disassemble x86']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation') and text()='Register']").to.be.present; browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Register']").to.be.present;
}, },
"Recipe can be run": browser => { "Recipe can be run": browser => {
const toHex = "//li[contains(@class, 'operation') and text()='To Hex']"; const toHex = "//li[contains(@class, 'operation')]/span[text()='To Hex']";
const op = "#rec-list .operation .op-title"; const op = "#rec-list .operation .op-title";
// Check that operation is visible // Check that operation is visible
@ -183,7 +190,7 @@ module.exports = {
"Move around the UI": browser => { "Move around the UI": browser => {
const otherCat = "//a[contains(@class, 'category-title') and contains(@data-target, '#catOther')]", const otherCat = "//a[contains(@class, 'category-title') and contains(@data-target, '#catOther')]",
genUUID = "//li[contains(@class, 'operation') and text()='Generate UUID']"; genUUID = "//li[contains(@class, 'operation')]/span[text()='Generate UUID']";
browser.useXpath(); browser.useXpath();
@ -220,7 +227,7 @@ module.exports = {
.clearValue("#search") .clearValue("#search")
.setValue("#search", "md5") .setValue("#search", "md5")
.useXpath() .useXpath()
.waitForElementVisible("//ul[@id='search-results']//b[text()='MD5']", 1000); .waitForElementVisible("//div[@id='search-results']//strong[text()='MD5']", 1000);
}, },
"Alert bar": browser => { "Alert bar": browser => {