Visually distinguish when a message is persistently vs. temporarily selected

(imported from commit d626b3460a3a3ad46bd9ebfb65d73a6c267c2251)

tools/jslint/check-all.js

@@ -37,7 +37,7 @@ var globals =
     + ' update_autocomplete autocomplete_needs_update'
 
     // zephyr.js
-    + ' message_array message_dict'
+    + ' message_array message_dict selected_message_class'
     + ' status_classes clear_table add_to_table subject_dict'
     + ' keep_pointer_in_view move_pointer_at_page_top_and_bottom'
     + ' respond_to_message'

zephyr/static/js/narrow.js

@@ -26,6 +26,10 @@ function do_narrow(description, filter_function) {
     $("#currently_narrowed_to").html(description).attr("title", description);
     $("#zhome").removeClass("focused_table");
 
+    // Indicate both which message is persistently selected and which
+    // is temporarily selected
+    select_and_show_by_id(selected_message_id);
+    selected_message_class = "narrowed_selected_message";
     select_and_show_by_id(narrow_target_message_id);
     scroll_to_selected();
 }
@@ -103,6 +107,7 @@ function show_all_messages() {
     $("#show_all_messages").attr("disabled", "disabled");
     $("#currently_narrowed_to").html("");
 
+    selected_message_class = "selected_message";
     // Includes scrolling.
     select_and_show_by_id(persistent_message_id);
 

zephyr/static/js/zephyr.js

@@ -3,6 +3,8 @@ var message_dict = {};
 var subject_dict = {};
 var people_hash = {};
 
+var selected_message_class = 'selected_message';
+
 $(function () {
     var i;
     var send_status = $('#send-status');
@@ -166,8 +168,8 @@ function select_and_show_by_id(message_id) {
 }
 
 function update_selected_message(message) {
-    $('.selected_message').removeClass('selected_message');
-    message.addClass('selected_message');
+    $('.' + selected_message_class).removeClass(selected_message_class);
+    message.addClass(selected_message_class);
 
     var new_selected_id = get_id(message);
     if (!narrowed && new_selected_id !== selected_message_id) {

zephyr/static/styles/zephyr.css

@@ -81,6 +81,10 @@ td.pointer {
     background-color: blue;
 }
 
+.narrowed_selected_message .pointer {
+    background-color: #6699FF;
+}
+
 .message_picture {
     vertical-align: top;
     text-align: right;