rework install-usercss: CSS, layout, warnings

background/usercss-helper.js

@@ -22,8 +22,12 @@ var usercssHelper = (() => {
   }
 
   function wrapReject(pending) {
-    return pending.then(result => ({success: true, result}))
+    return pending
-      .catch(err => ({success: false, result: err.message || String(err)}));
+      .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

install-usercss.html

@@ -82,9 +82,7 @@
       <div class="external-link"></div>
     </div>
     <div class="main">
-      <div class="code">
+      <div class="warnings"></div>
-        <textarea></textarea>
-      </div>
     </div>
   </div>
   <script src="/content/util.js"></script>

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;
+
-  }
+@media (max-width:4.5in) {
-  .main {
+  .header {
-    padding-left: 0;
+    overflow-x: hidden;
-  }
+    overflow-y: auto;
-  .code {
+  }
-    padding: 0;
+  .header,
+  .warning {
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+    column-count: 1;
+  }
+  .warning {
+    border: none;
+    padding-bottom: unset;
   }
 }

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());
+    $('.warnings').textContent = '';
-    const main = $('.main');
+    if (err) {
-    main.insertBefore(buildWarning(err), main.firstChild);
+      $('.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) {
+  function onInitError(err) {
-    $('.main').insertBefore(buildWarning(err), $('.main').childNodes[0]);
+    $('.header').classList.add('meta-init-error');
-    $('.header').style.display = 'none';
+    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);
+    }
+  }
 })();