tanya/CustomWeb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the horrible whitespacing

Browse source
This commit is contained in:
nazrin 2024-12-27 12:37:46 +00:00
parent d5518a164e
commit a9dd23a52c
17 changed files with 1311 additions and 1309 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
.msc .msc
web-ext-artifacts/

3
background.js
View file

@ -35,11 +35,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
} }
}); });
if(tab.scripts.length>0) if(tab.scripts.length>0){
chrome.browserAction.setBadgeText({ chrome.browserAction.setBadgeText({
tabId: tabID, tabId: tabID,
text: String(tab.scripts.length) text: String(tab.scripts.length)
}); });
}
break; break;
} }
case "set-url": { case "set-url": {

4
css/common.css
View file

@ -13,7 +13,7 @@ html{
} }
body{ body{
min-height:100%; min-height:100%;
margin: 0; margin: 0;
background-color: var(--background); background-color: var(--background);
} }
@ -47,7 +47,7 @@ body{
width:1em; height:1em; width:1em; height:1em;
margin-left:1px; margin-left:1px;
border:0.15em solid transparent; border:0.15em solid transparent;
background-clip: padding-box; background-clip: padding-box;
box-sizing:border-box; box-sizing:border-box;
border-radius:100%; border-radius:100%;
background-color:white; background-color:white;

210
css/editor.css
View file

@ -1,33 +1,33 @@
/* reset */ /* reset */
input { input {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
outline: none; outline: none;
border: none; border: none;
} }
#editor { #editor {
margin: 0; margin: 0;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
/* custom styles */ /* custom styles */
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* header */ /* header */
header { header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height: 50px; height: 50px;
flex-shrink: 0; flex-shrink: 0;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--top); background-color: var(--top);
} }
header .check { header .check {
@ -35,156 +35,156 @@ header .check {
} }
header input { header input {
width: 50%; width: 50%;
height: 40px; height: 40px;
padding: 0 15px; padding: 0 15px;
margin-right: auto; margin-right: auto;
border-radius: 40px; border-radius: 40px;
background-color: var(--top); background-color: var(--top);
font-family: "Segoe UI", Tahoma, sans-serif; font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 30px; font-size: 30px;
color: white; color: white;
cursor:pointer; cursor:pointer;
margin-right: auto; margin-right: auto;
transition: padding 100ms ease-in-out; transition: padding 100ms ease-in-out;
} }
header input:hover, header input:hover,
header input:focus { header input:focus {
background-color: var(--light); background-color: var(--light);
} }
header input:focus{ header input:focus{
cursor:auto; cursor:auto;
} }
header > span { header > span {
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 5px; padding: 5px;
margin-left: 5px; margin-left: 5px;
border-radius: 40px; border-radius: 40px;
cursor: pointer; cursor: pointer;
} }
header > span#download-btn { header > span#download-btn {
padding: 7px; padding: 7px;
} }
header > span:last-child { header > span:last-child {
margin-right: -5px; margin-right: -5px;
} }
header > span:hover { header > span:hover {
background-color: var(--light); background-color: var(--light);
} }
header > span svg { header > span svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: white; fill: white;
} }
#save-btn { #save-btn {
pointer-events: none; pointer-events: none;
} }
#save-btn.edited { #save-btn.edited {
pointer-events: all; pointer-events: all;
} }
#save-btn svg { #save-btn svg {
opacity: 0.25; opacity: 0.25;
transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out;
} }
#save-btn.edited svg { #save-btn.edited svg {
opacity: 1; opacity: 1;
} }
/* editor */ /* editor */
main { main {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#editor { #editor {
flex-grow: 1; flex-grow: 1;
} }
/* links popup */ /* links popup */
#links-popup { #links-popup {
display: none; /* flex */ display: none; /* flex */
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
height: 500px; height: 500px;
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
margin: auto; margin: auto;
top: 0; bottom: 0; top: 0; bottom: 0;
right: 0; left: 0; right: 0; left: 0;
z-index: 10; z-index: 10;
background-color: var(--light); background-color: var(--light);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
} }
#links-popup header { #links-popup header {
background: none; background: none;
background-color: var(--background); background-color: var(--background);
} }
#links-popup header h1 { #links-popup header h1 {
margin-right: auto; margin-right: auto;
font-family: "Segoe UI", Tahoma, sans-serif; font-family: "Segoe UI", Tahoma, sans-serif;
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
color: white; color: white;
} }
#links-popup header > span { #links-popup header > span {
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
#links-popup main { #links-popup main {
align-items: center; align-items: center;
} }
#links-popup main #links-wrapper { #links-popup main #links-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; padding: 20px;
overflow: auto; overflow: auto;
} }
#links-popup main #links-wrapper .link-entry { #links-popup main #links-wrapper .link-entry {
position: relative; position: relative;
width: 100%; width: 100%;
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 40px; border-radius: 40px;
overflow: hidden; overflow: hidden;
} }
#links-popup main #links-wrapper .link-entry input { #links-popup main #links-wrapper .link-entry input {
display: block; display: block;
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 40px; border-radius: 40px;
padding: 10px 15px; padding: 10px 15px;
padding-right: 40px; padding-right: 40px;
font-family: "Segoe UI", Tahoma, sans-serif; font-family: "Segoe UI", Tahoma, sans-serif;
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
color: rgb(235, 227, 227); color: rgb(235, 227, 227);
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
#links-popup main #links-wrapper .link-entry:hover, #links-popup main #links-wrapper .link-entry:hover,
#links-popup main #links-wrapper .link-entry input:focus { #links-popup main #links-wrapper .link-entry input:focus {
background-color: var(--lighter); background-color: var(--lighter);
opacity: 1; opacity: 1;
} }
#links-popup main #links-wrapper .link-entry input:focus { #links-popup main #links-wrapper .link-entry input:focus {
@ -192,42 +192,42 @@ main {
} }
#links-popup main #links-wrapper .link-entry svg { #links-popup main #links-wrapper .link-entry svg {
position: absolute; position: absolute;
top: 0; right: 0px; top: 0; right: 0px;
height: 40px; height: 40px;
width: 40px; width: 40px;
padding: 10px; padding: 10px;
border-radius: 100%; border-radius: 100%;
flex-shrink: 0; flex-shrink: 0;
fill: white; fill: white;
opacity: 0; opacity: 0;
cursor: pointer cursor: pointer
} }
#links-popup main #links-wrapper .link-entry:hover svg, #links-popup main #links-wrapper .link-entry:hover svg,
#links-popup main #links-wrapper .link-entry input:focus + svg { #links-popup main #links-wrapper .link-entry input:focus + svg {
opacity: 0.5; opacity: 0.5;
} }
#links-popup main #links-wrapper .link-entry svg:hover { #links-popup main #links-wrapper .link-entry svg:hover {
opacity: 1; opacity: 1;
} }
/* better monokai */ /* better monokai */
#editor.ace-monokai { #editor.ace-monokai {
background-color: var(--background); background-color: var(--background);
} }
#editor.ace-monokai .ace_gutter { #editor.ace-monokai .ace_gutter {
background-color: var(--light); background-color: var(--light);
} }
#editor.ace-monokai .ace_selection { #editor.ace-monokai .ace_selection {
background-color: var(--lighter); background-color: var(--lighter);
} }
#editor.ace-monokai .ace_marker-layer .ace_active-line { #editor.ace-monokai .ace_marker-layer .ace_active-line {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }

