React Devtools Component: Add hotkeys to start inspecting node

Author: Gianfranco

packages/react-devtools-extensions/chrome/manifest.json

@@ -48,5 +48,15 @@
       "js": ["build/injectGlobalHook.js"],
       "run_at": "document_start"
     }
-  ]
+  ],
+
+  "commands": {
+    "inspect_node": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+X",
+        "mac": "Command+Shift+X"
+      },
+      "description": "Toggle on element/node inspector on React Devtools Component"
+    }
+  }
 }

packages/react-devtools-extensions/src/main.js

@@ -319,6 +319,18 @@ function createPanelIfReactLoaded() {
           });
         });
       });
+
+      // Add hotkeys/commands here
+      chrome.commands.onCommand.addListener(command => {
+        switch (command) {
+          case 'inspect_node': {
+            bridge.send('startInspectingNative');
+            return;
+          }
+          default:
+            return;
+        }
+      });
     },
   );
 }

packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js

@@ -43,7 +43,7 @@ export default function InspectHostNodesToggle() {
     <Toggle
       onChange={handleChange}
       isChecked={isInspecting}
-      title="Select an element in the page to inspect it">
+      title="Select an element in the page to inspect it (Cmd/Ctrl Shift X)">
       <ButtonIcon type="search" />
     </Toggle>
   );