Issue 5255 - Advanced tab (HTML, strings and functionality)

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 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/>.
  */
 
 /* globals checkShareResource, getDocLink, i18nFormatDateTime, openSharePopup,
            E */
 
 "use strict";
 
 {
   let subscriptionsMap = Object.create(null);
   let filtersMap = Object.create(null);
   let collections = Object.create(null);
   let acceptableAdsUrl = null;
   let isCustomFiltersLoaded = false;
   let {getMessage} = ext.i18n;
+  let customFilters = [];
   let filterErrors = new Map([
     ["synchronize_invalid_url",
      "options_filterList_lastDownload_invalidURL"],
     ["synchronize_connection_error",
      "options_filterList_lastDownload_connectionError"],
     ["synchronize_invalid_data",
      "options_filterList_lastDownload_invalidData"],
     ["synchronize_checksum_mismatch",
      "options_filterList_lastDownload_checksumMismatch"]
   ]);
-
+  const timestampUI = Symbol();
   const whitelistedDomainRegexp = /^@@\|\|([^/:]+)\^\$document$/;
+  // Period of time in milliseconds
+  const minuteInMs = 60000;
+  const hourInMs = 3600000;
+  const fullDayInMs = 86400000;
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
-  Collection.prototype._setEmpty = function(table, text)
-  {
-    let placeholder = table.querySelector(".empty-placeholder");
-    if (text && !placeholder)
-    {
-      placeholder = document.createElement("li");
-      placeholder.className = "empty-placeholder";
-      placeholder.textContent = getMessage(text);
-      table.appendChild(placeholder);
-    }
-    else if (placeholder)
-      table.removeChild(placeholder);
+  Collection.prototype._setEmpty = function(table, texts)
+  {
+    let placeholders = table.querySelectorAll(".empty-placeholder");
+
+    if (texts && placeholders.length == 0)
+    {
+      for (let text of texts)
+      {
+        let placeholder = document.createElement("li");
+        placeholder.className = "empty-placeholder";
+        placeholder.textContent = getMessage(text);
+        table.appendChild(placeholder);
+      }
+    }
+    else if (placeholders.length > 0)
+    {
+      for (let placeholder of placeholders)
+        table.removeChild(placeholder);
+    }
   };
 
   Collection.prototype._createElementQuery = function(item)
   {
     let access = (item.url || item.text).replace(/'/g, "\\'");
     return function(container)
     {
       return container.querySelector("[data-access='" + access + "']");
     };
   };
 
   Collection.prototype._getItemTitle = function(item, i)
   {
     if (item.url == acceptableAdsUrl)
       return getMessage("options_acceptableAds_description");
     if (this.details[i].useOriginalTitle && item.originalTitle)
       return item.originalTitle;
     return item.title || item.url || item.text;
   };
 
-  Collection.prototype.addItem = function(item)
-  {
-    if (this.items.indexOf(item) >= 0)
-      return;
-
-    this.items.push(item);
+  Collection.prototype._sortItems = function()
+  {
     this.items.sort((a, b) =>
     {
       // Make sure that Acceptable Ads is always last, since it cannot be
       // disabled, but only be removed. That way it's grouped together with
       // the "Own filter list" which cannot be disabled either at the bottom
       // of the filter lists in the Advanced tab.
       if (a.url == acceptableAdsUrl)
         return 1;
       if (b.url == acceptableAdsUrl)
         return -1;
 
+      // Make sure that newly added entries always appear on top in descending
+      // chronological order
+      let aTimestamp = a[timestampUI] || 0;
+      let bTimestamp = b[timestampUI] || 0;
+      if (aTimestamp || bTimestamp)
+        return bTimestamp - aTimestamp;
+
       let aTitle = this._getItemTitle(a, 0).toLowerCase();
       let bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     });
-
+  };
+
+  Collection.prototype.addItem = function(item)
+  {
+    if (this.items.indexOf(item) >= 0)
+      return;
+
+    this.items.push(item);
+    this._sortItems();
     for (let j = 0; j < this.details.length; j++)
     {
       let detail = this.details[j];
       let table = E(detail.id);
       let template = table.querySelector("template");
       let listItem = document.createElement("li");
       listItem.appendChild(document.importNode(template.content, true));
       listItem.setAttribute("aria-label", this._getItemTitle(item, j));
       listItem.setAttribute("data-access", item.url || item.text);
       listItem.setAttribute("role", "section");
 
       let label = listItem.querySelector(".display");
       if (item.recommended && label.hasAttribute("data-tooltip"))
       {
         let tooltipId = label.getAttribute("data-tooltip");
         tooltipId = tooltipId.replace("%value%", item.recommended);
         label.setAttribute("data-tooltip", tooltipId);
       }
 
       for (let control of listItem.querySelectorAll(".control"))
       {
         if (control.hasAttribute("title"))
         {
           let titleValue = getMessage(control.getAttribute("title"));
           control.setAttribute("title", titleValue);
         }
       }
 
       this._setEmpty(table, null);
-      if (table.hasChildNodes())
-      {
-        let beforeIndex = this.items.indexOf(item) + (detail.useHeader == true);
-        table.insertBefore(listItem, table.children[beforeIndex]);
-      }
+      if (table.children.length > 0)
+        table.insertBefore(listItem, table.children[this.items.indexOf(item)]);
       else
-      {
         table.appendChild(listItem);
-      }
+
       this.updateItem(item);
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
   {
     let index = this.items.indexOf(item);
     if (index == -1)
       return;
@@ skipping 26 matching lines @@
       }
 
       element.parentElement.removeChild(element);
       if (this.items.length == 0)
         this._setEmpty(table, detail.emptyText);
     }
   };
 
   Collection.prototype.updateItem = function(item)
   {
+    let oldIndex = this.items.indexOf(item);
+    this._sortItems();
     let access = (item.url || item.text).replace(/'/g, "\\'");
     for (let i = 0; i < this.details.length; i++)
     {
       let table = E(this.details[i].id);
       let element = table.querySelector("[data-access='" + access + "']");
       if (!element)
         continue;
 
       let title = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
       element.setAttribute("aria-label", title);
       if (this.details[i].searchable)
         element.setAttribute("data-search", title.toLowerCase());
       let control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
         if (item.url == acceptableAdsUrl && this == collections.filterLists)
-          control.setAttribute("disabled", true);
-      }
-
-      let lastUpdateElem = element.querySelector(".last-update");
-      if (lastUpdateElem)
+          control.disabled = true;
+      }
+
+      let lastUpdateElement = element.querySelector(".last-update");
+      if (lastUpdateElement)
       {
         let message = element.querySelector(".message");
         if (item.isDownloading)
         {
           let text = getMessage("options_filterList_lastDownload_inProgress");
           message.textContent = text;
           element.classList.add("show-message");
         }
         else if (item.downloadStatus != "synchronize_ok")
         {
           let error = filterErrors.get(item.downloadStatus);
           if (error)
             message.textContent = getMessage(error);
           else
             message.textContent = item.downloadStatus;
           element.classList.add("show-message");
         }
         else if (item.lastDownload > 0)
         {
-          let timer = setInterval(lastUpdateLive, 60000);
           let lastUpdate = item.lastDownload * 1000;
-          function lastUpdateLive()
+          let sinceUpdate = Date.now() - lastUpdate;
+          if (sinceUpdate > fullDayInMs)
           {
-            let sinceUpdate = Date.now() - lastUpdate;
-            if(sinceUpdate > 86400000)
-            {
-              let lastUpdateDate = new Date(item.lastDownload * 1000);
-              let monthName = lastUpdateDate.toLocaleString("en-US", 

[saroyanm, 2017/06/11 15:40:12]

For reference: Make sense to find a way to pass the Language code references to
here and also to HTML Doc.

[saroyanm, 2017/06/12 16:44:42]

Create a function in i18n, that returns month: "short" according to the passed
parameters:
ex.: in i18n.js: function toLocaleString(date, options) {return
date.toLocaleString(locale, options);}

[saroyanm, 2017/06/14 10:59:00]

I used different approach while we do have the value set for the HTML doc, so we
can refer to DOM API to retrieve it.

[Thomas Greiner, 2017/07/07 13:01:07]

This looks like a race condition because the "lang" attribute might not have
been set at this point yet.

-                { month: "short" });
-              let day = lastUpdateDate.getDate();
-              day = day < 10 ? "0" + day : day;
-              lastUpdateElem.textContent = day + " " + monthName + " " + 

[saroyanm, 2017/06/12 16:44:42]

Note: Make sense to discuss if we need to localize "DD MMM YYYY" format.

-                lastUpdateDate.getFullYear();
-              clearInterval(timer);
-              return;
-            }
-            else if (sinceUpdate > 3600000)
-            {
-              lastUpdateElem.textContent = Math.round(sinceUpdate / 3600000) + 
-                " " + getMessage("options_filterList_hours");
-            }
-            else if (sinceUpdate > 60000)
-            {
-              lastUpdateElem.textContent = Math.round(sinceUpdate / 60000) + 
-                " " + getMessage("options_filterList_minutes");
-            }
-            else
-            {
-              lastUpdateElem.textContent = 
-                getMessage("options_filterList_just");
-            }
+            let lastUpdateDate = new Date(item.lastDownload * 1000);
+            let monthName = lastUpdateDate.toLocaleString(undefined,
+              {month: "short"});
+            let day = lastUpdateDate.getDate();
+            day = day < 10 ? "0" + day : day;
+            lastUpdateElement.textContent = day + " " + monthName + " " +
+              lastUpdateDate.getFullYear();
           }
-          lastUpdateLive();
+          else if (sinceUpdate > hourInMs)
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_hours");
+          }
+          else if (sinceUpdate > minuteInMs)
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_minutes");
+          }
+          else
+          {
+            lastUpdateElement.textContent =
+              getMessage("options_filterList_now");
+          }
           element.classList.remove("show-message");
         }
       }
 
       let websiteElement = element.querySelector(".context-menu .website");
       if (websiteElement)
       {
         if (item.homepage)
           websiteElement.setAttribute("href", item.homepage);
         else
           websiteElement.setAttribute("aria-hidden", true);
       }
 
       let sourceElement = element.querySelector(".context-menu .source");
       if (sourceElement)
         sourceElement.setAttribute("href", item.url);
+
+      let newIndex = this.items.indexOf(item);
+      if (oldIndex != newIndex)
+        table.insertBefore(element, table.childNodes[newIndex]);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
     this.items = [];
     for (let detail of this.details)
     {
       let table = E(detail.id);
       let element = table.firstChild;
@@ skipping 24 matching lines @@
   }
 
   collections.popular = new Collection([
     {
       id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection([
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     },
     {
       id: "blocking-languages-dialog-table",
-      emptyText: "options_dialog_language_added_empty"
+      emptyText: ["options_dialog_language_added_empty"]
     }
   ]);
   collections.allLangs = new Collection([
     {
       id: "all-lang-table",
-      emptyText: "options_dialog_language_other_empty",
+      emptyText: ["options_dialog_language_other_empty"],
       searchable: true
     }
   ]);
   collections.acceptableAds = new Collection([
     {
       id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection([
     {
       id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection([
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty"
+      emptyText: ["options_whitelist_empty_1", "options_whitelist_empty_2"]
     }
   ]);
   collections.filterLists = new Collection([
     {
       id: "all-filter-lists-table",
-      useOriginalTitle: true,
-      useHeader: true
+      useOriginalTitle: true
     }
   ]);
 
   function toggleShowLanguage(subscription)
   {
     if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
       {
         collections.allLangs.addItem(subscription);
@@ skipping 40 matching lines @@
 
   function updateFilter(filter)
   {
     let match = filter.text.match(whitelistedDomainRegexp);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
     }
     else
-      addCustomFilter(filter);
+    {
+      customFilters.push(filter.text);
+      if (isCustomFiltersLoaded)
+        updateCustomFiltersUi();
+    }
 
     filtersMap[filter.text] = filter;
   }
 
-  function addCustomFilter(filter)
-  {
-    customFiltersView("read");
-
-    // Note: document.createElement("option") is unreliable in Opera

[saroyanm, 2017/06/11 15:40:12]

I'm not sure if this still true, I took this from current(old) options page
implementation.

[saroyanm, 2017/06/12 16:44:42]

Check if it's still an issue in the supported Opera versions.

[saroyanm, 2017/06/14 10:59:00]

Done.

This was added back in 2012 ->
https://hg.adblockplus.org/adblockpluschrome/rev/0fca6c3f3462#l1.62 

Anyway I don't see benefit of using document.createElement as we can pass text
and value into the constructor of Option() API and I think the comment itself is
redundant.

[Thomas Greiner, 2017/07/07 13:01:08]

Acknowledged.

-    let elt = new Option();
-    elt.text = filter.text;
-    elt.value = filter.text;
-    E("custom-filters-box").appendChild(elt);
-  }
-
   function removeCustomFilter(text)
   {
-    let list = E("custom-filters-box");
-    let selector = "option[value=" + CSS.escape(text) + "]";
-    for (let option of list.querySelectorAll(selector))
-      list.removeChild(option);
-
-    if (E("custom-filters-box").options.length == 0)
-      customFiltersView("empty")
-  }
-
-  function convertToRawFormat(event)
-  {
-    let filters = [];
-
-    for (let option of E("custom-filters-box").options)
-      filters.push(option.value);
-
-    document.getElementById("custom-filters-raw").value = filters.join("\n");
+    let index = customFilters.indexOf(text);
+    if (index >= 0)
+      customFilters.splice(index, 1);
+
+    updateCustomFiltersUi();
+  }
+
+  function updateCustomFiltersUi()
+  {
+    let customFiltersListElement = E("custom-filters-raw");
+    customFiltersListElement.value = customFilters.join("\n");
   }
 
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then((response) =>
       {
         return response.text();
       })
       .then((text) =>
@@ skipping 85 matching lines @@
         break;
       case "add-predefined-subscription": {
         let dialog = E("dialog-content-predefined");
         let title = dialog.querySelector("h3").textContent;
         let url = dialog.querySelector(".url").textContent;
         addEnableSubscription(url, title);
         closeDialog();
         break;
       }
       case "cancel-custom-filters":
-        customFiltersView("read");
-        break;
-      case "cancel-domain-exception":
-        E("whitelisting-textbox").value = "";
-        document.querySelector("#whitelisting .controls").classList
-          .remove("mode-edit");
+        setCustomFiltersView("read");
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
-        customFiltersView("write");
-        break;
-      case "edit-domain-exception":
-        document.querySelector("#whitelisting .controls").classList
-          .add("mode-edit");
-        E("whitelisting-textbox").focus();
+        setCustomFiltersView("write");
         break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
         closeDialog();
         break;
       }
       case "open-context-menu": {
         let listItem = findParentData(element, "access", true);
         if (listItem && !listItem.classList.contains("show-context-menu"))
@@ skipping 16 matching lines @@
           text: findParentData(element, "access", false)
         });
         break;
       case "remove-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.remove",
           url: findParentData(element, "access", false)
         });
         break;
       case "save-custom-filters":
         sendMessageHandleErrors({

[saroyanm, 2017/06/11 15:40:12]

I still need to figure out how to get exact filters that cause errors, while
this is not implemented for the test server I'll check the actual implementation
and update accordingly.
(We can also make that a separate review not to block current one)

[saroyanm, 2017/06/12 16:44:42]

Separate this into another review.

[Thomas Greiner, 2017/07/07 13:01:08]

Acknowledged.

           type: "filters.importRaw",
           text: E("custom-filters-raw").value,
           removeExisting: true
         },
         () =>
         {
-          customFiltersView("read");
+          setCustomFiltersView("read");
         });
         break;
       case "switch-tab":
         let tabId = findParentData(element, "tab", false);
         switchTab(tabId);
         break;
       case "toggle-disable-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.toggle",
           keepInstalled: true,
@@ skipping 25 matching lines @@
         break;
       case "update-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.update",
           url: findParentData(element, "access", false)
         });
         break;
     }
   }
 
-  function customFiltersView(mode)
-  {
-    switch (mode)
-    {
-      case "read":
-        if (E("custom-filters-box").options.length == 0)
-        {
-          customFiltersView("empty");
-        }
-        else
-        {
-          E("custom-filters").classList.add("mode-view");
-          E("custom-filters").classList.remove("mode-edit");
-          E("custom-filters").classList.remove("mode-empty");
-        }
-        break;
-      case "write":
-        convertToRawFormat();
-        E("custom-filters").classList.remove("mode-view");
-        E("custom-filters").classList.add("mode-edit");
-        E("custom-filters").classList.remove("mode-empty");
-        break;
-      case "empty":
-        E("custom-filters").classList.remove("mode-view");
-        E("custom-filters").classList.remove("mode-edit");
-        E("custom-filters").classList.add("mode-empty");
-        break;
-    }
+  function setCustomFiltersView(mode)
+  {
+    let customFiltersElement = E("custom-filters-raw");
+    updateCustomFiltersUi();
+    if (mode == "read")
+    {
+      customFiltersElement.disabled = true;
+      if (!customFiltersElement.value)
+      {
+        setCustomFiltersView("empty");
+        return;
+      }
+    }
+    else if (mode == "write")
+    {
+      customFiltersElement.disabled = false;
+    }
+
+    E("custom-filters").dataset.mode = mode;
   }
 
   function onClick(e)
   {
     let context = document.querySelector(".show-context-menu");
     if (context)
       context.classList.remove("show-context-menu");
 
     let actions = findParentData(e.target, "action", false);
     if (!actions)
@@ skipping 129 matching lines @@
 
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     document.body.addEventListener("keyup", onKeyUp, false);
     let placeholderValue = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
-    E("whitelisting-textbox").addEventListener("keypress", (e) =>
-    {
-      if (getKey(e) == "Enter")
-        addWhitelistedDomain();
+    let exampleValue = getMessage("options_whitelist_placeholder_example",
+      ["www.example.com"]);
+    E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
+    E("whitelisting-textbox").addEventListener("keyup", (e) =>
+    {
+      E("whitelisting-add-button").disabled = !e.target.value;
     }, false);
 
     // Advanced tab
     let customize = document.querySelectorAll("#customize li[data-pref]");
     customize = Array.prototype.map.call(customize, (checkbox) =>
     {
       return checkbox.getAttribute("data-pref");
     });
     for (let key of customize)
     {
       getPref(key, (value) =>
       {
         onPrefMessage(key, value, true);
       });
     }
     ext.backgroundPage.sendMessage({
       type: "app.get",
       what: "features"
     },
     (features) =>
     {
       hidePref("show_devtools_panel", !features.devToolsPanel);
     });
 
     getDocLink("filterdoc", (link) =>
     {
       E("link-filters").setAttribute("href", link);
     });
+
+    getDocLink("subscriptions", (link) =>
+    {
+      setLinks("filter-lists-description", link);
+    });
+
+    E("custom-filters-raw").setAttribute("placeholder",
+      getMessage("options_customFilters_edit_placeholder", ["/ads/track/*"]));
 
     // Help tab
     getDocLink("faq", (link) =>
     {
       E("link-faq").setAttribute("href", link);
     });
     getDocLink("social_twitter", (link) =>
     {
       E("link-twitter").setAttribute("href", link);
     });
@@ skipping 112 matching lines @@
         ext.backgroundPage.sendMessage({
           type: "filters.get",
           subscriptionUrl: subscription.url
         },
         (filters) =>
         {
           for (let filter of filters)
             updateFilter(filter);
 
           isCustomFiltersLoaded = true;
+          setCustomFiltersView("read");
         });
       }
     });
     loadRecommendations();
     ext.backgroundPage.sendMessage({
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     (url) =>
     {
@@ skipping 12 matching lines @@
       {
         for (let subscription of subscriptions)
           onSubscriptionMessage("added", subscription);
       });
     });
   }
 
   function addWhitelistedDomain()
   {
     let domain = E("whitelisting-textbox");
+    for (let whitelistItem of collections.whitelist.items)
+    {
+      if (whitelistItem.title == domain.value)
+      {
+        whitelistItem[timestampUI] = Date.now();
+        collections.whitelist.updateItem(whitelistItem);
+        domain.value = "";
+        break;
+      }
+    }
     if (domain.value)
     {
       sendMessageHandleErrors({
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
-    document.querySelector("#whitelisting .controls")
-      .classList.remove("mode-edit");
-  }
-
-  function editCustomFilters()
-  {
-    if (!isCustomFiltersLoaded)
-    {
-      console.error("Custom filters are not loaded");
-      return;
-    }
-
-    E("custom-filters").classList.add("mode-edit");
-    let filterTexts = [];
-    for (let customFilterItem of collections.customFilters.items)
-      filterTexts.push(customFilterItem.text);
-    E("custom-filters-raw").value = filterTexts.join("\n");
+    E("whitelisting-add-button").disabled = true;
   }
 
   function addEnableSubscription(url, title, homepage)
   {
     let messageType = null;
     let knownSubscription = subscriptionsMap[url];
     if (knownSubscription && knownSubscription.disabled == true)
       messageType = "subscriptions.toggle";
     else
       messageType = "subscriptions.add";
 
     let message = {
       type: messageType,
       url
     };
     if (title)
       message.title = title;
     if (homepage)
       message.homepage = homepage;
 
     ext.backgroundPage.sendMessage(message);
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
+        filter[timestampUI] = Date.now();
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         let knownFilter = filtersMap[filter.text];
         if (whitelistedDomainRegexp.test(knownFilter.text))
           collections.whitelist.removeItem(knownFilter);
@@ skipping 263 matching lines @@
   });
   ext.backgroundPage.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }