first run page redesign

chrome/content/ui/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/>.
  */
 
 "use strict";
 
+
 (function()
 {
-  var shade;
+  //var shade;

[Thomas Greiner, 2013/07/15 17:37:01]

Remove unnecessary comments.

   var scrollTimer;

[Thomas Greiner, 2013/07/15 17:37:01]

Not needed anymore.

 
   // Load subscriptions for features
   var featureSubscriptions = [
     {
       feature: "malware",
       homepage: "http://malwaredomains.com/",
       title: "Malware Domains",
       url: "https://easylist-downloads.adblockplus.org/malwaredomains_full.txt"
     },
     {
       feature: "social",
       homepage: "https://www.fanboy.co.nz/",
       title: "Fanboy's Social Blocking List",
       url: "https://easylist-downloads.adblockplus.org/fanboy-social.txt"
     },
     {
       feature: "tracking",
       homepage: "https://easylist.adblockplus.org/",
       title: "EasyPrivacy",
       url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
     }
   ];
 
+
+  function showFeature()
+  {
+    var toggleButton = document.getElementById('activate-features');
+    var overView = document.getElementById('can-do-more-overview');
+    var expandedView = document.getElementById('can-do-more-expanded');
+
+    if(toggleButton.getAttribute("status")=="overview")
+    {
+      fade('out', overView, 750, true);
+      setTimeout(function(){fade('in', expandedView, 750, true)},750);
+      toggleButton.innerHTML ="show overview again";

[Thomas Greiner, 2013/07/15 17:37:01]

Code Style:
toggleButton.innerHTML = "show overview again";

+      toggleButton.setAttribute("status","expanded");
+
+    } else if(toggleButton.getAttribute("status")=="expanded")

[Thomas Greiner, 2013/07/15 17:37:01]

Code Style:
}
else if (toggleButton.getAttribute("status") == "expanded")

+    {
+      fade('out', expandedView, 750, true);
+      setTimeout(function(){fade('in', overView, 750, true)},750);
+      toggleButton.innerHTML ='activate features';

[Thomas Greiner, 2013/07/15 17:37:01]

Code Style:
toggleButton.innerHTML = "activate features";

+      toggleButton.setAttribute("status","overview");

[Thomas Greiner, 2013/07/15 17:37:01]

Code Style: "status", "overview"

+    }
+
+    // jQuery-style fading
+    function fade(type, el, duration, IEsupport) {

[Thomas Greiner, 2013/07/15 17:37:01]

Why is duration a parameter if you only use 750?

+      var isIn     = (type == 'in'),
+        IE       = (IEsupport) ? IEsupport : false,
+        opacity  = isIn ? 0 : 1,
+        interval = 50,
+        gap      = interval / duration;
+        
+      if(isIn) {
+        el.style.display = 'block';
+        el.style.opacity = opacity;
+        if(IE) {
+          el.style.filter = 'alpha(opacity=' + opacity + ')';
+          el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')';
+        }
+      }
+      
+      function func() {

[Thomas Greiner, 2013/07/15 17:37:01]

Not a good name for this function.

+        opacity = isIn ? opacity + gap : opacity - gap; 
+        el.style.opacity = opacity;
+        if(IE) {
+          el.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
+          el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')';
+        }
+        if(opacity <= 0 || opacity >= 1) { window.clearInterval(fading); }
+        if(opacity <= 0) { el.style.display = "none"; }
+      }
+      var fading = window.setInterval(func, interval);
+    }
+  }
+
   function onDOMLoaded()
   {
+      var donateLink = document.getElementById("donate");
+      donateLink.href = Utils.getDocLink("donate");
     // Show warning if data corruption was detected
     if (typeof backgroundPage != "undefined" && backgroundPage.seenDataCorruption)
     {
       E("dataCorruptionWarning").removeAttribute("hidden");
       setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filterstorage"));
     }
 
     // Set up URL
     setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criteria"), openFilters);
 
-    shade = E("shade");
-    shade.addEventListener("mouseover", scrollPage, false);
-    shade.addEventListener("mouseout", stopScroll, false);
+    //shade = E("shade");
+    //shade.addEventListener("mouseover", scrollPage, false);
+    //shade.addEventListener("mouseout", stopScroll, false);
 
     // Set up feature buttons linked to subscriptions
     featureSubscriptions.forEach(setToggleSubscriptionButton);
     var filterListener = function(action)
     {
       if (/^subscription\.(added|removed|disabled)$/.test(action))
       {
         for (var i = 0; i < featureSubscriptions.length; i++)
         {
           var featureSubscription = featureSubscriptions[i];
           updateToggleButton(featureSubscription.feature, isSubscriptionEnabled(featureSubscription));
         }
       }
     }
     FilterNotifier.addListener(filterListener);
     window.addEventListener("unload", function(event)
     {
       FilterNotifier.removeListener(filterListener);
     }, false);
 
     window.addEventListener("resize", onWindowResize, false);

[Thomas Greiner, 2013/07/15 17:37:01]

Not needed anymore.

     document.addEventListener("scroll", onScroll, false);
 
+    var activateFeaturesButton = document.getElementById('activate-features');
+    activateFeaturesButton.addEventListener("click", showFeature, false);
+
     onWindowResize();
 
     initSocialLinks();
   }
 
   function onScroll()
   {
     var currentHeight = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight;
-    shade.style.opacity = (document.documentElement.scrollHeight == currentHeight) ? "0.0" : "0.5";
+    //shade.style.opacity = (document.documentElement.scrollHeight == currentHeight) ? "0.0" : "0.5";
   }
 
   function onWindowResize()

[Thomas Greiner, 2013/07/15 17:37:01]

Not needed anymore.

   {
     onScroll();
   }
 
   function toggleTypoCorrectionEnabled()

[Thomas Greiner, 2013/07/15 17:37:01]

Not needed anymore.

   {
     Prefs.correctTypos = !Prefs.correctTypos;
   }
 
   function isSubscriptionEnabled(featureSubscription)
   {
     return featureSubscription.url in FilterStorage.knownSubscriptions
       && !Subscription.fromURL(featureSubscription.url).disabled;
   }
 
@@ skipping 93 matching lines @@
     var networks = ["twitter", "facebook", "gplus"];
     networks.forEach(function(network)
     {
       var link = E("share-" + network);
       link.addEventListener("click", onSocialLinkClick, false);
     });
   }
 
   function onSocialLinkClick(event)
   {
-    // Don't open the share page if the sharing script would be blocked

[Thomas Greiner, 2013/07/15 17:37:01]

Don't remove the comment here. It's not obvious what we're doing here.

     var filter = defaultMatcher.matchesAny(event.target.getAttribute("data-script"), "SCRIPT", "adblockplus.org", true);
     if (!(filter instanceof BlockingFilter))
     {
       event.preventDefault();
-      openSharePopup(Utils.getDocLink(event.target.id));
+      openSharePopup(Utils.getDocLink(event.target.parentNode.id));
     }
   }
 
   function setLinks(id)
   {
     var element = E(id);
     if (!element)
       return;
 
     var links = element.getElementsByTagName("a");
@@ skipping 26 matching lines @@
   {
     var button = E("toggle-" + feature);
     if (isEnabled)
       button.classList.remove("off");
     else
       button.classList.add("off");
   }
 
   document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();