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 scrollTimer;
-
   // 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 onDOMLoaded()
   {
+    var donateLink = E("donate");
+    donateLink.href = Utils.getDocLink("donate");
+    
+    // Set up URL
+    setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criteria"), openFilters);
+    setLinks("share-headline", Utils.getDocLink("contribute"));
+    
     // 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);
-
     // 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);
-    document.addEventListener("scroll", onScroll, false);
-
-    onWindowResize();
+    // You can click activate-feature or one of the icons to toggle the features area
+    E("activate-features").addEventListener("click", showFeature, false);
+    E("can-do-more-overview").addEventListener("click", showFeature, false);
 
     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";
-  }
-
-  function onWindowResize()
-  {
-    onScroll();
-  }
-
-  function toggleTypoCorrectionEnabled()
-  {
-    Prefs.correctTypos = !Prefs.correctTypos;
+  
+  function showFeature()
+  { 
+    var activateFeatures = E("activate-features");
+    var canDoMoreOverview = E("can-do-more-overview");
+    var canDoMoreExpanded = E("can-do-more-expanded");
+    var activateFeaturesLabel = E("activate-features-label");
+    
+    if (activateFeatures.getAttribute("class") == "overview")

[Thomas Greiner, 2013/08/22 10:42:12]

You can use classList.contains instead.

+    {   
+      canDoMoreOverview.classList.remove("fade-in");
+      canDoMoreOverview.classList.add("fade-out");
+      activateFeatures.classList.remove("overview");
+      activateFeatures.classList.add("expanded");

[Thomas Greiner, 2013/08/22 10:42:12]

Why don't you simply add the class "expanded" to #can-do-more when it's expanded
and remove it when it's not?

By doing that you should be able to get rid of many of those classList.add and
classList.remove calls on #can-do-more-expanded, #can-do-more-overview and
#activate-features.

+            
+      
+      /* Cross Browser Text change */
+      if ((activateFeaturesLabel.textContent) && (typeof (activateFeaturesLabel.textContent) != "undefined")) 

[Thomas Greiner, 2013/08/22 10:42:12]

No need for checking it twice. Checking
if ("textContent" in activateFeaturesLabel)
should be sufficient.

Doesn't require to be annotated.

+      {
+        activateFeaturesLabel.textContent = "show overview again";

[Thomas Greiner, 2013/08/22 10:42:12]

Should be translatable.

+      } else 
+      {
+        activateFeaturesLabel.innerText = "show overview again";

[Thomas Greiner, 2013/08/22 10:42:12]

Should be translatable.

+      }
+      activateFeatures.setAttribute("data-status","expanded");
+      
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.add("hide");
+        canDoMoreExpanded.classList.add("show");
+        canDoMoreExpanded.classList.add("can-do-more-expanded-higher");
+      },500);
+      
+      /* Next timeout has to be done because of an js bug. 
+       * If you set "display: block" and "opacity: 1" 
+       * at the same time the content would be shown 
+       * directly without any transition. 
+       * With the following timeout the opacity 
+       * transition works correctly 
+       */   
+      setTimeout(function()
+      {
+        canDoMoreExpanded.classList.add("fade-in");
+      },520);
+    }
+    else if (activateFeatures.getAttribute("class") == "expanded")
+    {
+      canDoMoreExpanded.classList.remove("fade-in");
+      activateFeatures.classList.remove("expanded");
+      activateFeatures.classList.add("overview");
+      
+      /* Cross Browser Text change */
+      if ((activateFeaturesLabel.textContent) && (typeof (activateFeaturesLabel.textContent) != "undefined")) 

[Thomas Greiner, 2013/08/22 10:42:12]

No need for checking it twice. Checking
if ("textContent" in activateFeaturesLabel)
should be sufficient.

Doesn't require to be annotated.

+      {
+        activateFeaturesLabel.textContent = "activate features";

[Thomas Greiner, 2013/08/22 10:42:12]

Should be translatable.

+      } else 
+      {
+        activateFeaturesLabel.innerText = "activate features";

[Thomas Greiner, 2013/08/22 10:42:12]

Should be translatable.

+      }
+      activateFeatures.setAttribute("data-status","overview");
+      
+      setTimeout(function()
+      { 
+        canDoMoreExpanded.classList.remove("show");
+        canDoMoreOverview.classList.remove("hide");
+      },500);
+        
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.add("fade-in");
+        canDoMoreOverview.classList.remove("fade-out");
+      },520);
+    }
   }
 
   function isSubscriptionEnabled(featureSubscription)
   {
     return featureSubscription.url in FilterStorage.knownSubscriptions
       && !Subscription.fromURL(featureSubscription.url).disabled;
   }
 
   function setToggleSubscriptionButton(featureSubscription)
   {
@@ skipping 104 matching lines @@
     {
       event.preventDefault();
       openSharePopup(Utils.getDocLink(event.target.id));
     }
   }
 
   function setLinks(id)
   {
     var element = E(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);";
@@ skipping 16 matching lines @@
   {
     var button = E("toggle-" + feature);
     if (isEnabled)
       button.classList.remove("off");
     else
       button.classList.add("off");
   }
 
   document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();