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

chrome/browser/resources/md_bookmarks/list.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Polymer({
   is: 'bookmarks-list',
 
   behaviors: [
     bookmarks.StoreClient,
   ],
@@ skipping 32 matching lines @@
     var list = /** @type {IronListElement} */ (this.$.bookmarksCard);
     list.scrollTarget = this;
 
     this.watch('displayedIds_', function(state) {
       return bookmarks.util.getDisplayedList(state);
     });
     this.watch('searchTerm_', function(state) {
       return state.search.term;
     });
     this.updateFromStore();
+
+    this.$.bookmarksCard.addEventListener(
+        'keydown', this.onItemKeydown_.bind(this), true);
   },
 
   /** @return {HTMLElement} */
   getDropTarget: function() {
     return this.$.message;
   },
 
   /**
    * Updates `displayedList_` using splices to be equivalent to `newValue`. This
    * allows the iron-list to delete sublists of items which preserves scroll and
@@ skipping 30 matching lines @@
 
   /** @private */
   isEmptyList_: function() {
     return this.displayedList_.length == 0;
   },
 
   /** @private */
   deselectItems_: function() {
     this.dispatch(bookmarks.actions.deselectItems());
   },
+
+  /** @private */
+  selectAllItems_: function() {
+    this.dispatch(
+        bookmarks.actions.selectAll(this.displayedIds_, this.getState()));
+  },
+
+

[tsergeant, 2017/05/23 07:25:17]

Nit: There's an extra \n here

[calamity, 2017/05/25 07:36:30]

Done.

+  getIndexForItemElement_: function(el) {

[tsergeant, 2017/05/23 07:25:17]

Nit: Closure annotations here.

[calamity, 2017/05/25 07:36:30]

Done.

+    return this.$.bookmarksCard.modelForElement(el).index;
+  },
+
+  /**
+   * @param {KeyboardEvent} e
+   * @private
+   */
+  onItemKeydown_: function(e) {
+    var handled = true;
+    var list = this.$.bookmarksCard;
+    var focusMoved = false;
+    var focusedIndex = this.getIndexForItemElement_(e.target);
+    if (e.key == 'ArrowUp') {
+      focusedIndex--;
+      focusMoved = true;
+    } else if (e.key == 'ArrowDown') {
+      focusedIndex++;
+      focusMoved = true;
+      e.preventDefault();
+    } else if (e.key == 'Home') {
+      focusedIndex = 0;
+      focusMoved = true;
+    } else if (e.key == 'End') {
+      focusedIndex = list.items.length - 1;
+      focusMoved = true;
+    } else if (e.key == ' ' && e.ctrlKey) {
+      this.dispatch(bookmarks.actions.selectItem(
+          this.displayedIds_[focusedIndex], this.getState(), {
+            clear: false,
+            range: false,
+            toggle: true,
+          }));
+    } else if (e.key == 'a' && e.ctrlKey) {
+      this.selectAllItems_();
+    } else if (e.key == 'Escape') {
+      this.deselectItems_();
+    } else {
+      handled = false;
+    }
+
+    if (focusMoved) {
+      focusedIndex = Math.min(list.items.length - 1, Math.max(0, focusedIndex));
+      list.focusItem(focusedIndex);
+
+      if (e.ctrlKey && !e.shiftKey) {
+        this.dispatch(
+            bookmarks.actions.updateAnchor(this.displayedIds_[focusedIndex]));
+      } else {
+        // If the focus moved from something other than a Ctrl + move event,
+        // update the selection.
+        var config = {
+          clear: !e.ctrlKey,
+          range: e.shiftKey,
+          toggle: false,
+        };
+
+        this.dispatch(bookmarks.actions.selectItem(
+            this.displayedIds_[focusedIndex], this.getState(), config));
+      }
+    }
+
+    if (handled)
+      e.stopPropagation();
+  },
 });