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

popup.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
-const {require} = ext.backgroundPage.getWindow();
-
-const {Filter} = require("filterClasses");
-const {FilterStorage} = require("filterStorage");
-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;
-}
+let tab = null;
 
 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)
+function isPageWhitelisted(callback)
 {
-  let listener = null;
+  chrome.runtime.sendMessage({type: "filters.isWhitelisted", tab}, callback);
+}
 
-  let cleanUp = () =>
+function whenPageReady()
+{
+  return new Promise(resolve =>
   {
-    ext.onMessage.removeListener(listener);
-  };
+    function onMessage(message, sender)
+    {
+      if (message.type == "composer.ready" && sender.page &&
+          sender.page.id == tab.id)
+      {
+        ext.onMessage.removeListener(onMessage);
+        resolve();
+      }
+    }
 
-  // Make a promise that fulfills when a condition has been met.
-  let makePromise = executor => new Promise(resolve =>
-  {
-    executor(condition =>
+    ext.onMessage.addListener(onMessage);
+
+    chrome.runtime.sendMessage({
+      type: "composer.isPageReady",
+      pageId: tab.id
+    },
+    ready =>
     {
-      if (condition)
+      if (ready)
+      {
+        ext.onMessage.removeListener(onMessage);
         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()
 {
   chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =>
   {
-    page = createPageObject(tabs[0]);
+    if (tabs.length > 0)
+      tab = {id: tabs[0].id, url: tabs[0].url};
+
+    let urlProtocol = tab && tab.url && new URL(tab.url).protocol;
 
     // Mark page as 'local' to hide non-relevant elements
-    if (!page || (page.url.protocol != "http:" &&
-                  page.url.protocol != "https:"))
+    if (urlProtocol != "http:" && urlProtocol != "https:")
     {
       document.body.classList.add("local");
       document.body.classList.remove("nohtml");
     }
     else
     {
-      whenPageReady(page.id).then(() =>
+      whenPageReady().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 (tab)
     {
-      if (checkWhitelisted(page))
-        document.body.classList.add("disabled");
+      isPageWhitelisted(whitelisted =>
+      {
+        if (whitelisted)
+          document.body.classList.add("disabled");
+      });
 
-      chrome.tabs.sendMessage(page.id, {
+      chrome.tabs.sendMessage(tab.id, {
         type: "composer.content.getState"
       },
       response =>
       {
         if (response && response.active)
           document.body.classList.add("clickhide-active");
       });
     }
   });
 
   document.getElementById("enabled").addEventListener(
     "click", toggleEnabled, false
   );
   document.getElementById("clickhide").addEventListener(
     "click", activateClickHide, false
   );
   document.getElementById("clickhide-cancel").addEventListener(
     "click", cancelClickHide, false
   );
   document.getElementById("options").addEventListener("click", () =>
   {
-    ext.showOptions();
+    ext.showOptions(window.close);
   }, false);
 
   // Set up collapsing of menu items
   for (let collapser of document.getElementsByClassName("collapse"))
   {
     collapser.addEventListener("click", toggleCollapse, false);
     getPref(collapser.dataset.option, value =>
     {
       if (value)
       {
         document.getElementById(
           collapser.dataset.collapsible
         ).classList.remove("collapsed");
       }
     });
   }
 }
 
 function toggleEnabled()
 {
   let disabled = document.body.classList.toggle("disabled");
-  if (disabled)
-  {
-    let host = getDecodedHostname(page.url).replace(/^www\./, "");
-    let filter = Filter.fromText("@@||" + host + "^$document");
-    if (filter.subscriptions.length && filter.disabled)
-      filter.disabled = false;
-    else
-    {
-      filter.disabled = false;
-      FilterStorage.addFilter(filter);
-    }
-  }
-  else
-  {
-    // Remove any exception rules applying to this URL
-    let filter = checkWhitelisted(page);
-    while (filter)
-    {
-      FilterStorage.removeFilter(filter);
-      if (filter.subscriptions.length)
-        filter.disabled = true;
-      filter = checkWhitelisted(page);
-    }
-  }
+  chrome.runtime.sendMessage({
+    type: disabled ? "filters.whitelist" : "filters.unwhitelist",
+    tab
+  });
 }
 
 function activateClickHide()
 {
   document.body.classList.add("clickhide-active");
-  page.sendMessage({type: "composer.content.startPickingElement"});
+  chrome.tabs.sendMessage(tab.id, {
+    type: "composer.content.startPickingElement"
+  });
 
   // Close the popup after a few seconds, so user doesn't have to
-  activateClickHide.timeout = window.setTimeout(ext.closePopup, 5000);
+  activateClickHide.timeout = window.setTimeout(window.close, 5000);
 }
 
 function cancelClickHide()
 {
   if (activateClickHide.timeout)
   {
     window.clearTimeout(activateClickHide.timeout);
     activateClickHide.timeout = null;
   }
   document.body.classList.remove("clickhide-active");
-  page.sendMessage({type: "composer.content.finished"});
+  chrome.tabs.sendMessage(tab.id, {type: "composer.content.finished"});
 }
 
 function toggleCollapse(event)
 {
   let collapser = event.currentTarget;
   let collapsible = document.getElementById(collapser.dataset.collapsible);
   collapsible.classList.toggle("collapsed");
   togglePref(collapser.dataset.option);
 }
 
 document.addEventListener("DOMContentLoaded", onLoad, false);