diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
index 3b3cec6d91..ccbf29aa3c 100644
--- a/shells/browser/chrome/manifest.json
+++ b/shells/browser/chrome/manifest.json
@@ -30,6 +30,7 @@
"web_accessible_resources": [
"elements.html",
"main.html",
+ "profiler.html",
"settings.html",
"build/backend.js"
],
diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
index 2829d100e6..a1653d5005 100644
--- a/shells/browser/firefox/manifest.json
+++ b/shells/browser/firefox/manifest.json
@@ -36,6 +36,7 @@
"web_accessible_resources": [
"elements.html",
"main.html",
+ "profiler.html",
"settings.html",
"build/backend.js"
],
diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
index 393319831c..3923c1f128 100644
--- a/shells/browser/shared/build.js
+++ b/shells/browser/shared/build.js
@@ -12,6 +12,7 @@ const STATIC_FILES = [
'popups',
'elements.html',
'main.html',
+ 'profiler.html',
'settings.html',
];
diff --git a/shells/browser/shared/profiler.html b/shells/browser/shared/profiler.html
new file mode 100644
index 0000000000..0281d9d2cc
--- /dev/null
+++ b/shells/browser/shared/profiler.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+ Unable to find React on the page.
+
+
+
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
index c300e2b126..9183a0c4ce 100644
--- a/shells/browser/shared/src/main.js
+++ b/shells/browser/shared/src/main.js
@@ -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',
'',
diff --git a/shells/browser/shared/src/panels/profiler.js b/shells/browser/shared/src/panels/profiler.js
new file mode 100644
index 0000000000..23f028455b
--- /dev/null
+++ b/shells/browser/shared/src/panels/profiler.js
@@ -0,0 +1,3 @@
+import { createPanel } from './utils';
+
+createPanel('profiler');
diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js
index 0a304f4a64..e95c5cf418 100644
--- a/shells/browser/shared/webpack.config.js
+++ b/shells/browser/shared/webpack.config.js
@@ -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: {