adblockpluschrome: Open share page in lightbox

firstRun.js

 var backgroundPage = chrome.extension.getBackgroundPage();
 var require = backgroundPage.require;
 var Prefs = require("prefs").Prefs;
 var Utils = require("utils").Utils;
 
-function openSharePopup(network)
+function openSharePopup(url)
 {
-  $.fancybox.open([{
-    href: getDocLink(network),

[Wladimir Palant, 2012/10/24 09:02:26]

We need to pass the variant parameter as well, otherwise we won't be able to
track how the different variants of the first-run page perform.

[Felix Dahlke, 2012/10/24 14:55:01]

Done.

-    type: "iframe",
-    width: 546,
-    height: 546,
-    padding: 0,
-    iframe: {
-      scrolling: "no"
-    }
-  }]);
+  var iframe = document.getElementById("share-popup");
+  var glassPane = document.getElementById("glass-pane");
+
+  var popupMessageListener = function(event)
+  {
+    if (event.origin !== url)
+      return;
+
+    console.log(event);

[Wladimir Palant, 2012/10/25 13:31:04]

Debug code?

+    iframe.width = event.data.width;
+    iframe.height = event.data.height;
+    window.removeEventListener("message", popupMessageListener);
+  };
+  window.addEventListener("message", popupMessageListener, false);
+
+  var popupLoadListener = function()
+  {
+    iframe.className = "visible";
+
+    var popupCloseListener = function()
+    {
+      iframe.className = glassPane.className = "";
+      document.removeEventListener("click", popupCloseListener);
+    };
+    document.addEventListener("click", popupCloseListener, false);
+    iframe.removeEventListener("load", popupLoadListener);
+  };
+  iframe.addEventListener("load", popupLoadListener, false);
+
+  iframe.src = url;
+  glassPane.className = "visible";
 }
 
-function initSocialLinks()
+function initSocialLinks(variant)
 {
   var networks = ["twitter", "facebook"];
   networks.forEach(function(network)
   {
     var links = document.getElementsByClassName("share-" + network);
     for (var i = 0; i < links.length; i++)
-      links[i].onclick = openSharePopup.bind(undefined, network);

[Wladimir Palant, 2012/10/24 09:02:26]

Did I mention already that I don't like onfoo? ;)
Note that we should probably set href="#" and call preventDefault() on the event
- this makes sure that the styles are consistent and we don't have to put them
into firstRun.css explicitly.

[Felix Dahlke, 2012/10/24 14:55:01]

You're right, my bad.

+    {
+      links[i].addEventListener("click", function(e)
+      {
+        e.preventDefault();
+        openSharePopup(getDocLink("share-" + network) + "&variant=" + variant);
+      }, false);
+    }
   });
 }
 
 function init()
 {
   // Choose a share text variant randomly
   var variant = Math.floor(Math.random() * 2) + 1;
   document.documentElement.setAttribute("share-variant", variant);
 
   // Set up page title
   var titleId = (backgroundPage.isFirstRun ? "firstRun_title_install" : "firstRun_title_update");
   var pageTitle = i18n.getMessage(titleId);
   document.title = document.getElementById("title-main").textContent = pageTitle;
 
   // Only show changelog link on the update page
   if (backgroundPage.isFirstRun)
     document.getElementById("title-changelog").style.display = "none";
 
   // Set up URLs
   var versionId = chrome.app.getDetails().version.split(".").slice(0, 2).join("");
   setLinks("title-changelog", "https://adblockplus.org/releases/adblock-plus-" + versionId + "-for-google-chrome-released");
   setLinks("acceptableAdsExplanation", getDocLink("acceptable_ads", "criteria"),
       backgroundPage.openOptions);
 
-  initSocialLinks();
+  initSocialLinks(variant);
 
   var donateLink = document.getElementById("share-donate");
   donateLink.href = getDocLink("donate") + "&variant=" + variant;
 }
 window.addEventListener("load", init, false);
 
 function setLinks(id)
 {
   var element = document.getElementById(id);
   if (!element)
@@ skipping 14 matching lines @@
     }
   }
 }
 
 function getDocLink(page, anchor)
 {
   return Prefs.documentation_link
               .replace(/%LINK%/g, page)
               .replace(/%LANG%/g, Utils.appLocale) + (anchor ? "#" + anchor : "");
 }