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,133 @@
  */
 
 "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)

[Sebastian Noack, 2017/09/20 18:57:02]

I suppose this hack is matter to be removed in a later iteration, where we move
the checkWhitelisted() call to the background page as well? If so, can you
please add a comment here, explaining why creating a fake Page object is
necessary and that this is just a temporary workaround?

[Manish Jethani, 2017/09/21 06:11:16]

Done.

By the way, there is a "filters.isPageWhitelisted" in lib/whitelisting.js, it is
not used anywhere right now (?), and it takes a page object as well. I think
this should be changed so it takes a page-like object with only an id and a url,
then it can construct a full ext.Page object locally before passing it to
checkWhitelisted.

Same for getBlockedPerPage.

[Sebastian Noack, 2017/09/21 22:57:16]

Well spotted. This is relic from Safari support. I will remove it.

+{
+  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 cleanUp = () =>
+  {
+    ext.onMessage.removeListener(listener);
+  };
+
+  // Make a promise that fulfills when a condition has been met.
+  let makePromise = executor => new Promise(resolve =>
+  {
+    executor(condition =>
+    {
+      if (condition)
+        resolve();
+    });
+  });
+
+  // Make a promise that fulfills when one of a list of conditions has been
+  // met.
+  let race = executors => Promise.race(executors.map(makePromise));
+
+  let promise = race([
+    // Wait for a message from the page announcing that it's ready, whenever
+    // it's ready.
+    resolveIf =>
+    {
+      ext.onMessage.addListener(listener = (message, sender) =>
+      {
+        resolveIf(message.type == "composer.ready" && sender.page &&
+                  sender.page.id == pageId);
+      });
+    },
+    // Ask the page if it's already ready.
+    resolveIf =>
+    {
+      chrome.runtime.sendMessage({type: "composer.isPageReady", pageId},
+                                 resolveIf);
+    }
+  ]);
+
+  // Clean up on either fulfillment or rejection, but throw the error back on
+  // rejection.
+  promise.then(cleanUp, error =>

[Manish Jethani, 2017/09/19 18:07:24]

We need to clean up on both fulfillment and rejection. This is the equivalent of
Promise.prototype.finally [1].

Also we have to stick the clean-up handler on the original promise so any errors
thrown from there don't reject the returned promise.

[1]: https://github.com/tc39/proposal-promise-finally

+  {
+    cleanUp();
+    throw error;
+  });
+
+  return promise;

[Sebastian Noack, 2017/09/20 18:57:02]

It seems the logic here would be much simpler and easier to follow, if you use
less promise-ifcation:

  return new Promise(resolve =>
  {
    function onMessage(message, sender)
    {
      if (message.type == "composer.ready" &&
          sender.page && sender.page.id == pageId)
      {
        ext.onMessage.removeListener(onMessage);
        resolve();
      }
    }

    chrome.runtime.sendMessage(
      {type: "composer.isPageReady", pageId},
      response =>
      {
        if (response)
        {
          ext.onMessage.removeListener(onMessage);
          resolve();
        }
      }
    );

    ext.onMessage.addListener(onMessage);
  });

[Manish Jethani, 2017/09/21 04:53:59]

Yeah, that was a bit overkill.

Done.

+}
+
 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 +158,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 +222,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);