From 76432ba673ef7c8f24d80a495ab66fed71a13298 Mon Sep 17 00:00:00 2001 From: Gianfranco Date: Fri, 29 Nov 2019 17:24:26 +0800 Subject: [PATCH] React Devtools Component: Add hotkeys to start inspecting node --- .../chrome/manifest.json | 12 ++++++++++- .../firefox/manifest.json | 12 ++++++++++- .../react-devtools-extensions/src/backend.js | 20 +++++++++++++++++++ .../src/background.js | 16 +++++++++++++++ .../src/contentScript.js | 18 +++++++++++++++++ .../src/backend/agent.js | 2 ++ .../src/backend/views/Highlighter/index.js | 4 ++++ .../Components/InspectHostNodesToggle.js | 2 +- 8 files changed, 83 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 5f72566b502f..3914ef892b0d 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/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" + } + } } diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index d28d0620d847..8f42be88db55 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/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" + } + } } diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js index 6a8fe9c3e5ca..71d429957e4b 100644 --- a/packages/react-devtools-extensions/src/backend.js +++ b/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; + } + }); } diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js index 389ca1310a91..ceedac50013d 100644 --- a/packages/react-devtools-extensions/src/background.js +++ b/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; + } +}); diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js index c914c6e7b3df..76cdf068ac54 100644 --- a/packages/react-devtools-extensions/src/contentScript.js +++ b/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, + }, + }, + '*', + ); + } +}); diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 5161b434c5ba..6545afcd853e 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/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(); diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 2080ed4d78ca..3c7e1c8c5b47 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/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); } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index 2bbb704e527f..7e9fe1f15922 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js @@ -43,7 +43,7 @@ export default function InspectHostNodesToggle() { + title="Select an element in the page to inspect it (Cmd/Ctrl Shift X)"> );