Sync selection when we switch to Elements pane

Author: eps1lon

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

@@ -330,6 +330,7 @@ function createElementsInspectPanel() {
       inspectedElementPortalContainer = portal.container;
       if (inspectedElementPortalContainer != null && render) {
         ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
+        bridge.send('syncSelectionFromBuiltinElementsPanel');
 
         render();
         portal.injectStyles(cloneStyleTags);

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

@@ -938,8 +938,8 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  selectNode(target: HostInstance): void {
-    const match = this.getIDForHostInstance(target);
+  selectNode(target: HostInstance | null): void {
+    const match = target !== null ? this.getIDForHostInstance(target) : null;
     this._bridge.send(
       'selectElement',
       match !== null
@@ -996,10 +996,7 @@ export default class Agent extends EventEmitter<{
 
   syncSelectionFromBuiltinElementsPanel: () => void = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
-    if (target == null) {
-      return;
-    }
-    this.selectNode(target);
+    this.selectNode(target == null ? null : target);
   };
 
   shutdown: () => void = () => {

packages/react-devtools-shared/src/devtools/store.js

@@ -2382,7 +2382,14 @@ export default class Store extends EventEmitter<{
   };
 
   onHostInstanceSelected: (elementId: number | null) => void = elementId => {
-    if (this._lastSelectedHostInstanceElementId === elementId) {
+    if (
+      this._lastSelectedHostInstanceElementId === elementId &&
+      // Force clear selection e.g. when we inspect an element in the Components panel
+      // and then switch to the browser's Elements panel.
+      // We wouldn't want to stay on the inspected element if we're inspecting
+      // an element not owned by React when switching to the browser's Elements panel.
+      elementId !== null
+    ) {
       return;
     }
 

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

@@ -967,8 +967,9 @@ function TreeContextController({
 
   // Listen for host element selections.
   useEffect(() => {
-    const handler = (id: Element['id'] | null) =>
+    const handler = (id: Element['id'] | null) => {
       transitionDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+    };
 
     store.addListener('hostInstanceSelected', handler);
     return () => store.removeListener('hostInstanceSelected', handler);