left-sidebar: Enable up and down arrow keys.

When in the stream-searchbar, a user can now use the arrow keys to iterate
through the suggestions. Therefore the currently selected list element is
assigned a CSS class 'highlighted_user'.
The main functional testing is done with casper but node test are still
included to keep the high coverage.
Line-wrapping issues are resolved. Night-mode CSS handling is included.

frontend_tests/casper_tests/03-narrow.js

@@ -308,9 +308,51 @@ casper.then(function () {
 });
 
 casper.waitWhileSelector('#streams_list .input-append.notdisplayed', function () {
-    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]', 'Original stream list contains Denmark');
+    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]',
-    casper.test.assertExists('#stream_filters [data-stream-name="Scotland"]', 'Original stream list contains Scotland');
+                             'Original stream list contains Denmark');
-    casper.test.assertExists('#stream_filters [data-stream-name="Verona"]', 'Original stream list contains Verona');
+    casper.test.assertExists('#stream_filters [data-stream-name="Scotland"]',
+                             'Original stream list contains Scotland');
+    casper.test.assertExists('#stream_filters [data-stream-name="Verona"]',
+                             'Original stream list contains Verona');
+});
+
+// Enter the search box and test highlighted suggestion navigation
+casper.then(function () {
+    casper.evaluate(function () {
+        $('.stream-list-filter').expectOne()
+            .focus()
+            .trigger($.Event('click'));
+    });
+});
+
+casper.waitForSelector('#stream_filters .highlighted_stream', function () {
+    casper.test.info('Suggestion highlighting - initial situation');
+    casper.test.assertExist('#stream_filters [data-stream-name="Denmark"].highlighted_stream',
+                            'Stream Denmark is highlighted');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Scotland"].highlighted_stream',
+                                  'Stream Scotland is not highlighted');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Verona"].highlighted_stream',
+                                  'Stream Verona is not highlighted');
+});
+
+// Use arrow keys to navigate through suggestions
+casper.then(function () {
+    // Down: Denmark -> Scotland
+    casper.sendKeys('.stream-list-filter', casper.page.event.key.Down, {keepFocus: true});
+    // Up: Scotland -> Denmark
+    casper.sendKeys('.stream-list-filter', casper.page.event.key.Up, {keepFocus: true});
+    // Up: Denmark -> Verona
+    casper.sendKeys('.stream-list-filter', casper.page.event.key.Up, {keepFocus: true});
+});
+
+casper.waitForSelector('#stream_filters [data-stream-name="Verona"].highlighted_stream', function () {
+    casper.test.info('Suggestion highlighting - after arrow key navigation');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Denmark"].highlighted_stream',
+                                  'Stream Denmark is not highlighted');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Scotland"].highlighted_stream',
+                                  'Stream Scotland is not highlighted');
+    casper.test.assertExist('#stream_filters [data-stream-name="Verona"].highlighted_stream',
+                            'Stream Verona is highlighted');
 });
 
 // We search for the beginning of "Verona", not case sensitive
@@ -319,21 +361,28 @@ casper.then(function () {
         $('.stream-list-filter').expectOne()
             .focus()
             .val('ver')
-            .trigger($.Event('input'));
+            .trigger($.Event('input'))
+            .trigger($.Event('click'));
     });
 });
 
 // There will be no race condition between these two waits because we
 // expect them to happen in parallel.
 casper.waitWhileVisible('#stream_filters [data-stream-name="Denmark"]', function () {
-    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Denmark"]', 'Filtered stream list does not contain Denmark');
+    casper.test.info('Search term entered');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Denmark"]',
+                                  'Filtered stream list does not contain Denmark');
 });
 casper.waitWhileVisible('#stream_filters [data-stream-name="Scotland"]', function () {
-    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Scotland"]', 'Filtered stream list does not contain Scotland');
+    casper.test.assertDoesntExist('#stream_filters [data-stream-name="Scotland"]',
+                                  'Filtered stream list does not contain Scotland');
 });
 
 casper.then(function () {
-    casper.test.assertExists('#stream_filters [data-stream-name="Verona"]', 'Filtered stream list does contain Verona');
+    casper.test.assertExists('#stream_filters [data-stream-name="Verona"]',
+                             'Filtered stream list does contain Verona');
+    casper.test.assertExists('#stream_filters [data-stream-name="Verona"].highlighted_stream',
+                             'Stream Verona is highlighted');
 });
 
 // Clearing the list should give us back all the streams in the list
