Issue 5540 - implement notification

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 414 matching lines @@
     }
   }
 
   function updateFilter(filter)
   {
     let match = filter.text.match(whitelistedDomainRegexp);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
+      if (isCustomFiltersLoaded)
+      {
+        let text = getMessage("options_whitelist_notification", [filter.title]);
+        showNotification(text);
+      }
     }
     else
     {
       customFilters.push(filter.text);
       if (isCustomFiltersLoaded)
         updateCustomFiltersUi();
     }
 
     filtersMap[filter.text] = filter;
   }
@@ skipping 136 matching lines @@
             break;
           }
         }
         break;
       case "close-dialog":
         closeDialog();
         break;
       case "edit-custom-filters":
         setCustomFiltersView("write");
         break;
+      case "hide-notification":
+        hideNotification();
+        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"))
           listItem.classList.add("show-context-menu");
@@ skipping 385 matching lines @@
 
   function closeDialog()
   {
     let dialog = E("dialog");
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
     focusedBeforeDialog.focus();
   }
 
+  function showNotification(text)

[ire, 2017/08/25 09:59:45]

This doesn't need to hold up this review, but we could manage focus a bit better
here. For a keyboard user, when they "click" on the "Add website" button, focus
disappears. 

I have 3 suggestions for how to handle this, in order of preference:

1. Move focus to the close notification button. This moves the attention of the
keyboard user to the notification, which is sort of the purpose of it. When the
user clicks to hide (or the notification times out), move their focus back to
the input field

2. Move focus back to the input field immediately. This makes sense since the
field was just cleared.

3. Move focus to the delete button for that website. This has the potential for
the user to mistakenly delete the website they just added, which is why it's my
last choice. 

It's up to you if you want to handle this in this review, or later on. 

[saroyanm, 2017/08/25 11:04:19]

It's bit difficult because we don't know where is user located when the
notification is being triggered, please note that the notification is not being
triggered when user click on Add button, but when a filter is being added, this
might also happen in the Advanced tab if user adds a filter that is a
whitlisting filter.

I do agree that we should improve the focus handling, but it's bit more complex
as it looks to be, so considering the fact that notification is being hidden
automatically I think it's fine keeping focus where it is. 

Also user don't need to navigate to the Add Website button, but trigger submit
by hitting enter.  

[ire, 2017/08/25 12:10:07]

Okay good point. In light of what you said, I think my second option is now my
preference (moving focus back to the input field after it's cleared). But
perhaps this is something we should discuss in the next meeting with Jeen to
help us decide what the best implementation would be

[saroyanm, 2017/08/25 12:22:55]

I agree

+  {
+    E("notification").setAttribute("aria-hidden", false);
+    E("notification-text").textContent = text;
+    setTimeout(hideNotification, 3000);
+  }
+
+  function hideNotification()
+  {
+    E("notification").setAttribute("aria-hidden", true);
+    E("notification-text").textContent = "";
+  }
+
   function setAcceptableAds()
   {
     let option = "none";
     document.forms["acceptable-ads"].classList.remove("show-dnt-notification");
     if (acceptableAdsUrl in subscriptionsMap)
     {
       option = "ads";
     }
     else if (acceptableAdsPrivacyUrl in subscriptionsMap)
     {
@@ skipping 361 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);
 }