mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
33e54fa252
Stacked on #30490. This is in the same spirit but to clarify the difference between what is React Native vs part of any generic Host. We used to use "Native" to mean three different concepts. Now "Native" just means React Native. E.g. from the frontend's perspective the Host can be Highlighted/Inspected. However, that in turn can then be implemented as either direct DOM manipulation or commands to React Native. So frontend -> backend is "Host" but backend -> React Native is "Native" while backend -> DOM is "Web". Rename NativeElementsPanel to BuiltinElementsPanel. This isn't a React Native panel but one part of the surrounding DevTools. We refer to Host more as the thing running React itself. I.e. where the backend lives. The runtime you're inspecting. The DevTools itself needs a third term. So I went with "Builtin".
43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
/* global chrome */
|
|
|
|
export function setBrowserSelectionFromReact() {
|
|
// This is currently only called on demand when you press "view DOM".
|
|
// In the future, if Chrome adds an inspect() that doesn't switch tabs,
|
|
// we could make this happen automatically when you select another component.
|
|
chrome.devtools.inspectedWindow.eval(
|
|
'(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
|
|
'(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
|
|
'false',
|
|
(didSelectionChange, evalError) => {
|
|
if (evalError) {
|
|
console.error(evalError);
|
|
}
|
|
},
|
|
);
|
|
}
|
|
|
|
export function setReactSelectionFromBrowser(bridge) {
|
|
// When the user chooses a different node in the browser Elements tab,
|
|
// copy it over to the hook object so that we can sync the selection.
|
|
chrome.devtools.inspectedWindow.eval(
|
|
'(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
|
|
'(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
|
|
'false',
|
|
(didSelectionChange, evalError) => {
|
|
if (evalError) {
|
|
console.error(evalError);
|
|
} else if (didSelectionChange) {
|
|
if (!bridge) {
|
|
console.error(
|
|
'Browser element selection changed, but bridge was not initialized',
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Remember to sync the selection next time we show Components tab.
|
|
bridge.send('syncSelectionFromBuiltinElementsPanel');
|
|
}
|
|
},
|
|
);
|
|
}
|