[MD Bookmarks] Add keyboard navigation and selection to bookmark list.

chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js

Index: chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
diff --git a/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js b/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
index e1ca42ba51debdcd329abdd9d82ae7daf5e608c2..d104c2a69b115677a49f698aa3decdca900248e0 100644
--- a/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
+++ b/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
@@ -180,5 +180,158 @@ TEST_F('MaterialBookmarksFocusTest', 'All', function() {
     });
   });
 
+  suite('<bookmarks-list>', function() {
+    var list;
+    var store;
+    var items;
+    var multiKey = cr.isMac ? 'meta' : 'ctrl';
+
+    function keydown(item, key, modifiers) {
+      MockInteractions.keyDownOn(item, '', modifiers, key);
+    }
+
+    setup(function() {
+      store = new bookmarks.TestStore({
+        nodes: testTree(createFolder(
+            '1',
+            [
+              createItem('2'),
+              createItem('3'),
+              createItem('4'),
+              createItem('5'),
+              createItem('6'),
+              createFolder('7', []),
+            ])),
+        selectedFolder: '1',
+      });
+      store.setReducersEnabled(true);
+      bookmarks.Store.instance_ = store;
+
+      list = document.createElement('bookmarks-list');
+      list.style.height = '100%';
+      list.style.width = '100%';
+      list.style.position = 'absolute';
+      replaceBody(list);
+      Polymer.dom.flush();
+      items = list.root.querySelectorAll('bookmarks-item');
+    });
+
+    test('simple keyboard selection', function() {
+      var focusedItem = items[0];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertEquals(
+          '0', focusedItem.$$('.more-vert-button').getAttribute('tabindex'));
+      focusedItem.focus();
+
+      keydown(focusedItem, 'ArrowDown');
+      focusedItem = items[1];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertEquals(
+          '0', focusedItem.$$('.more-vert-button').getAttribute('tabindex'));
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowUp');
+      focusedItem = items[0];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'End');
+      focusedItem = items[5];
+      assertDeepEquals(['7'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Home');
+      focusedItem = items[0];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Escape');
+      assertDeepEquals([], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'a', 'ctrl');
+      assertDeepEquals(
+          ['2', '3', '4', '5', '6', '7'],
+          normalizeSet(store.data.selection.items));
+    });
+
+    test('shift selection', function() {
+      // TODO(calamity): Make the first item the anchor index when a new folder
+      // is selected.
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, 'ArrowDown');
+      focusedItem = items[1];
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowUp', 'shift');
+      focusedItem = items[0];
+      assertDeepEquals(['2', '3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'shift');
+      focusedItem = items[1];
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(['3', '4'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'End', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(
+          ['3', '4', '5', '6', '7'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Home', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(['2', '3'], normalizeSet(store.data.selection.items));
+    });
+
+    test('ctrl selection', function() {
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[1];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));

[tsergeant, 2017/05/22 05:19:00]

Should you be checking that the anchor changes here?

[calamity, 2017/05/23 05:27:29]

Done.

+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[2];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2', '4'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+    });
+
+    test('ctrl+shift selection', function() {
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[1];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[2];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', ['ctrl', 'shift']);
+      focusedItem = items[3];
+      assertDeepEquals(
+          ['2', '4', '5'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', ['ctrl', 'shift']);
+      focusedItem = items[3];
+      assertDeepEquals(
+          ['2', '4', '5', '6'], normalizeSet(store.data.selection.items));
+    });
+  });
+
   mocha.run();
 });