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"
+  "first-run-feature-betterSurfing": "Enjoy the web without annoying ads",
+  "first-run-feature-videoAds": "Watch videos without commercial interruptions",
+  "first-run-features-heading": "With Adblock Plus you can:",
+  "first-run-share1": "Do you think Adblock Plus is worth sharing? Please do!",
+  "first-run-share2": "Adblock Plus is free and open source. Please support us:",
+  "first-run-share2-donate": "Donate",
+  "first-run-share2-or": "or",
+  "first-run-title-install": "Adblock Plus has been installed"
 };
 
 var AdblockPlus = {
   require: function()
   {
     return {
       Filter: {
         fromText: function()
         {
           return {
@@ skipping 17 matching lines @@
     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);
+function addListener(object, type, listener)
+{
+  // all IE versions require the use of attachEvent for message event to work
+  if (type != "message" && "addEventListener" in object)
+    object.addEventListener(type, listener, false);
   else
   {
     object.attachEvent("on" + type, function()
     {
       listener(event);
     });
   }
 }
 
 function removeListener(object, type, listener)
 {
-  if ("removeEventListener" in object)
+  // all IE versions require the use of detachEvent for message event to work
+  if (type != "message" && "removeEventListener" in object)
     object.removeEventListener(type, listener);
   else
-    object.detachEvent(type, listener);
+    object.detachEvent("on" + type, listener);

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

Spotted and fix this.

 }
 
 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);
+    removeListener(window, "message", 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.

+  addListener(window, "message", popupMessageListener);
+
+  var listenCount = 0;
   var popupLoadListener = function()
   {
     if (popupMessageReceived)
     {
       iframe.className = "visible";
 
       var popupCloseListener = function()
       {
         iframe.className = glassPane.className = "";
         removeListener(document, "click", popupCloseListener);
       };
-      addListener(document, "click", popupCloseListener, false);
+      addListener(document, "click", popupCloseListener);
     }
     else
     {
-      if (timeout > 2000)
+      // wait up to 5 seconds and close popup if no message received
+      if (++listenCount > 20)
       {
         glassPane.className = "";
         removeListener(window, "message", popupMessageListener);
       }
       else
-      {
-        timeout *= 2;
-        setTimeout(popupLoadListener, timeout);
-      }
+        setTimeout(popupLoadListener, 250);
     }
 
     removeListener(iframe, "load", popupLoadListener);
   };
-  addListener(iframe, "load", popupLoadListener, false);
+  addListener(iframe, "load", popupLoadListener);
 
   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"
+    "title-main": "first-run-title-install",
+    "i18n-features-heading": "first-run-features-heading",
+    "i18n-feature-betterSurfing": "first-run-feature-betterSurfing",
+    "i18n-feature-videoAds": "first-run-feature-videoAds",
+    "share-text1": "first-run-share1",
+    "share-text2": "first-run-share2",
+    "share-donate": "first-run-share2-donate",
+    "share2-connection": "first-run-share2-or"
   };
 
-  document.title = AdblockPlus.getMessage("firstRun_title_install");
+  document.title = AdblockPlus.getMessage("first-run-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);
+addListener(window, "load", init);