From a542d227ec7bec66f6212ee6f4efcdc45bdbd99c Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Thu, 14 Sep 2017 11:06:32 +0800
Subject: [PATCH] Fix: adjust install page layout

---
 _locales/en/messages.json   |  4 ++++
 content/install-user-css.js | 33 ++++++++++++++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index fd77a11a..e63e9513 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -289,6 +289,10 @@
     "message": "Export",
     "description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
   },
+  "externalLink": {
+    "message": "External link",
+    "description": "Label for external links"
+  },
   "externalHomepage": {
     "message": "Homepage",
     "description": "Label for the external link to style's homepage"
diff --git a/content/install-user-css.js b/content/install-user-css.js
index a54d5671..fddd7ec3 100644
--- a/content/install-user-css.js
+++ b/content/install-user-css.js
@@ -82,26 +82,23 @@ function initInstallPage({style, dup}, sourceLoader) {
     function buildPage() {
       return $element({className: 'container', appendChild: [
         $element({className: 'header', appendChild: [
+          $element({className: 'actions', appendChild: [
+            $element({tag: 'button', className: 'install', textContent: installButtonLabel()})
+          ]}),
           $element({tag: 'h1', appendChild: [
             style.name,
             $element({tag: 'small', className: 'meta-version', textContent: style.version})
           ]}),
           $element({tag: 'p', textContent: style.description}),
-          $element({tag: 'h3', textContent: t('author')}),
+          style.author && $element({tag: 'h3', textContent: t('author')}),
           style.author,
-          $element({tag: 'h3', textContent: t('license')}),
+          style.license && $element({tag: 'h3', textContent: t('license')}),
           style.license,
           $element({tag: 'h3', textContent: t('appliesLabel')}),
           $element({tag: 'ul', appendChild: getAppliesTo(style).map(
             pattern => $element({tag: 'li', textContent: pattern})
           )}),
-          $element({className: 'actions', appendChild: [
-            $element({tag: 'button', className: 'install', textContent: installButtonLabel()})
-          ]}),
-          $element({className: 'external', appendChild: [
-            style.url && makeLink(style.url, t('externalHomepage')),
-            style.support && makeLink(style.support, t('externalSupport'))
-          ]})
+          externalLink(style),
         ]}),
         $element({className: 'main', appendChild: [
           $element({className: 'code'})
@@ -109,6 +106,24 @@ function initInstallPage({style, dup}, sourceLoader) {
       ]});
     }
 
+    function externalLink(style) {
+      const urls = [];
+      if (style.url) {
+        urls.push([style.url, t('externalHomepage')]);
+      }
+      if (style.supportURL) {
+        urls.push([style.supportURL, t('externalSupport')]);
+      }
+      if (urls.length) {
+        return $element({appendChild: [
+          $element({tag: 'h3', textContent: t('externalLink')}),
+          $element({tag: 'ul', appendChild: urls.map(args =>
+            $element({tag: 'li', appendChild: makeLink(...args)})
+          )})
+        ]});
+      }
+    }
+
     function installButtonLabel() {
       return t(!dup ? 'installButton' :
         versionTest > 0 ? 'installButtonUpdate' : 'installButtonReinstall');