From 8c5471092c46b90f13c533db0af7cedf48fb189b Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 22 Nov 2017 13:19:27 +0300 Subject: [PATCH] rework install-usercss: CSS, layout, warnings --- background/usercss-helper.js | 8 +- install-usercss.html | 4 +- install-usercss/install-usercss.css | 148 ++++++++++++++++++++-------- install-usercss/install-usercss.js | 40 ++++++-- 4 files changed, 143 insertions(+), 57 deletions(-) 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); + } + } })();