Reload extension on navigate
Brian Vaughn committed
Jan 30, 2019 at 14:16 UTC
ca6151ca01def24d5be6e1d9f3fdc10cdcc49af4
4 files changed
+60
-22
shells/browser/shared/src/panel.js
+50
-21
@@ -1,7 +1,7 @@
1
/* global chrome */
2
3
import { createElement } from 'react';
4
-import { render } from 'react-dom';
4
+import { render, unmountComponentAtNode } from 'react-dom';
5
import Bridge from 'src/bridge';
6
import Elements from 'src/devtools/views/Elements';
7
import inject from './inject';
@@ -36,27 +36,56 @@ if (IS_CHROME) {
36
37
const node = ((document.getElementById('container'): any): HTMLElement);
38
39
-inject(chrome.runtime.getURL('build/backend.js'), () => {
40
- let disconnected = false;
39
+function reloadDevTools() {
40
+ setTimeout(() => {
41
+ unmountComponentAtNode(node);
42
42
- const port = chrome.runtime.connect({
43
- name: '' + chrome.devtools.inspectedWindow.tabId,
44
- });
45
- port.onDisconnect.addListener(() => {
46
- disconnected = true;
47
- });
43
+ node.innerHTML = '';
44
+
45
+ injectAndInit();
46
+ }, 100);
47
+}
48
+
49
+function injectAndInit() {
50
+ inject(chrome.runtime.getURL('build/backend.js'), () => {
51
+ let disconnected = false;
52
49
- const bridge = new Bridge({
50
- listen(fn) {
51
- port.onMessage.addListener(message => fn(message));
52
- },
53
- send(event: string, payload: any, transferable?: Array<any>) {
54
- if (disconnected) {
55
- return;
56
- }
57
- port.postMessage({ event, payload }, transferable);
58
- },
53
+ const port = chrome.runtime.connect({
54
+ name: '' + chrome.devtools.inspectedWindow.tabId,
55
+ });
56
+ port.onDisconnect.addListener(() => {
57
+ disconnected = true;
58
+ });
59
+
60
+ const bridge = new Bridge({
61
+ listen(fn) {
62
+ port.onMessage.addListener(message => fn(message));
63
+ },
64
+ send(event: string, payload: any, transferable?: Array<any>) {
65
+ if (disconnected) {
66
+ return;
67
+ }
68
+ port.postMessage({ event, payload }, transferable);
69
+ },
70
+ });
71
+
72
+ // Reload the DevTools extension when the user navigates to a new page.
73
+ function onNavigated() {
74
+ chrome.devtools.network.onNavigated.removeListener(onNavigated);
75
+ bridge.send('shutdown');
76
+ reloadDevTools();
77
+ }
78
+ chrome.devtools.network.onNavigated.addListener(onNavigated);
79
+
80
+ render(
81
+ createElement(Elements, {
82
+ bridge,
83
+ browserName,
84
+ themeName,
85
+ }),
86
+ node
87
+ );
88
});
89
+}
90
61
- render(createElement(Elements, { bridge, browserName, themeName }), node);
62
-});
91
+injectAndInit();
src/backend/agent.js
+2
@@ -24,6 +24,8 @@ export default class Agent extends EventEmitter {
24
addBridge(bridge: Bridge) {
25
this._bridge = bridge;
26
27
+ bridge.on('shutdown', () => this.emit('shutdown'));
28
+
29
// TODO Listen to bridge for things like selection.
30
// bridge.on('...'), this...);
31
}
src/backend/index.js
+3
@@ -43,6 +43,9 @@ export function initBackend(hook: Hook, agent: Agent): void {
43
hook.reactDevtoolsAgent = agent;
44
agent.addListener('shutdown', () => {
45
subs.forEach(fn => fn());
46
+ for (let id in hook.rendererInterfaces) {
47
+ hook.rendererInterfaces[id].cleanup();
48
+ }
49
hook.reactDevtoolsAgent = null;
50
});
51
}
src/devtools/views/Elements.js
+5
-1
@@ -14,7 +14,11 @@ export type Props = {|
14
themeName: string,
15
|};
16
17
-export default function Elements({ bridge, browserName, themeName }: Props) {
17
+export default function Elements({
18
+ bridge,
19
+ browserName,
20
+ themeName,
21
+}: Props) {
22
const store = useMemo<Store>(() => new Store(bridge), []);
23
24
const [treeContext, setTreeContext] = useState({