Issue 5540 - implement notification

new-options.js

Index: new-options.js
===================================================================
--- a/new-options.js
+++ b/new-options.js
@@ -432,6 +432,11 @@
     {
       filter.title = match[1];
       collections.whitelist.addItem(filter);
+      if (isCustomFiltersLoaded)
+      {
+        let text = getMessage("options_whitelist_notification", [filter.title]);
+        showNotification(text);
+      }
     }
     else
     {
@@ -588,6 +593,9 @@
       case "edit-custom-filters":
         setCustomFiltersView("write");
         break;
+      case "hide-notification":
+        hideNotification();
+        break;
       case "import-subscription": {
         let url = E("blockingList-textbox").value;
         addEnableSubscription(url);
@@ -993,6 +1001,19 @@
     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";