Add: Add 'applies to' to install page

content/install-user-css.css

@@ -24,8 +24,8 @@ body {
   margin-top: 0;
 }
 
-.meta {
+h1 small {
-  font-size: 1.4em;
+  font-size: 0.6em;
 }
 
 .warning {
@@ -48,6 +48,21 @@ body {
   display: inline-block;
 }
 
+.external {
+  text-align: center;
+}
+
+.external > * {
+  margin: 0 7.5px;
+}
+
+button.install {
+  display: block;
+  margin: 0 auto;
+  font-size: 2em;
+  padding: 0.4em 0.8em;
+}
+
 .code {
   padding: 2em;
   font-family: monospace;

content/install-user-css.js

@@ -24,7 +24,7 @@ function install(style) {
   });
   return communicate(request)
     .then(() => {
-      $$('.meta-version + .warning')
+      $$('.warning')
         .forEach(el => el.remove());
       $('button.install').textContent = 'Installed';
       $('button.install').disabled = true;
@@ -46,6 +46,23 @@ function communicate(request) {
   });
 }
 
+function getAppliesTo(style) {
+  function *_gen() {
+    for (const section of style.sections) {
+      for (const type of ['urls', 'urlPrefixes', 'domains', 'regexps']) {
+        if (section[type]) {
+          yield *section[type];
+        }
+      }
+    }
+  }
+  const result = [..._gen()];
+  if (!result.length) {
+    result.push('All URLs');
+  }
+  return result;
+}
+
 function initInstallPage({style, dup}) {
   pendingResource.then(() => {
     const versionTest = dup && usercss.semverTest(style.version, dup.version);
@@ -54,21 +71,30 @@ function initInstallPage({style, dup}) {
     document.body.appendChild(tHTML(`
       <div class="container">
         <div class="header">
-          <h1>Install Usercss</h1>
+          <h1>${style.name} <small class="meta-version">v${style.version}</small></h1>
-          <h2>Name</h2>
+          <p>${style.description}</p>
-          <span class="meta meta-name">${style.name}</span>
+          <h3>Author</h3>
-          <h2>Version</h2>
+          ${style.author}
-          <span class="meta meta-version">${style.version}</span>
+          <h3>License</h3>
+          ${style.license}
+          <h3>Applies to</h3>
+          <ul>
+            ${getAppliesTo(style).map(s => `<li>${s}</li>`)}
+          </ul>
           <div class="actions">
             <button class="install">${!dup ? 'Install' : versionTest > 0 ? 'Update' : 'Reinstall'}</button>
           </div>
+          <div class="external">
+            <a href="${style.url}" target="_blank">Homepage</a>
+            <a href="${style.supportURL}" target="_blank">Support</a>
+          </div>
         </div>
         <div class="code"></div>
       </div>
     `));
     if (versionTest < 0) {
       // FIXME: i18n
-      $('.meta-version').after(tHTML(`
+      $('.actions').before(tHTML(`
         <div class="warning">
           The version is older then installed style.
         </div>
@@ -93,7 +119,8 @@ function initErrorPage(err, source) {
     // FIXME: i18n
     document.body.appendChild(tHTML(`
       <div class="warning">
-        Stylus failed to parse usercss: ${err}
+        Stylus failed to parse usercss:
+        <pre>${err}</pre>
       </div>
       <div class="code"></div>
     `));