First-run page on Adblock Plus for IE

html/static/js/firstRun.js

+/*
+ * This file is part of Adblock Plus <http://adblockplus.org/>,
+ * Copyright (C) 2006-2013 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/>.
+ */
+
+/* Mock Start */
+var Messages = {
+  "firstRun_feature_betterSurfing": "Enjoy the web without annoying ads",
+  "firstRun_feature_videoAds": "Watch videos without commercial interruptions",
+  "firstRun_features_heading": "With Adblock Plus you can:",
+  "firstRun_share1": "Do you think Adblock Plus is worth sharing? Please do!",
+  "firstRun_share2": "Adblock Plus is free and open source. Please support us:",
+  "firstRun_share2_donate": "Donate",
+  "firstRun_share2_or": "or",
+  "firstRun_title_install": "Adblock Plus has been installed"
+};
+
+var AdblockPlus = {
+  require: function()
+  {
+    return {
+      Filter: {
+        fromText: function()
+        {
+          return {
+            matches: function()
+            {
+              return true;
+            }
+          };
+        }
+      },
+      Prefs: {
+        documentation_link: "https://adblockplus.org/redirect?link=%LINK%&lang=%LANG%"
+      },
+      Utils: {
+        appLocale: "en"
+      }
+    };
+  },
+  getMessage: function(key)
+  {
+    return Messages[key] || "[" + key + "]";
+  }
+};
+/* Mock End */
+
+var require = AdblockPlus.require;
+var Prefs = require("prefs").Prefs;
+var Utils = require("utils").Utils;
+var Filter = require("filterClasses").Filter;
+
+function addListener(object, type, listener, useCapture)

[Felix Dahlke, 2013/07/11 11:11:14]

Since you're always passing useCapture=false, I guess it doesn't need to be a
parameter. It wouldn't happen for attachEvent anyway.

[Thomas Greiner, 2013/07/12 10:52:52]

Done.

+{
+  if ("addEventListener" in object)
+    object.addEventListener(type, listener, useCapture);
+  else
+  {
+    object.attachEvent("on" + type, function()
+    {
+      listener(event);
+    });
+  }
+}
+
+function removeListener(object, type, listener)
+{
+  if ("removeEventListener" in object)
+    object.removeEventListener(type, listener);
+  else
+    object.detachEvent(type, listener);
+}
+
+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 data = JSON.parse(event.data);
+    iframe.width = data.width;
+    iframe.height = data.height;
+    popupMessageReceived = true;
+    // all IE versions require the use of detachEvent for message event to work
+    window.detachEvent("onmessage", popupMessageListener);
+  };
+  // all IE versions require the use of attachEvent for message event to work
+  window.attachEvent("onmessage", popupMessageListener);

[Felix Dahlke, 2013/07/11 11:11:14]

So you're not using addEventListener here because newer IE versions wouldn't
call attachEvent then, and it has to be attachEvent?

I'd prefer to handle that in addListener/removeListener. Roughly like this:

if (type == "message" && "attachEvent" in object)
  object.attachEvent(...);

[Thomas Greiner, 2013/07/12 10:52:52]

Done.

+
+  var timeout = 125;

[Felix Dahlke, 2013/07/11 11:11:14]

I think the timeout calculating here is a bit more complex than it has to be.
How about just waiting a couple of times for a fixed interval, and have it time
out after 2-4 seconds?

[Thomas Greiner, 2013/07/12 10:52:52]

Done.

+  var popupLoadListener = function()
+  {
+    if (popupMessageReceived)
+    {
+      iframe.className = "visible";
+
+      var popupCloseListener = function()
+      {
+        iframe.className = glassPane.className = "";
+        removeListener(document, "click", popupCloseListener);
+      };
+      addListener(document, "click", popupCloseListener, false);
+    }
+    else
+    {
+      if (timeout > 2000)
+      {
+        glassPane.className = "";
+        removeListener(window, "message", popupMessageListener);
+      }
+      else
+      {
+        timeout *= 2;
+        setTimeout(popupLoadListener, timeout);
+      }
+    }
+
+    removeListener(iframe, "load", popupLoadListener);
+  };
+  addListener(iframe, "load", popupLoadListener, false);
+
+  iframe.src = url;
+  glassPane.className = "visible";
+}
+
+function initSocialLinks(variant)
+{
+  // Share popup doesn't work in <IE9 so don't show it
+  if (/MSIE [6-8]/.test(navigator.appVersion))
+    return;
+
+  var networks = ["twitter", "facebook", "gplus"];
+  networks.forEach(function(network)
+  {
+    var link = document.getElementById("share-" + network + "-" + variant);
+    addListener(link, "click", function(e)
+    {
+      e.preventDefault();
+      openSharePopup(getDocLink("share-" + network) + "&variant=" + variant);
+    }, false);
+  });
+}
+
+function getDocLink(page)
+{
+  return Prefs.documentation_link
+              .replace(/%LINK%/g, page)
+              .replace(/%LANG%/g, Utils.appLocale);
+}
+
+function initTranslations()
+{
+  // Map message ID to HTML element ID
+  var mapping = {
+    "title-main": "firstRun_title_install",
+    "i18n-features-heading": "firstRun_features_heading",
+    "i18n-feature-betterSurfing": "firstRun_feature_betterSurfing",
+    "i18n-feature-videoAds": "firstRun_feature_videoAds",
+    "share-text1": "firstRun_share1",
+    "share-text2": "firstRun_share2",
+    "share-donate": "firstRun_share2_donate",
+    "share2-connection": "firstRun_share2_or"
+  };
+
+  document.title = AdblockPlus.getMessage("firstRun_title_install");
+  for (var i in mapping)
+  {
+    var element = document.getElementById(i);
+    element.innerText = AdblockPlus.getMessage(mapping[i]);
+  }
+}
+
+function init()
+{
+  // Choose a share text variant randomly
+  var variant = Math.floor(Math.random() * 2) + 1;
+  var classList = document.documentElement.className.split(" ");
+  classList.push("share-variant-" + variant);
+  document.documentElement.className = classList.join(" ");
+
+  initTranslations();
+  initSocialLinks(variant);
+
+  var donateLink = document.getElementById("share-donate");
+  donateLink.href = getDocLink("donate") + "&variant=" + variant;
+}
+
+addListener(window, "load", init, false);