Issue 5593 - Merge notification.js and stats.js into popup.js

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
@@ skipping 52 matching lines @@
     {
       if (ready)
       {
         chrome.runtime.onMessage.removeListener(onMessage);
         resolve();
       }
     });
   });
 }
 
 function onLoad()

[Manish Jethani, 2017/10/10 05:08:56]

onLoad has been inlined, i.e. it's an anonymous function passed directly to
addEventListener.

 {
   chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =>
   {
     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 (urlProtocol != "http:" && urlProtocol != "https:")
@@ skipping 96 matching lines @@
 
 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);
+
+/* Notifications */
+
+(function()

[Manish Jethani, 2017/10/09 17:43:24]

The logic inside these anonymous functions needs to be brought out and merged
with the rest of the code.

[Sebastian Noack, 2017/10/09 19:29:46]

Yeah, please, go ahead.

[Manish Jethani, 2017/10/10 05:08:56]

Done.

+{
+  function getDocLinks(notification)
+  {
+    if (!notification.links)
+      return Promise.resolve([]);
+
+    return Promise.all(
+      notification.links.map(link =>
+      {
+        return new Promise((resolve, reject) =>
+        {
+          chrome.runtime.sendMessage({
+            type: "app.get",
+            what: "doclink",
+            link
+          }, resolve);
+        });
+      })
+    );
+  }
+
+  function insertMessage(element, text, links)
+  {
+    let match = /^(.*?)<(a|strong)>(.*?)<\/\2>(.*)$/.exec(text);
+    if (!match)
+    {
+      element.appendChild(document.createTextNode(text));
+      return;
+    }
+
+    let before = match[1];
+    let tagName = match[2];
+    let value = match[3];
+    let after = match[4];
+
+    insertMessage(element, before, links);
+
+    let newElement = document.createElement(tagName);
+    if (tagName == "a" && links && links.length)
+      newElement.href = links.shift();
+    insertMessage(newElement, value, links);
+    element.appendChild(newElement);
+
+    insertMessage(element, after, links);
+  }
+
+  window.addEventListener("load", () =>
+  {
+    chrome.runtime.sendMessage({
+      type: "notifications.get",
+      displayMethod: "popup"
+    }, notification =>
+    {
+      if (!notification)
+        return;
+
+      let titleElement = document.getElementById("notification-title");
+      let messageElement = document.getElementById("notification-message");
+
+      titleElement.textContent = notification.texts.title;
+
+      getDocLinks(notification).then(docLinks =>
+      {
+        insertMessage(messageElement, notification.texts.message, docLinks);
+
+        messageElement.addEventListener("click", event =>
+        {
+          let link = event.target;
+          while (link && link != messageElement && link.localName != "a")
+            link = link.parentNode;
+          if (!link)
+            return;
+          event.preventDefault();
+          event.stopPropagation();
+          chrome.tabs.create({url: link.href});
+        });
+      });
+
+      let notificationElement = document.getElementById("notification");
+      notificationElement.className = notification.type;
+      notificationElement.hidden = false;
+      notificationElement.addEventListener("click", event =>
+      {
+        if (event.target.id == "notification-close")
+          notificationElement.classList.add("closing");
+        else if (event.target.id == "notification-optout" ||
+                 event.target.id == "notification-hide")
+        {
+          if (event.target.id == "notification-optout")
+            setPref("notifications_ignoredcategories", true);
+
+          notificationElement.hidden = true;
+          notification.onClicked();
+        }
+      }, true);
+    });
+  }, false);
+}());
+
+/* Stats */
+
+(function()
+{
+  let currentTab;
+  const shareURL = "https://adblockplus.org/";
+
+  let messageMark = {};
+  let shareLinks = {
+    facebook: ["https://www.facebook.com/dialog/feed", {
+      app_id: "475542399197328",
+      link: shareURL,
+      redirect_uri: "https://www.facebook.com/",
+      ref: "adcounter",
+      name: messageMark,
+      actions: JSON.stringify([
+        {
+          name: chrome.i18n.getMessage("stats_share_download"),
+          link: shareURL
+        }
+      ])
+    }],
+    gplus: ["https://plus.google.com/share", {
+      url: shareURL
+    }],
+    twitter: ["https://twitter.com/intent/tweet", {
+      text: messageMark,
+      url: shareURL,
+      via: "AdblockPlus"
+    }]
+  };
+
+  function createShareLink(network, blockedCount)
+  {
+    let url = shareLinks[network][0];
+    let params = shareLinks[network][1];
+
+    let querystring = [];
+    for (let key in params)
+    {
+      let value = params[key];
+      if (value == messageMark)
+        value = chrome.i18n.getMessage("stats_share_message", blockedCount);
+      querystring.push(
+        encodeURIComponent(key) + "=" + encodeURIComponent(value)
+      );
+    }
+    return url + "?" + querystring.join("&");
+  }
+
+  function onLoad()
+  {
+    document.getElementById("share-box").addEventListener("click", share,
+                                                          false);
+    let showIconNumber = document.getElementById("show-iconnumber");
+    getPref("show_statsinicon", showStatsInIcon =>
+    {
+      showIconNumber.setAttribute("aria-checked", showStatsInIcon);
+    });
+    showIconNumber.addEventListener("click", toggleIconNumber, false);
+    document.querySelector("label[for='show-iconnumber']").addEventListener(
+      "click", toggleIconNumber, false
+    );
+
+    // Update stats
+    chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs =>
+    {
+      currentTab = tabs[0];
+      updateStats();
+
+      document.getElementById("stats-container").removeAttribute("hidden");
+    });
+  }
+
+  function updateStats()
+  {
+    let statsPage = document.getElementById("stats-page");
+    chrome.runtime.sendMessage({
+      type: "stats.getBlockedPerPage",
+      tab: currentTab

[Manish Jethani, 2017/10/10 05:08:56]

Note: There's no currentTab anymore, it's just tab

+    },
+    blockedPage =>
+    {
+      ext.i18n.setElementText(statsPage, "stats_label_page",
+                              [blockedPage.toLocaleString()]);
+    });
+
+    let statsTotal = document.getElementById("stats-total");
+    getPref("blocked_total", blockedTotal =>
+    {
+      ext.i18n.setElementText(statsTotal, "stats_label_total",
+                              [blockedTotal.toLocaleString()]);
+    });
+  }
+
+  function share(ev)
+  {
+    getPref("blocked_total", blockedTotal =>
+    {
+      // Easter Egg
+      if (blockedTotal <= 9000 || blockedTotal >= 10000)
+      {
+        blockedTotal = blockedTotal.toLocaleString();
+      }
+      else
+      {
+        blockedTotal = chrome.i18n.getMessage("stats_over",
+                                              (9000).toLocaleString());
+      }
+
+      chrome.tabs.create({
+        url: createShareLink(ev.target.dataset.social, blockedTotal)
+      });
+    });
+  }
+
+  function toggleIconNumber()
+  {
+    togglePref("show_statsinicon", showStatsInIcon =>
+    {
+      document.getElementById("show-iconnumber").setAttribute(
+        "aria-checked", showStatsInIcon
+      );
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", onLoad, false);
+}());