hotkeys: Add arrow key navigation in streams/subscriptions menu.

Fixes #4198.

frontend_tests/node_tests/hotkey.js

@@ -174,6 +174,7 @@ function stubbing(func_name_to_stub, test_function) {
     // Ok, now test keys that work when we're viewing messages.
     hotkey.processing_text = return_false;
     hotkey.is_settings_page = return_false;
+    hotkey.is_subs = return_false;
 
     assert_mapping('?', 'ui.show_info_overlay');
     assert_mapping('/', 'search.initiate_search');
@@ -278,6 +279,12 @@ function stubbing(func_name_to_stub, test_function) {
     assert_mapping('left_arrow', 'lightbox.prev');
     assert_mapping('right_arrow', 'lightbox.next');
 
+    hotkey.is_subs = return_true;
+    global.ui_state.home_tab_obscured = return_true;
+    assert_mapping('up_arrow', 'subs.arrow_keys');
+    assert_mapping('down_arrow', 'subs.arrow_keys');
+    global.ui_state.home_tab_obscured = return_false;
+
     hotkey.is_settings_page = return_true;
     assert_unmapped('end');
     assert_unmapped('home');

static/js/hotkey.js

@@ -33,6 +33,10 @@ exports.is_lightbox_open = function () {
     return lightbox.is_open;
 };
 
+exports.is_subs = function () {
+    return subs.is_open;
+};
+
 var actions_dropdown_hotkeys = [
     'down_arrow',
     'up_arrow',
@@ -427,6 +431,11 @@ exports.process_hotkey = function (e, hotkey) {
     }
 
     if (hotkey.message_view_only && ui_state.home_tab_obscured()) {
+        // if up/down arrow key was pressed and streams menu is open
+        if ((event_name === 'up_arrow' || event_name === 'down_arrow') && exports.is_subs()) {
+            subs.arrow_keys(event_name);
+            return true;
+        }
         return false;
     }
 

static/js/subs.js

@@ -715,6 +715,31 @@ exports.close = function () {
     subs.remove_miscategorized_streams();
 };
 
+exports.arrow_keys = function (event) {
+    var active_row = $('div.stream-row.active'); // current active row
+    var switch_row; // initialize var for row that we're switching to
+    // if rows have undefined attributes (no selected/active row)
+    if (!active_row.attr('data-stream-id')) {
+        switch_row = $('div.stream-row:first-child'); // set active row to first row
+    } else if (event === 'up_arrow') {
+        switch_row = active_row.prev(); // previous row
+    } else if (event === 'down_arrow') {
+        switch_row = active_row.next(); // next row
+    }
+
+    var switch_row_id = switch_row.attr('data-stream-id');
+    // if both ID and row are defined, making sure to escape hidden rows
+    if (switch_row_id && !switch_row.hasClass('notdisplayed')) {
+        var switch_row_name = stream_data.get_sub_by_id(switch_row_id).name;
+        var hash = ['#streams', switch_row_id, switch_row_name]; // set hash
+        var hash_components = { // hash_components to send to subs.change_state()
+            base: hash.shift(),
+            arguments: hash,
+        };
+        exports.change_state(hash_components);
+    }
+};
+
 function ajaxSubscribe(stream) {
     // Subscribe yourself to a single stream.
     var true_stream_name;