Issue 4156 - Adblocking filter only being removed in advanced tab fix

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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/>.
  */
 
 "use strict";
 
 (function()
 {
   var subscriptionsMap = Object.create(null);
   var filtersMap = Object.create(null);
   var collections = Object.create(null);
   var acceptableAdsUrl = null;
-  var maxLabelId = 0;
   var getMessage = ext.i18n.getMessage;
   var filterErrors =
   {
     "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"
   };
 
   function Collection(details)
@@ skipping 27 matching lines @@
 
   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.addItems = function()
-  {
-    var length = Array.prototype.push.apply(this.items, arguments);
-    if (length == 0)
+  Collection.prototype.addItem = function(item)
+  {
+    if (this.items.indexOf(item) >= 0)
       return;
 
+    this.items.push(item);
     this.items.sort(function(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;
 
       var aTitle = this._getItemTitle(a, 0).toLowerCase();
       var bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     }.bind(this));
 
     for (var j = 0; j < this.details.length; j++)
     {
       var table = E(this.details[j].id);
       var template = table.querySelector("template");
-      for (var i = 0; i < arguments.length; i++)
-      {
-        var item = arguments[i];
-        var listItem = document.createElement("li");
-        listItem.appendChild(document.importNode(template.content, true));
-        listItem.setAttribute("data-access", item.url || item.text);
-
-        var labelId = "label-" + (++maxLabelId);
-        var label = listItem.querySelector(".display");
-        label.setAttribute("id", labelId);
-        if (item.recommended && label.hasAttribute("data-tooltip"))
-        {
-          var tooltipId = label.getAttribute("data-tooltip");
-          tooltipId = tooltipId.replace("%value%", item.recommended);
-          label.setAttribute("data-tooltip", tooltipId);
+      var 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");
+
+      var label = listItem.querySelector(".display");
+      if (item.recommended && label.hasAttribute("data-tooltip"))
+      {
+        var tooltipId = label.getAttribute("data-tooltip");
+        tooltipId = tooltipId.replace("%value%", item.recommended);
+        label.setAttribute("data-tooltip", tooltipId);
+      }
+
+      var controls = listItem.querySelectorAll(".control");
+      for (var k = 0; k < controls.length; k++)
+      {
+        if (controls[k].hasAttribute("title"))
+        {
+          var titleValue = getMessage(controls[k].getAttribute("title"));
+          controls[k].setAttribute("title", titleValue)
         }
-
-        var control = listItem.querySelector(".control");
-        if (control)
-        {
-          control.setAttribute("aria-labelledby", labelId);
-          control.addEventListener("click", this.details[j].onClick, false);
-
-          var role = control.getAttribute("role");
-          if (role == "checkbox" && !label.hasAttribute("data-action"))
-          {
-            var controlId = "control-" + maxLabelId;
-            control.setAttribute("id", controlId);
-            label.setAttribute("for", controlId);
-          }
-        }
-
-        this._setEmpty(table, null);
-        if (table.hasChildNodes())
-        {
-          table.insertBefore(listItem,
-              table.childNodes[this.items.indexOf(item)]);
-        }
-        else
-          table.appendChild(listItem);
-        this.updateItem(item);
-      }
+      }
+
+      this._setEmpty(table, null);
+      if (table.hasChildNodes())
+      {
+        table.insertBefore(listItem,
+            table.childNodes[this.items.indexOf(item)]);
+      }
+      else
+        table.appendChild(listItem);
+      this.updateItem(item);
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
   {
     var index = this.items.indexOf(item);
     if (index == -1)
       return;
 
@@ skipping 35 matching lines @@
     var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var element = table.querySelector("[data-access='" + access + "']");
       if (!element)
         continue;
 
       var title = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
-      if (title)
+      element.setAttribute("aria-label", title);
+      if (this.details[i].searchable)
         element.setAttribute("data-search", title.toLowerCase());
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
-        if (item.url == acceptableAdsUrl && this.details[i].onClick ==
-                                            toggleDisableSubscription)
+        if (item.url == acceptableAdsUrl && this == collections.filterLists)
           control.setAttribute("disabled", true);
       }
 
       var dateElement = element.querySelector(".date");
       var timeElement = element.querySelector(".time");
       if (dateElement && timeElement)
       {
         var message = element.querySelector(".message");
         if (item.isDownloading)
         {
@@ skipping 60 matching lines @@
     index += (index == focusables.length - 1) ? -1 : 1;
 
     var nextElement = focusables[index];
     if (!nextElement)
       return false;
 
     nextElement.focus();
     return true;
   }
 
-  function toggleRemoveSubscription(e)
-  {
-    e.preventDefault();
-    var subscriptionUrl = findParentData(e.target, "access", false);
-    if (e.target.getAttribute("aria-checked") == "true")
-    {
-      ext.backgroundPage.sendMessage({
-        type: "subscriptions.remove",
-        url: subscriptionUrl
-      });
-    }
-    else
-      addEnableSubscription(subscriptionUrl);
-  }
-
-  function toggleDisableSubscription(e)
-  {
-    e.preventDefault();
-    var subscriptionUrl = findParentData(e.target, "access", false);
-    ext.backgroundPage.sendMessage(
-    {
-      type: "subscriptions.toggle",
-      keepInstalled: true,
-      url: subscriptionUrl
-    });
-  }
-
-  function onAddLanguageSubscriptionClick(e)
-  {
-    e.preventDefault();
-    var url = findParentData(this, "access", false);
-    addEnableSubscription(url);
-  }
-
-  function onRemoveFilterClick()
-  {
-    var filter = findParentData(this, "access", false);
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.remove",
-      text: filter
-    });
-  }
-
   collections.popular = new Collection(
   [
     {
-      id: "recommend-list-table",
-      onClick: toggleRemoveSubscription
+      id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty",
-      onClick: toggleRemoveSubscription
+      emptyText: "options_dialog_language_added_empty"
     },
     {
       id: "blocking-languages-dialog-table",
       emptyText: "options_dialog_language_added_empty"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
       id: "all-lang-table",
       emptyText: "options_dialog_language_other_empty",
-      onClick: onAddLanguageSubscriptionClick
+      searchable: true
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
-      id: "acceptableads-table",
-      onClick: toggleRemoveSubscription
+      id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection(
   [
     {
-      id: "custom-list-table",
-      onClick: toggleRemoveSubscription
+      id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty",
-      onClick: onRemoveFilterClick
+      emptyText: "options_whitelisted_empty"
     }
   ]);
   collections.customFilters = new Collection(
   [
     {
       id: "custom-filters-table",
       emptyText: "options_customFilters_empty"
     }
   ]);
   collections.filterLists = new Collection(
   [
     {
       id: "all-filter-lists-table",
-      onClick: toggleDisableSubscription,
       useOriginalTitle: true
     }
   ]);
 
-  function updateLanguageCollections(subscription)
+  function toggleShowLanguage(subscription)
   {
     if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
       {
-        collections.allLangs.addItems(subscription);
+        collections.allLangs.addItem(subscription);
         collections.langs.removeItem(subscription);
       }
       else
       {
         collections.allLangs.removeItem(subscription);
-        collections.langs.addItems(subscription);
+        collections.langs.addItem(subscription);
       }
     }
   }
 
   function addSubscription(subscription)
   {
     var collection;
     if (subscription.recommended)
     {
       if (subscription.recommended != "ads")
         collection = collections.popular;
       else if (subscription.disabled == false)
         collection = collections.langs;
       else
         collection = collections.allLangs;
     }
     else if (subscription.url == acceptableAdsUrl)
       collection = collections.acceptableAds;
     else
       collection = collections.custom;
 
-    collection.addItems(subscription);
+    collection.addItem(subscription);
     subscriptionsMap[subscription.url] = subscription;
+    toggleShowLanguage(subscription);
     updateTooltips();
   }
 
   function updateSubscription(subscription)
   {
     for (var name in collections)
       collections[name].updateItem(subscription);
+
+    toggleShowLanguage(subscription);
   }
 
   function updateFilter(filter)
   {
     var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
-      collections.whitelist.addItems(filter);
+      collections.whitelist.addItem(filter);
     }
     else
-      collections.customFilters.addItems(filter);
+      collections.customFilters.addItem(filter);
 
     filtersMap[filter.text] = filter;
   }
 
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then(function(response)
       {
         return response.text();
       })
       .then(function(text)
       {
         var list = document.getElementById("subscriptionSelector");
         var doc = new DOMParser().parseFromString(text, "application/xml");
         var elements = doc.documentElement.getElementsByTagName("subscription");
         for (var i = 0; i < elements.length; i++)
         {
           var element = elements[i];
           var type = element.getAttribute("type");
           var subscription = {
-            disabled: null,
+            disabled: true,
             downloadStatus: null,
             homepage: null,
             originalTitle: element.getAttribute("title"),
             recommended: type,
             url: element.getAttribute("url")
           };
 
           var prefix = element.getAttribute("prefixes");
           if (prefix)
           {
@@ skipping 27 matching lines @@
   {
     ext.backgroundPage.sendMessage(message, function(errors)
     {
       if (errors.length > 0)
         alert(errors.join("\n"));
       else if (onSuccess)
         onSuccess();
     });
   }
 
+  function openDocLink(id)
+  {
+    getDocLink(id, function(link)
+    {
+      if (id == "share-general")
+        openSharePopup(link);
+      else
+        location.href = link;
+    });
+  }
+
+  function switchTab(id)
+  {
+    location.hash = id;
+  }
+
   function onClick(e)
   {
     var context = document.querySelector(".show-context-menu");
     if (context)
       context.classList.remove("show-context-menu");
 
     var element = e.target;
     while (true)
     {
       if (!element)
         return;
 
       if (element.hasAttribute("data-action"))
         break;
 
       element = element.parentElement;
     }
 
+    var element = findParentData(e.target, "action", true);
     var actions = element.getAttribute("data-action").split(",");
     for (var i = 0; i < actions.length; i++)
     {
       switch (actions[i])
       {
         case "add-domain-exception":
           addWhitelistedDomain();
           break;
         case "add-predefined-subscription":
           var dialog = E("dialog-content-predefined");
@@ skipping 19 matching lines @@
         case "edit-domain-exception":
           document.querySelector("#whitelisting .controls").classList.add("mode-edit");
           E("whitelisting-textbox").focus();
           break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         case "open-dialog":
-          openDialog(element.getAttribute("data-dialog"));
+          var dialog = findParentData(element, "dialog", false);
+          openDialog(dialog);
+          break;
+        case "open-doclink":
+          var doclink = findParentData(element, "doclink", false);
+          openDocLink(doclink);
           break;
         case "save-custom-filters":
           sendMessageHandleErrors(
           {
             type: "filters.importRaw",
             text: E("custom-filters-raw").value,
             removeExisting: true
           },
           function()
           {
             E("custom-filters").classList.remove("mode-edit");
           });
           break;
         case "switch-tab":
-          document.body.setAttribute("data-tab",
-            element.getAttribute("data-tab"));
+          var tabId = findParentData(e.target, "tab", false);
+          switchTab(tabId);
           break;
         case "toggle-pref":
           ext.backgroundPage.sendMessage(
           {
             type: "prefs.toggle",
             key: findParentData(element, "pref", false)
           });
           break;
         case "update-all-subscriptions":
           ext.backgroundPage.sendMessage(
@@ skipping 13 matching lines @@
             url: findParentData(element, "access", false)
           });
           break;
         case "remove-subscription":
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.remove",
             url: findParentData(element, "access", false)
           });
           break;
-      }
+        case "toggle-remove-subscription":
+          var subscriptionUrl = findParentData(element, "access", false);
+          if (element.getAttribute("aria-checked") == "true")
+          {
+            ext.backgroundPage.sendMessage({
+              type: "subscriptions.remove",
+              url: subscriptionUrl
+            });
+          }
+          else
+            addEnableSubscription(subscriptionUrl);
+          break;
+        case "toggle-disable-subscription":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.toggle",
+            keepInstalled: true,
+            url: findParentData(element, "access", false)
+          });
+          break;
+        case "add-language-subscription":
+          addEnableSubscription(findParentData(element, "access", false));
+          break;
+        case "remove-filter":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.remove",
+            text: findParentData(element, "access", false)
+          });
+          break;
+      }
+    }
+  }
+
+  function getKey(e)
+  {
+    // e.keyCode has been deprecated so we attempt to use e.key
+    if ("key" in e)
+      return e.key;
+    return getKey.keys[e.keyCode];
+  }
+  getKey.keys = {
+    9: "Tab",
+    13: "Enter",
+    27: "Escape",
+    37: "ArrowLeft",
+    38: "ArrowUp",
+    39: "ArrowRight",
+    40: "ArrowDown"
+  };
+
+  function onKeyUp(e)
+  {
+    var key = getKey(e);
+    var element = document.activeElement;
+    if (!key || !element)
+      return;
+
+    var container = findParentData(element, "action", true);
+    if (!container || !container.hasAttribute("data-keys"))
+      return;
+
+    var keys = container.getAttribute("data-keys").split(" ");
+    if (keys.indexOf(key) < 0)
+      return;
+
+    switch (container.getAttribute("data-action"))
+    {
+      case "add-domain-exception":
+        addWhitelistedDomain();
+        break;
+      case "open-doclink":
+        var doclink = findParentData(element, "doclink", false);
+        openDocLink(doclink);
+        break;
+      case "switch-tab":
+        if (key == "Enter")
+        {
+          var tabId = findParentData(element, "tab", false);
+          switchTab(tabId);
+        }
+        else if (element.hasAttribute("aria-selected"))
+        {
+          if (key == "ArrowLeft" || key == "ArrowUp")
+          {
+            element = element.previousElementSibling
+                || container.lastElementChild;
+          }
+          else if (key == "ArrowRight" || key == "ArrowDown")
+          {
+            element = element.nextElementSibling
+                || container.firstElementChild;
+          }
+
+          var tabId = findParentData(element, "tab", false);
+          switchTab(tabId);
+        }
+        break;
+    }
+  }
+
+  function selectTabItem(tabId, container, focus)
+  {
+    // Show tab content
+    document.body.setAttribute("data-tab", tabId);
+
+    // Select tab
+    var tabList = container.querySelector("[role='tablist']");
+    if (!tabList)
+      return null;
+
+    var previousTab = tabList.querySelector("[aria-selected]");
+    previousTab.removeAttribute("aria-selected");
+    previousTab.setAttribute("tabindex", -1);
+
+    var tab = tabList.querySelector("li[data-tab='" + tabId + "']");
+    tab.setAttribute("aria-selected", true);
+    tab.setAttribute("tabindex", 0);
+
+    var tabContentId = tab.getAttribute("aria-controls");
+    var tabContent = document.getElementById(tabContentId);
+
+    // Select sub tabs
+    if (tab.hasAttribute("data-subtab"))
+      selectTabItem(tab.getAttribute("data-subtab"), tabContent, false);
+
+    if (tab && focus)
+      tab.focus();
+
+    return tabContent;
+  }
+
+  function onHashChange()
+  {
+    var hash = location.hash.substr(1);
+    if (!hash)
+      return;
+
+    // Select tab and parent tabs
+    var tabIds = hash.split("-");
+    var tabContent = document.body;
+    for (var i = 0; i < tabIds.length; i++)
+    {
+      var tabId = tabIds.slice(0, i + 1).join("-");
+      tabContent = selectTabItem(tabId, tabContent, true);
+      if (!tabContent)
+        break;
     }
   }
 
   function onDOMLoaded()
   {
     populateLists();
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
-    function getKey(e)
-    {
-      // e.keyCode has been deprecated so we attempt to use e.key
-      if ("key" in e)
-        return e.key;
-      return getKey.keys[e.keyCode];
-    }
-    getKey.keys = {
-      9: "Tab",
-      13: "Enter",
-      27: "Escape"
-    };
-
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
     getDocLink("releases", function(link)
     {
       E("link-version").setAttribute("href", link);
     });
 
-    getDocLink("contribute", function(link)
-    {
-      document.querySelector("#tab-contribute a").setAttribute("href", link);
-    });
-
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
+    document.body.addEventListener("keyup", onKeyUp, false);
     var placeholderValue  = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
       if (getKey(e) == "Enter")
         addWhitelistedDomain();
     }, false);
 
     // Advanced tab
@@ skipping 67 matching lines @@
             }
           }
           else if (e.target.classList.contains("focus-last"))
           {
             e.preventDefault();
             this.querySelector(".focus-first").focus();
           }
           break;
       }
     }, false);
