Fix usercss install error. Closes #589 (#592)

* Fix usercss install error. Closes #589

* Cleanup

* Disable input & hide icon

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>

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;
 }

install-usercss/install-usercss.js

@@ -16,8 +16,7 @@
   let port;
 
   if (params.has('direct')) {
-    $('.live-reload').textContent = t('liveReloadUnavailable');
+    setUnavailable('.live-reload');
-    $('.live-reload').classList.add('unavailable');
     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');
+      setUnavailable('.set-update-url');
-      $('.set-update-url').classList.add('unavailable');
       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) {