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 {Prefs} = require("prefs");
-const {checkWhitelisted} = require("whitelisting");
-const {getDecodedHostname} = require("url");
+let tab = null;

[Manish Jethani, 2017/09/21 08:02:39]

So now it's just a lightweight tab object and createPageObject is gone.

 
-let page = null;
+function getPref(key, callback)

[Manish Jethani, 2017/09/21 08:06:25]

By the way, since we moved getPref and togglePref into popup.js, now we're
getting a linter error in stats.js for these functions as they are not declared
global.

Any thoughts on how to deal with this?

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

Where accessing globals from other scripts cannot be avoided, it is possible to
annotate these at the top of the script like this:

  /* global getPref, toggelPref */

However, we should avoid cases like this as much as possible. And FWIW, I don't
see why the code for the popup UI is spread across 3 scripts in the first place.
So please consider merging these files, but this should probably happen in a
separate review.

[Manish Jethani, 2017/09/24 22:37:27]

Done.
OK, I'll look into this separately.

+{
+  chrome.runtime.sendMessage({type: "prefs.get", key}, callback);
+}
+
+function togglePref(key, callback)
+{
+  chrome.runtime.sendMessage({type: "prefs.toggle", key}, callback);
+}
+
+function isPageWhitelisted(callback)

[Manish Jethani, 2017/09/21 08:02:39]

I wonder if we should always use promises here.

+{
+  chrome.runtime.sendMessage({type: "filters.isWhitelisted", tab}, callback);
+}
+
+function whenPageReady()
+{
+  let pageId = tab.id;

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

Why do we have to chache tab.id into a local variable here?

[Manish Jethani, 2017/09/24 22:37:27]

It was not necessary, removed.

+
+  return new Promise(resolve =>
+  {
+    let handlePageReady = () =>

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

I'm not sure if it's worth to move these two trivial lines into a function. I
feel that the code is slightly easier to follow with this code inlined.

[Manish Jethani, 2017/09/24 22:37:26]

Done.

+    {
+      ext.onMessage.removeListener(onMessage);
+      resolve();
+    };
+
+    let onMessage = (message, sender) =>
+    {
+      if (message.type == "composer.ready" && sender.page &&
+          sender.page.id == pageId)
+      {
+        handlePageReady();
+      }
+    };
+
+    ext.onMessage.addListener(onMessage);
+
+    chrome.runtime.sendMessage({type: "composer.isPageReady", pageId}, ready =>
+    {
+      if (ready)
+        handlePageReady();
+    });
+  });
+}
 
 function onLoad()
 {
-  ext.pages.query({active: true, lastFocusedWindow: true}, pages =>
+  chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =>
   {
-    page = pages[0];
+    tab = tabs[0] && {id: tabs[0].id, url: tabs[0].url};

[Manish Jethani, 2017/09/21 08:02:37]

I don't like to hold on to an object passed in by the browser, as it may cause
memory leaks, especially when it represents a browser tab, so I'm creating a new
"tab" object with just the id and the url (both primitive types).

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

Alternatively, you could use two global variables, `tabUrl` and `tabId`. As a
side effect, this would also simplify checks like below, instead for `tab &&
tab.url`, you could just check for `tabUrl` there then.

[Manish Jethani, 2017/09/24 22:37:27]

We could do that, but we're using the tab object in isPageWhitelisted and
toggleEnabled, so then we'd have to recreate that object locally.

[Sebastian Noack, 2017/09/25 17:50:52]

I see, I don't have a strong opinion then.

 
-    // Mark page as 'local' or 'nohtml' to hide non-relevant elements
-    if (!page || (page.url.protocol != "http:" &&
-                  page.url.protocol != "https:"))
+    let url = tab && tab.url && new URL(tab.url);
+
+    // Mark page as 'local' to hide non-relevant elements
+    if (!url || (url.protocol != "http:" && url.protocol != "https:"))
+    {
       document.body.classList.add("local");
-    else if (!require("filterComposer").isPageReady(page))
+      document.body.classList.remove("nohtml");
+    }
+    else
     {
-      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");
-        }
-      );
+      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");
+      });
 
-      page.sendMessage({type: "composer.content.getState"}, response =>
+      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();
   }, 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)
-  {
-    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, {

[Manish Jethani, 2017/09/21 08:02:38]

I forgot to account for this earlier. It needs to use tabs.sendMessage directly.

+    type: "composer.content.startPickingElement"
+  });
 
   // Close the popup after a few seconds, so user doesn't have to
   activateClickHide.timeout = window.setTimeout(ext.closePopup, 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;
-  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);