@@ -349,20 +398,24 @@ casper.then(function () {
 // There will be no race condition between these waits because we
 // expect them to happen in parallel.
 casper.waitUntilVisible('#stream_filters [data-stream-name="Denmark"]', function () {
-    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]', 'Restored stream list contains Denmark');
+    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]',
+                             'Restored stream list contains Denmark');
 });
 casper.waitUntilVisible('#stream_filters [data-stream-name="Scotland"]', function () {
-    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]', 'Restored stream list contains Scotland');
+    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]',
+                             'Restored stream list contains Scotland');
 });
 casper.waitUntilVisible('#stream_filters [data-stream-name="Verona"]', function () {
-    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]', 'Restored stream list contains Verona');
+    casper.test.assertExists('#stream_filters [data-stream-name="Denmark"]',
+                             'Restored stream list contains Verona');
 });
 
 
 casper.thenClick('#streams_header .sidebar-title');
 
 casper.waitForSelector('.input-append.notdisplayed', function () {
-    casper.test.assertExists('.input-append.notdisplayed', 'Stream filter box not visible after second click');
+    casper.test.assertExists('.input-append.notdisplayed',
+                             'Stream filter box not visible after second click');
 });
 
 // We search for the beginning of "Verona", not case sensitive

frontend_tests/node_tests/stream_list.js

@@ -20,6 +20,7 @@ var return_false = function () { return false; };
 var return_true = function () { return true; };
 
 set_global('topic_list', {});
