Extract top_left_corner.js.

Here are the functions in top_left_corner:

    get_global_filter_li: pure code move
    update_count_in_dom: simplifed copy of similar function in stream_list.js
    update_dom_with_unread_counts: pure code move, split out from function
       of same name in stream_list.js
    delselect_top_left_corner_items: pure code move
    handle_narrow_activated: pure code move + rename
    handle_narrow_deactivated: pure code move, split out from from function
       of smae name in stream_list.js

.eslintrc.json

@@ -100,6 +100,7 @@
         "notifications": false,
         "message_flags": false,
         "bot_data": false,
+        "top_left_corner": false,
         "stream_sort": false,
         "stream_list": false,
         "stream_popover": false,

frontend_tests/node_tests/stream_list.js

@@ -231,13 +231,6 @@ function initialize_stream_data() {
         topic: noop,
     });
 
-    var pm_expanded;
-
-    set_global('pm_list', {
-        close: noop,
-        expand: function () { pm_expanded = true; },
-    });
-
     topic_list.set_click_handlers = noop;
     topic_list.close = noop;
     topic_list.remove_expanded_topics = noop;
@@ -274,25 +267,6 @@ function initialize_stream_data() {
     assert(!$('<cars sidebar row html>').hasClass('active-filter')); // false because of topic
     assert(scrollbar_updated);  // Make sure we are updating perfectScrollbar.
 
-    assert(!pm_expanded);
-    filter = new Filter([
-        {operator: 'is', operand: 'private'},
-    ]);
-    stream_list.handle_narrow_activated(filter);
-    assert(pm_expanded);
-
-    filter = new Filter([
-        {operator: 'is', operand: 'mentioned'},
-    ]);
-    stream_list.handle_narrow_activated(filter);
-    assert(stream_list.get_global_filter_li('mentioned').hasClass('active-filter'));
-
-    filter = new Filter([
-        {operator: 'in', operand: 'home'},
-    ]);
-    stream_list.handle_narrow_activated(filter);
-    assert(stream_list.get_global_filter_li('home').hasClass('active-filter'));
-
     filter = new Filter([
         {operator: 'stream', operand: 'cars'},
     ]);
@@ -377,20 +351,6 @@ function initialize_stream_data() {
     stream_li.addClass('stream-with-count');
     assert(stream_li.hasClass('stream-with-count'));
 
-    make_elem(
-        $("#global_filters li[data-name='mentioned']"),
-        '<mentioned-count>',
-        '<mentioned-value>'
-    );
-
-    make_elem(
-        $("#global_filters li[data-name='home']"),
-        '<home-count>',
-        '<home-value>'
-    );
-
-    unread_ui.set_count_toggle_button = noop;
-
     var stream_count = new Dict();
     var stream_id = 11;
 
@@ -404,17 +364,12 @@ function initialize_stream_data() {
     var counts = {
         stream_count: stream_count,
         topic_count: new Dict(),
-        mentioned_message_count: 222,
-        home_unread_messages: 333,
     };
 
     stream_list.update_dom_with_unread_counts(counts);
     assert.equal($('<stream li>').text(), 'never-been-set');
     assert(!stream_li.hasClass('stream-with-count'));
 
-    assert.equal($('<mentioned-value>').text(), '222');
-    assert.equal($('<home-value>').text(), '333');
-
     stream_count.set(stream_id, 99);
 
     stream_list.update_dom_with_unread_counts(counts);

frontend_tests/node_tests/top_left_corner.js

@@ -0,0 +1,72 @@
+set_global('$', global.make_zjquery());
+
+zrequire('Filter', 'js/filter');
+zrequire('unread_ui');
+
+zrequire('top_left_corner');
+
+var noop = function () {};
+
+(function test_narrowing() {
+    var pm_expanded;
+
+    set_global('pm_list', {
+        close: noop,
+        expand: function () { pm_expanded = true; },
+    });
+
+    assert(!pm_expanded);
+    var filter = new Filter([
+        {operator: 'is', operand: 'private'},
+    ]);
+    top_left_corner.handle_narrow_activated(filter);
+    assert(pm_expanded);
+
+    filter = new Filter([
+        {operator: 'is', operand: 'mentioned'},
+    ]);
+    top_left_corner.handle_narrow_activated(filter);
+    assert(top_left_corner.get_global_filter_li('mentioned').hasClass('active-filter'));
+
+    filter = new Filter([
+        {operator: 'in', operand: 'home'},
+    ]);
+    top_left_corner.handle_narrow_activated(filter);
+    assert(top_left_corner.get_global_filter_li('home').hasClass('active-filter'));
+}());
+
+(function test_update_count_in_dom() {
+    function make_elem(elem, count_selector, value_selector) {
+        var count = $(count_selector);
+        var value = $(value_selector);
+        elem.set_find_results('.count', count);
+        count.set_find_results('.value', value);
+        count.set_parent(elem);
+
+        return elem;
+    }
+
+    var counts = {
+        mentioned_message_count: 222,
+        home_unread_messages: 333,
+    };
+
+    make_elem(
+        $("#global_filters li[data-name='mentioned']"),
+        '<mentioned-count>',
+        '<mentioned-value>'
+    );
+
+    make_elem(
+        $("#global_filters li[data-name='home']"),
+        '<home-count>',
+        '<home-value>'
+    );
+
+
+    top_left_corner.update_dom_with_unread_counts(counts);
+
+    assert.equal($('<mentioned-value>').text(), '222');
+    assert.equal($('<home-value>').text(), '333');
+
+}());

static/js/narrow.js

@@ -244,6 +244,7 @@ exports.activate = function (raw_operators, opts) {
 
     var current_filter = narrow_state.get_current_filter();
 
+    top_left_corner.handle_narrow_activated(current_filter);
     stream_list.handle_narrow_activated(current_filter);
 
     $(document).trigger($.Event('narrow_activated.zulip', {msg_list: message_list.narrowed,
@@ -422,6 +423,7 @@ exports.deactivate = function () {
 
     compose_fade.update_message_list();
 
+    top_left_corner.handle_narrow_deactivated();
     stream_list.handle_narrow_deactivated();
 
     $(document).trigger($.Event('narrow_deactivated.zulip', {msg_list: current_msg_list}));

static/js/stream_list.js

@@ -2,11 +2,6 @@ var stream_list = (function () {
 
 var exports = {};
 
-exports.get_global_filter_li = function (filter_name) {
-    var selector = "#global_filters li[data-name='" + filter_name + "']";
-    return $(selector);
-};
-
 exports.update_count_in_dom = function (unread_count_elem, count) {
     var count_span = unread_count_elem.find('.count');
     var value_span = count_span.find('.value');
@@ -311,13 +306,6 @@ exports.update_streams_sidebar = function () {
 };
 
 exports.update_dom_with_unread_counts = function (counts) {
-    // We currently handle these message categories:
-    //    home, starred, mentioned, streams, and topics
-    //
-    // Note that similar methods elsewhere in the code update
-    // the "Private Message" section in the upper left corner
-    // and the buddy lists in the right sidebar.
-
     // counts.stream_count maps streams to counts
     counts.stream_count.each(function (count, stream_id) {
         set_stream_unread_count(stream_id, count);
@@ -329,19 +317,6 @@ exports.update_dom_with_unread_counts = function (counts) {
             topic_list.set_count(stream_id, subject, count);
         });
     });
-
-    // mentioned/home have simple integer counts
-    var mentioned_li = exports.get_global_filter_li('mentioned');
-    var home_li = exports.get_global_filter_li('home');
-
-    exports.update_count_in_dom(mentioned_li, counts.mentioned_message_count);
-    exports.update_count_in_dom(home_li, counts.home_unread_messages);
-
-    unread_ui.set_count_toggle_button($("#streamlist-toggle-unreadcount"),
-                                      counts.home_unread_messages);
-
-    unread_ui.animate_mention_changes(mentioned_li,
-                                      counts.mentioned_message_count);
 };
 
 exports.rename_stream = function (sub) {
@@ -446,55 +421,7 @@ exports.update_stream_sidebar_for_narrow = function (filter) {
     return stream_li;
 };
 
-function deselect_top_left_corner_items() {
-    function remove(name) {
-        var li = exports.get_global_filter_li(name);
-        li.removeClass('active-filter active-sub-filter');
-    }
-
-    remove('home');
-    remove('private');
-    remove('starred');
-    remove('mentioned');
-}
-
-exports.update_top_left_corner_for_narrow = function (filter) {
-    deselect_top_left_corner_items();
-
-    var ops;
-    var filter_name;
-    var filter_li;
-
-    // TODO: handle confused filters like "in:all stream:foo"
-    ops = filter.operands('in');
-    if (ops.length >= 1) {
-        filter_name = ops[0];
-        if (filter_name === 'home') {
-            filter_li = exports.get_global_filter_li(filter_name);
-            filter_li.addClass('active-filter');
-        }
-    }
-    ops = filter.operands('is');
-    if (ops.length >= 1) {
-        filter_name = ops[0];
-        if ((filter_name === 'starred') || (filter_name === 'mentioned')) {
-            filter_li = exports.get_global_filter_li(filter_name);
-            filter_li.addClass('active-filter');
-        }
-    }
-
-    var op_is = filter.operands('is');
-    var op_pm = filter.operands('pm-with');
-    if (((op_is.length >= 1) && _.contains(op_is, "private")) || op_pm.length >= 1) {
-        pm_list.expand(op_pm);
-    } else {
-        pm_list.close();
-    }
-};
-
 exports.handle_narrow_activated = function (filter) {
-    exports.update_top_left_corner_for_narrow(filter);
-
     var stream_li = exports.update_stream_sidebar_for_narrow(filter);
     if (stream_li) {
         exports.scroll_stream_into_view(stream_li);
@@ -505,12 +432,7 @@ exports.handle_narrow_activated = function (filter) {
 
 exports.handle_narrow_deactivated = function () {
     deselect_stream_items();
-    deselect_top_left_corner_items();
     clear_topics();
-    pm_list.close();
-
-    var filter_li = exports.get_global_filter_li('home');
-    filter_li.addClass('active-filter');
 };
 
 exports.initialize = function () {

static/js/top_left_corner.js

@@ -0,0 +1,97 @@
+var top_left_corner = (function () {
+
+var exports = {};
+
+exports.get_global_filter_li = function (filter_name) {
+    var selector = "#global_filters li[data-name='" + filter_name + "']";
+    return $(selector);
+};
+
+exports.update_count_in_dom = function (unread_count_elem, count) {
+    var count_span = unread_count_elem.find('.count');
+    var value_span = count_span.find('.value');
+
+    if (count === 0) {
+        count_span.hide();
+        value_span.text('');
+        return;
+    }
+
+    count_span.show();
+    value_span.text(count);
+};
+
+
+exports.update_dom_with_unread_counts = function (counts) {
+    // Note that "Private messages" counts are handled in pm_list.js.
+
+    // mentioned/home have simple integer counts
+    var mentioned_li = exports.get_global_filter_li('mentioned');
+    var home_li = exports.get_global_filter_li('home');
+
+    exports.update_count_in_dom(mentioned_li, counts.mentioned_message_count);
+    exports.update_count_in_dom(home_li, counts.home_unread_messages);
+
+    unread_ui.animate_mention_changes(mentioned_li,
+                                      counts.mentioned_message_count);
+};
+
+function deselect_top_left_corner_items() {
+    function remove(name) {
+        var li = exports.get_global_filter_li(name);
+        li.removeClass('active-filter active-sub-filter');
+    }
+
+    remove('home');
+    remove('private');
+    remove('starred');
+    remove('mentioned');
+}
+
+exports.handle_narrow_activated = function (filter) {
+    deselect_top_left_corner_items();
+
+    var ops;
+    var filter_name;
+    var filter_li;
+
+    // TODO: handle confused filters like "in:all stream:foo"
+    ops = filter.operands('in');
+    if (ops.length >= 1) {
+        filter_name = ops[0];
+        if (filter_name === 'home') {
+            filter_li = exports.get_global_filter_li(filter_name);
+            filter_li.addClass('active-filter');
+        }
+    }
+    ops = filter.operands('is');
+    if (ops.length >= 1) {
+        filter_name = ops[0];
+        if ((filter_name === 'starred') || (filter_name === 'mentioned')) {
+            filter_li = exports.get_global_filter_li(filter_name);
+            filter_li.addClass('active-filter');
+        }
+    }
+
+    var op_is = filter.operands('is');
+    var op_pm = filter.operands('pm-with');
+    if (((op_is.length >= 1) && _.contains(op_is, "private")) || op_pm.length >= 1) {
+        pm_list.expand(op_pm);
+    } else {
+        pm_list.close();
+    }
+};
+
+exports.handle_narrow_deactivated = function () {
+    deselect_top_left_corner_items();
+    pm_list.close();
+
+    var filter_li = exports.get_global_filter_li('home');
+    filter_li.addClass('active-filter');
+};
+
+return exports;
+}());
+if (typeof module !== 'undefined') {
+    module.exports = top_left_corner;
+}

static/js/unread_ui.js

@@ -58,10 +58,15 @@ exports.update_unread_counts = function () {
     // This updates some DOM elements directly, so try to
     // avoid excessive calls to this.
     activity.update_dom_with_unread_counts(res);
+    top_left_corner.update_dom_with_unread_counts(res);
     stream_list.update_dom_with_unread_counts(res);
     pm_list.update_dom_with_unread_counts(res);
     notifications.update_title_count(res.home_unread_messages);
     notifications.update_pm_count(res.private_message_count);
+
+    exports.set_count_toggle_button($("#streamlist-toggle-unreadcount"),
+                                      res.home_unread_messages);
+
 };
 
 exports.enable = function enable() {

zproject/settings.py

@@ -857,6 +857,7 @@ JS_SPECS = {
             'js/recent_senders.js',
             'js/stream_sort.js',
             'js/topic_generator.js',
+            'js/top_left_corner.js',
             'js/stream_list.js',
             'js/filter.js',
             'js/message_list_view.js',