Relocated icon and redesigned icon popup

popup.js

Index: popup.js
===================================================================
--- a/popup.js
+++ b/popup.js
@@ -16,47 +16,70 @@
  */
 
 var backgroundPage = ext.backgroundPage.getWindow();
-var imports = ["require", "isWhitelisted", "extractHostFromURL", "refreshIconAndContextMenu"];
+var imports = ["require", "isWhitelisted", "extractHostFromURL", "refreshIconAndContextMenu", "openOptions"];

[Sebastian Noack, 2013/11/19 15:22:08]

I like that you have added openOptions to the imports, which made the wrapper
below obsolete. However you didn't removed it. So this import will be overridden
by "function openOptions() { backgroundPage.openOptions(); }".

[Thomas Greiner, 2013/11/26 17:50:51]

Done.

 for (var i = 0; i < imports.length; i++)
   window[imports[i]] = backgroundPage[imports[i]];
 
 var Filter = require("filterClasses").Filter;
 var FilterStorage = require("filterStorage").FilterStorage;
+var Prefs = require("prefs").Prefs;
 
 var tab = null;
 
 function init()
 {
+  // Mark page as local to hide non-relevant elements
+  ext.windows.getLastFocused(function(win)
+  {
+    win.getActiveTab(function(tab)
+    {
+      if (!/^https?:\/\//.exec(tab.url))
+        document.body.classList.add("local");
+    });
+  });
+  
   // Attach event listeners
-  $("#enabled").click(toggleEnabled);
-  $("#clickHideButton").click(activateClickHide);
-  $("#cancelButton").click(cancelClickHide);
-  $("#optionsButton").click(openOptions);
+  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()
+  {
+    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);
+    if (Prefs[collapsers[i].dataset.option])
+      document.getElementById(collapsers[i].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) {
+  ext.windows.getLastFocused(function(win)
+  {
+    win.getActiveTab(function(t)
+    {
       tab = t;
-      document.getElementById("enabled").checked = !isWhitelisted(tab.url);
-      document.getElementById("enabledCheckboxAndLabel").style.display = "block";
+      document.getElementById("enabled").classList.toggle("off", isWhitelisted(tab.url));
 
-      tab.sendMessage({type: "get-clickhide-state"}, function(response) {
-        if(response.active)
-          clickHideActiveStuff();
-        else
-          clickHideInactiveStuff();
+      tab.sendMessage({type: "get-clickhide-state"}, function(response)
+      {
+        document.body.classList.toggle("clickhide-active", response.active);
       });
     });
   });
 }
-$(init);
+window.addEventListener("DOMContentLoaded", init, false);
 
 function toggleEnabled()
 {
-  var checked = document.getElementById("enabled").checked;
+  var enabledButton = document.getElementById("enabled")
+  var checked = enabledButton.classList.contains("off");
   if (checked)
   {
     // Remove any exception rules applying to this URL
@@ -82,12 +105,13 @@
     }
   }
 
+  enabledButton.classList.toggle("off");
   refreshIconAndContextMenu(tab);
 }
 
 function activateClickHide()
 {
-  clickHideActiveStuff();
+  document.body.classList.add("clickhide-active");
   tab.sendMessage({type: "clickhide-activate"});
 
   // Close the popup after a few seconds, so user doesn't have to
@@ -101,7 +125,7 @@
     window.clearTimeout(activateClickHide.timeout);
     activateClickHide.timeout = null;
   }
-  clickHideInactiveStuff();
+  document.body.classList.remove("clickhide-active");
   tab.sendMessage({type: "clickhide-deactivate"});
 }
 
@@ -110,16 +134,8 @@
   backgroundPage.openOptions();
 }
 
-function clickHideActiveStuff()
+function toggleCollapse(ev)
 {
-  document.getElementById("enabledCheckboxAndLabel").style.display = "none";
-  document.getElementById("clickHideInactiveStuff").style.display = "none";
-  document.getElementById("clickHideActiveStuff").style.display = "inherit";
+  Prefs[this.dataset.option] = !Prefs[this.dataset.option];
+  this.parentNode.classList.toggle("collapsed");
 }
-
-function clickHideInactiveStuff()
-{
-  document.getElementById("enabledCheckboxAndLabel").style.display = "block";
-  document.getElementById("clickHideActiveStuff").style.display = "none";
-  document.getElementById("clickHideInactiveStuff").style.display = "inherit";
-}