Show warning in UI when duplicate installations of DevTools extension are detected (#22563)

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -34,6 +34,7 @@ import {SchedulingProfilerContextController} from 'react-devtools-scheduling-pro
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
+import DuplicateInstallationDialog from './DuplicateInstallationDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -73,6 +74,7 @@ export type Props = {|
   enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
+  warnIfDuplicateInstallation?: boolean,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
@@ -132,6 +134,7 @@ export default function DevTools({
   profilerPortalContainer,
   showTabBar = false,
   store,
+  warnIfDuplicateInstallation = false,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
@@ -319,6 +322,7 @@ export default function DevTools({
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
+              {warnIfDuplicateInstallation && <DuplicateInstallationDialog />}
               {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
               {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
             </ModalDialogContextController>

packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import * as React from 'react';
+import {Fragment, useContext, useEffect} from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+import {ModalDialogContext} from './ModalDialog';
+
+export default function DuplicateInstallationDialog(_: {||}) {
+  const {dispatch} = useContext(ModalDialogContext);
+
+  useEffect(() => {
+    dispatch({
+      canBeDismissed: false,
+      id: 'DuplicateInstallationDialog',
+      type: 'SHOW',
+      title: 'Duplicate Installations of DevTools Detected',
+      content: <DialogContent />,
+    });
+  }, []);
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <p>
+        We detected that there are multiple versions of React Developer Tools
+        installed and enabled in your browser at the same time, which will cause
+        issues while using the extension.
+      </p>
+      {isInternalFacebookBuild ? (
+        <p>
+          Before proceeding, please ensure that the only enabled version of
+          React Developer Tools is the internal (Chef-installed) version. To
+          manage your extensions, visit the <code>about://extensions</code> page
+          in your browser.
+        </p>
+      ) : (
+        <p>
+          Please ensure that you have installed and enabled only a single
+          version of React Developer Tools before proceeding. To manage your
+          extensions, visit the <code>about://extensions</code> page in your
+          browser.
+        </p>
+      )}
+    </Fragment>
+  );
+}