Add topic-zooming hooks.

This commit doesn't actually add the final UI to zoom/unzoom
topics, because I want to keep those in separate commits, in
case we change how to enable the feature.  But this commit
adds a toggle_zoom() function that zooms/unzooms topics.

Zooming is minimally invasive, because we don't really introduce
many extra elements to the UI; instead, we just make the list of
streams be a list of length one (i.e. the active stream).  This
gives us a lot of stuff for free, basically, like unread counts, etc.

(imported from commit 814c1361b6210d1591b4174bed1d6e0c98a3f255)

static/js/feature_flags.js

@@ -43,6 +43,7 @@ exports.left_side_userlist = _.contains(['customer7.invalid'], page_params.domai
 exports.fade_users_when_composing = page_params.staging || is_customer4;
 exports.use_socket = false;
 exports.clicking_notification_causes_narrow = page_params.staging || _.contains(['customer25.invalid'], page_params.domain);
+exports.topic_zooming = page_params.staging;
 
 // Still burning in...
 exports.mark_read_at_bottom = true;

static/js/stream_list.js

@@ -2,16 +2,62 @@ var stream_list = (function () {
 
 var exports = {};
 
+var zoomed_to_topics = false;
 var last_private_message_count = 0;
 var last_mention_count = 0;
 var previous_sort_order;
 
+function zoom_in() {
+    popovers.hide_all();
+    zoomed_to_topics = true;
+    $("#streams_header").expectOne().hide();
+    $("#topics_header").expectOne().show();
+    exports.update_streams_sidebar();
+}
+
+function zoom_out() {
+    popovers.hide_all();
+    zoomed_to_topics = false;
+    $("#streams_header").expectOne().show();
+    $("#topics_header").expectOne().hide();
+    exports.update_streams_sidebar();
+}
+
+function toggle_zoom() {
+    if (zoomed_to_topics) {
+        zoom_out();
+    }
+    else {
+        zoom_in();
+    }
+}
+
+function active_stream_name() {
+    if (narrow.active()) {
+        var op_streams = narrow.filter().operands('stream');
+        if (op_streams) {
+            return op_streams[0];
+        }
+    }
+    return false;
+}
+
 exports.build_stream_list = function () {
     var streams = stream_data.subscribed_streams();
     if (streams.length === 0) {
         return;
     }
 
+    if (zoomed_to_topics) {
+        var stream_name = active_stream_name();
+        if (stream_name) {
+            streams = [stream_name];
+        }
+        else {
+            zoom_out();
+        }
+    }
+
     var sort_recent = (streams.length > 40);
 
 
@@ -226,7 +272,7 @@ function rebuild_recent_subjects(stream, active_topic) {
     // TODO: Call rebuild_recent_subjects less, not on every new
     // message.
     remove_expanded_subjects();
-    var max_subjects = 5;
+    var max_subjects = zoomed_to_topics ? 30: 5;
     var stream_li = get_filter_li('stream', stream);
 
     var topic_dom = build_subject_list(stream, active_topic, max_subjects);
@@ -405,6 +451,7 @@ $(function () {
             ui.change_tab_to('#home');
         }
         var stream = $(e.target).parents('li').attr('data-name');
+
         narrow.by('stream', stream, {select_first_unread: true, trigger: 'sidebar'});
 
         e.preventDefault();

static/styles/zulip.css

@@ -2721,7 +2721,15 @@ li.expanded_subject {
     display: none;
 }
 
-#streams_header, #userlist-header, #sharethelove-header, #group-pm-header {
+#topics_header {
+    display: none;
+}
+
+#streams_header,
+#topics_header,
+#userlist-header,
+#sharethelove-header,
+#group-pm-header {
     border-top: 1px solid #ddd;
     margin-top: 5px;
     margin-right: 10px;

templates/zerver/left-sidebar.html

@@ -12,6 +12,9 @@
                         <div id="streams_header"><h4 class="sidebar-title">STREAMS</h4>
                           <a href=""><i id="streams_inline_cog" class='icon-vector-cog' data-toggle="tooltip" title="Subscribe, add, or configure streams"></i></a>
                         </div>
+                        <div id="topics_header">
+                          <h4 class="sidebar-title">TOPICS</h4>
+                        </div>
                         <ul id="stream_filters" class="filters scrolling_list"></ul>
                       </div>
                       <div id="share-the-love">