Issue 5593 - Use messaging in popup for prefs, whitelisting, and stats

popup.js

Index: popup.js
===================================================================
--- a/popup.js
+++ b/popup.js
@@ -16,42 +16,65 @@
  */
 
 "use strict";
 
 const {require} = ext.backgroundPage.getWindow();
 
 const {Filter} = require("filterClasses");
 const {FilterStorage} = require("filterStorage");
-const {Prefs} = require("prefs");
 const {checkWhitelisted} = require("whitelisting");
 const {getDecodedHostname} = require("url");
 
 let page = null;
 
+function checkPageReady(pageId, callback)
+{
+  chrome.runtime.sendMessage({type: "composer.isPageReady", pageId}, callback);
+}
+
+function waitForPageReady(pageId, callback)
+{
+  let listener = (message, sender) =>
+  {
+    if (message.type == "composer.ready" && sender.page.id == pageId)
+    {
+      ext.onMessage.removeListener(listener);
+      callback();
+    }
+  };
+
+  ext.onMessage.addListener(listener);
+}
+
 function onLoad()
 {
   ext.pages.query({active: true, lastFocusedWindow: true}, pages =>
   {
     page = pages[0];
 
     // Mark page as 'local' or 'nohtml' to hide non-relevant elements
     if (!page || (page.url.protocol != "http:" &&
                   page.url.protocol != "https:"))
+    {
       document.body.classList.add("local");
-    else if (!require("filterComposer").isPageReady(page))
+    }
+    else
     {
-      document.body.classList.add("nohtml");
-      require("messaging").getPort(window).on(
-        "composer.ready", (message, sender) =>
+      checkPageReady(page.id, ready =>
+      {
+        if (!ready)
         {
-          if (sender.page.id == page.id)
+          document.body.classList.add("nohtml");
+          waitForPageReady(page.id, () =>
+          {
             document.body.classList.remove("nohtml");
+          });
         }
-      );
+      });
     }
 
     // Ask content script whether clickhide is active. If so, show
     // cancel button.  If that isn't the case, ask background.html
     // whether it has cached filters. If so, ask the user whether she
     // wants those filters. Otherwise, we are in default state.
     if (page)
     {
@@ -79,22 +102,25 @@
   {
     ext.showOptions();
   }, false);
 
   // Set up collapsing of menu items
   for (let collapser of document.getElementsByClassName("collapse"))
   {
     collapser.addEventListener("click", toggleCollapse, false);
-    if (!Prefs[collapser.dataset.option])
+    ext.prefs.get(collapser.dataset.option, value =>
     {
-      document.getElementById(
-        collapser.dataset.collapsable
-      ).classList.add("collapsed");
-    }
+      if (value)
+      {
+        document.getElementById(
+          collapser.dataset.collapsible
+        ).classList.remove("collapsed");
+      }
+    });
   }
 }
 
 function toggleEnabled()
 {
   let disabled = document.body.classList.toggle("disabled");
   if (disabled)
   {
@@ -140,13 +166,14 @@
   }
   document.body.classList.remove("clickhide-active");
   page.sendMessage({type: "composer.content.finished"});
 }
 
 function toggleCollapse(event)
 {
   let collapser = event.currentTarget;
-  Prefs[collapser.dataset.option] = !Prefs[collapser.dataset.option];
-  collapser.parentNode.classList.toggle("collapsed");
+  let collapsible = document.getElementById(collapser.dataset.collapsible);
+  collapsible.classList.toggle("collapsed");
+  ext.prefs.toggle(collapser.dataset.option);
 }
 
 document.addEventListener("DOMContentLoaded", onLoad, false);