From bb33ff3981be9f77a7621cd407b4ab5debc7dff2 Mon Sep 17 00:00:00 2001 From: Rob Garrison Date: Wed, 12 Jul 2017 13:52:44 -0500 Subject: [PATCH] Fix links & split out edit.css --- background/background.js | 2 +- edit.html | 977 ++++++------------------------ edit/edit.css | 576 ++++++++++++++++++ edit/edit.js | 8 +- index.html | 14 +- manage.html | 16 +- manifest.json | 14 +- options/index.js | 2 +- popup.html | 14 +- tools/pull_locales_postprocess.py | 4 +- 10 files changed, 815 insertions(+), 812 deletions(-) create mode 100644 edit/edit.css diff --git a/background/background.js b/background/background.js index a2ae0627..fc5a7f30 100644 --- a/background/background.js +++ b/background/background.js @@ -98,7 +98,7 @@ updateIcon({id: undefined}, {}); // browser commands browserCommands = { openManage() { - openURL({url: '/manage.html'}); + openURL({url: 'manage.html'}); }, styleDisableAll(info) { prefs.set('disableAll', info ? info.checked : !prefs.get('disableAll')); diff --git a/edit.html b/edit.html index 2ec63cc2..fbb1ed9c 100644 --- a/edit.html +++ b/edit.html @@ -1,792 +1,213 @@ - - + + - - - - - - + + + + + + + - - - + + + - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - + - - - - + + + + - - - + + + - - - + + + + - - - - - - - - - - - - - - - - - - -
-

