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

popup.js

Index: popup.js
===================================================================
--- a/popup.js
+++ b/popup.js
@@ -16,54 +16,109 @@
  */
 
 "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 createPageObject(tab)
+{
+  if (!tab)
+    return null;
+
+  // Create a lightweight page object that resembles ext.Page, but with only
+  // an id and an optional url property.
+  let page = {id: tab.id};
+
+  if (tab.url)
+    page.url = new URL(tab.url);
+
+  return page;
+}
+
+function getPref(key, callback)
+{
+  chrome.runtime.sendMessage({type: "prefs.get", key}, callback);
+}
+
+function togglePref(key, callback)
+{
+  chrome.runtime.sendMessage({type: "prefs.toggle", key}, callback);
+}
+
+function whenPageReady(pageId)
+{
+  let listener = null;
+
+  let waitForPageReady = new Promise(resolve =>
+  {
+    ext.onMessage.addListener(listener = (message, sender) =>

[Manish Jethani, 2017/09/19 14:25:55]

Assign listener here when it's added.

+    {
+      let {id: senderPageId} = sender.page || {};

[Manish Jethani, 2017/09/19 14:25:55]

sender.page can be undefined.

+      if (message.type == "composer.ready" && senderPageId == pageId)
+        resolve();
+    });
+  });
+
+  let ifPageReady = new Promise(resolve =>
+  {
+    chrome.runtime.sendMessage({type: "composer.isPageReady", pageId}, ready =>
+    {
+      if (ready)
+        resolve();
+    });
+  });
+
+  return Promise.race([waitForPageReady, ifPageReady]).then(() =>
+  {
+    ext.onMessage.removeListener(listener);

[Manish Jethani, 2017/09/19 14:25:55]

When either of the promises is fulfilled, remove the listener. We need to do
this, otherwise ext.onMessage will hold on to the listener (and the surrounding
closure in turn) and keep sending messages.

+  });
+}
+
 function onLoad()
 {
-  ext.pages.query({active: true, lastFocusedWindow: true}, pages =>
+  chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =>
   {
-    page = pages[0];
+    page = createPageObject(tabs[0]);
 
-    // Mark page as 'local' or 'nohtml' to hide non-relevant elements
+    // Mark page as 'local' 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))
     {
-      document.body.classList.add("nohtml");
-      require("messaging").getPort(window).on(
-        "composer.ready", (message, sender) =>
-        {
-          if (sender.page.id == page.id)
-            document.body.classList.remove("nohtml");
-        }
-      );
+      document.body.classList.add("local");
+      document.body.classList.remove("nohtml");
+    }
+    else
+    {
+      whenPageReady(page.id).then(() =>
+      {
+        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)
     {
       if (checkWhitelisted(page))
         document.body.classList.add("disabled");
 
-      page.sendMessage({type: "composer.content.getState"}, response =>
+      chrome.tabs.sendMessage(page.id, {
+        type: "composer.content.getState"
+      },
+      response =>
       {
         if (response && response.active)
           document.body.classList.add("clickhide-active");
       });
     }
   });
 
   document.getElementById("enabled").addEventListener(
@@ -79,22 +134,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])
+    getPref(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 +198,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");
+  togglePref(collapser.dataset.option);
 }
 
 document.addEventListener("DOMContentLoaded", onLoad, false);