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
@@ skipping 25 matching lines @@
     {
       feature: "tracking",
       homepage: "https://easylist.adblockplus.org/",
       title: "EasyPrivacy",
       url: "https://easylist-downloads.adblockplus.org/easyprivacy.txt"
     }
   ];
 
   function onDOMLoaded()
   {
-    // Set up URL

[Wladimir Palant, 2013/10/02 13:21:39]

URL => URLs

+    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
@@ skipping 16 matching lines @@
         }
       }
     }
     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);
+    E("activate-features").addEventListener("click", toggleFeature, false);
+    E("can-do-more-overview").addEventListener("click", toggleFeature, false);
 
     initSocialLinks();
   }
   
-  function showFeature()

[Wladimir Palant, 2013/10/02 13:21:39]

I think the proper name for this function would be toggleFeature().

+  function toggleFeature()
   { 
     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);

[Wladimir Palant, 2013/10/02 13:21:39]

JavaScript doesn't guarantee any particular order for timeouts - e.g. if the
browser doesn't get to run any code for a second, it can run all the callbacks
in random order. What you want should be done by adding a zero ms timeout inside
the previous one.

Note that display property not being animatable is behavior according to spec,
not a "bug" (and definitely not a JS one).

     }
     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);
     }

[Wladimir Palant, 2013/10/02 13:21:39]

We are using CSS transitions - why does this have to be so complicated? IMHO
adding/removing "expanded" class on the container should be sufficient to
trigger all the necessary transitions. The problem is apparently hiding the
element after fading out - display:none won't work for that as mentioned above.
Changing max-height seems to be working however, along these lines:

#can-do-more-expanded
{
  opacity: 0;
  max-height: 0;
  -moz-transition: opacity 0.5s ease-out, max-height 0.5s step-end;
}
#can-do-more.expanded > #can-do-more-expanded
{
  opacity: 1;
  max-height: 10000px;
  -moz-transition: opacity 0.5s step-end, max-height 0.5s step-end;
}

[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)
   {
@@ skipping 129 matching lines @@
   {
     var button = E("toggle-" + feature);
     if (isEnabled)
       button.classList.remove("off");
     else
       button.classList.add("off");
   }
 
   document.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();