Fixed broken 'shutdown' event that lead to CPU problems when reloading DevTools
Brian Vaughn committed
Feb 20, 2019 at 11:55 UTC
90f98372a96c54fae64651f14daf836ee428f0c0
5 files changed
+16
-16
shells/browser/shared/src/contentScript.js
+1
-1
@@ -45,7 +45,7 @@ function handleDisconnect() {
45
source: 'react-devtools-content-script',
46
payload: {
47
type: 'event',
48
- evt: 'shutdown',
48
+ event: 'shutdown',
49
},
50
},
51
'*'
shells/browser/shared/src/main.js
+5
@@ -2,6 +2,7 @@
2
3
import Bridge from 'src/bridge';
4
import Store from 'src/devtools/Store';
5
+import inject from './inject';
6
7
let panelCreated = false;
8
@@ -48,6 +49,10 @@ function createPanelIfReactLoaded() {
49
50
store = new Store(bridge);
51
52
+ // Initialize the backend only once the Store has been initialized.
53
+ // Otherwise the Store may miss important initial tree op codes.
54
+ inject(chrome.runtime.getURL('build/backend.js'));
55
+
56
if (elementsPanel !== null) {
57
elementsPanel.injectBridgeAndStore(bridge, store);
58
}
shells/browser/shared/src/panels/utils.js
-7
@@ -1,9 +1,6 @@
1
-/* global chrome */
2
-
1
import { createElement } from 'react';
2
import { createRoot, flushSync } from 'react-dom';
3
import DevTools from 'src/devtools/views/DevTools';
6
-import inject from '../inject';
4
import { getBrowserName, getBrowserTheme } from '../utils';
5
6
export function createPanel(defaultTab) {
@@ -45,9 +42,5 @@ export function createPanel(defaultTab) {
42
store: injectedStore,
43
})
44
);
48
-
49
- // Initialize the backend only once the DevTools frontend Store has been initialized.
50
- // Otherwise the Store may miss important initial tree op codes.
51
- inject(chrome.runtime.getURL('build/backend.js'));
45
}
46
}
src/backend/types.js
+4
-4
@@ -68,13 +68,13 @@ export type Hook = {
68
rendererInterfaces: Map<RendererID, RendererInterface>,
69
renderers: Map<RendererID, ReactRenderer>,
70
71
- emit: (evt: string, data: any) => void,
71
+ emit: (event: string, data: any) => void,
72
getFiberRoots: (rendererID: RendererID) => Set<Object>,
73
inject: (renderer: ReactRenderer) => number | null,
74
- on: (evt: string, handler: Handler) => void,
75
- off: (evt: string, handler: Handler) => void,
74
+ on: (event: string, handler: Handler) => void,
75
+ off: (event: string, handler: Handler) => void,
76
reactDevtoolsAgent?: ?Object,
77
- sub: (evt: string, handler: Handler) => () => void,
77
+ sub: (event: string, handler: Handler) => () => void,
78
79
// React uses these methods.
80
checkDCE: (fn: Function) => void,
src/devtools/views/SelectedElement.js
+6
-4
@@ -248,8 +248,10 @@ function useInspectedElement(id: number | null): InspectedElement | null {
248
249
setInspectedElement(inspectedElement);
250
251
- // Ask for an update in a second...
252
- timeoutID = setTimeout(sendBridgeRequest, 1000);
251
+ // Ask for an update in a second.
252
+ // Make sure we only ask once though.
253
+ clearTimeout(((timeoutID: any): TimeoutID));
254
+ setTimeout(sendBridgeRequest, 1000);
255
};
256
257
bridge.addListener('inspectedElement', onInspectedElement);
@@ -257,11 +259,11 @@ function useInspectedElement(id: number | null): InspectedElement | null {
259
sendBridgeRequest();
260
261
return () => {
262
+ bridge.removeListener('inspectedElement', onInspectedElement);
263
+
264
if (timeoutID !== null) {
265
clearTimeout(timeoutID);
266
}
263
-
264
- bridge.removeListener('inspectedElement', onInspectedElement);
267
};
268
}, [bridge, id, idRef, store]);
269