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)
-{
-  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 waitForPageReady = new Promise(resolve =>
+function whenPageReady()
+{
+  return new Promise(resolve =>
   {
-    ext.onMessage.addListener(listener = (message, sender) =>

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

Assign listener here when it's added.

+    function onMessage(message, sender)
     {
-      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)
+      if (message.type == "composer.ready" && sender.page &&
+          sender.page.id == tab.id)
+      {
+        ext.onMessage.removeListener(onMessage);
         resolve();
-    });
-  });
+      }
+    }
 
-  let ifPageReady = new Promise(resolve =>
-  {
-    chrome.runtime.sendMessage({type: "composer.isPageReady", pageId}, ready =>
+    ext.onMessage.addListener(onMessage);
+
+    chrome.runtime.sendMessage({
+      type: "composer.isPageReady",
+      pageId: tab.id
+    },
+    ready =>
     {
       if (ready)
+      {
+        ext.onMessage.removeListener(onMessage);
         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()
 {
   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);