diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js index c299f1a866ebd..92afb4eb186e1 100644 --- a/packages/react-devtools-extensions/src/main/index.js +++ b/packages/react-devtools-extensions/src/main/index.js @@ -340,16 +340,24 @@ function ensureInitialHTMLIsCleared(container) { function createComponentsPanel() { if (componentsPortalContainer) { + // Panel is created and user opened it at least once render('components'); return; } + if (componentsPanel) { + // Panel is created, but wasn't opened yet, so no document is present for it + return; + } + chrome.devtools.panels.create( IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components', IS_EDGE ? 'icons/production.svg' : '', 'panel.html', createdPanel => { + componentsPanel = createdPanel; + createdPanel.onShown.addListener(portal => { componentsPortalContainer = portal.container; if (componentsPortalContainer != null) { @@ -370,16 +378,24 @@ function createComponentsPanel() { function createProfilerPanel() { if (profilerPortalContainer) { + // Panel is created and user opened it at least once render('profiler'); return; } + if (profilerPanel) { + // Panel is created, but wasn't opened yet, so no document is present for it + return; + } + chrome.devtools.panels.create( IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler', IS_EDGE ? 'icons/production.svg' : '', 'panel.html', createdPanel => { + profilerPanel = createdPanel; + createdPanel.onShown.addListener(portal => { profilerPortalContainer = portal.container; if (profilerPortalContainer != null) { @@ -510,6 +526,8 @@ let store = null; let profilingData = null; +let componentsPanel = null; +let profilerPanel = null; let componentsPortalContainer = null; let profilerPortalContainer = null;