this fixes #14

src/info.html

@@ -83,9 +83,11 @@ tr.unused {
 
 <h2 data-i18n="statsPageDetailedStats" id="detailed-stats"></h2>
 <div> 
+<select id="selectPageUrlsTemplate" style="display: none;">
+    <option value="all" data-i18n="statsPageDetailedAllPages"></option>
+    <option value="http://chromium-behind-the-scene/" data-i18n="statsPageDetailedBehindTheScenePage"></option>
+</select>
 <select id="selectPageUrls">
-<option value="all" data-i18n="statsPageDetailedAllPages"></option>
-<option id="selectPageUrlTemplate" value="http://chromium-behind-the-scene/" data-i18n="statsPageDetailedBehindTheScenePage"></option>
 </select>
 
 <h3 data-i18n="statsPageOverview"></h3>

src/js/info.js

@@ -68,16 +68,7 @@ function renderNumber(value) {
     if ( isNaN(value) ) {
         return '0';
     }
-    // TODO: localization
-    if ( +value > 1000 ) {
-        value = value.toString();
-        var i = value.length - 3;
-        while ( i > 0 ) {
-            value = value.slice(0, i) + ',' + value.slice(i);
-            i -= 3;
-        }
-    }
-    return value;
+    return value.toLocaleString();
 }
 
 /******************************************************************************/
@@ -110,13 +101,20 @@ var renderLocalized = function(id, map) {
 
 function renderPageUrls() {
     var onResponseReceived = function(r) {
-        var select = $('#selectPageUrls');
-
-        // One of the permanent entry will serve as a template
-        var optionTemplate = $('#selectPageUrlTemplate', select);
+        var i, n;
+        var select = uDom('#selectPageUrls');
 
         // Remove whatever was put there in a previous call
-        $(optionTemplate).nextAll().remove();
+        uDom('#selectPageUrls > option').remove();
+        var builtinOptions = uDom('#selectPageUrlsTemplate > option');
+        var n = builtinOptions.length;
+        for ( i = 0; i < n; i++ ) {
+            option = builtinOptions.at(i).clone();
+            if ( option.val() === targetUrl ) {
+                option.attr('selected', true);
+            }
+            select.append(option);
+        }
 
         var pageURLs = r.pageURLs.sort();
         var pageURL, option;
@@ -126,16 +124,18 @@ function renderPageUrls() {
             if ( pageURL === r.behindTheSceneURL ) {
                 continue;
             }
-            option = optionTemplate.clone();
-            option.attr('id', '');
-            option.attr('value', pageURL);
+            option = uDom('<option>');
+            option.val(pageURL);
             option.text(pageURL);
+            if ( pageURL === targetUrl ) {
+                option.attr('selected', true);
+            }
             select.append(option);
         }
         // Deselect whatever is currently selected
-        $('option:selected', select).prop('selected', false);
+        //uDom('#selectPageUrls > option:selected').prop('selected', false);
         // Select whatever needs to be selected
-        $('option[value="'+targetUrl+'"]', select).prop('selected', true);
+        //uDom('#selectPageUrls > option[value="'+targetUrl+'"]').prop('selected', true);
     };
     messaging.ask({ what: 'getPageURLs' }, onResponseReceived);
 }

src/js/udom.js

@@ -112,8 +112,8 @@ var addListToList = function(list, other) {
 var addSelectorToList = function(list, selector, context) {
     var p = context || document;
     var r = p.querySelectorAll(selector);
-    var i = r.length;
-    while ( i-- ) {
+    var n = r.length;
+    for ( var i = 0; i < n; i++ ) {
         list.nodes.push(r[i]);
     }
     return list;