Fix the horrible whitespacing
This commit is contained in:
parent
d5518a164e
commit
a9dd23a52c
17 changed files with 1311 additions and 1309 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
.msc
|
||||
web-ext-artifacts/
|
||||
|
||||
|
|
|
|||
|
|
@ -35,11 +35,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
|||
}
|
||||
});
|
||||
|
||||
if(tab.scripts.length>0)
|
||||
if(tab.scripts.length>0){
|
||||
chrome.browserAction.setBadgeText({
|
||||
tabId: tabID,
|
||||
text: String(tab.scripts.length)
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "set-url": {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ html{
|
|||
}
|
||||
body{
|
||||
min-height:100%;
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ body{
|
|||
width:1em; height:1em;
|
||||
margin-left:1px;
|
||||
border:0.15em solid transparent;
|
||||
background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
box-sizing:border-box;
|
||||
border-radius:100%;
|
||||
background-color:white;
|
||||
|
|
|
|||
210
css/editor.css
210
css/editor.css
|
|
@ -1,33 +1,33 @@
|
|||
/* reset */
|
||||
input {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
#editor {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* custom styles */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* header */
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--top);
|
||||
background-color: var(--top);
|
||||
}
|
||||
|
||||
header .check {
|
||||
|
|
@ -35,156 +35,156 @@ header .check {
|
|||
}
|
||||
|
||||
header input {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
margin-right: auto;
|
||||
padding: 0 15px;
|
||||
margin-right: auto;
|
||||
border-radius: 40px;
|
||||
background-color: var(--top);
|
||||
background-color: var(--top);
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
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:focus {
|
||||
background-color: var(--light);
|
||||
background-color: var(--light);
|
||||
}
|
||||
header input:focus{
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
header > span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header > span#download-btn {
|
||||
padding: 7px;
|
||||
padding: 7px;
|
||||
}
|
||||
header > span:last-child {
|
||||
margin-right: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
header > span:hover {
|
||||
background-color: var(--light);
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header > span svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#save-btn {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
#save-btn.edited {
|
||||
pointer-events: all;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#save-btn svg {
|
||||
opacity: 0.25;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
opacity: 0.25;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
#save-btn.edited svg {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* editor */
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* links popup */
|
||||
#links-popup {
|
||||
display: none; /* flex */
|
||||
flex-direction: column;
|
||||
display: none; /* flex */
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; bottom: 0;
|
||||
right: 0; left: 0;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; bottom: 0;
|
||||
right: 0; left: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: var(--light);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--light);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#links-popup header {
|
||||
background: none;
|
||||
background-color: var(--background);
|
||||
background-color: var(--background);
|
||||
}
|
||||
#links-popup header h1 {
|
||||
margin-right: auto;
|
||||
margin-right: auto;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#links-popup header > span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#links-popup main {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry input {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
padding: 10px 15px;
|
||||
padding-right: 40px;
|
||||
padding: 10px 15px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: rgb(235, 227, 227);
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: rgb(235, 227, 227);
|
||||
opacity: 1;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover,
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
background-color: var(--lighter);
|
||||
background-color: var(--lighter);
|
||||
opacity: 1;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
|
|
@ -192,42 +192,42 @@ main {
|
|||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry svg {
|
||||
position: absolute;
|
||||
top: 0; right: 0px;
|
||||
position: absolute;
|
||||
top: 0; right: 0px;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
cursor: pointer
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover 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 {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* better monokai */
|
||||
|
||||
#editor.ace-monokai {
|
||||
background-color: var(--background);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_gutter {
|
||||
background-color: var(--light);
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_selection {
|
||||
background-color: var(--lighter);
|
||||
background-color: var(--lighter);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,8 +130,8 @@ header #new-file .btn-svg svg {
|
|||
}
|
||||
.file .file-icons .file-icon::before{
|
||||
content:"DELETE";
|
||||
font-size: 12px;
|
||||
width: 0px;
|
||||
font-size: 12px;
|
||||
width: 0px;
|
||||
overflow:hidden;
|
||||
text-align:center;
|
||||
transition: width 100ms ease-in-out;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ img{
|
|||
display:grid;
|
||||
align-items:center;
|
||||
grid-template-columns: 34px auto 25px;
|
||||
column-gap: 10px;
|
||||
column-gap: 10px;
|
||||
height:30px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
|
|
@ -27,15 +27,15 @@ img{
|
|||
flex-shrink:0;
|
||||
}
|
||||
.line > .line-item{
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
.line > .line-item + .line-item{
|
||||
opacity:0.5;
|
||||
justify-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.btn{
|
||||
|
|
@ -56,24 +56,24 @@ section:not(:first-child){
|
|||
border-top:1px solid var(--light);
|
||||
}
|
||||
section h2{
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-weight:400;
|
||||
padding:0px 10px;
|
||||
color: var(--lighter)
|
||||
}
|
||||
section h2 span{
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
#add-new .line {
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: stretch;
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: stretch;
|
||||
column-gap:0;
|
||||
height:20px;
|
||||
}
|
||||
|
|
|
|||
92
editor.html
92
editor.html
|
|
@ -1,56 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<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="stylesheet" href="css/common.css"/>
|
||||
<link rel="stylesheet" href="css/editor.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<link rel="stylesheet" href="css/common.css"/>
|
||||
<link rel="stylesheet" href="css/editor.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<label class="check" title="Enable or disable file">
|
||||
<input id="enable-input" type="checkbox">
|
||||
<span></span>
|
||||
</label>
|
||||
<input id="name-input" type="text" title="File name"/>
|
||||
<span id="download-btn" title="Export file">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="links-btn" title="Edit target websites">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="save-btn" title="Save file">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<pre id="editor"></pre>
|
||||
</main>
|
||||
<div id="links-popup">
|
||||
<header>
|
||||
<h1>Target Websites</h1>
|
||||
<span id="close-links-btn">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<div id="links-wrapper"></div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<script src="js/ace/ace.js"></script>
|
||||
<script src="js/storage.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
</label>
|
||||
<input id="name-input" type="text" title="File name"/>
|
||||
<span id="download-btn" title="Export file">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="links-btn" title="Edit target websites">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="save-btn" title="Save file">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<pre id="editor"></pre>
|
||||
</main>
|
||||
<div id="links-popup">
|
||||
<header>
|
||||
<h1>Target Websites</h1>
|
||||
<span id="close-links-btn">
|
||||
<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"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<div id="links-wrapper"></div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<script src="js/ace/ace.js"></script>
|
||||
<script src="js/storage.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
<script src="js/webdav.js"></script>
|
||||
<script src="js/settings.js"></script>
|
||||
<script src="js/editor.js"></script>
|
||||
<script src="js/editor.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
12
js/editor.js
12
js/editor.js
|
|
@ -9,12 +9,12 @@ let editor = ace.edit("editor");
|
|||
editor.setTheme("ace/theme/monokai");
|
||||
|
||||
File.load(fileId).then((f) => {
|
||||
let info = (file = f).info;
|
||||
let info = (file = f).info;
|
||||
enableInput.parentNode.classList.add("no-transition");
|
||||
enableInput.checked = info.enabled;
|
||||
enableInput.checked = info.enabled;
|
||||
setTimeout(()=>{enableInput.parentNode.classList.remove("no-transition")}, 0);
|
||||
nameInput.value = info.name;
|
||||
editor.setValue(info.content||"", -1);
|
||||
editor.setValue(info.content||"", -1);
|
||||
|
||||
if(info.type == "JS") {
|
||||
editor.session.setMode("ace/mode/javascript");
|
||||
|
|
@ -34,13 +34,13 @@ File.load(fileId).then((f) => {
|
|||
nameInput.value = info.name;
|
||||
}
|
||||
|
||||
enableInput.addEventListener("input", editorSetEdited);
|
||||
enableInput.addEventListener("input", editorSetEdited);
|
||||
nameInput.addEventListener("input", editorSetEdited);
|
||||
editor.session.on("change", editorSetEdited);
|
||||
editor.session.on("change", editorSetEdited);
|
||||
});
|
||||
|
||||
function editorSetEdited() {
|
||||
saveBtn.classList.add("edited");
|
||||
saveBtn.classList.add("edited");
|
||||
}
|
||||
|
||||
/* export */
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ WebDAV.propfind = async (path, opts) => {
|
|||
let res = await WebDAV.req(path, "PROPFIND", opts);
|
||||
let xmlText = await res.text();
|
||||
let parser = new DOMParser();
|
||||
let xmlDoc = parser.parseFromString(xmlText, "text/xml");
|
||||
let xmlDoc = parser.parseFromString(xmlText, "text/xml");
|
||||
|
||||
let responses = xmlDoc.getElementsByTagName("D:response");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Custom Web - Settings</title>
|
||||
<link rel="shortcut icon" type="image/png" href="img/icon48.png">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue