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
@@ skipping 53 matching lines @@
         value = i18n.getMessage("stats_share_message", blockedCount);
       querystring.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
     }
     return url + "?" + querystring.join("&");
   }
   
   function onLoad()
   {
     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.setAttribute("aria-checked", Prefs.show_statsinicon);
     showIconNumber.addEventListener("click", toggleIconNumber, false);
     document.querySelector("label[for='show-iconnumber']").addEventListener("click", toggleIconNumber, false);
     
     // Update stats
     ext.windows.getLastFocused(function(win)
     {
       win.getActiveTab(function(tab)
       {
         currentTab = tab;
         updateStats();
@@ skipping 35 matching lines @@
       blocked = blocked.toLocaleString();
     else
       blocked = i18n.getMessage("stats_over", (9000).toLocaleString());
     
     var url = createShareLink(ev.target.dataset.social, blocked);
     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);
+    Prefs.show_statsinicon = !Prefs.show_statsinicon;
+    document.getElementById("show-iconnumber").setAttribute("aria-checked", Prefs.show_statsinicon);
   }
   
   document.addEventListener("DOMContentLoaded", onLoad, false);
   window.addEventListener("unload", onUnload, false);
 })();