diff --git a/background/usercss-helper.js b/background/usercss-helper.js
index 1b4eb71e..dccc7a76 100644
--- a/background/usercss-helper.js
+++ b/background/usercss-helper.js
@@ -22,8 +22,12 @@ var usercssHelper = (() => {
}
function wrapReject(pending) {
- return pending.then(result => ({success: true, result}))
- .catch(err => ({success: false, result: err.message || String(err)}));
+ return pending
+ .then(result => ({success: true, result}))
+ .catch(err => ({
+ success: false,
+ result: Array.isArray(err) ? err.join('\n') : err.message || String(err),
+ }));
}
// Parse the source and find the duplication
diff --git a/install-usercss.html b/install-usercss.html
index b8b473d7..1b40c75e 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -82,9 +82,7 @@
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 910f9295..6d4b3400 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -26,14 +26,57 @@ svg.icon {
align-items: stretch;
}
-.header {
+.main {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.header,
+.warnings {
flex: 0 0 280px;
box-sizing: border-box;
padding: 15px;
border-right: 1px dashed #aaa;
box-shadow: 0 0 50px -18px black;
overflow-wrap: break-word;
- overflow: auto;
+ overflow-y: auto;
+ z-index: 100;
+}
+
+.header:not(.meta-init) {
+ visibility: hidden;
+}
+
+.header.meta-init-error {
+ display: none;
+}
+
+.warnings {
+ display: none;
+ padding-bottom: 0;
+ flex-basis: auto;
+ background: #ffe2e2;
+ border-right: none;
+ border-bottom: 1px dashed #aaa;
+}
+
+.has-warnings .warnings {
+ display: initial;
+}
+
+.warning {
+ font-weight: bold;
+ font-size: 125%;
+ margin-bottom: 1em;
+}
+
+.warning pre {
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ margin: 1ex 0 0;
+ font-weight: normal;
+ font-size: 80%;
}
.header > :first-child {
@@ -48,18 +91,8 @@ h1 small {
content: " v";
}
-.warning {
- padding: 3px 6px;
- border: 1px dashed #ef6969;
- background: #ffe2e2;
-}
-
-.header .warning {
- margin: 3px 0;
-}
-
.actions {
- margin: 15px 0;
+ margin-bottom: 1em;
}
.actions label {
@@ -97,50 +130,81 @@ li {
margin-left: -2em;
}
-.code {
- padding: 2em;
-}
-
.main {
- flex: 1 1 auto;
overflow: hidden;
- overflow-wrap: break-word;
- min-width: 0;
- display: flex;
}
-.main > :first-child {
- flex: 0 0 auto;
-}
-
-.main > :last-child {
- flex: 1 1 auto;
- min-height: 0;
-}
-
-.main .code,
.main .CodeMirror {
- height: 100%;
+ height: auto;
+ border: none;
}
/************ reponsive layouts ************/
-@media (max-width:7.5in) {
+
+@media (max-width:10in) {
.container {
flex-direction: column;
}
.header {
flex-basis: auto;
+ border-right: none;
+ border-bottom: 1px dashed #AAA;
+ max-height: 50%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+ .has-warnings .header {
+ min-height: 4em;
+ max-height: 20%;
+ }
+ .warnings {
+ max-height: 20%;
+ }
+ .warning:not(:last-child) {
+ border-bottom: 1px dashed #b57c7c;
+ padding-bottom: 1em;
+ }
+ .header,
+ .warning {
+ -webkit-column-count: 3;
+ -moz-column-count: 3;
+ column-count: 3;
+ }
+ h1 {
+ -webkit-column-span: all;
+ column-span: all;
+ margin-bottom: .5em;
+ }
+ .actions {
+ display: flex;
+ }
+ .install {
+ margin-right: 1em;
+ }
+}
+
+@media (max-width:7in) {
+ .header,
+ .warning {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
- border-right: none;
- border-bottom: 1px dashed #AAA;
- z-index: 2;
- }
- .main {
- padding-left: 0;
- }
- .code {
- padding: 0;
+ }
+}
+
+@media (max-width:4.5in) {
+ .header {
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ .header,
+ .warning {
+ -webkit-column-count: 1;
+ -moz-column-count: 1;
+ column-count: 1;
+ }
+ .warning {
+ border: none;
+ padding-bottom: unset;
}
}
diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index 80986223..da5fc168 100644
--- a/install-usercss/install-usercss.js
+++ b/install-usercss/install-usercss.js
@@ -32,8 +32,9 @@
});
port.onDisconnect.addListener(closeCurrentTab);
- const cm = CodeMirror.fromTextArea($('.code textarea'), {readOnly: true});
+ const cm = CodeMirror($('.main'), {readOnly: true});
let liveReloadPending = Promise.resolve();
+ window.addEventListener('resize', adjustCodeHeight);
function liveReloadUpdate(sourceCode) {
liveReloadPending = liveReloadPending.then(() => {
@@ -54,8 +55,6 @@
}
function updateMeta(style, dup) {
- $$('.main .warning').forEach(e => e.remove());
-
const data = style.usercssData;
const dupData = dup && dup.usercssData;
const versionTest = dup && semverCompare(data.version, dupData.version);
@@ -94,6 +93,11 @@
$('.external-link').appendChild(externalLink);
}
+ $('.header').classList.add('meta-init');
+ $('.header').classList.remove('meta-init-error');
+ showError('');
+ requestAnimationFrame(adjustCodeHeight);
+
function makeAuthor(text) {
const match = text.match(/^(.+?)(?:\s+<(.+?)>)?(?:\s+\((.+?)\))$/);
if (!match) {
@@ -154,9 +158,13 @@
}
function showError(err) {
- $$('.main .warning').forEach(e => e.remove());
- const main = $('.main');
- main.insertBefore(buildWarning(err), main.firstChild);
+ $('.warnings').textContent = '';
+ if (err) {
+ $('.warnings').appendChild(buildWarning(err));
+ }
+ $('.warnings').classList.toggle('visible', Boolean(err));
+ $('.container').classList.toggle('has-warnings', Boolean(err));
+ adjustCodeHeight();
}
function install(style) {
@@ -193,16 +201,17 @@
function initSourceCode(sourceCode) {
cm.setValue(sourceCode);
+ cm.refresh();
runtimeSend({
method: 'buildUsercss',
sourceCode,
checkDup: true
- }).then(init, initError);
+ }).then(init, onInitError);
}
- function initError(err) {
- $('.main').insertBefore(buildWarning(err), $('.main').childNodes[0]);
- $('.header').style.display = 'none';
+ function onInitError(err) {
+ $('.header').classList.add('meta-init-error');
+ showError(err);
}
function buildWarning(err) {
@@ -296,4 +305,15 @@
}
return result;
}
+
+ function adjustCodeHeight() {
+ // Chrome-only bug (apparently): it doesn't limit the scroller element height
+ const scroller = cm.display.scroller;
+ const prevWindowHeight = adjustCodeHeight.prevWindowHeight;
+ if (scroller.scrollHeight === scroller.clientHeight ||
+ prevWindowHeight && window.innerHeight !== prevWindowHeight) {
+ adjustCodeHeight.prevWindowHeight = window.innerHeight;
+ cm.setSize(null, $('.main').offsetHeight - $('.warnings').offsetHeight);
+ }
+ }
})();