+
+    onHashChange();
   }
 
   var focusedBeforeDialog = null;
   function openDialog(name)
   {
     var dialog = E("dialog");
     dialog.setAttribute("aria-hidden", false);
     dialog.setAttribute("aria-labelledby", "dialog-title-" + name);
     document.body.setAttribute("data-dialog", name);
 
@@ skipping 151 matching lines @@
           knownSubscription.originalTitle = subscription.title;
         else
           knownSubscription[property] = subscription[property];
       }
       subscription = knownSubscription;
     }
     switch (action)
     {
       case "disabled":
         updateSubscription(subscription);
-        updateLanguageCollections(subscription);
         break;
       case "downloading":
       case "downloadStatus":
       case "homepage":
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
-        if (subscription)

[Thomas Greiner, 2016/06/16 16:10:34]

This will always be `true`. Compare it with the base revision and you'll find
that this check worked before.

[saroyanm, 2016/06/16 16:51:44]

Well spotted, thanks, Done.

-          updateLanguageCollections(subscription);
+        if (subscription.url in subscriptionsMap)
+          updateSubscription(subscription);
         else
           addSubscription(subscription);
 
-        updateSubscription(subscription);

[Thomas Greiner, 2016/06/16 16:10:34]

I noticed that those two function calls swapped places. How is that related to
the issue?

[saroyanm, 2016/06/16 16:51:44]

Logic here is bit confusing and yes swiping the function calls doesn't make any
easier or in this case sense.
I've update the implementation, so currently I'm checking if the Subscription is
of type=="ads" only then I'm calling the "updateLanguageCollections" method,
which we were calling for most of the subscriptions which are not type of "ads"
which making the logic confusing.

Let me know if current implementation makes more sense from your point of view
and if we can make keep this fix in this review as well, to make the code more
understandable.

-        collections.filterLists.addItems(subscription);
+        collections.filterLists.addItem(subscription);
         break;
       case "removed":
         if (subscription.url == acceptableAdsUrl || subscription.recommended)
         {
           subscription.disabled = true;
           onSubscriptionMessage("disabled", subscription);
         }
         else
         {
           collections.custom.removeItem(subscription);
@@ skipping 58 matching lines @@
         break;
 
       case "safari_contentblocker":
         E("restart-safari").setAttribute("aria-hidden", value || initial);
         break;
     }
 
     var checkbox = document.querySelector("[data-pref='" + key + "'] button[role='checkbox']");
     if (checkbox)
       checkbox.setAttribute("aria-checked", value);
-  }
-
-  function onShareLinkClick(e)
-  {
-    e.preventDefault();
-
-    getDocLink("share-general", openSharePopup);
   }
 
   function updateShareLink()
   {
     var shareResources = [
       "https://facebook.com/plugins/like.php?",
       "https://platform.twitter.com/widgets/",
       "https://apis.google.com/se/0/_/+1/fastbutton?"
     ];
     var isAnyBlocked = false;
     var checksRemaining = shareResources.length;
 
     function onResult(isBlocked)
     {
       isAnyBlocked |= isBlocked;
       if (!--checksRemaining)
       {
         // Hide the share tab if a script on the share page would be blocked
-        var tab = E("tab-share");
-        if (isAnyBlocked)
-        {
-          tab.hidden = true;
-          tab.removeEventListener("click", onShareLinkClick, false);
-        }
-        else
-          tab.addEventListener("click", onShareLinkClick, false);
+        E("tab-share").hidden = isAnyBlocked;
       }
     }
 
     for (var i = 0; i < shareResources.length; i++)
       checkShareResource(shareResources[i], onResult);
   }
 
   function getMessages(id)
   {
     var messages = [];
@@ skipping 121 matching lines @@
         "shouldShowBlockElementMenu"]
   });
   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);
 })();