From 6aaff7aa1261757017776e134ab3954babab0907 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Thu, 29 Nov 2018 19:33:54 -0600
Subject: [PATCH] Fix usercss install error. Closes #589 (#592)

* Fix usercss install error. Closes #589

* Cleanup

* Disable input & hide icon
---
 install-usercss.html                |  6 ++++--
 install-usercss/install-usercss.css | 12 ++++++++++++
 install-usercss/install-usercss.js  | 15 ++++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/install-usercss.html b/install-usercss.html
index 00e71cb8..177431cc 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -60,13 +60,15 @@
           <label class="set-update-url">
             <input type="checkbox">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span></span>
+            <span class="available-message" i18n-text="installUpdateFromLabel"></span>
+            <span class="unavailable-message" i18n-text="installUpdateUnavailable"></span>
             <p></p>
           </label>
           <label class="live-reload">
             <input type="checkbox">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span i18n-text="liveReloadLabel"></span>
+            <span class="available-message" i18n-text="liveReloadLabel"></span>
+            <span class="unavailable-message" i18n-text="liveReloadUnavailable"></span>
           </label>
         </div>
         <p class="meta-description"></p>
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index f9381981..a86ef582 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -246,6 +246,18 @@ h2.installed.active {
   min-width: 0;
 }
 
+.unavailable-message,
+.unavailable .available-message,
+.unavailable .svg-icon,
+.live-reload.unavailable input,
+.set-update-url.unavailable input {
+	display: none;
+}
+
+.unavailable .unavailable-message {
+	display: block;
+}
+
 .set-update-url {
   flex-wrap: wrap;
 }
diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index 211e4e2f..47194fce 100644
--- a/install-usercss/install-usercss.js
+++ b/install-usercss/install-usercss.js
@@ -16,8 +16,7 @@
   let port;
 
   if (params.has('direct')) {
-    $('.live-reload').textContent = t('liveReloadUnavailable');
-    $('.live-reload').classList.add('unavailable');
+    setUnavailable('.live-reload');
     getCodeDirectly();
   } else {
     port = chrome.tabs.connect(tabId);
@@ -310,15 +309,13 @@
     // prefer the installation URL unless drag'n'dropped on the manage page
     const installationUrl = (params.get('updateUrl') || '').replace(/^blob.+/, '');
     const updateUrl = new URL(installationUrl || style.updateUrl || DUMMY_URL);
-    $('.set-update-url > span').textContent = t('installUpdateFromLabel');
     if (dup && dup.updateUrl === updateUrl.href) {
       checker.checked = true;
       // there is no way to "unset" updateUrl, you can only overwrite it.
       checker.disabled = true;
     } else if (updateUrl.href === DUMMY_URL) {
       // drag'n'dropped on the manage page and the style doesn't have @updateURL
-      $('.set-update-url').textContent = t('installUpdateUnavailable');
-      $('.set-update-url').classList.add('unavailable');
+      setUnavailable('.set-update-url');
       return;
     } else if (updateUrl.protocol !== 'file:') {
       checker.checked = true;
@@ -357,6 +354,14 @@
     }
   }
 
+  function setUnavailable(label) {
+    const el = $(label);
+    el.classList.add('unavailable');
+    const input = $('input', el);
+    input.disabled = true;
+    input.checked = false;
+  }
+
   function getAppliesTo(style) {
     function *_gen() {
       for (const section of style.sections) {