Document how our desktop notifications work.

(imported from commit 991d7541283d7d8d17836f5322abb0da780eba25)

templates/zephyr/settings.html

@@ -84,11 +84,12 @@
         </div>
 
       <hr class="settings_separator">
-      <h2>Notification settings</h2>
+      <h2>Notification settings <i class="tiny icon-vector-question-sign" id="notification-docs"></i></h2>
       <div id="notification-settings">
         <div class="control-group">
             <label for="enable_desktop_notifications" class="control-label">
-                Desktop notifications</label>
+                Desktop
+                notifications </label>
             <div class="controls">
                 <input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
                    {% if user_profile.enable_desktop_notifications %}
@@ -98,7 +99,7 @@
         </div>
         <div class="control-group">
             <label for="enable_sounds" class="control-label">
-                Audible notifications for messages</label>
+                Audible notifications</label>
             <div class="controls">
                 <input type="checkbox" name="enable_sounds" id="enable_sounds"
                    {% if user_profile.enable_sounds %}
@@ -109,7 +110,7 @@
 
         <div class="control-group">
             <label for="enable_offline_email_notifications" class="control-label">
-                Notify on PMs and @-mentions when offline</label>
+                Email notifications when offline</label>
             <div class="controls">
                 <input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
                    {% if user_profile.enable_offline_email_notifications %}

zephyr/static/js/ui.js

@@ -1261,6 +1261,19 @@ $(function () {
         ui.wait_for_gravatar();
     });
 
+    var notification_docs = $("#notification-docs");
+    notification_docs.popover({"placement": "right",
+                               "content": templates.render('notification_docs'),
+                               "trigger": "manual"});
+    $("body").on("mouseover", "#notification-docs", function (e) {
+        notification_docs.popover('show');
+        e.stopPropagation();
+    });
+    $("body").on("mouseout", "#notification-docs", function (e) {
+        notification_docs.popover('hide');
+        e.stopPropagation();
+    });
+
     $('body').on('click', '.edit_subject', function (e) {
         var row = rows.get(rows.id($(this).closest(".recipient_row")),
                            current_msg_list.table_name);

zephyr/static/styles/zephyr.css

@@ -783,6 +783,10 @@ background-color: #feffe0;
     font-size: 80%;
 }
 
+.tiny {
+    font-size: 60%;
+}
+
 .actions_hovered .message_time, .actions_hovered .info {
     color: #0088CC;
     cursor: pointer;

zephyr/static/templates/notification_docs.handlebars

@@ -0,0 +1,14 @@
+{{! Explanation of when notifications fire }}
+<div>
+
+<p>If enabled, you will get desktop notifications for the following:</p>
+
+<ul>
+<li>a private message</li>
+<li>a message that @-mentions you</li>
+<li>a message to a stream you have configured to show desktop notifications (via the streams page)</li>
+</ul>
+<br />
+<p>If the Zulip window is in focus and you can already see the message when it arrives, we won't notify you.</p>
+
+</div>