-
Notifications
You must be signed in to change notification settings - Fork 953
/
ChromeDevTools.tsx
123 lines (99 loc) · 3.37 KB
/
ChromeDevTools.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import React from 'react';
import {styled, colors, FlexColumn} from 'flipper';
import electron from 'electron';
const devToolsNodeId = (url: string) =>
`hermes-chromedevtools-out-of-react-node-${url.replace(/\W+/g, '-')}`;
// TODO: build abstraction of this: T62306732
// TODO: reuse reactdevtools/DevToolsEmbedder for this
const TARGET_CONTAINER_ID = 'flipper-out-of-contents-container'; // should be a hook in the future
function createDevToolsNode(
url: string,
marginTop: string | null,
): HTMLElement {
const existing = findDevToolsNode(url);
if (existing) {
return existing;
}
// It is necessary to activate chrome devtools in electron
electron.remote.getCurrentWindow().webContents.toggleDevTools();
electron.remote.getCurrentWindow().webContents.closeDevTools();
const wrapper = document.createElement('div');
wrapper.id = devToolsNodeId(url);
wrapper.style.height = '100%';
wrapper.style.width = '100%';
const iframe = document.createElement('webview');
iframe.style.height = '100%';
iframe.style.width = '100%';
// HACK: chrome-devtools:// is blocked by the sandbox but devtools:// isn't for some reason.
iframe.src = url.replace(/^chrome-/, '');
wrapper.appendChild(iframe);
if (marginTop) {
document.getElementById(TARGET_CONTAINER_ID)!.style.marginTop = marginTop;
}
document.getElementById(TARGET_CONTAINER_ID)!.appendChild(wrapper);
return wrapper;
}
function findDevToolsNode(url: string): HTMLElement | null {
return document.querySelector('#' + devToolsNodeId(url));
}
function attachDevTools(devToolsNode: HTMLElement) {
devToolsNode.style.display = 'block';
document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'block';
document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
'block';
document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.height =
'100%';
}
function detachDevTools(devToolsNode: HTMLElement | null) {
document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'none';
document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
'none';
if (devToolsNode) {
devToolsNode.style.display = 'none';
}
}
const EmptyContainer = styled(FlexColumn)({
height: '100%',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.light02,
});
type ChromeDevToolsProps = {
url: string;
marginTop: string | null;
};
export default class ChromeDevTools extends React.Component<ChromeDevToolsProps> {
createDevTools(url: string, marginTop: string | null) {
const devToolsNode = createDevToolsNode(url, marginTop);
attachDevTools(devToolsNode);
}
hideDevTools(_url: string) {
detachDevTools(findDevToolsNode(this.props.url));
}
componentDidMount() {
this.createDevTools(this.props.url, this.props.marginTop);
}
componentWillUnmount() {
this.hideDevTools(this.props.url);
}
componentDidUpdate(prevProps: ChromeDevToolsProps) {
const oldUrl = prevProps.url;
const newUrl = this.props.url;
if (oldUrl != newUrl) {
this.hideDevTools(oldUrl);
this.createDevTools(newUrl, this.props.marginTop);
}
}
render() {
return <EmptyContainer />;
}
}