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,250 @@
  * 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;
+
+  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.Utils = require("utils").Utils;
+      window.Prefs = require("prefs").Prefs;
+    }
+    
+    // Set up page title
+    var titleId = "firstRun_title_install";
+    if (userAgent == "chrome" && backgroundPage.isFirstRun
+      || userAgent == "firefox" && UI.firstRunDone)
+      titleId = "firstRun_title_update";
+    var pageTitle = i18n.getMessage(titleId);
+    document.title = document.getElementById("title-main").textContent = pageTitle;
 
-      let link = E("listHomepage");
-      link.setAttribute("href", subscription.homepage);
-      link.setAttribute("title", subscription.homepage);
+    shade = document.getElementById("shade");
+    shade.addEventListener("mouseover", scrollPage, false);
+    shade.addEventListener("mouseout", stopScroll, false);
 
-      E("listNameContainer").removeAttribute("hidden");
-      E("listNone").setAttribute("hidden", "true");
-      break;
+    if (userAgent == "firefox")
+    {
+      var typoSettings = document.createElement("script");
+      typoSettings.type = "application/x-javascript;version=1.7";
+      typoSettings.src = "typoSettings.js";
+      document.head.appendChild(typoSettings);
+
+      var toggleTypo = document.getElementById("toggle-typo");
+      updateToggleButton("typo", Prefs.correctTypos);
+      toggleTypo.addEventListener("click", function(event)
+      {
+        TypoActions.setEnabled(!Prefs.correctTypos);
+        updateToggleButton("typo", Prefs.correctTypos);
+      }, false);
+    }
+
+    var toggleMalware = document.getElementById("toggle-malware");
+    updateToggleButton("malware", false);
+    toggleMalware.addEventListener("click", function(event)
+    {
+      // TODO
+    }, false);
+
+    var toggleSocial = document.getElementById("toggle-social");
+    updateToggleButton("social", false);
+    toggleSocial.addEventListener("click", function(event)
+    {
+      // TODO
+    }, false);
+
+    var toggleTracking = document.getElementById("toggle-tracking");
+    updateToggleButton("tracking", false);
+    toggleTracking.addEventListener("click", function(event)
+    {
+      // TODO
+    }, false);
+
+    setLinks("acceptableAdsExplanation", getDocLink("acceptable_ads_criteria"), openFilters);
+
+    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 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 : "");
+  }
 
-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 (userAgent == "firefox")
+      UI.openFiltersDialog();
+    else if (userAgent == "chrome")
     {
-      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);
+})();