exlim/cyberchef
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats 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.waitersLoaded = false;
this.breakpoint = 768;
this.breakpoint = 1024;
}
/**

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

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

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

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

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

@ -23,7 +23,7 @@
cursor: default;
}
@media only screen and (min-width: 768px){
@media only screen and (min-width: 1024px){
.operation {
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;
}
@media only screen and (min-width: 768px){
@media only screen and (min-width: 1024px){
#output-loader {
bottom: 0;
}

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

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

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

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

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

@ -73,13 +73,13 @@ body {
display: none;
}
@media only screen and ( min-width: 768px ) {
@media only screen and ( min-width: 1024px ) {
.desktop-only {
display: inline-block;
}
}
@media only screen and ( min-width: 768px ){
@media only screen and ( min-width: 1024px ){
.mobile-only {
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(
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");
module.exports = {
// desktop UI
before: browser => {
browser
.resizeWindow(1280, 800)
.resizeWindow(1024, 800)
.url(browser.launchUrl);
},
@ -26,12 +27,18 @@ module.exports = {
browser.useCss();
// Check that various important elements are loaded
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("#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("#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("#output-text").to.be.visible;
},
@ -39,27 +46,27 @@ module.exports = {
"Operations loaded": browser => {
browser.useXpath();
// 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') and 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') and 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') and 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') and 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') and 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') and 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') and 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') and 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()='To Base64']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='To Binary']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='AES Decrypt']").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')]/span[text()='Power Set']").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')]/span[text()='Remove Diacritics']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Sort']").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')]/span[text()='Extract dates']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Gzip']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Keccak']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='JSON Beautify']").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')]/span[text()='Play Media']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Disassemble x86']").to.be.present;
browser.expect.element("//li[contains(@class, 'operation')]/span[text()='Register']").to.be.present;
},
"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";
// Check that operation is visible
@ -183,7 +190,7 @@ module.exports = {
"Move around the UI": browser => {
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();
@ -220,7 +227,7 @@ module.exports = {
.clearValue("#search")
.setValue("#search", "md5")
.useXpath()
.waitForElementVisible("//ul[@id='search-results']//b[text()='MD5']", 1000);
.waitForElementVisible("//div[@id='search-results']//strong[text()='MD5']", 1000);
},
"Alert bar": browser => {