4
css/index.css
View file

@ -130,8 +130,8 @@ header #new-file .btn-svg svg {
} }
.file .file-icons .file-icon::before{ .file .file-icons .file-icon::before{
content:"DELETE"; content:"DELETE";
font-size: 12px; font-size: 12px;
width: 0px; width: 0px;
overflow:hidden; overflow:hidden;
text-align:center; text-align:center;
transition: width 100ms ease-in-out; transition: width 100ms ease-in-out;

28
css/popup.css
View file

@ -19,7 +19,7 @@ img{
display:grid; display:grid;
align-items:center; align-items:center;
grid-template-columns: 34px auto 25px; grid-template-columns: 34px auto 25px;
column-gap: 10px; column-gap: 10px;
height:30px; height:30px;
padding:0px 10px; padding:0px 10px;
} }
@ -27,15 +27,15 @@ img{
flex-shrink:0; flex-shrink:0;
} }
.line > .line-item{ .line > .line-item{
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events:none; pointer-events:none;
} }
.line > .line-item + .line-item{ .line > .line-item + .line-item{
opacity:0.5; opacity:0.5;
justify-self: center; justify-self: center;
} }
.btn{ .btn{
@ -56,24 +56,24 @@ section:not(:first-child){
border-top:1px solid var(--light); border-top:1px solid var(--light);
} }
section h2{ section h2{
margin: 0; margin: 0;
font-size: 10px; font-size: 10px;
font-weight:400; font-weight:400;
padding:0px 10px; padding:0px 10px;
color: var(--lighter) color: var(--lighter)
} }
section h2 span{ section h2 span{
max-width: 100%; max-width: 100%;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events:none; pointer-events:none;
} }
#add-new .line { #add-new .line {
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
align-items: stretch; align-items: stretch;
column-gap:0; column-gap:0;
height:20px; height:20px;
} }

92
editor.html
View file