+set_global('overlays', {});
 
 (function test_create_sidebar_row() {
     // Make a couple calls to create_sidebar_row() and make sure they
@@ -274,6 +275,141 @@ function initialize_stream_data() {
     assert($('<cars sidebar row html>').hasClass('active-filter'));
 }());
 
+var keydown_handler = $('.stream-list-filter').get_on_handler('keydown');
+
+(function test_arrow_navigation() {
+
+    stream_list.build_stream_list();
+    initialize_stream_data();
+
+    var stream_order = ['devel', 'Rome', 'test',
+                        '-divider-', 'announce','Denmark',
+                        '-divider-','cars'];
+    var stream_count = 8;
+
+    // Mock the jquery is func
+    $('.stream-list-filter').is = function (sel) {
+        if (sel === ':focus') {
+            return $('.stream-list-filter').is_focused();
+        }
+    };
+
+    // Mock the jquery first func
+    $('#stream_filters li.narrow-filter').first = function () {
+        return $('#stream_filters li[data-stream-name="' + stream_order[0] + '"]');
+    };
+    $('#stream_filters li.narrow-filter').last = function () {
+        return $('#stream_filters li[data-stream-name="' + stream_order[stream_count - 1] + '"]');
+    };
+
+    var sel_index = 0;
+    // Returns which element is highlighted
+    $('#stream_filters li.narrow-filter.highlighted_stream')
+        .expectOne().data = function () {
+            // Return random id (is further not used)
+            return 1;
+        };
+
+    // Returns element before highlighted one
+    $('#stream_filters li.narrow-filter.highlighted_stream')
+        .expectOne().prev = function () {
+            if (sel_index === 0) {
+                // Top, no prev element
+                return $('div.no_stream');
+            } else if (sel_index === 3 || sel_index === 6) {
+                return $('div.divider');
+            }
+            return $('#stream_filters li[data-stream-name="'
+                        + stream_order[sel_index-1] + '"]');
+        };
+
+    // Returns element after highlighted one
+    $('#stream_filters li.narrow-filter.highlighted_stream')
+        .expectOne().next = function () {
+            if (sel_index === stream_count - 1) {
+                // Bottom, no next element
+                return $('div.no_stream');
+            } else if (sel_index === 3 || sel_index === 6) {
+                return $('div.divider');
+            }
+            return $('#stream_filters li[data-stream-name="'
+                        + stream_order[sel_index + 1] + '"]');
+        };
+
+    for (var i = 0; i < stream_count; i = i + 1) {
+        if (i === 3 || i === 6) {
+            $('#stream_filters li[data-stream-name="' + stream_order[i] + '"]')
+                .is = return_false;
+        } else {
+            $('#stream_filters li[data-stream-name="' + stream_order[i] + '"]')
+                .is = return_true;
+        }
+    }
+
+    $('div.no_stream').is = return_false;
+    $('div.divider').is = return_false;
+
+    $('#stream_filters li.narrow-filter').length = stream_count;
+
+    // up
+    var e = {
+        keyCode: 38,
+        stopPropagation: function () {},
+        preventDefault: function () {},
+    };
+
+    keydown_handler(e);
+    // Now the last element is highlighted
+    sel_index = stream_count - 1;
+    keydown_handler(e);
+    sel_index = sel_index - 1;
+
+    // down
+    e = {
+        keyCode: 40,
+        stopPropagation: function () {},
+        preventDefault: function () {},
+    };
+    keydown_handler(e);
+    sel_index = sel_index + 1;
+    keydown_handler(e);
+}());
+
+(function test_enter_press() {
+    var e = {
+        keyCode: 13,
+        stopPropagation: function () {},
+        preventDefault: function () {},
+    };
+
+    overlays.is_active = return_false;
+    narrow_state.active = return_false;
+    stream_data.get_sub_by_id = function () {
+        return 'name';
+    };
+    narrow.by = noop;
+    stream_list.clear_and_hide_search = noop;
+
+    // Enter text and narrow users
+    $(".stream-list-filter").expectOne().val('');
+
+    keydown_handler(e);
+}());
+
+(function test_focusout_user_filter() {
+    var e = { };
+    var click_handler = $('.stream-list-filter').get_on_handler('focusout');
+    click_handler(e);
+}());
+
+(function test_focus_user_filter() {
+    var e = {
+        stopPropagation: function () {},
+    };
+    var click_handler = $('.stream-list-filter').get_on_handler('click');
+    click_handler(e);
+}());
+
 (function test_sort_streams() {
     stream_data.clear_subscriptions();
 

static/js/stream_list.js

@@ -302,6 +302,13 @@ function set_stream_unread_count(stream_id, count) {
 exports.update_streams_sidebar = function () {
     exports.build_stream_list();
 
+    // highlight new top stream
+    $('#stream_filters li.highlighted_stream').removeClass('highlighted_stream');
+    if (exports.searching()) {
+        var all_streams = $('#stream_filters li.narrow-filter');
+        exports.highlight_first(all_streams, 'highlighted_stream');
+    }
+
     if (! narrow_state.active()) {
         return;
     }
@@ -520,6 +527,10 @@ exports.initiate_search = function () {
         stream_popover.show_streamlist_sidebar();
     }
     filter.focus();
+
+    // Highlight first result
+    var all_streams = $('#stream_filters li.narrow-filter');
+    exports.highlight_first(all_streams, 'highlighted_stream');
 };
 
 exports.clear_and_hide_search = function () {
@@ -533,29 +544,139 @@ exports.clear_and_hide_search = function () {
 };
 
 function focus_stream_filter(e) {
+    if ($('#stream_filters li.narrow-filter.highlighted_stream').length === 0) {
+        // Highlight
+        var all_streams = $('#stream_filters li.narrow-filter');
+        exports.highlight_first(all_streams, 'highlighted_stream');
+    }
     e.stopPropagation();
 }
 
-function maybe_select_stream(e) {
+function focusout_stream_filter() {
-    if (e.keyCode === 13) {
+    // Undo highlighting
-        // Enter key was pressed
+    $('#stream_filters li.narrow-filter.highlighted_stream').removeClass('highlighted_stream');
+}
 
-        var top_stream_id = $('#stream_filters li.narrow-filter').first().data('stream-id');
+function keydown_enter_key() {
-        // undefined if there are no results
+    // Is there at least one stream?
-        if (top_stream_id !== undefined) {
+    if ($('#stream_filters li.narrow-filter').length > 0) {
-            var top_stream = stream_data.get_sub_by_id(top_stream_id);
+        var selected_stream_id = $('#stream_filters li.narrow-filter.highlighted_stream')
-            if (overlays.is_active()) {
+                                    .expectOne().data('stream-id');
-                ui_util.change_tab_to('#home');
+
-            }
+        var top_stream = stream_data.get_sub_by_id(selected_stream_id);
-            exports.clear_and_hide_search();
+
-            narrow.by('stream', top_stream.name,
+        if (overlays.is_active()) {
-                      {select_first_unread: true, trigger: 'sidebar enter key'});
+            ui_util.change_tab_to('#home');
-            e.preventDefault();
-            e.stopPropagation();
         }
+        exports.clear_and_hide_search();
+        narrow.by('stream', top_stream.name,
+                  {select_first_unread: true, trigger: 'sidebar enter key'});
     }
 }
 
+function next_sibing_in_dir(elm, dir_up) {
+    if (dir_up) {
+        return elm.prev();
+    }
+    return elm.next();
+}
+
+function keydown_arrow_key(dir_up, all_streams_selector,
+                           scroll_container, highlighting_class) {
+    // Are there streams to cyle through?
+    if ($(all_streams_selector).length > 0) {
+        var current_sel = $(all_streams_selector + '.' + highlighting_class).expectOne();
+        var next_sibling = next_sibing_in_dir(current_sel, dir_up);
+
+        if (highlighting_class === 'highlighted_stream'
+            && next_sibling.is('hr.stream-split')) {
+            // Only for the left sidebar
+            // Skip separator
+            next_sibling = next_sibing_in_dir(next_sibling, dir_up);
+        }
+
+        if (!next_sibling.is('li.narrow-filter')) {
+            // At the every bottom or top
+            var all_streams = $(all_streams_selector);
+            if (dir_up) {
+                // top -> start at the bottom
+                next_sibling = all_streams.last();
+            } else {
+                // bottom -> start at the top
+                next_sibling = all_streams.first();
+            }
+        }
+
+        // Classes must be explicitly named
+        if (highlighting_class === 'highlighted_stream') {
+            current_sel.removeClass('highlighted_stream');
+            next_sibling.addClass('highlighted_stream');
+        } else if (highlighting_class === 'highlighted_user') {
+            current_sel.removeClass('highlighted_user');
+            next_sibling.addClass('highlighted_user');
+        }
+
+        exports.scroll_element_into_container(next_sibling, scroll_container);
+    }
+}
+
+exports.keydown_filter = function (e, all_streams_selector, scroll_container,
+                                   highlighting_class, enter_press_function) {
+    // Function for left and right sidebar
+    // Could be placed somewhere else but ui.js is already very full
+
+    // Catch <enter> and <up-arrow>, <down-arrow> key presses
+    var handled = false;
+
+    switch (e.keyCode) {
+        case 13: {
+            // Enter key was pressed
+            enter_press_function();
+            handled = true;
+            break;
+        }
+        case 38: {
+            // Up-arrow key was pressed
+            keydown_arrow_key(true, all_streams_selector,
+                              scroll_container, highlighting_class);
+            handled = true;
+            break;
+        }
+        case 40: {
+            // Down-arrow key was pressed
+            keydown_arrow_key(false, all_streams_selector,
+                              scroll_container, highlighting_class);
+            handled = true;
+            break;
+        }
+    }
+
+    if (handled) {
+        // Since we already handled the key event above, suppress the browser handling it.
+        // We don't want the cursor to move when <arrow-up/down> is pressed.
+        // In the <enter> case:
+        // Prevent a newline from being entered into the soon-to-be-opened composebox
+        e.preventDefault();
+        e.stopPropagation();
+    }
+};
+
+function keydown_stream_filter(e) {
+    exports.keydown_filter(e, '#stream_filters li.narrow-filter',
+     $('#stream-filters-container'), 'highlighted_stream', keydown_enter_key);
+}
+
+exports.highlight_first = function (all_streams, highlighting_class) {
+    if (all_streams.length > 0) {
+        // Classes must be explicitly named
+        if (highlighting_class === 'highlighted_stream') {
+            all_streams.first().addClass('highlighted_stream');
+        } else if (highlighting_class === 'highlighted_user') {
+            all_streams.first().addClass('highlighted_user');
+        }
+    }
+};
+
 exports.toggle_filter_displayed = function (e) {
     if (e.target.id === 'streams_inline_cog') {
         return;
@@ -571,8 +692,9 @@ exports.toggle_filter_displayed = function (e) {
 $(function () {
     $(".stream-list-filter").expectOne()
         .on('click', focus_stream_filter)
+        .on('focusout', focusout_stream_filter)
         .on('input', update_streams_for_search)
-        .on('keydown', maybe_select_stream);
+        .on('keydown', keydown_stream_filter);
     $('#clear_search_stream_button').on('click', exports.clear_search);
 });
 

static/styles/dark.css

@@ -199,6 +199,7 @@ body.dark-mode li.active-sub-filter {
 
 body.dark-mode #global_filters li:hover,
 body.dark-mode #stream_filters li:hover,
+body.dark-mode #stream_filters li.highlighted_stream,
 body.dark-mode #group-pms li:hover,
 body.dark-mode #user_presences li:hover {
     background-color: hsla(136, 25%, 73%, 0.2);

static/styles/left-sidebar.css

@@ -84,7 +84,8 @@
 }
 
 #global_filters li:hover,
-#stream_filters li:hover {
+#stream_filters li:hover,
+#stream_filters li.highlighted_stream {
     background-color: hsl(93, 19%, 88%);
 }