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

[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);
 
     // 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

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