@ -1,56 +1,56 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Script Editor</title> <title>Script Editor</title>
<link rel="shortcut icon" type="image/png" href="img/icon48.png"> <link rel="shortcut icon" type="image/png" href="img/icon48.png">
<link rel="stylesheet" href="css/common.css"/> <link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/editor.css"/> <link rel="stylesheet" href="css/editor.css"/>
</head> </head>
<body> <body>
<header> <header>
<label class="check" title="Enable or disable file"> <label class="check" title="Enable or disable file">
<input id="enable-input" type="checkbox"> <input id="enable-input" type="checkbox">
<span></span> <span></span>
</label> </label>
<input id="name-input" type="text" title="File name"/> <input id="name-input" type="text" title="File name"/>
<span id="download-btn" title="Export file"> <span id="download-btn" title="Export file">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/> <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
</svg> </svg>
</span> </span>
<span id="links-btn" title="Edit target websites"> <span id="links-btn" title="Edit target websites">
<svg viewBox="0 0 48 48"> <svg viewBox="0 0 48 48">
<path d="M7.8 24c0-3.42 2.78-6.2 6.2-6.2h8v-3.8h-8c-5.52 0-10 4.48-10 10s4.48 10 10 10h8v-3.8h-8c-3.42 0-6.2-2.78-6.2-6.2zm8.2 2h16v-4h-16v4zm18-12h-8v3.8h8c3.42 0 6.2 2.78 6.2 6.2s-2.78 6.2-6.2 6.2h-8v3.8h8c5.52 0 10-4.48 10-10s-4.48-10-10-10z"/> <path d="M7.8 24c0-3.42 2.78-6.2 6.2-6.2h8v-3.8h-8c-5.52 0-10 4.48-10 10s4.48 10 10 10h8v-3.8h-8c-3.42 0-6.2-2.78-6.2-6.2zm8.2 2h16v-4h-16v4zm18-12h-8v3.8h8c3.42 0 6.2 2.78 6.2 6.2s-2.78 6.2-6.2 6.2h-8v3.8h8c5.52 0 10-4.48 10-10s-4.48-10-10-10z"/>
</svg> </svg>
</span> </span>
<span id="save-btn" title="Save file"> <span id="save-btn" title="Save file">
<svg viewBox="0 0 48 48"> <svg viewBox="0 0 48 48">
<path d="M34 6h-24c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-24l-8-8zm-10 32c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20h-20v-8h20v8z"/> <path d="M34 6h-24c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-24l-8-8zm-10 32c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20h-20v-8h20v8z"/>
</svg> </svg>
</span> </span>
</header> </header>
<main> <main>
<pre id="editor"></pre> <pre id="editor"></pre>
</main> </main>
<div id="links-popup"> <div id="links-popup">
<header> <header>
<h1>Target Websites</h1> <h1>Target Websites</h1>
<span id="close-links-btn"> <span id="close-links-btn">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg> </svg>
</span> </span>
</header> </header>
<main> <main>
<div id="links-wrapper"></div> <div id="links-wrapper"></div>
</main> </main>
</div> </div>
</body> </body>
<script src="js/ace/ace.js"></script> <script src="js/ace/ace.js"></script>
<script src="js/storage.js"></script> <script src="js/storage.js"></script>
<script src="js/file.js"></script> <script src="js/file.js"></script>
<script src="js/webdav.js"></script> <script src="js/webdav.js"></script>
<script src="js/settings.js"></script> <script src="js/settings.js"></script>
<script src="js/editor.js"></script> <script src="js/editor.js"></script>
</html> </html>

12
js/editor.js
View file

@ -9,12 +9,12 @@ let editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai"); editor.setTheme("ace/theme/monokai");
File.load(fileId).then((f) => { File.load(fileId).then((f) => {
let info = (file = f).info; let info = (file = f).info;
enableInput.parentNode.classList.add("no-transition"); enableInput.parentNode.classList.add("no-transition");
enableInput.checked = info.enabled; enableInput.checked = info.enabled;
setTimeout(()=>{enableInput.parentNode.classList.remove("no-transition")}, 0); setTimeout(()=>{enableInput.parentNode.classList.remove("no-transition")}, 0);
nameInput.value = info.name; nameInput.value = info.name;
editor.setValue(info.content||"", -1); editor.setValue(info.content||"", -1);
if(info.type == "JS") { if(info.type == "JS") {
editor.session.setMode("ace/mode/javascript"); editor.session.setMode("ace/mode/javascript");
@ -34,13 +34,13 @@ File.load(fileId).then((f) => {
nameInput.value = info.name; nameInput.value = info.name;
} }
enableInput.addEventListener("input", editorSetEdited); enableInput.addEventListener("input", editorSetEdited);
nameInput.addEventListener("input", editorSetEdited); nameInput.addEventListener("input", editorSetEdited);
editor.session.on("change", editorSetEdited); editor.session.on("change", editorSetEdited);
}); });
function editorSetEdited() { function editorSetEdited() {
saveBtn.classList.add("edited"); saveBtn.classList.add("edited");
} }
/* export */ /* export */

2
js/webdav.js
View file

@ -28,7 +28,7 @@ WebDAV.propfind = async (path, opts) => {
let res = await WebDAV.req(path, "PROPFIND", opts); let res = await WebDAV.req(path, "PROPFIND", opts);
let xmlText = await res.text(); let xmlText = await res.text();
let parser = new DOMParser(); let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlText, "text/xml"); let xmlDoc = parser.parseFromString(xmlText, "text/xml");
let responses = xmlDoc.getElementsByTagName("D:response"); let responses = xmlDoc.getElementsByTagName("D:response");

2
settings.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Custom Web - Settings</title> <title>Custom Web - Settings</title>
<link rel="shortcut icon" type="image/png" href="img/icon48.png"> <link rel="shortcut icon" type="image/png" href="img/icon48.png">