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";
 
-

[Thomas Greiner, 2013/07/26 14:22:55]

:)

 (function()
 {
   // 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 = E("activate-features");
-    var overView = E("can-do-more-overview");
-    var expandedView = E("can-do-more-expanded");
-
-    if(toggleButton.getAttribute("data-status") == "overview")

[Thomas Greiner, 2013/07/26 14:22:55]

Code Style:
if (...)

-    {
-      fade("out", overView, 750, true);

[Thomas Greiner, 2013/07/26 14:22:55]

750ms is a bit long. I'd prefer max 500ms.

-      setTimeout(function()
-      {
-        fade("in", expandedView, 750, true)
-      },750);
-
-      toggleButton.innerHTML = "show overview again";
-      toggleButton.setAttribute("data-status","expanded");
-
-    } 
-    else if (toggleButton.getAttribute("data-status") == "expanded")
-    {
-      fade("out", expandedView, 750, true);
-      setTimeout(function()
-      {
-          fade("in", overView, 750, true)
-      },750);
-
-      toggleButton.innerHTML = "activate features";
-      toggleButton.setAttribute("data-status", "overview");
-    }
-
-    // jQuery-style fading

[Thomas Greiner, 2013/07/26 14:22:55]

As discussed, CSS transitions should be used whenever possible.

-    function fade(type, el, duration, IEsupport) 
-    {
-      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() 
-      {
-        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 locale = require("utils").Utils.appLocale;
+    document.documentElement.setAttribute("lang", locale);
+    
+    // Set up URLs
     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)
     {
       E("dataCorruptionWarning").removeAttribute("hidden");
       setLinks("dataCorruptionWarning", Utils.getDocLink("knownIssuesChrome_filterstorage"));
     }
-
-    // Set up URL
-    setLinks("acceptableAdsExplanation", Utils.getDocLink("acceptable_ads_criteria"), openFilters);
 
     // 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);
 
-    // 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);
+    // You can click activate-feature or one of the icons to toggle the features area
+    E("activate-features").addEventListener("click", toggleFeature, false);
+    E("can-do-more-overview").addEventListener("click", toggleFeature, false);
 
     initSocialLinks();
+  }
+  
+  function toggleFeature()
+  { 
+    var canDoMore = E("can-do-more");
+    if (!canDoMore.classList.contains("expanded"))
+    { 
+      canDoMore.classList.add("expanded");
+    }
+    else if (canDoMore.classList.contains("expanded"))
+    {
+      canDoMore.classList.remove("expanded");
+    }

[Wladimir Palant, 2013/10/05 09:15:59]

Nit: One line of code is enough for the entire function now:

E("can-do-more").classList.toggle("expanded");

   }
 
   function isSubscriptionEnabled(featureSubscription)
   {
     return featureSubscription.url in FilterStorage.knownSubscriptions
       && !Subscription.fromURL(featureSubscription.url).disabled;
   }
 
   function setToggleSubscriptionButton(featureSubscription)
   {
     var feature = featureSubscription.feature;
 
     var element = E("toggle-" + feature);
     updateToggleButton(feature, isSubscriptionEnabled(featureSubscription));
     element.addEventListener("click", function(event)
     {
       var subscription = Subscription.fromURL(featureSubscription.url);
       if (isSubscriptionEnabled(featureSubscription))
         FilterStorage.removeSubscription(subscription);
       else
       {
         subscription.disabled = false;
         subscription.title = featureSubscription.title;
         subscription.homepage = featureSubscription.homepage;
         FilterStorage.addSubscription(subscription);
         if (!subscription.lastDownload)
           Synchronizer.execute(subscription);
       }
     }, 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");
     var glassPane = E("glass-pane");
     var popupMessageReceived = false;
 
     var popupMessageListener = function(event)
     {
@@ skipping 58 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);
 })();