Issue 2195 - Added notification opt-out (Platform)

_locales/en_US/messages.json

@@ -117,6 +117,15 @@
   "out_of_date_lists": {
     "message": "Out-of-date lists are updated periodically."
   },
+  "overlay_notification_closing_button_hide": {
+    "message": "Close this notification"
+  },
+  "overlay_notification_closing_button_optout": {
+    "message": "Stop showing notifications"
+  },
+  "overlay_shownotifications_label": {
+    "message": "Show useful notifications"
+  },
   "remove_button": {
     "description": "This is the label for the 'Remove selected' buttons.",
     "message": "Remove selected"

lib/prefs.js

@@ -142,6 +142,12 @@ defaults.hidePlaceholders = true;
  */
 defaults.suppress_first_run_page = false;
 
+/**
+ * Whether notification opt-out UI should be shown.
+ * @type {boolean}
+ */
+defaults.notifications_showui = false;
+
 /**
  * Notification categories to be ignored.
  *

notification.js

@@ -110,11 +110,20 @@ window.addEventListener("load", function()
 
   var notificationElement = document.getElementById("notification");
   notificationElement.className = notification.type;
-  notificationElement.style.display = "block";
-
-  document.getElementById("close-notification").addEventListener("click", function()
+  notificationElement.hidden = false;
+  notificationElement.addEventListener("click", function(event)
   {
-    notificationElement.style.display = "none";
-    notification.onClicked();
-  }, false);
+    switch (event.target.id)
+    {
+      case "notification-close":
+        notificationElement.classList.add("closing");
+        break;
+      case "notification-optout":
+        Notification.toggleIgnoreCategory("*", true);
+      case "notification-hide":
+        notificationElement.hidden = true;
+        notification.onClicked();
+        break;
+    }
+  }, true);
 }, false);

options.html

@@ -275,6 +275,9 @@ <h1><span class="i18n_options"></span></h1>
       <div id="shouldShowBlockElementMenuContainer">
         <input type="checkbox" id="shouldShowBlockElementMenu" /><label for="shouldShowBlockElementMenu" class="i18n_show_block_element_menu"></label>
       </div>
+      <div id="shouldShowNotificationsContainer">
+        <input type="checkbox" id="shouldShowNotifications" /><label for="shouldShowNotifications" class="i18n_overlay_shownotifications_label"></label>
+      </div>
     </p>
 
     <p id="found-a-bug" class="i18n_found_a_bug"></p>

options.js

@@ -39,6 +39,7 @@ var FilterNotifier = require("filterNotifier").FilterNotifier;
 var Prefs = require("prefs").Prefs;
 var Synchronizer = require("synchronizer").Synchronizer;
 var Utils = require("utils").Utils;
+var NotificationStorage = require("notification").Notification;
 
 // Loads options from localStorage and sets UI elements accordingly
 function loadOptions()
@@ -76,6 +77,22 @@ function loadOptions()
 
   // Popuplate option checkboxes
   initCheckbox("shouldShowBlockElementMenu");
+  if (Prefs.notifications_showui)
+  {
+    initCheckbox("shouldShowNotifications", {
+      get: function()
+      {
+        return Prefs.notifications_ignoredcategories.indexOf("*") == -1;
+      },
+      toggle: function()
+      {
+        NotificationStorage.toggleIgnoreCategory("*");
+        return this.get();
+      }
+    });
+  }
+  else
+    document.getElementById("shouldShowNotificationsContainer").hidden = true;
 
   ext.onMessage.addListener(onMessage);
 
@@ -131,12 +148,19 @@ function unloadOptions()
   FilterNotifier.removeListener(onFilterChange);
 }
 
-function initCheckbox(id)
+function initCheckbox(id, descriptor)
 {
   var checkbox = document.getElementById(id);
-  checkbox.checked = Prefs[id];
+  if (descriptor && descriptor.get)
+    checkbox.checked = descriptor.get();
+  else
+    checkbox.checked = Prefs[id];
+
   checkbox.addEventListener("click", function()
   {
+    if (descriptor && descriptor.toggle)
+      checkbox.checked = descriptor.toggle();
+
     Prefs[id] = checkbox.checked;
   }, false);
 }

popup.html

@@ -35,12 +35,20 @@
 </header>
 
 <div id="wrapper">
-  <div id="notification">
-    <h1>
-      <span id="notification-title"></span>
-      <span id="close-notification"></span>
-    </h1>
-    <div id="notification-message"></div>
+  <div id="notification" hidden>
+    <div id="notification-content">
+      <h1>
+        <span id="notification-title"></span>
+        <span id="notification-close"></span>
+      </h1>
+      <p id="notification-message"></p>
+    </div>
+    <ul id="notification-close-content">
+      <li id="notification-hide"
+        class="i18n_overlay_notification_closing_button_hide"></li>
+      <li id="notification-optout"
+        class="i18n_overlay_notification_closing_button_optout"></li>
+    </ul>
   </div>
 
   <div id="clickhide-instructions" class="i18n_clickhide_instructions"></div>

skin/popup.css

@@ -63,7 +63,6 @@ header
 
 #notification
 {
-  display: none;
   position: relative;
   margin-top: -70px;
   min-height: 50px;
@@ -96,7 +95,7 @@ header
   color: #fff;
 }
 
-#close-notification
+#notification-close
 {
   cursor: pointer;
   display: inline-block;
@@ -109,6 +108,40 @@ header
   background-position: -34px -89px;
 }
 
+#notification.closing
+{
+  border-color: #000;
+  background-color: #020D14;
+}
+
+#notification.closing #notification-content,
+#notification:not(.closing) #notification-close-content
+{
+  display: none;
+}
+
+#notification-close-content li
+{
+  padding: 7px 7px 7px 17px;
+  color: #FFF;
+  text-decoration: underline;
+  white-space: inherit;
+  border: none;
+}
+
+#notification-close-content li::before
+{
+  content: "\0203A";
+  display: inline-block; /* prevent pseudo element from being underlined */
+  width: 10px;
+  margin-left: -10px;
+}
+
+#notification-close-content li:hover
+{
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 footer
 {
   cursor: pointer;