First-run page (revisited)

chrome/content/ui/firstRun.js

Index: chrome/content/ui/firstRun.js
===================================================================
--- a/chrome/content/ui/firstRun.js
+++ b/chrome/content/ui/firstRun.js
@@ -15,75 +15,306 @@
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-function init()
+"use strict";
+
+(function()
 {
-  generateLinkText(E("changeDescription"));
+  var shade;
+  var scrollTimer;
 
-  for each (let subscription in FilterStorage.subscriptions)
+  // Determine platform
+  var userAgent = "";
+  if (navigator.userAgent.indexOf("Gecko/") > -1)
+    userAgent = "firefox";
+  else if (navigator.userAgent.indexOf("Chrome/") > -1)
+    userAgent = "chrome";
+
+  if (userAgent !== "")
+    document.documentElement.className = userAgent;
+
+  // Load subscriptions for features
+  var featureSubscriptions = [
+    {
+      feature: "malware",
+      title: "Malware Domains",
+      url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt"

[Wladimir Palant, 2013/05/27 14:10:37]

Please add the homepage field as well - I noticed that you are using it below
(and it's actually necessary).

[Thomas Greiner, 2013/05/27 16:39:16]

Done.

+    },
+    {
+      feature: "social",
+      title: "Fanboy's Social Blocking List",
+      url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt"
+    },
+    {
+      feature: "tracking",
+      title: "EasyPrivacy",
+      url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
+    }
+  ];
+
+  // Determine scripts to load
+  var scripts = [];
+  if (userAgent == "chrome")
   {
-    if (subscription instanceof DownloadableSubscription && subscription.url != Prefs.subscriptions_exceptionsurl && !subscription.disabled)
+    var backgroundPage = chrome.extension.getBackgroundPage();
+    var require = backgroundPage.require;
+  }
+  else if (userAgent == "firefox")
+  {
+    scripts.push("utils.js");
+  }
+  scripts.push("i18n.js");
+
+  function loadScripts()
+  {
+    var scriptName = scripts.shift();
+    var script = document.createElement("script");
+    script.type = (userAgent == "firefox") ? "application/x-javascript;version=1.7" : "text/javascript";
+    script.addEventListener("load", (scripts.length == 0) ? onScriptsLoaded : loadScripts, false);
+    script.src = scriptName;
+    document.head.appendChild(script);
+  }
+
+  function onScriptsLoaded()
+  {
+    if (userAgent == "chrome")
     {
-      E("listName").textContent = subscription.title;
+      window.Synchronizer = require("synchronizer").Synchronizer;
+      window.Utils = require("utils").Utils;
+      window.Prefs = require("prefs").Prefs;
+      window.FilterStorage = require("filterStorage").FilterStorage;
 
-      let link = E("listHomepage");
-      link.setAttribute("href", subscription.homepage);
-      link.setAttribute("title", subscription.homepage);
+      var subscriptionClasses = require("subscriptionClasses");
+      window.Subscription = subscriptionClasses.Subscription;
+      window.DownloadableSubscription = subscriptionClasses.DownloadableSubscription;
+      window.Filter = require("filterClasses").Filter;
+    }
 
-      E("listNameContainer").removeAttribute("hidden");
-      E("listNone").setAttribute("hidden", "true");
-      break;
+    // Show warning if data corruption was detected
+    if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruption)
+    {
+      document.getElementById("dataCorruptionWarning").removeAttribute("hidden");

[Wladimir Palant, 2013/05/27 14:10:37]

utils.js in Firefox defines a E("dataCorruptionWarning") shortcut - feel free to
define it in Chrome as well and use it here.

[Thomas Greiner, 2013/05/27 16:39:16]

Done.

+      setLinks("dataCorruptionWarning", getDocLink("knownIssuesChrome_filterstorage"));
+    }
+
+    // Set up URLs
+    var versionId;
+    var platformId;
+    if (userAgent == "firefox")
+    {
+      versionId = Utils.addonVersion.match(/^[0-9\.]+/)[0].replace(/\./g, "");
+      platformId = "firefox";
+    }
+    else if (userAgent == "chrome")
+    {
+      versionId = chrome.app.getDetails().version.split(".").slice(0, 2).join("");
+      platformId = "google-chrome";
+    }
+    setLinks("title-changelog", "https://adblockplus.org/releases/adblock-plus-" + versionId + "-for-" + platformId + "-released");
+    setLinks("acceptableAdsExplanation", getDocLink("acceptable_ads_criteria"), openFilters);
+
+    shade = document.getElementById("shade");
+    shade.addEventListener("mouseover", scrollPage, false);
+    shade.addEventListener("mouseout", stopScroll, false);
+
+    // Set up typo feature
+    if (require("typoBootstrap"))
+    {
+      var toggleTypo = document.getElementById("toggle-typo");
+      updateToggleButton("typo", Prefs.correctTypos);
+      Prefs.addListener(function(name)
+      {
+        if (name == "correctTypos")
+          updateToggleButton("typo", Prefs.correctTypos);
+      });

[Wladimir Palant, 2013/05/27 14:10:37]

This listener needs to be removed on unload.

[Thomas Greiner, 2013/05/27 16:39:16]

Done.

+      toggleTypo.addEventListener("click", function(event)
+      {
+        setTypoCorrectionEnabled(!Prefs.correctTypos);

[Wladimir Palant, 2013/05/27 14:10:37]

How about Prefs.correctTypos = !Prefs.correctTypos? The function seems to be
pointless :)

[Thomas Greiner, 2013/05/27 16:39:16]

True! :)

Done.

+      }, false);
+    }
+
+    // Set up feature buttons linked to subscriptions
+    featureSubscriptions.forEach(setToggleSubscriptionButton);
+
+    window.addEventListener("resize", onWindowResize, false);
+    document.addEventListener("scroll", onScroll, false);
+
+    onWindowResize();
+
+    initSocialLinks(null);
+  }
+
+  function onScroll()
+  {
+    var currentHeight = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight;
+    shade.style.opacity = (document.documentElement.scrollHeight == currentHeight) ? "0.0" : "0.5";
+  }
+
+  function onWindowResize()
+  {
+    onScroll();
+  }
+
+  function setTypoCorrectionEnabled(enable)
+  {
+    Prefs.correctTypos = enable;
+  }
+
+  function isSubscriptionEnabled(featureSubscription)
+  {
+    return featureSubscription.url in FilterStorage.knownSubscriptions
+      && !Subscription.fromURL(featureSubscription.url).disabled;
+  }
+
+  function setToggleSubscriptionButton(featureSubscription)
+  {
+    var feature = featureSubscription.feature;
+
+    var element = document.getElementById("toggle-" + feature);
+    updateToggleButton(feature, isSubscriptionEnabled(featureSubscription));
+    element.addEventListener("click", function(event)
+    {
+      var subscription = Subscription.fromURL(featureSubscription.url);
+      if (isSubscriptionEnabled(featureSubscription))
+        FilterStorage.removeSubscription(subscription);
+      else
+      {
+        subscription.disabled = false;
+        subscription.title = featureSubscription.title;
+        subscription.homepage = featureSubscription.homepage;
+        FilterStorage.addSubscription(subscription);
+        if (!subscription.lastDownload)
+          Synchronizer.execute(subscription);
+      }
+    }, false);
+  }
+
+  function scrollPage()
+  {
+    if (scrollTimer)
+      stopScroll();
+
+    scrollTimer = setInterval(function()
+    {
+      window.scrollBy(0, 5);
+    }, 20);
+  }
+
+  function stopScroll()
+  {
+    clearTimeout(scrollTimer);
+    scrollTimer = null;
+  }
+
+  function openSharePopup(url)
+  {
+    var iframe = document.getElementById("share-popup");
+    var glassPane = document.getElementById("glass-pane");
+    var popupMessageReceived = false;
+
+    var popupMessageListener = function(event)
+    {
+      var originFilter = Filter.fromText("||adblockplus.org^");
+      if (!originFilter.matches(event.origin, "OTHER", null, null))
+        return;
+
+      var width = event.data.width;
+      var height = event.data.height;
+      iframe.width = width;
+      iframe.height = height;
+      iframe.style.marginTop = -height/2 + "px";
+      iframe.style.marginLeft = -width/2 + "px";
+      popupMessageReceived = true;
+      window.removeEventListener("message", popupMessageListener);
+    };
+    // Firefox requires last parameter to be true to be triggered by unprivileged pages
+    window.addEventListener("message", popupMessageListener, false, true);
+
+    var popupLoadListener = function()
+    {
+      if (popupMessageReceived)
+      {
+        iframe.className = "visible";
+
+        var popupCloseListener = function()
+        {
+          iframe.className = glassPane.className = "";
+          document.removeEventListener("click", popupCloseListener);
+        };
+        document.addEventListener("click", popupCloseListener, false);
+      }
+      else
+      {
+        glassPane.className = "";
+        window.removeEventListener("message", popupMessageListener);
+      }
+
+      iframe.removeEventListener("load", popupLoadListener);
+    };
+    iframe.addEventListener("load", popupLoadListener, false);
+
+    iframe.src = url;
+    glassPane.className = "visible";
+  }
+
+  function initSocialLinks(variant)
+  {
+    var networks = ["twitter", "facebook", "gplus"];
+    networks.forEach(function(network)
+    {
+      var link = document.getElementById("share-" + network);
+      link.addEventListener("click", function(e)
+      {
+        e.preventDefault();
+        openSharePopup(getDocLink("share-" + network) + "&variant=" + variant);
+      }, false);
+    });
+  }
+
+  function setLinks(id)
+  {
+    var element = document.getElementById(id);
+    if (!element)
+      return;
+
+    var links = element.getElementsByTagName("a");
+    for (var i = 0; i < links.length; i++)
+    {
+      if (typeof arguments[i + 1] == "string")
+      {
+        links[i].href = arguments[i + 1];
+        links[i].setAttribute("target", "_blank");
+      }
+      else if (typeof arguments[i + 1] == "function")
+      {
+        links[i].href = "javascript:void(0);";
+        links[i].addEventListener("click", arguments[i + 1], false);
+      }
     }
   }
 
