first run page redesign

chrome/content/ui/firstRun.js

Index: chrome/content/ui/firstRun.js
===================================================================
--- a/chrome/content/ui/firstRun.js
+++ b/chrome/content/ui/firstRun.js
@@ -19,9 +19,6 @@
 
 (function()
 {
-  var shade;
-  var scrollTimer;
-
   // Load subscriptions for features
   var featureSubscriptions = [
     {
@@ -46,6 +43,19 @@
 
   function onDOMLoaded()
   {
+    var locale = require("utils").Utils.appLocale;
+    document.documentElement.setAttribute("lang", locale);
+    
+    // Set up URL
+    var donateLink = E("donate");
+    donateLink.href = Utils.getDocLink("donate");
+    
+    var contributors = E("contributors");
+    contributors.href = Utils.getDocLink("contributors");
+    
+    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)
     {
@@ -53,13 +63,6 @@
       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)
@@ -79,28 +82,58 @@
       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 canDoMore = E("can-do-more");
+    var canDoMoreOverview = E("can-do-more-overview");
+    var canDoMoreExpanded = E("can-do-more-expanded");
+    
+    if (!canDoMore.classList.contains("expanded"))
+    { 
+      canDoMore.classList.add("expanded");
+      canDoMoreOverview.classList.add("fade");
+      
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.add("hide");
+        canDoMoreExpanded.classList.remove("hide");
+      },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.remove("fade");
+      },520);
+    }
+    else if (canDoMore.classList.contains("expanded"))
+    {
+      canDoMore.classList.remove("expanded");
+      canDoMoreExpanded.classList.add("fade");
+      
+      setTimeout(function()
+      { 
+        canDoMoreExpanded.classList.add("hide");
+        canDoMoreOverview.classList.remove("hide");
+      },500);
+        
+      setTimeout(function()
+      {
+        canDoMoreOverview.classList.remove("fade");
+      },520);
+    }
   }
 
   function isSubscriptionEnabled(featureSubscription)
@@ -132,23 +165,6 @@
     }, false);
   }
 
-  function scrollPage()
-  {
-    if (scrollTimer)
-      stopScroll();
-
-    scrollTimer = setInterval(function()
-    {
-      window.scrollBy(0, 5);
-    }, 20);
-  }
-
-  function stopScroll()
-  {
-    clearTimeout(scrollTimer);
-    scrollTimer = null;
-  }
-
   function openSharePopup(url)
   {
     var iframe = E("share-popup");
@@ -225,9 +241,12 @@
   {
     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")