fix[devtools/extension]: fixed duplicating panels in firefox (faceboo…

…k#27320)

Multiple `chrome.panels.create` calls result into having duplicate
panels created in Firefox, these changes fix that.

Now calling `chrome.panels.create` only if there are no panels created
yet.

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;