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");
+    
+    setLinks("share-headline", Utils.getDocLink("contribute"));

[Thomas Greiner, 2013/08/07 14:17:54]

Please move the setLinks call from lines 58-59 here so that they are all in the
same location.

+    
     // 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

[Thomas Greiner, 2013/08/07 14:17:54]

Start comment with a capital letter.

+    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");
+    var arrowLeft = E("arrow-left");
+    var arrowRight = E("arrow-right");

[Thomas Greiner, 2013/08/07 14:17:54]

Instead of changing classes of all those elements you should rather just change
the class of one common container element.

This should also allow you to get rid of some unnecessary ID attributes.

+    
+    if (activateFeatures.getAttribute("data-status") == "overview")

[Thomas Greiner, 2013/08/07 14:17:54]

You should be able to get rid of the data-status attribute if you use a
container element's class name to determine that.

+    {   
+      canDoMoreOverview.classList.remove("opacity-one");
+      canDoMoreOverview.classList.add("opacity-zero");
+      arrowLeft.classList.remove("arrow-down");
+      arrowLeft.classList.add("arrow-up");
+      arrowRight.classList.remove("arrow-down");
+      arrowRight.classList.add("arrow-up");
+      activateFeaturesLabel.innerHTML = "show overview again";

[Thomas Greiner, 2013/08/07 14:17:54]

Don't use innerHTML. Instead you can use innerText or textContent (depending on
which one can be used).

+      activateFeatures.setAttribute("data-status","expanded");
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.add("display-none");
+        canDoMoreExpanded.classList.add("display-block");
+        canDoMoreExpanded.classList.add("can-do-more-expanded-higher");
+      },500);
+      
+      /* Next timeout has to be done because of an js bug. 

[Thomas Greiner, 2013/08/07 14:17:54]

If it's a bug you should also add the URL to the bug report.

+       * 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("opacity-one");
+      },520);
+    }
+    else if (activateFeatures.getAttribute("data-status") == "expanded")
+    {
+      canDoMoreExpanded.classList.remove("opacity-one");
+      arrowLeft.classList.remove("arrow-up");
+      arrowLeft.classList.add("arrow-down");
+      arrowRight.classList.remove("arrow-up");
+      arrowRight.classList.add("arrow-down");
+      activateFeaturesLabel.innerHTML = "activate features";

[Thomas Greiner, 2013/08/07 14:17:54]

Don't use innerHTML.

+      activateFeatures.setAttribute("data-status","overview");
+      setTimeout(function()
+      { 
+        canDoMoreExpanded.classList.remove("display-block");
+        canDoMoreOverview.classList.remove("display-none");
+      },500);
+        
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.add("opacity-one");
+        canDoMoreOverview.classList.remove("opacity-zero");
+      },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);
 })();