Relocated icon and redesigned icon popup

stats.js

Index: stats.js
===================================================================
--- a/stats.js
+++ b/stats.js
@@ -21,6 +21,7 @@
   var require = backgroundPage.require;
   var getStats = require("stats").getStats;
   var FilterNotifier = require("filterNotifier").FilterNotifier;
+  var Prefs = require("prefs").Prefs;
   
   var currentTab;
   var shareURL = "https://adblockplus.org/";
@@ -68,8 +69,11 @@
   
   function onLoad()
   {
-    document.getElementById("shareBox").addEventListener("click", share, false);
-    document.getElementById("share").addEventListener("click", toggleShareBox, false);
+    document.getElementById("share-box").addEventListener("click", share, false);
+    var showIconNumber = document.getElementById("show-iconnumber");
+    showIconNumber.setAttribute("aria-checked", Prefs.show_iconnumber);

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

What does "aria" mean here?

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

It's a standard set of attributes to make custom elements more accessible (e.g.
label a div as a button which acts as one).

I know that we're currently not using this standard but I thought in this case -
since I needed a "checked" attribute anyway - it might be good to use
"aria-checked" instead of "data-checked".

More information:
(1) https://developer.mozilla.org/en-US/docs/Accessibility/ARIA
(2) http://www.w3.org/TR/wai-aria/states_and_properties

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

That's mostly because we are usually using standard widget where we don't have
to identify the role or state explicitly.

[Felix Dahlke, 2013/12/04 12:30:06]

Ah, I see. Well I would definitely prefer using standard controls, but this aria
stuff seems like the next best thing.

+    showIconNumber.addEventListener("click", toggleIconNumber, false);
+    document.querySelector("label[for='show-iconnumber']").addEventListener("click", toggleIconNumber, false);
     
     // Update stats
     ext.windows.getLastFocused(function(win)
@@ -81,7 +85,7 @@
 
         FilterNotifier.addListener(onNotify);
 
-        document.getElementById("statsContainer").removeAttribute("hidden");
+        document.getElementById("stats-container").removeAttribute("hidden");
       });
     });
   }
@@ -99,21 +103,15 @@
   
   function updateStats()
   {
-    var statsPage = document.getElementById("statsPage");
+    var statsPage = document.getElementById("stats-page");
     var blockedPage = getStats("blocked", currentTab).toLocaleString();
     i18n.setElementText(statsPage, "stats_label_page", [blockedPage]);
     
-    var statsTotal = document.getElementById("statsTotal");
+    var statsTotal = document.getElementById("stats-total");
     var blockedTotal = getStats("blocked").toLocaleString();
     i18n.setElementText(statsTotal, "stats_label_total", [blockedTotal]);
   }
   
-  function toggleShareBox(ev)
-  {
-    var shareBox = document.getElementById("shareBox");
-    shareBox.hidden = !shareBox.hidden;
-  }
-  
   function share(ev)
   {
     // Easter Egg
@@ -127,6 +125,12 @@
     ext.windows.getLastFocused(function(win) { win.openTab(url); });
   }
   
+  function toggleIconNumber()
+  {
+    Prefs.show_iconnumber = !Prefs.show_iconnumber;
+    document.getElementById("show-iconnumber").setAttribute("aria-checked", Prefs.show_iconnumber);
+  }
+  
   document.addEventListener("DOMContentLoaded", onLoad, false);
   window.addEventListener("unload", onUnload, false);
 })();