Rewrite usercss installation page

content/install-user-css.css

@@ -0,0 +1,55 @@
+body {
+  margin: 0;
+  font: 12px arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  min-height: 100vh;
+  align-items: stretch;
+}
+
+.header {
+  width: 280px;
+  padding: 15px;
+  border-right: 1px dashed #aaa;
+  box-shadow: 0 0 50px -18px black;
+}
+
+.header h1:first-child {
+  margin-top: 0;
+}
+
+.meta {
+  font-size: 1.4em;
+}
+
+.warning {
+  padding: 3px 6px;
+  border: 1px dashed black;
+
+  border-color: #ef6969;
+  background: #ffe2e2;
+}
+
+.header .warning {
+  margin: 3px 0;
+}
+
+.actions {
+  margin: 15px 0;
+}
+
+.actions > * {
+  display: inline-block;
+}
+
+.code {
+  padding: 2em;
+  font-family: monospace;
+  white-space: pre-wrap;
+}

content/install-user-css.js

@@ -1,5 +1,9 @@
+/* global usercss */
+
 'use strict';
 
+let pendingResource;
+
 function fetchText(url) {
   return new Promise((resolve, reject) => {
     // you can't use fetch in Chrome under 'file:' protocol
@@ -18,7 +22,16 @@ function install(style) {
     url: location.href,
     updateUrl: location.href
   });
-  return communicate(request);
+  return communicate(request)
+    .then(() => {
+      $$('.meta-version + .warning')
+        .forEach(el => el.remove());
+      $('button.install').textContent = 'Installed';
+      $('button.install').disabled = true;
+    })
+    .catch(err => {
+      alert(chrome.i18n.getMessage('styleInstallFailed', String(err)));
+    });
 }
 
 function communicate(request) {
@@ -33,26 +46,85 @@ function communicate(request) {
   });
 }
 
-function initUsercssInstall() {
-  fetchText(location.href).then(source =>
-    communicate({
-      method: 'filterUsercss',
-      source: source,
-      checkDup: true
-    })
-  ).then(({style, dup}) => {
+function initInstallPage({style, dup}) {
+  pendingResource.then(() => {
+    const versionTest = dup && usercss.semverTest(style.version, dup.version);
+    document.body.innerHTML = '';
+    // FIXME: i18n
+    document.body.appendChild(tHTML(`
+      <div class="container">
+        <div class="header">
+          <h1>Install Usercss</h1>
+          <h2>Name</h2>
+          <span class="meta meta-name">${style.name}</span>
+          <h2>Version</h2>
+          <span class="meta meta-version">${style.version}</span>
+          <div class="actions">
+            <button class="install">${!dup ? 'Install' : versionTest > 0 ? 'Update' : 'Reinstall'}</button>
+          </div>
+        </div>
+        <div class="code"></div>
+      </div>
+    `));
+    if (versionTest < 0) {
+      // FIXME: i18n
+      $('.meta-version').after(tHTML(`
+        <div class="warning">
+          The version is older then installed style.
+        </div>
+      `));
+    }
+    $('.code').textContent = style.source;
+    $('button.install').onclick = () => {
       if (dup) {
         if (confirm(chrome.i18n.getMessage('styleInstallOverwrite', [style.name, dup.version, style.version]))) {
-        return install(style);
+          install(style);
         }
       } else if (confirm(chrome.i18n.getMessage('styleInstall', [style.name]))) {
-      return install(style);
+        install(style);
       }
-  }).catch(err => {
-    alert(chrome.i18n.getMessage('styleInstallFailed', String(err)));
+    };
   });
 }
 
+function initErrorPage(err, source) {
+  pendingResource.then(() => {
+    document.body.innerHTML = '';
+    // FIXME: i18n
+    document.body.appendChild(tHTML(`
+      <div class="warning">
+        Stylus failed to parse usercss: ${err}
+      </div>
+      <div class="code"></div>
+    `));
+    $('.code').textContent = source;
+  });
+}
+
+function initUsercssInstall() {
+  let source;
+  pendingResource = communicate({
+    method: 'injectResource',
+    resources: [
+      '/js/dom.js',
+      '/js/localization.js',
+      '/js/usercss.js',
+      '/content/install-user-css.css'
+    ]
+  });
+  fetchText(location.href)
+    .then(_source => {
+      source = _source;
+      return communicate({
+        method: 'filterUsercss',
+        source,
+        checkDup: true
+      });
+    })
+    .then(initInstallPage)
+    .catch(err => initErrorPage(err, source));
+}
+
 function isUsercss() {
   if (!/\.user\.(css|styl|less|scss|sass)$/i.test(location.pathname)) {
     return false;
@@ -67,6 +139,5 @@ function isUsercss() {
 }
 
 if (isUsercss()) {
-  // It seems that we need to wait some time to redraw the page.
-  setTimeout(initUsercssInstall, 500);
+  initUsercssInstall();
 }