-
-
-
-
-
- - - - - - - - - - - - - - + diff --git a/edit/edit.css b/edit/edit.css new file mode 100644 index 00000000..f41e93cb --- /dev/null +++ b/edit/edit.css @@ -0,0 +1,576 @@ +body { + margin: 0; + font: 12px arial,sans-serif; +} +/************ header ************/ +#header { + width: 280px; + height: 100vh; + overflow: auto; + position: fixed; + top: 0; + padding: 15px; + border-right: 1px dashed #AAA; + -webkit-box-shadow: 0 0 3rem -1.2rem black; + box-sizing: border-box; +} +#header h1 { + margin-top: 0; +} +#sections { + padding-left: 280px; +} +#sections h2 { + margin-top: 1rem; + margin-left: 1.7rem; +} +.aligned { + display: table-row; +} +.aligned > *:not(svg) { + display: table-cell; + margin-top: 0.1rem; + min-height: 1.4rem; +} +input[type="checkbox"] { + margin-left: 0.1rem; +} +/* basic info */ +#basic-info { + margin-bottom: 1rem; +} +#name { + width: 100%; +} +#basic-info-name { + display: flex; + align-items: center; +} +#url { + margin-left: 0.25rem; +} +#url:not([href^="http"]) { + display: none; +} +#save-button { + opacity: .5; + pointer-events: none; +} +.dirty #save-button { + opacity: 1; + pointer-events: all; +} +.svg-icon { + cursor: pointer; + vertical-align: middle; + transition: fill .5s; + width: 16px; + height: 16px; +} +.svg-icon:not(.dismiss) { + margin-left: 0.2rem; +} +h2 .svg-icon, label .svg-icon { + margin-top: -1px; +} +.svg-icon.info { + width: 14px; + height: 16px; +} +.svg-icon:hover, +.svg-icon.info { + fill: #666; +} +.svg-icon, +.svg-icon.info:hover { + fill: #000; +} +#enabled { + margin-left: 0; + vertical-align: middle; +} +#enabled-label { + vertical-align: middle; +} +/* actions */ +#actions > * { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +/* options */ +#options [type="number"] { + max-width: 2.5rem; + text-align: right; +} +#options .option > * { + padding-right: 0.25rem; +} +/************ content ***********/ +#sections > div { + margin: 0.7rem; + padding: 1rem; +} +#sections > div:not(:first-of-type) { + border-top: 2px solid black; +} +#sections > div:only-of-type .remove-section { + display: none; +} +#sections > div > button:not(:first-of-type) { + margin-left: 0.2rem; +} +.dirty > label::before { + content: "*"; + font-weight: bold; +} +#sections { + counter-reset: codebox; +} +#sections > div > label::after { + counter-increment: codebox; + content: counter(codebox); + margin-left: 0.25rem; +} +/* code */ +.CodeMirror-hint:hover { + color: white; + background: #08f; +} +.code { + height: 10rem; + width: 40rem; +} +.CodeMirror { + border: solid #CCC 1px; +} +.CodeMirror-scroll { + height: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 6px; /* resize-grip height */ +} +.CodeMirror-lint-mark-warning { + background: none; +} +.CodeMirror-vscrollbar { + margin-bottom: 7px; /* make space for resize-grip */ +} +.CodeMirror-hscrollbar { + bottom: 7px; /* make space for resize-grip */ +} +.CodeMirror-scrollbar-filler { + bottom: 7px; /* make space for resize-grip */ +} +.CodeMirror-dialog { + -webkit-animation: highlight 3s ease-out; +} +.CodeMirror-focused { + outline: -webkit-focus-ring-color auto 5px; + outline-offset: -2px; +} +.CodeMirror-search-field { + width: 10em; +} +.CodeMirror-jump-field { + width: 5em; +} +.CodeMirror-search-hint { + color: #888; +} +body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight, +body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar { + animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98); + animation-fill-mode: both; +} +body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight, +body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar { + background-color: rgba(1, 151, 193, 0.1); +} +@-webkit-keyframes highlight { + from { + background-color: #ff9; + } + to { + background-color: none; + } +} +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadein-match-highlighter { + from { background-color: transparent; } + to { background-color: rgba(1, 151, 193, 0.1); } +} +.resize-grip { + position: absolute; + display: block; + height: 6px; + content: ""; + left: 0; + right: 0; + bottom: 0; + z-index: 9; + cursor: n-resize; + background-color: inherit; + border-top-width: 1px; + border-top-style: solid; + border-top-color: inherit; +} +.resize-grip:after { + content: ""; + bottom: 2px; + left: 0; + right: 0; + margin: 0 8px; + display: block; + position: absolute; + border-top-width: 2px; + border-top-style: dotted; + border-top-color: inherit; +} +/* applies-to */ +.applies-to { + display: flex; +} +.applies-to label { + flex: auto; + margin-top: 0.2rem; +} +.applies-to ul { + flex: auto; + flex-grow: 99; + margin: 0; + padding: 0; +} +.applies-to li { + display: flex; + list-style-type: none; + align-items: center; + margin-bottom: 0.35rem; +} +.applies-to li > *:not(button) { + flex: auto; + min-height: 1.4rem; + margin-left: 0.35rem; +} +.applies-to li .add-applies-to { + visibility: hidden; + text-align: left; +} +.applies-to li:last-child .add-applies-to { + visibility: visible +} +.applies-to li .add-applies-to:first-child { + margin-left: 1rem; +} +.applies-to li .applies-value { + flex-grow: 99; + padding-left: 0.2rem; +} +.applies-to img { + vertical-align: bottom; +} +.test-regexp { + display: none; +} +.has-regexp .test-regexp { + display: inline-block; +} +.regexp-report summary, .regexp-report div { + cursor: pointer; + outline: none; +} +.regexp-report mark { + background-color: rgba(255, 255, 0, .5); +} +.regexp-report details { + margin-left: 1rem; +} +.regexp-report details:not(:last-child) { + margin-bottom: 1rem; +} +.regexp-report summary { + font-weight: bold; + margin-left: -1rem; + margin-bottom: .5rem; + outline: none; + cursor: default; +} +.regexp-report details[data-type="full"] { + color: darkgreen; +} +.regexp-report details[data-type="partial"] { + color: darkgray; +} +.regexp-report details[data-type="invalid"] { + color: maroon; +} +.regexp-report details details { + margin-left: 2rem; + margin-top: .5rem; +} +.regexp-report .svg-icon { + position: absolute; + margin-top: -1px; +} +.regexp-report details div:hover { + text-decoration: underline; + text-decoration-skip: ink; +} +.regexp-report details div img { + width: 16px; + max-height: 16px; + position: absolute; + margin-left: -20px; + margin-top: -1px; + animation: fadein 1s cubic-bezier(.03, .67, .08, .94); + animation-fill-mode: both; +} +/************ help popup ************/ +#help-popup { + top: 3rem; + right: 3rem; + max-width: 50vw; + position: fixed; + display: none; + background-color: white; + box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5); + padding: 0.5rem; + z-index: 99; +} +#help-popup.big { + max-width: 100%; + left: 3rem; +} +#help-popup.big .CodeMirror { + min-height: 2rem; + height: 70vh; +} +#help-popup .title { + font-weight: bold; + background-color: rgba(0,0,0,0.05); + margin: -0.5rem -0.5rem 0.5rem; + padding: .5rem 32px .5rem .5rem; +} +#help-popup .contents { + max-height: calc(100vh - 8rem); + overflow-y: auto; +} +#help-popup .dismiss { + position: absolute; + right: 4px; + top: .5em; +} + +.keymap-list { + font-size: 85%; + line-height: 1.0; + border-spacing: 0; + word-break: break-all; +} +.keymap-list input { + width: 100%; +} +.keymap-list tr:nth-child(odd) { + background-color: rgba(0, 0, 0, 0.07); +} +.keymap-list td:first-child { + white-space: nowrap; + font-family: monospace; + padding-right: 0.5rem; +} + +#help-popup button[name^="import"] { + line-height: 1.5rem; + padding: 0 0.5rem; + margin: 0.5rem 0 0 0.5rem; + pointer-events: none; + opacity: 0.5; + float: right; +} +#help-popup.ready button[name^="import"] { + pointer-events: all; + opacity: 1.0; +} + +/************ lint ************/ +#lint { + display: none; +} +#lint > div { + overflow-y: auto; +} +#lint table { + font-size: 100%; + border-spacing: 0; + margin-bottom: 1rem; + line-height: 1.0; +} +#lint table:last-child { + margin-bottom: 0; +} +#lint caption { + text-align: left; + font-weight: bold; +} +#lint tbody { + font-size: 85%; + cursor: pointer; +} +#lint tr:hover { + background-color: rgba(0, 0, 0, 0.1); +} +#lint td[role="severity"] { + font-size: 0; + width: 16px; + padding-right: 0.25rem; +} +#lint td[role="line"], #lint td[role="sep"] { + text-align: right; + padding-right: 0; +} +#lint td[role="col"] { + text-align: left; + padding-right: 0.25rem; +} +#lint td[role="message"] { + text-align: left; +} + +/************ CSS beautifier ************/ +.beautify-options { + white-space: nowrap; + font-family: monospace; +} +.beautify-options div { + float: left; +} +.beautify-options div[newline="true"] + div { + clear: left; +} +.beautify-options div[newline="true"] + div span[indent] { + padding-left: 2rem; +} +.beautify-options:after { + clear: both; + display: block; + content: " "; + height: 1rem; +} +.beautify-options span { + font-weight: bold; +} +.beautify-options select { + border: none; + background-color: rgba(0, 0, 0, 0.05); +} + +/************ reponsive layouts ************/ +@media(max-width:737px) { + #header { + width: auto; + height: auto; + position: inherit; + border-right: none; + border-bottom: 1px dashed #AAA; + } + #header section:not(:last-child) { + margin-bottom: 0.4rem; + } + #header input[type="checkbox"] { + vertical-align: middle; + } + h2 { + display: none; + } + #basic-info { + display: flex; + align-items: baseline; + } + #basic-info > * { + flex: auto; + } + #basic-info > *:first-child { + flex-grow: 99; + display: flex; + } + #basic-info > *:not(:last-child) { + margin-right: 0.8rem; + } + #basic-info #name { + width: auto; + flex-grow: 99; + } + #actions { + margin-top: 1rem; + } + #actions > * { + display: inline-block; + } + #options { + -webkit-column-count: 2; + } + #options .aligned > *:not(svg) { + margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */ + padding-right: 0.4rem; + vertical-align: baseline; + min-height: 1.4rem; + } + .option { + -webkit-column-break-inside: avoid; + } + .option label { + line-height: 1.25rem; + margin: 0; + } + #options [type="number"] { + text-align: left; /* workaround the column flow bug in webkit */ + padding-left: 0.2rem; + } + #options #tabSize-label { + position: relative; + top: 0.2rem; + } + #lint h2 { + display: block; + cursor: default; + margin-bottom: 0; + } + #lint > div { + max-height: 0; + } + #lint.collapsed > div { + display: none; + } + #lint:hover > div { + margin-top: 1em; + max-height: 30vh; + } + #sections { + padding-left: 0; + } + #sections > div { + padding: 0; + } + #sections > *:not(h2) { + padding-left: 0.4rem; + } + .applies-type { + width: 30%; + } +} +@media(max-width:500px) { + #options { + -webkit-column-count: 1; + } + #options #tabSize-label { + position: static; + } +} diff --git a/edit/edit.js b/edit/edit.js index 48ee1bad..413f2a13 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -42,7 +42,7 @@ new MutationObserver((mutations, observer) => { const themeElement = document.getElementById("cm-theme"); if (themeElement) { themeElement.href = prefs.get("editor.theme") == "default" ? "" - : "codemirror/theme/" + prefs.get("editor.theme") + ".css"; + : "vendor/codemirror/theme/" + prefs.get("editor.theme") + ".css"; observer.disconnect(); } }).observe(document, {subtree: true, childList: true}); @@ -305,7 +305,7 @@ function acmeEventListener(event) { el.selectedIndex = 0; break; } - var url = chrome.runtime.getURL("codemirror/theme/" + value + ".css"); + var url = chrome.runtime.getURL("vendor/codemirror/theme/" + value + ".css"); if (themeLink.href == url) { // preloaded in initCodeMirror() break; } @@ -1116,7 +1116,7 @@ function beautify(event) { doBeautify(); } else { var script = document.head.appendChild(document.createElement("script")); - script.src = "beautify/beautify-css-mod.js"; + script.src = "vendor-overwrites/beautify/beautify-css-mod.js"; script.onload = doBeautify; } function doBeautify() { @@ -2019,7 +2019,7 @@ function getCodeMirrorThemes() { } return new Promise(resolve => { chrome.runtime.getPackageDirectoryEntry(rootDir => { - rootDir.getDirectory('codemirror/theme', {create: false}, themeDir => { + rootDir.getDirectory('vendor/codemirror/theme', {create: false}, themeDir => { themeDir.createReader().readEntries(entries => { const themes = [ chrome.i18n.getMessage('defaultTheme') diff --git a/index.html b/index.html index 3a7318be..ea19ac4f 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,12 @@ Stylus - - - - - - + + + + + + @@ -128,6 +128,6 @@ - + diff --git a/manage.html b/manage.html index 5fc34411..855db9eb 100644 --- a/manage.html +++ b/manage.html @@ -3,7 +3,7 @@ - + @@ -121,12 +121,12 @@ - - - - - - + + + + + + @@ -216,7 +216,7 @@
- + diff --git a/manifest.json b/manifest.json index 4f2ccca1..97b600e4 100644 --- a/manifest.json +++ b/manifest.json @@ -19,7 +19,13 @@ "" ], "background": { - "scripts": ["messaging.js", "storage.js", "prefs.js", "background.js", "update.js"] + "scripts": [ + "background/messaging.js", + "background/storage.js", + "js/prefs.js", + "background/background.js", + "background/update.js" + ] }, "commands": { "openManage": { @@ -35,13 +41,13 @@ "run_at": "document_start", "all_frames": true, "match_about_blank": true, - "js": ["apply.js"] + "js": ["content/apply.js"] }, { "matches": ["http://userstyles.org/*", "https://userstyles.org/*"], "run_at": "document_start", "all_frames": false, - "js": ["install.js"] + "js": ["content/install.js"] } ], "browser_action": { @@ -56,7 +62,7 @@ }, "default_locale": "en", "options_ui": { - "page": "options/index.html", + "page": "index.html", "chrome_style": true } } diff --git a/options/index.js b/options/index.js index decc038d..68e6b955 100644 --- a/options/index.js +++ b/options/index.js @@ -15,7 +15,7 @@ document.onclick = e => { switch (target.dataset.cmd) { case 'open-manage': - openURL({url: '/manage.html'}); + openURL({url: 'manage.html'}); break; case 'check-updates': diff --git a/popup.html b/popup.html index 7684eb05..fe5c967f 100644 --- a/popup.html +++ b/popup.html @@ -2,7 +2,7 @@ - +