Fix: Blocking from popup did not trigger sync

Change: Move HTML from popup.js to popup.html
iorate · Nov 14, 2018 · dd778c0 · dd778c0
1 parent fba3303
commit dd778c0
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 123 deletions.
diff --git a/common.js b/common.js
@@ -5,6 +5,64 @@ const _ = s => chrome.i18n.getMessage(s);
 const lines = s => s ? s.split('\n') : [];
 const unlines = ss => ss.join('\n');
 
+/* Async APIs */
+
+const getAuthToken = details => {
+  return new Promise((resolve, reject) => {
+    chrome.identity.getAuthToken(details, token => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+        return;
+      }
+      resolve(token);
+    });
+  });
+};
+
+const removeCachedAuthToken = details => {
+  return new Promise((resolve, reject) => {
+    chrome.identity.removeCachedAuthToken(details, () => {
+      resolve();
+    });
+  });
+};
+
+const getLocalStorage = keys => {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get(keys, items => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+        return;
+      }
+      resolve(items);
+    });
+  });
+};
+
+const setLocalStorage = items => {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.set(items, () => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+        return;
+      }
+      resolve();
+    });
+  });
+};
+
+const queryTabs = queryInfo => {
+  return new Promise((resolve, reject) => {
+    chrome.tabs.query(queryInfo, result => {
+      if (chrome.runtime.lastError) {
+        reject(new Error(chrome.runtime.lastError.message));
+        return;
+      }
+      resolve(result);
+    });
+  });
+};
+
 /* Block Rules */
 
 const compileBlockRule = raw => {
@@ -38,77 +96,22 @@ const compileBlockRule = raw => {
   return null;
 };
 
-const loadBlockRules = onBlockRulesLoaded => {
-  chrome.storage.local.get({ blacklist: '' }, items => {
-    if (chrome.runtime.lastError) {
-      console.error('uBlacklist: storage error: ' + chrome.runtime.lastError.message);
-      onBlockRulesLoaded([]);
-      return;
-    }
-    const blockRules = lines(items.blacklist).map(raw => ({ raw, compiled: compileBlockRule(raw) }));
-    onBlockRulesLoaded(blockRules);
-  });
+const loadBlockRules = async () => {
+  const items = await getLocalStorage({ blacklist: '' });
+  return lines(items.blacklist).map(raw => ({ raw, compiled: compileBlockRule(raw) }));
 };
 
-const saveBlockRules = blockRules => {
-  const blacklist = unlines(blockRules.map(rule => rule.raw));
-  chrome.storage.local.set({ blacklist, timestamp: new Date().toISOString() }, () => {
-    if (chrome.runtime.lastError) {
-      console.error('uBlacklist: storage error: ' + chrome.runtime.lastError.message);
-      return;
-    }
-    chrome.runtime.sendMessage({});
+const saveBlockRules = async blockRules => {
+  await setLocalStorage({
+    blacklist: unlines(blockRules.map(rule => rule.raw)),
+    timestamp: new Date().toISOString()
   });
-}
+  chrome.runtime.sendMessage({});
+};
 
 const deriveBlockRule = url => {
   const u = new URL(url);
   const s = u.protocol.match(/^((https?)|ftp):$/);
   return s ? (s[2] ? '*' : s[1]) + '://' + u.hostname + '/*' : null;
 };
 
-/* Async APIs */
-
-const getLocalStorage = keys => {
-  return new Promise((resolve, reject) => {
-    chrome.storage.local.get(keys, items => {
-      if (chrome.runtime.lastError) {
-        reject(new Error(chrome.runtime.lastError.message));
-        return;
-      }
-      resolve(items);
-    });
-  });
-}
-
-const setLocalStorage = items => {
-  return new Promise((resolve, reject) => {
-    chrome.storage.local.set(items, () => {
-      if (chrome.runtime.lastError) {
-        reject(new Error(chrome.runtime.lastError.message));
-        return;
-      }
-      resolve();
-    });
-  });
-}
-
-const getAuthToken = details => {
-  return new Promise((resolve, reject) => {
-    chrome.identity.getAuthToken(details, token => {
-      if (chrome.runtime.lastError) {
-        reject(new Error(chrome.runtime.lastError.message));
-        return;
-      }
-      resolve(token);
-    });
-  });
-};
-
-const removeCachedAuthToken = details => {
-  return new Promise((resolve, reject) => {
-    chrome.identity.removeCachedAuthToken(details, () => {
-      resolve();
-    });
-  });
-};
diff --git a/content.js b/content.js
@@ -4,9 +4,9 @@ class UBlacklist {
     this.blockedEntryCount = 0;
     this.queuedEntries = [];
 
-    loadBlockRules(blockRules => {
-      this.onBlockRulesLoaded(blockRules);
-    });
+    (async () => {
+      this.onBlockRulesLoaded(await loadBlockRules());
+    })();
 
     new MutationObserver(records => {
       this.onDOMContentMutated(records);
@@ -237,9 +237,13 @@ class UBlacklist {
       if (compiled) {
         this.blockRules.push({ raw, compiled });
         this.rejudgeAllEntries();
-        saveBlockRules(this.blockRules);
+        (async () => {
+          await saveBlockRules(this.blockRules);
+          blockDialog.close();
+        })();
+      } else {
+        blockDialog.close();
       }
-      blockDialog.close();
     });
     blockDialog.addEventListener('click', event => {
       if (event.target == blockDialog) {
@@ -252,8 +256,10 @@ class UBlacklist {
       event.preventDefault();
       this.blockRules.splice(Number($('ubUnblockSelect').value), 1);
       this.rejudgeAllEntries();
-      saveBlockRules(this.blockRules);
-      unblockDialog.close();
+      (async () => {
+        await saveBlockRules(this.blockRules);
+        unblockDialog.close();
+      })();
     });
     unblockDialog.addEventListener('click', event => {
       if (event.target == unblockDialog) {

diff --git a/popup.css b/popup.css
@@ -1,14 +1,15 @@
-body {
+#blockPopup, #unblockPopup {
+  display: none;
   font-size: 13px;
   margin: 0;
 }
 
-#ubBlockForm, #ubUnblockForm {
+#blockForm, #unblockForm {
   padding: 20px 12px;
   white-space: nowrap;
 }
 
-#ubBlockInput, #ubUnblockSelect {
+#blockInput, #unblockSelect {
   margin: 0 6px;
   width: 280px;
 }
diff --git a/popup.html b/popup.html
@@ -6,6 +6,25 @@
     <title>uBlacklist Popup</title>
   </head>
   <body>
+    <div id="blockPopup">
+      <form id="blockForm">
+        <label>
+          <span data-i18n="blockThisSite"></span>:
+          <input id="blockInput" type="text" autofocus spellcheck="false">
+        </label>
+        <button type="submit" data-i18n="ok"></button>
+      </form>
+    </div>
+    <div id="unblockPopup">
+      <form id="unblockForm">
+        <label>
+          <span data-i18n="unblockThisSite"></span>:
+          <select id="unblockSelect" autofocus>
+          </select>
+        </label>
+        <button type="submit" data-i18n="ok"></button>
+      </form>
+    </div>
     <script src="common.js"></script>
     <script src="popup.js"></script>
   </body>

diff --git a/popup.js b/popup.js
@@ -1,53 +1,46 @@
-loadBlockRules(blockRules => {
-  chrome.tabs.query({ active: true, currentWindow: true }, activeTabs => {
-    const url = activeTabs[0].url;
-    if (!/^(https?|ftp):$/.test(new URL(url).protocol) ||
-        !blockRules.some(rule => rule.compiled && rule.compiled.test(url))) {
-      document.body.insertAdjacentHTML('beforeend', String.raw`
-        <form id="ubBlockForm">
-          <label>
-            ${_('blockThisSite')}:
-            <input id="ubBlockInput" type="text" autofocus spellcheck="false">
-          </label>
-          <button type="submit">${_('ok')}</button>
-        </form>
-      `);
-      $('ubBlockInput').value = deriveBlockRule(url) || '';
-      $('ubBlockForm').addEventListener('submit', event => {
-        event.preventDefault();
-        const raw = $('ubBlockInput').value;
-        const compiled = compileBlockRule(raw);
-        if (compiled) {
-          blockRules.push({ raw, compiled });
+for (const element of document.querySelectorAll('[data-i18n]')) {
+  element.insertAdjacentHTML('beforeend', _(element.dataset.i18n));
+}
+
+(async () => {
+  const blockRules = await loadBlockRules();
+  const url = (await queryTabs({ active: true, currentWindow: true }))[0].url;
+  const blocked = /^(https?|ftp):$/.test(new URL(url).protocol) &&
+                  blockRules.some(rule => rule.compiled && rule.compiled.test(url));
+  if (!blocked) {
+    $('blockInput').value = deriveBlockRule(url) || '';
+    $('blockForm').addEventListener('submit', event => {
+      event.preventDefault();
+      const raw = $('blockInput').value;
+      const compiled = compileBlockRule(raw);
+      if (compiled) {
+        blockRules.push({ raw, compiled });
+        (async () => {
           saveBlockRules(blockRules);
-        }
+          window.close();
+        })();
+      } else {
         window.close();
-      });
-    } else {
-      document.body.insertAdjacentHTML('beforeend', String.raw`
-        <form id="ubUnblockForm">
-          <label>
-            ${_('unblockThisSite')}:
-            <select id="ubUnblockSelect" autofocus>
-            </select>
-          </label>
-          <button type="submit">${_('ok')}</button>
-        </form>
-      `);
-      blockRules.forEach((rule, index) => {
-        if (rule.compiled && rule.compiled.test(url)) {
-          const option = document.createElement('option');
-          option.textContent = rule.raw;
-          option.value = String(index);
-          $('ubUnblockSelect').appendChild(option);
-        }
-      });
-      $('ubUnblockForm').addEventListener('submit', event => {
-        event.preventDefault();
-        blockRules.splice(Number($('ubUnblockSelect').value), 1);
+      }
+    });
+    $('blockPopup').style.display = 'block';
+  } else {
+    blockRules.forEach((rule, index) => {
+      if (rule.compiled && rule.compiled.test(url)) {
+        const option = document.createElement('option');
+        option.textContent = rule.raw;
+        option.value = String(index);
+        $('unblockSelect').appendChild(option);
+      }
+    });
+    $('unblockForm').addEventListener('submit', event => {
+      event.preventDefault();
+      blockRules.splice(Number($('unblockSelect').value), 1);
+      (async () => {
         saveBlockRules(blockRules);
         window.close();
-      });
-    }
-  });
-});
+      })();
+    });
+    $('unblockPopup').style.display = 'block';
+  }
+})();