Relocated icon and redesigned icon popup

stats.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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 (function()
 {
   var backgroundPage = chrome.extension.getBackgroundPage();
   var require = backgroundPage.require;
   var getStats = require("stats").getStats;
   var FilterNotifier = require("filterNotifier").FilterNotifier;
+  var Prefs = require("prefs").Prefs;
   
   var currentTabId;
   var shareURL = "https://adblockplus.org/";
   
   var messageMark = {};
   var shareLinks = {
     facebook: ["https://www.facebook.com/dialog/feed", {
       app_id: "475542399197328",
       link: shareURL,
       redirect_uri: "https://www.facebook.com/",
@@ skipping 27 matching lines @@
       var value = params[key];
       if (value == messageMark)
         value = i18n.getMessage("stats_share_message", blockedCount);
       querystring.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
     }
     return url + "?" + querystring.join("&");
   }
   
   function onLoad()
   {
-    document.getElementById("shareBox").addEventListener("click", share, false);
+    document.getElementById("share-box").addEventListener("click", share, false);
     document.getElementById("share").addEventListener("click", toggleShareBox, false);
+    var showIconNumber = document.getElementById("show-iconnumber");
+    showIconNumber.setAttribute("aria-checked", Prefs.show_iconnumber);
+    showIconNumber.addEventListener("click", toggleIconNumber, false);
+    document.querySelector("label[for='show-iconnumber']").addEventListener("click", toggleIconNumber, false);
     
     // Update stats
     chrome.tabs.query({
       active: true,
       windowId: chrome.windows.WINDOW_ID_CURRENT
     }, function(tabs)
     {
       if (tabs.length > 0)
       {
         currentTabId = tabs[0].id;
         updateStats();
         
         FilterNotifier.addListener(onNotify);
         
-        document.getElementById("statsContainer").removeAttribute("hidden");
+        document.getElementById("stats-container").removeAttribute("hidden");
       }
     });
   }
   
   function onUnload()
   {
     FilterNotifier.removeListener(onNotify);
   }
   
   function onNotify(action, item)
   {
     if (action == "filter.hitCount")
       updateStats();
   }
   
   function updateStats()
   {
-    var statsPage = document.getElementById("statsPage");
+    var statsPage = document.getElementById("stats-page");
     var blockedPage = getStats("blocked", currentTabId).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");
+    var shareBox = document.getElementById("share-box");
     shareBox.hidden = !shareBox.hidden;
   }
   
   function share(ev)
   {
     // Easter Egg
     var blocked = getStats("blocked");
     if (blocked <= 9000 || blocked >= 10000)
       blocked = blocked.toLocaleString();
     else
       blocked = i18n.getMessage("stats_over", (9000).toLocaleString());
     
     var url = createShareLink(ev.target.dataset.social, blocked);
     chrome.tabs.create({url: 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);
 })();