Keep DOM selection if last $0 resolves to same component
Dan committed
Apr 8, 2019 at 23:46 UTC
3b793953b1ec26e69a2b3a537880b3af9992ccba
1 file changed
+11
-4
src/backend/agent.js
+11
-4
@@ -296,12 +296,19 @@ export default class Agent extends EventEmitter {
296
if (renderer == null) {
297
console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
298
} else {
299
- // Update the active DOM node on the global hook object.
300
- // The content script will read this to update window.$0
301
- // when we switch tabs.
299
+ // When a different React component is selected, we want to store
300
+ // the active DOM node ($0) on the global hook so that content script
301
+ // can update the native elements panel to match it.
302
const node = ((renderer.findNativeByFiberID(id): any): HTMLElement);
303
if (node !== null) {
304
- window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
304
+ // However, we don't want to do it if the current $0 node already
305
+ // belongs to this component. In this case we were probably inspecting
306
+ // a part of its host subtree, and changing $0 would be disuptive.
307
+ const prev$0 = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
308
+ const prev$0ID = this.getIDForNode(prev$0);
309
+ if (prev$0ID !== id) {
310
+ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
311
+ }
312
}
313
renderer.selectElement(id);
314
this._bridge.send('selectElement');