buddy list: Populate user-fade via templates.

When we populate the buddy list or update it for activity, we now
have buddy_data set a faded flag that is rendered in the template.
This avoids some re-rendering overhead and is on the eventual path
to having our widget be more data-oriented (and all rendering happens
"behind" the widget).

We still do direct DOM updates when the compose state changes or
when we get peer subscription events.

frontend_tests/node_tests/activity.js

@@ -53,6 +53,8 @@ set_global('keydown_util', {
     },
 });
 
+set_global('compose_state', {});
+
 set_global('stream_list', {
     scroll_element_into_container: () => {},
 });
@@ -128,8 +130,6 @@ people.add_in_realm(zoe);
 people.add_in_realm(me);
 people.initialize_current_user(me.user_id);
 
-compose_fade.update_faded_users = () => {};
-
 const real_update_huddles = activity.update_huddles;
 activity.update_huddles = () => {};
 
@@ -298,6 +298,9 @@ reset_setup();
 
 (function test_presence_list_full_update() {
     $('.user-list-filter').focus();
+    compose_state.recipient = () => fred.email;
+    compose_fade.set_focused_recipient("private");
+
     const users = activity.build_user_sidebar();
     assert.deepEqual(users, [{
             name: 'Fred Flintstone',
@@ -306,6 +309,7 @@ reset_setup();
             num_unread: 0,
             type: 'active',
             type_desc: 'is active',
+            faded: false,
         },
         {
             name: 'Jill Hill',
@@ -314,6 +318,7 @@ reset_setup();
             num_unread: 0,
             type: 'active',
             type_desc: 'is active',
+            faded: true,
         },
         {
             name: 'Norbert Oswald',
@@ -322,6 +327,7 @@ reset_setup();
             num_unread: 0,
             type: 'active',
             type_desc: 'is active',
+            faded: true,
         },
         {
             name: 'Zoe Yang',
@@ -330,6 +336,7 @@ reset_setup();
             num_unread: 0,
             type: 'active',
             type_desc: 'is active',
+            faded: true,
         },
         {
             name: 'Alice Smith',
@@ -338,6 +345,7 @@ reset_setup();
             num_unread: 0,
             type: 'idle',
             type_desc: 'is not active',
+            faded: true,
         },
         {
             name: 'Marky Mark',
@@ -346,6 +354,7 @@ reset_setup();
             num_unread: 0,
             type: 'idle',
             type_desc: 'is not active',
+            faded: true,
         },
     ]);
 }());

static/js/activity.js

@@ -210,7 +210,7 @@ exports.insert_user_into_list = function (user_id) {
         return;
     }
 
-    var info = buddy_data.info_for(user_id);
+    var info = buddy_data.get_item(user_id);
 
     buddy_list.insert_or_move({
         key: user_id,
@@ -219,9 +219,6 @@ exports.insert_user_into_list = function (user_id) {
     });
 
     exports.update_scrollbar.users();
-
-    var elt = get_pm_list_item(user_id);
-    compose_fade.update_one_user_row(elt);
 };
 
 exports.searching = function () {
@@ -241,9 +238,6 @@ exports.build_user_sidebar = function () {
         items: user_info,
     });
 
-    // Update user fading, if necessary.
-    compose_fade.update_faded_users();
-
     resize.resize_page_components();
 
     return user_info; // for testing

static/js/buddy_data.js

@@ -18,6 +18,18 @@ var presence_descriptions = {
     idle:   'is not active',
 };
 
+var fade_config = {
+    get_user_id: function (item) {
+        return item.user_id;
+    },
+    fade: function (item) {
+        item.faded = true;
+    },
+    unfade: function (item) {
+        item.faded = false;
+    },
+};
+
 function level(status) {
     switch (status) {
         case 'active':
@@ -103,6 +115,12 @@ exports.info_for = function (user_id) {
     };
 };
 
+exports.get_item = function (user_id) {
+    var info = exports.info_for(user_id);
+    compose_fade.update_user_info([info], fade_config);
+    return info;
+};
+
 function user_is_recently_active(user_id) {
     // return true if the user has a green/orange cirle
     return level(presence.get_status(user_id)) <= 2;
@@ -156,6 +174,8 @@ exports.get_items = function (filter_text) {
         return typeof person !== "undefined";
     });
 
+    compose_fade.update_user_info(user_info, fade_config);
+
     return user_info;
 };
 

static/js/compose_fade.js

@@ -196,16 +196,6 @@ function want_normal_display() {
     return focused_recipient.type === "private" && focused_recipient.reply_to === "";
 }
 
-exports.update_one_user_row = function (item) {
-    var conf = user_fade_config;
-
-    if (want_normal_display()) {
-        conf.unfade(item);
-    } else {
-        update_user_row_when_fading(item, conf);
-    }
-};
-
 function do_update_all() {
     var user_items = buddy_list.get_items();
 
@@ -226,10 +216,14 @@ function do_update_all() {
 exports.update_faded_users = function () {
     var user_items = buddy_list.get_items();
 
+    exports.update_user_info(user_items, user_fade_config);
+};
+
+exports.update_user_info = function (items, conf) {
     if (want_normal_display()) {
-        display_users_normally(user_items, user_fade_config);
+        display_users_normally(items, conf);
     } else {
-        fade_users(user_items, user_fade_config);
+        fade_users(items, conf);
     }
 };
 

static/templates/user_presence_row.handlebars

@@ -1,4 +1,4 @@
-<li data-user-id="{{user_id}}" class="user_sidebar_entry {{#if num_unread}}user-with-count {{/if}}narrow-filter user_{{type}}">
+<li data-user-id="{{user_id}}" class="user_sidebar_entry {{#if num_unread}} user-with-count {{/if}} narrow-filter user_{{type}} {{#if faded}} user-fade {{/if}}">
     <span class="selectable_sidebar_block">
         <span class="user-status-indicator"></span>
         <a href="{{href}}"