Make Private Messages work better when zoomed in.

Some of the work here was done Tomasz Kolek.

When we click on "more conversations" in "Private Messages,"
we call it being "zoomed in."  Before this change, when
new PMs arrived, we would rebuild the list and zoom out
again.  Now we track the zoomed_in state with a variable.
Also, if you are zoomed in and switch from one PM narrow
to another, we also keep you zoomed in.

This fix also removes some extraneous/redundant code.

Fixes: #2561

static/js/pm_list.js

@@ -4,6 +4,11 @@ var exports = {};
 
 var private_messages_open = false;
 
+// You can click on "more conversations" to zoom in.  There's no
+// way to zoom back out other than re-narrowing out and in of the
+// PM list.
+var zoomed_in = false;
+
 // This module manages the "Private Messages" section in the upper
 // left corner of the app.  This was split out from stream_list.js.
 
@@ -62,8 +67,15 @@ function remove_expanded_private_messages() {
     resize.resize_stream_filters_container();
 }
 
-exports.reset_to_unnarrowed = function () {
+function zoom_in() {
+    zoomed_in = true;
+    var list_widget = $("ul.expanded_private_messages").expectOne();
+    list_widget.removeClass("zoomed-out").addClass("zoomed-in");
+}
+
+exports.close = function () {
     private_messages_open = false;
+    zoomed_in = false;
     $("ul.filters li").removeClass('active-filter active-sub-filter');
     remove_expanded_private_messages();
 };
@@ -90,8 +102,10 @@ exports._build_private_messages_list = function (active_conversation, max_privat
             || (user_ids_string === active_conversation);
 
         if (!always_visible) {
+            if (!zoomed_in) {
                 hiding_messages = true;
             }
+        }
 
         var display_message = {
             recipients: recipients_string,
@@ -104,8 +118,17 @@ exports._build_private_messages_list = function (active_conversation, max_privat
         display_messages.push(display_message);
     });
 
+    var zoom_class;
+
+    if (zoomed_in) {
+        zoom_class = "zoomed-in";
+    } else {
+        zoom_class = "zoomed-out";
+    }
+
     var recipients_dom = templates.render('sidebar_private_message_list',
                                   {messages: display_messages,
+                                   zoom_class: zoom_class,
                                    want_show_more_messages_links: hiding_messages});
     return recipients_dom;
 };
@@ -117,6 +140,7 @@ exports.rebuild_recent = function (active_conversation) {
         var private_li = get_filter_li();
         var private_messages_dom = exports._build_private_messages_list(active_conversation,
             max_private_messages);
+
         private_li.append(private_messages_dom);
     }
     if (active_conversation) {
@@ -148,11 +172,7 @@ exports.update_private_messages = function () {
 exports.set_click_handlers = function () {
     $('#global_filters').on('click', '.show-more-private-messages', function (e) {
         popovers.hide_all();
-        $(".expanded_private_messages").expectOne().removeClass("zoom-out").addClass("zoom-in");
-        $(".expanded_private_messages li.expanded_private_message").each(function () {
-            $(this).show();
-        });
-
+        zoom_in();
         e.preventDefault();
         e.stopPropagation();
     });
@@ -161,13 +181,11 @@ exports.set_click_handlers = function () {
 exports.expand = function (op_pm) {
     private_messages_open = true;
     if (op_pm.length === 1) {
-        $("#user_presences li[data-email='" + op_pm[0] + "']").addClass('active-filter');
         exports.rebuild_recent(op_pm[0]);
     } else if (op_pm.length !== 0) {
         // TODO: Should pass the reply-to of the thread
         exports.rebuild_recent("");
     } else {
-        $("#global_filters li[data-name='private']").addClass('active-filter zoom-out');
         exports.rebuild_recent("");
     }
 };

static/js/stream_list.js

@@ -205,8 +205,6 @@ function reset_to_unnarrowed(narrowed_within_same_stream) {
     } else {
         topic_list.remove_expanded_topics();
     }
-
-    pm_list.reset_to_unnarrowed();
 }
 
 exports.set_in_home_view = function (stream, in_home) {
@@ -414,6 +412,8 @@ $(function () {
         var op_pm = event.filter.operands('pm-with');
         if ((op_is.length !== 0 && _.contains(op_is, "private")) || op_pm.length !== 0) {
             pm_list.expand(op_pm);
+        } else {
+            pm_list.close();
         }
 
         var op_stream = event.filter.operands('stream');
@@ -430,6 +430,7 @@ $(function () {
 
     $(document).on('narrow_deactivated.zulip', function () {
         reset_to_unnarrowed();
+        pm_list.close();
         $("#global_filters li[data-name='home']").addClass('active-filter');
     });
 

static/styles/left-sidebar.css

@@ -431,7 +431,11 @@ li.show-more-private-messages a {
     display: none;
 }
 
-.zoom-in .show-more-private-messages {
+.zoomed-in .show-more-private-messages {
+    display: none;
+}
+
+.zoomed-out .zoom-out-hide {
     display: none;
 }
 

static/templates/sidebar_private_message_list.handlebars

@@ -1,4 +1,4 @@
-<ul class='expanded_private_messages' data-name='private'>
+<ul class='expanded_private_messages {{zoom_class}}' data-name='private'>
     {{#each messages}}
     <li class='{{#if is_zero}}zero-subject-unreads{{/if}} {{#if zoom_out_hide}}zoom-out-hide{{/if}} expanded_private_message' data-user-ids-string='{{user_ids_string}}'>
       <span class='pm-box'>