React Devtools Component: Add hotkeys to start inspecting node

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/firefox/manifest.json

@@ -52,5 +52,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/backend.js

@@ -80,4 +80,24 @@ function setup(hook) {
       hook.nativeStyleEditorValidAttributes,
     );
   }
+
+  // listen message coming from content script
+  window.addEventListener('message', event => {
+    if (
+      !event.data ||
+      event.data.source !== 'react-devtools-content-script' ||
+      !event.data.payload ||
+      event.data.payload.type !== 'command' ||
+      !event.data.payload.command
+    ) {
+      return;
+    }
+    switch (event.data.payload.command) {
+      case 'inspect_node':
+        agent.startInspectingNative();
+        return;
+      default:
+        return;
+    }
+  });
 }

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

@@ -113,3 +113,19 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     }
   }
 });
+
+// Add hotkeys/commands here
+chrome.commands.onCommand.addListener(command => {
+  switch (command) {
+    case 'inspect_node': {
+      // this specific hotkey need to activate a function within the page scripts
+      // we need signal the action to content script first and then passed it on to page script
+      chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+        chrome.tabs.sendMessage(tabs[0].id, {command: 'inspect_node'});
+      });
+      return;
+    }
+    default:
+      return;
+  }
+});

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

@@ -77,3 +77,21 @@ if (!backendInitialized) {
     }
   }, 500);
 }
+
+// listen message coming from background script
+chrome.runtime.onMessage.addListener(request => {
+  // If the message is related to hotkeys / command being triggered
+  if (request.command) {
+    // Pass hotkeys / command to page scripts since hotkeys is usually have something to do with the devtools itself
+    window.postMessage(
+      {
+        source: 'react-devtools-content-script',
+        payload: {
+          type: 'command',
+          command: request.command,
+        },
+      },
+      '*',
+    );
+  }
+});

packages/react-devtools-shared/src/backend/agent.js

@@ -100,6 +100,8 @@ export default class Agent extends EventEmitter<{|
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
   _traceUpdatesEnabled: boolean = false;
+  startInspectingNative: () => void;
+  stopInspectingNative: () => void;
 
   constructor(bridge: BackendBridge) {
     super();

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -34,6 +34,10 @@ export default function setupHighlighter(
   bridge.addListener('startInspectingNative', startInspectingNative);
   bridge.addListener('stopInspectingNative', stopInspectingNative);
 
+  // Agent not only listen but should also be able to carry out these actions directly
+  agent.startInspectingNative = startInspectingNative;
+  agent.stopInspectingNative = stopInspectingNative;
+
   function startInspectingNative() {
     registerListenersOnWindow(window);
   }

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>
   );