Fixed broken 'shutdown' event that lead to CPU problems when reloadin…

…g DevTools

shells/browser/shared/src/contentScript.js

@@ -45,7 +45,7 @@ function handleDisconnect() {
       source: 'react-devtools-content-script',
       payload: {
         type: 'event',
-        evt: 'shutdown',
+        event: 'shutdown',
       },
     },
     '*'

shells/browser/shared/src/main.js

@@ -2,6 +2,7 @@
 
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/Store';
+import inject from './inject';
 
 let panelCreated = false;
 
@@ -48,6 +49,10 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge);
 
+        // Initialize the backend only once the Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        inject(chrome.runtime.getURL('build/backend.js'));
+
         if (elementsPanel !== null) {
           elementsPanel.injectBridgeAndStore(bridge, store);
         }

shells/browser/shared/src/panels/utils.js

@@ -1,9 +1,6 @@
-/* global chrome */
-
 import { createElement } from 'react';
 import { createRoot, flushSync } from 'react-dom';
 import DevTools from 'src/devtools/views/DevTools';
-import inject from '../inject';
 import { getBrowserName, getBrowserTheme } from '../utils';
 
 export function createPanel(defaultTab) {
@@ -45,9 +42,5 @@ export function createPanel(defaultTab) {
         store: injectedStore,
       })
     );
-
-    // Initialize the backend only once the DevTools frontend Store has been initialized.
-    // Otherwise the Store may miss important initial tree op codes.
-    inject(chrome.runtime.getURL('build/backend.js'));
   }
 }

src/backend/types.js

@@ -68,13 +68,13 @@ export type Hook = {
   rendererInterfaces: Map<RendererID, RendererInterface>,
   renderers: Map<RendererID, ReactRenderer>,
 
-  emit: (evt: string, data: any) => void,
+  emit: (event: string, data: any) => void,
   getFiberRoots: (rendererID: RendererID) => Set<Object>,
   inject: (renderer: ReactRenderer) => number | null,
-  on: (evt: string, handler: Handler) => void,
-  off: (evt: string, handler: Handler) => void,
+  on: (event: string, handler: Handler) => void,
+  off: (event: string, handler: Handler) => void,
   reactDevtoolsAgent?: ?Object,
-  sub: (evt: string, handler: Handler) => () => void,
+  sub: (event: string, handler: Handler) => () => void,
 
   // React uses these methods.
   checkDCE: (fn: Function) => void,

src/devtools/views/SelectedElement.js

@@ -248,20 +248,22 @@ function useInspectedElement(id: number | null): InspectedElement | null {
 
       setInspectedElement(inspectedElement);
 
-      // Ask for an update in a second...
-      timeoutID = setTimeout(sendBridgeRequest, 1000);
+      // Ask for an update in a second.
+      // Make sure we only ask once though.
+      clearTimeout(((timeoutID: any): TimeoutID));
+      setTimeout(sendBridgeRequest, 1000);
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
 
     sendBridgeRequest();
 
     return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
+
       if (timeoutID !== null) {
         clearTimeout(timeoutID);
       }
-
-      bridge.removeListener('inspectedElement', onInspectedElement);
     };
   }, [bridge, id, idRef, store]);