Relocated icon and redesigned icon popup

popup.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 24 matching lines @@
     {
       if (!/^https?:\/\//.exec(tab.url))
         document.body.classList.add("local");
     });
   });
   
   // Attach event listeners
   document.getElementById("enabled").addEventListener("click", toggleEnabled, false);
   document.getElementById("clickhide").addEventListener("click", activateClickHide, false);
   document.getElementById("clickhide-cancel").addEventListener("click", cancelClickHide, false);
   document.getElementById("options").addEventListener("click", function()

[Felix Dahlke, 2013/12/02 15:45:58]

Why not just |.addEventListener("click", openOptions, false);|?

[Thomas Greiner, 2013/12/03 12:06:05]

I try to avoid passing event parameters on to external functions that are not
solely used as event listeners. Might be an unnecessary optimization, though, so
I changed it now.

[Wladimir Palant, 2013/12/03 12:55:43]

Actually correct here - otherwise the event will be passed as callback parameter
and cause an exception.

[Thomas Greiner, 2013/12/04 10:44:50]

Done.

   {
     openOptions();
   }, false);
   
   // Set up collapsing of menu items
   var collapsers = document.getElementsByClassName("collapse");
   for (var i = 0; i < collapsers.length; i++)
   {
-    collapsers[i].addEventListener("click", toggleCollapse.bind(collapsers[i]), true);

[Felix Dahlke, 2013/12/02 15:45:58]

Nit: Wouldn't hurt to assign collapsers[i] to a temp here, since it's used a
lot.

[Thomas Greiner, 2013/12/03 12:06:05]

Done.

[Wladimir Palant, 2013/12/03 12:55:43]

Better solution - add toggleCollapse as callback without binding it to a
particular node, use event.currentTarget to get the node.

Also, any particular reason why the last parameter isn't false?

[Thomas Greiner, 2013/12/04 10:44:50]

Done.
No, not anymore.

-    if (Prefs[collapsers[i].dataset.option])
-      document.getElementById(collapsers[i].dataset.collapsable).classList.add("collapsed");

[Wladimir Palant, 2013/12/03 12:55:43]

Isn't the logic reversed here? I think it should be collapsed if the pref is
false - at least the way that pref is called right now.

[Thomas Greiner, 2013/12/04 10:44:50]

Done.

+    var collapser = collapsers[i];
+    collapser.addEventListener("click", toggleCollapse, false);
+    if (!Prefs[collapser.dataset.option])
+      document.getElementById(collapser.dataset.collapsable).classList.add("collapsed");
   }
-
+  
   // Ask content script whether clickhide is active. If so, show cancel button.
   // If that isn't the case, ask background.html whether it has cached filters. If so,
   // ask the user whether she wants those filters.
   // Otherwise, we are in default state.
   ext.windows.getLastFocused(function(win)
   {
     win.getActiveTab(function(t)
     {
       tab = t;
       document.getElementById("enabled").classList.toggle("off", isWhitelisted(tab.url));
-
+      
       tab.sendMessage({type: "get-clickhide-state"}, function(response)
       {
         document.body.classList.toggle("clickhide-active", response.active);
       });
     });
   });
 }
 window.addEventListener("DOMContentLoaded", init, false);
 
 function toggleEnabled()
 {
   var enabledButton = document.getElementById("enabled")
-  var checked = enabledButton.classList.contains("off");

[Wladimir Palant, 2013/12/03 12:55:43]

classList.toggle() returns the new value - no need to check the value and toggle
separately. How about:

var disabled = enabledButton.classList.toggle("off");
if (disabled)
  ...
else
  ...

[Thomas Greiner, 2013/12/04 10:44:50]

Done.

-  if (checked)
+  var disabled = enabledButton.classList.toggle("off");
+  if (disabled)
+  {
+    var host = extractHostFromURL(tab.url).replace(/^www\./, "");
+    var filter = Filter.fromText("@@||" + host + "^$document");
+    if (filter.subscriptions.length && filter.disabled)
+      filter.disabled = false;
+    else
+    {
+      filter.disabled = false;
+      FilterStorage.addFilter(filter);
+    }
+  }
+  else
   {
     // Remove any exception rules applying to this URL
     var filter = isWhitelisted(tab.url);
     while (filter)
     {
       FilterStorage.removeFilter(filter);
       if (filter.subscriptions.length)
         filter.disabled = true;
       filter = isWhitelisted(tab.url);
     }
   }
-  else
-  {
-    var host = extractHostFromURL(tab.url).replace(/^www\./, "");
-    var filter = Filter.fromText("@@||" + host + "^$document");
-    if (filter.subscriptions.length && filter.disabled)
-      filter.disabled = false;
-    else
-    {
-      filter.disabled = false;
-      FilterStorage.addFilter(filter);
-    }
-  }
-
-  enabledButton.classList.toggle("off");
+  
   refreshIconAndContextMenu(tab);
 }
 
 function activateClickHide()
 {
   document.body.classList.add("clickhide-active");
   tab.sendMessage({type: "clickhide-activate"});
-
+  
   // Close the popup after a few seconds, so user doesn't have to
   activateClickHide.timeout = window.setTimeout(window.close, 5000);
 }
 
 function cancelClickHide()
 {
   if (activateClickHide.timeout)
   {
     window.clearTimeout(activateClickHide.timeout);
     activateClickHide.timeout = null;
   }
   document.body.classList.remove("clickhide-active");
   tab.sendMessage({type: "clickhide-deactivate"});
 }
 
-function toggleCollapse(ev)

[Felix Dahlke, 2013/12/02 15:45:58]

The parameter is unused, might as well get rid of it.

[Thomas Greiner, 2013/12/03 12:06:05]

Done.

[Wladimir Palant, 2013/12/03 12:55:43]

As I said, it's better to use that parameter and replace this by
event.currentTarget. Btw, the canonical name for that parameter is event.

[Thomas Greiner, 2013/12/04 10:44:50]

Done.

+function toggleCollapse(event)
 {
-  Prefs[this.dataset.option] = !Prefs[this.dataset.option];
-  this.parentNode.classList.toggle("collapsed");
+  var collapser = event.currentTarget;
+  Prefs[collapser.dataset.option] = !Prefs[collapser.dataset.option];
+  collapser.parentNode.classList.toggle("collapsed");
 }