From bd1fc342c80e3d1cff8f4fc2e99f4067733240da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 17 Sep 2019 10:15:33 -0700
Subject: [PATCH] Keyboard navigation

Summary: Adding keyboard navigation for bookmarks

Reviewed By: jknoxville

Differential Revision: D17419667

fbshipit-source-id: 851f93d662b6071c3478dca5c9d20b9814e15c1b
---
 src/chrome/LocationsButton.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/chrome/LocationsButton.tsx b/src/chrome/LocationsButton.tsx
index 9da8e73a6..1e66e4483 100644
--- a/src/chrome/LocationsButton.tsx
+++ b/src/chrome/LocationsButton.tsx
@@ -13,6 +13,7 @@ import {readBookmarksFromDB} from '../plugins/navigation/util/indexedDB';
 import {PersistedState as NavPluginState} from '../plugins/navigation/types';
 import BaseDevice from '../devices/BaseDevice';
 import {State as PluginState} from 'src/reducers/pluginStates';
+import {platform} from 'os';
 
 type State = {
   bookmarks: Array<Bookmark>;
@@ -59,6 +60,14 @@ class LocationsButton extends Component<Props, State> {
     retreivingBookmarks: false,
   };
 
+  componentWillMount() {
+    document.addEventListener('keydown', this.keyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.keyDown);
+  }
+
   goToLocation = (location: string) => {
     const {selectedDevice} = this.props;
     if (selectedDevice != null) {
@@ -66,6 +75,17 @@ class LocationsButton extends Component<Props, State> {
     }
   };
 
+  keyDown = (e: KeyboardEvent) => {
+    if (
+      ((platform() === 'darwin' && e.metaKey) ||
+        (platform() !== 'darwin' && e.ctrlKey)) &&
+      /^\d$/.test(e.key) &&
+      this.state.bookmarks.length >= parseInt(e.key, 10)
+    ) {
+      this.goToLocation(this.state.bookmarks[parseInt(e.key, 10) - 1].uri);
+    }
+  };
+
   updateBookmarks = () => {
     readBookmarksFromDB().then(bookmarksMap => {
       const bookmarks: Array<Bookmark> = [];
@@ -92,11 +112,12 @@ class LocationsButton extends Component<Props, State> {
             label: 'Bookmarks',
             enabled: false,
           },
-          ...bookmarks.map(bookmark => {
+          ...bookmarks.map((bookmark, i) => {
             return {
               click: () => {
                 this.goToLocation(bookmark.uri);
               },
+              accelerator: i < 9 ? `CmdOrCtrl+${i + 1}` : undefined,
               label: shortenText(
                 bookmark.commonName + ' - ' + bookmark.uri,
                 100,