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 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.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(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(
     "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");
@@ skipping 35 matching lines @@
     window.clearTimeout(activateClickHide.timeout);
     activateClickHide.timeout = null;
   }
   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);