Added "Profiler" tab
Brian Vaughn committed
Mar 17, 2019 at 10:58 UTC
d3ee02cd35b73c09ab9c94ea87163e342820a699
7 files changed
+59
shells/browser/chrome/manifest.json
+1
@@ -30,6 +30,7 @@
30
"web_accessible_resources": [
31
"elements.html",
32
"main.html",
33
+ "profiler.html",
34
"settings.html",
35
"build/backend.js"
36
],
shells/browser/firefox/manifest.json
+1
@@ -36,6 +36,7 @@
36
"web_accessible_resources": [
37
"elements.html",
38
"main.html",
39
+ "profiler.html",
40
"settings.html",
41
"build/backend.js"
42
],
shells/browser/shared/build.js
+1
@@ -12,6 +12,7 @@ const STATIC_FILES = [
12
'popups',
13
'elements.html',
14
'main.html',
15
+ 'profiler.html',
16
'settings.html',
17
];
18
shells/browser/shared/profiler.html
new
+32
@@ -0,0 +1,32 @@
1
+<!doctype html>
2
+<html style="display: flex">
3
+ <head>
4
+ <meta charset="utf8">
5
+ <style>
6
+ html {
7
+ display: flex;
8
+ }
9
+ body {
10
+ margin: 0;
11
+ padding: 0;
12
+ flex: 1;
13
+ display: flex;
14
+ }
15
+ #container {
16
+ display: flex;
17
+ flex: 1;
18
+ width: 100%;
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <!-- main react mount point -->
29
+ <div id="container">Unable to find React on the page.</div>
30
+ <script src="./build/profiler.js"></script>
31
+ </body>
32
+</html>
shells/browser/shared/src/main.js
+20
@@ -25,6 +25,7 @@ function createPanelIfReactLoaded() {
25
let bridge = null;
26
let store = null;
27
let elementsPanel = null;
28
+ let profilerPanel = null;
29
let settingsPanel = null;
30
31
function initBridgeAndStore() {
@@ -56,6 +57,9 @@ function createPanelIfReactLoaded() {
57
if (elementsPanel !== null) {
58
elementsPanel.injectBridgeAndStore(bridge, store);
59
}
60
+ if (profilerPanel !== null) {
61
+ profilerPanel.injectBridgeAndStore(bridge, store);
62
+ }
63
if (settingsPanel !== null) {
64
settingsPanel.injectBridgeAndStore(bridge, store);
65
}
@@ -83,6 +87,22 @@ function createPanelIfReactLoaded() {
87
}
88
);
89
90
+ // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
91
+ chrome.devtools.panels.create(
92
+ '⚛ Profiler',
93
+ '',
94
+ 'profiler.html',
95
+ panel => {
96
+ panel.onShown.addListener(panel => {
97
+ if (settingsPanel === null) {
98
+ panel.injectBridgeAndStore(bridge, store);
99
+ }
100
+
101
+ profilerPanel = panel;
102
+ });
103
+ }
104
+ );
105
+
106
chrome.devtools.panels.create(
107
'⚛ Settings',
108
'',
shells/browser/shared/src/panels/profiler.js
new
+3
@@ -0,0 +1,3 @@
1
+import { createPanel } from './utils';
2
+
3
+createPanel('profiler');
shells/browser/shared/webpack.config.js
+1
@@ -17,6 +17,7 @@ module.exports = {
17
inject: './src/GlobalHook.js',
18
main: './src/main.js',
19
elements: './src/panels/elements.js',
20
+ profiler: './src/panels/profiler.js',
21
settings: './src/panels/settings.js',
22
},
23
output: {