Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added "Profiler" tab

Browse Source
This commit is contained in:
Brian Vaughn
2019-03-17 10:58:20 -07:00
parent d685efd72f
commit d3ee02cd35
7 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shells/browser/chrome/manifest.json
+1
View File
@@ -30,6 +30,7 @@
"web_accessible_resources": [
"elements.html",
"main.html",
"profiler.html",
"settings.html",
"build/backend.js"
],
shells/browser/firefox/manifest.json
+1
View File
@@ -36,6 +36,7 @@
"web_accessible_resources": [
"elements.html",
"main.html",
"profiler.html",
"settings.html",
"build/backend.js"
],
shells/browser/shared/build.js
+1
View File
@@ -12,6 +12,7 @@ const STATIC_FILES = [
'popups',
'elements.html',
'main.html',
'profiler.html',
'settings.html',
];
shells/browser/shared/profiler.html
+32
View File
@@ -0,0 +1,32 @@
<!doctype html>
<html style="display: flex">
<head>
<meta charset="utf8">
<style>
html {
display: flex;
}
body {
margin: 0;
padding: 0;
flex: 1;
display: flex;
}
#container {
display: flex;
flex: 1;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!-- main react mount point -->
<div id="container">Unable to find React on the page.</div>
<script src="./build/profiler.js"></script>
</body>
</html>
shells/browser/shared/src/main.js
+20
View File
@@ -25,6 +25,7 @@ function createPanelIfReactLoaded() {
let bridge = null;
let store = null;
let elementsPanel = null;
let profilerPanel = null;
let settingsPanel = null;
function initBridgeAndStore() {
@@ -56,6 +57,9 @@ function createPanelIfReactLoaded() {
if (elementsPanel !== null) {
elementsPanel.injectBridgeAndStore(bridge, store);
}
if (profilerPanel !== null) {
profilerPanel.injectBridgeAndStore(bridge, store);
}
if (settingsPanel !== null) {
settingsPanel.injectBridgeAndStore(bridge, store);
}
@@ -83,6 +87,22 @@ function createPanelIfReactLoaded() {
}
);
// TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
chrome.devtools.panels.create(
'⚛ Profiler',
'',
'profiler.html',
panel => {
panel.onShown.addListener(panel => {
if (settingsPanel === null) {
panel.injectBridgeAndStore(bridge, store);
}
profilerPanel = panel;
});
}
);
chrome.devtools.panels.create(
'⚛ Settings',
'',
shells/browser/shared/src/panels/profiler.js
+3
View File
@@ -0,0 +1,3 @@
import { createPanel } from './utils';
createPanel('profiler');
shells/browser/shared/webpack.config.js
+1
View File
@@ -17,6 +17,7 @@ module.exports = {
inject: './src/GlobalHook.js',
main: './src/main.js',
elements: './src/panels/elements.js',
profiler: './src/panels/profiler.js',
settings: './src/panels/settings.js',
},
output: {