-  if (FilterStorage.subscriptions.some(function(s) s.url == Prefs.subscriptions_exceptionsurl))
-    E("acceptableAds").removeAttribute("hidden");
-}
+  function getDocLink(page, anchor)
+  {
+    return Prefs.documentation_link
+                .replace(/%LINK%/g, page)
+                .replace(/%LANG%/g, Utils.appLocale) + (anchor ? "#" + anchor : "");
+  }

[Wladimir Palant, 2013/05/27 14:10:37]

Comment not addressed (in addition to utils.js & Co.):

The anchor parameter is unnecessary. This is duplicating some code from ui.js in
Firefox. Please add Utils.getDocLink() to utils.js and make UI.loadDocLink() use
it. In Chrome you can add it to lib/utils.js as well.

[Thomas Greiner, 2013/05/27 16:39:16]

Done.

 
-function generateLinkText(element)
-{
-  let template = element.getAttribute("_textTemplate");
-
-  let [, beforeLink, linkText, afterLink] = /(.*)\[link\](.*)\[\/link\](.*)/.exec(template) || [null, "", template, ""];
-  while (element.firstChild && element.firstChild.nodeType != Node.ELEMENT_NODE)
-    element.removeChild(element.firstChild);
-  while (element.lastChild && element.lastChild.nodeType != Node.ELEMENT_NODE)
-    element.removeChild(element.lastChild);
-  if (!element.firstChild)
-    return;
-
-  element.firstChild.textContent = linkText;
-  element.insertBefore(document.createTextNode(beforeLink), element.firstChild);
-  element.appendChild(document.createTextNode(afterLink));
-}
-
-function openFilters()
-{
-  if (Utils.isFennec)
+  function openFilters()
   {
-    let topWnd = window.QueryInterface(Ci.nsIInterfaceRequestor)
-                       .getInterface(Ci.nsIWebNavigation)
-                       .QueryInterface(Ci.nsIDocShellTreeItem)
-                       .rootTreeItem
-                       .QueryInterface(Ci.nsIInterfaceRequestor)
-                       .getInterface(Ci.nsIDOMWindow);
-    if (topWnd.wrappedJSObject)
-      topWnd = topWnd.wrappedJSObject;
-
-    // window.close() closes the entire window (bug 642604), make sure to close
-    // only a single tab instead.
-    if ("BrowserUI" in topWnd)
+    if (typeof UI != "undefined")
+      UI.openFiltersDialog();
+    else
     {
-      topWnd.BrowserUI.showPanel("addons-container");
-      function showOptions()
-      {
-        if (!topWnd.ExtensionsView.getElementForAddon(Utils.addonID))
-          Utils.runAsync(showOptions);
-        else
-          topWnd.ExtensionsView.showOptions(Utils.addonID);
-      }
-      showOptions();
+      backgroundPage.openOptions();
     }
   }
-  else
-    UI.openFiltersDialog();
-}
+
+  function updateToggleButton(feature, isEnabled)
+  {
+    var button = document.getElementById("toggle-" + feature);
+    button.className = isEnabled ? "disable" : "enable";
+    button.textContent = i18n.getMessage(isEnabled ? "firstRun_action_disable" : "firstRun_action_enable");
+  }
+
+  document.addEventListener("DOMContentLoaded", loadScripts, false);
+})();