From 5ec5d48b7cf32a7bd5dda4a0bfe07d7dfd02227c Mon Sep 17 00:00:00 2001
From: Holger Benl <hbenl@evandor.de>
Date: Thu, 19 Aug 2021 15:29:55 +0200
Subject: [PATCH] Add options for disabling some features

---
 .../react-devtools-inline/src/frontend.js     |   7 +-
 .../views/Components/InspectedElement.js      |  42 +++--
 .../Components/InspectedElementPropsTree.js   |   5 +-
 .../InspectedElementSuspenseToggle.js         |   5 +-
 .../src/devtools/views/Components/KeyValue.js |  13 +-
 .../src/devtools/views/Components/Tree.js     |  13 +-
 .../src/devtools/views/DevTools.js            | 152 +++++++++++-------
 .../src/devtools/views/context.js             |  18 +++
 8 files changed, 170 insertions(+), 85 deletions(-)

diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index d9645999b3f0b..79bda7ecd8fb8 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -20,11 +20,16 @@ import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export function createStore(bridge: FrontendBridge): Store {
+type Config = {|
+  supportsNativeInspection?: boolean,
+|};
+
+export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
     supportsSchedulingProfiler: true,
+    supportsNativeInspection: config?.supportsNativeInspection !== false,
   });
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index d0774d95f9611..68fea871ef3ef 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {useCallback, useContext} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {ModalDialogContext} from '../ModalDialog';
@@ -37,6 +37,12 @@ export default function InspectedElementWrapper(_: Props) {
   );
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const {
+    hideToggleErrorAction,
+    hideToggleSuspenseAction,
+    hideLogAction,
+    hideViewSourceAction,
+  } = useContext(OptionsContext);
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
   const {
@@ -214,7 +220,7 @@ export default function InspectedElementWrapper(_: Props) {
           </div>
         </div>
 
-        {canToggleError && (
+        {!hideToggleErrorAction && canToggleError && (
           <Toggle
             className={styles.IconButton}
             isChecked={isErrored}
@@ -227,7 +233,7 @@ export default function InspectedElementWrapper(_: Props) {
             <ButtonIcon type="error" />
           </Toggle>
         )}
-        {canToggleSuspense && (
+        {!hideToggleSuspenseAction && canToggleSuspense && (
           <Toggle
             className={styles.IconButton}
             isChecked={isSuspended}
@@ -248,19 +254,23 @@ export default function InspectedElementWrapper(_: Props) {
             <ButtonIcon type="view-dom" />
           </Button>
         )}
-        <Button
-          className={styles.IconButton}
-          onClick={logElement}
-          title="Log this component data to the console">
-          <ButtonIcon type="log-data" />
-        </Button>
-        <Button
-          className={styles.IconButton}
-          disabled={!canViewSource}
-          onClick={viewSource}
-          title="View source for this element">
-          <ButtonIcon type="view-source" />
-        </Button>
+        {!hideLogAction && (
+          <Button
+            className={styles.IconButton}
+            onClick={logElement}
+            title="Log this component data to the console">
+            <ButtonIcon type="log-data" />
+          </Button>
+        )}
+        {!hideViewSourceAction && (
+          <Button
+            className={styles.IconButton}
+            disabled={!canViewSource}
+            onClick={viewSource}
+            title="View source for this element">
+            <ButtonIcon type="view-source" />
+          </Button>
+        )}
       </div>
 
       {inspectedElement === null && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 7b6569cd32ce5..da11045a276fb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -9,6 +9,7 @@
 
 import {copy} from 'clipboard-js';
 import * as React from 'react';
+import {OptionsContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
@@ -35,6 +36,8 @@ export default function InspectedElementPropsTree({
   inspectedElement,
   store,
 }: Props) {
+  const {readOnly} = React.useContext(OptionsContext);
+
   const {
     canEditFunctionProps,
     canEditFunctionPropsDeletePaths,
@@ -88,7 +91,7 @@ export default function InspectedElementPropsTree({
             value={value}
           />
         ))}
-      {canEditValues && (
+      {!readOnly && canEditValues && (
         <NewKeyValue
           bridge={bridge}
           depth={0}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index d486116bb84fe..0f5c670636e92 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+import {OptionsContext} from '../context';
 import EditableValue from './EditableValue';
 import Store from '../../store';
 import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
@@ -27,6 +28,8 @@ export default function InspectedElementSuspenseToggle({
   inspectedElement,
   store,
 }: Props) {
+  const {readOnly} = React.useContext(OptionsContext);
+
   const {canToggleSuspense, id, state, type} = inspectedElement;
 
   if (type !== ElementTypeSuspense) {
@@ -53,7 +56,7 @@ export default function InspectedElementSuspenseToggle({
       </div>
       <div className={styles.ToggleSuspenseRow}>
         <span className={styles.Name}>Suspended</span>
-        {canToggleSuspense ? (
+        {!readOnly && canToggleSuspense ? (
           // key is required to keep <EditableValue> and header row toggle button in sync
           <EditableValue
             key={isSuspended}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index be45bab429dda..a6296db43bda7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -9,6 +9,7 @@
 
 import * as React from 'react';
 import {useTransition, useContext, useRef, useState} from 'react';
+import {OptionsContext} from '../context';
 import EditableName from './EditableName';
 import EditableValue from './EditableValue';
 import NewArrayValue from './NewArrayValue';
@@ -74,6 +75,8 @@ export default function KeyValue({
   store,
   value,
 }: KeyValueProps) {
+  const {readOnly} = useContext(OptionsContext);
+
   const {id} = inspectedElement;
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -264,7 +267,7 @@ export default function KeyValue({
         <div className={styles.ExpandCollapseToggleSpacer} />
         {renderedName}
         <div className={styles.AfterName}>:</div>
-        {canEditValues ? (
+        {!readOnly && canEditValues ? (
           <EditableValue
             overrideValue={overrideValue}
             path={path}
@@ -322,7 +325,7 @@ export default function KeyValue({
     }
   } else {
     if (Array.isArray(value)) {
-      const hasChildren = value.length > 0 || canEditValues;
+      const hasChildren = value.length > 0 || (!readOnly && canEditValues);
       const displayName = getMetaValueLabel(value);
 
       children = value.map((innerValue, index) => (
@@ -348,7 +351,7 @@ export default function KeyValue({
         />
       ));
 
-      if (canEditValues && !isReadOnly) {
+      if (!readOnly && canEditValues && !isReadOnly) {
         children.push(
           <NewArrayValue
             key="NewKeyValue"
@@ -396,7 +399,7 @@ export default function KeyValue({
         entries.sort(alphaSortEntries);
       }
 
-      const hasChildren = entries.length > 0 || canEditValues;
+      const hasChildren = entries.length > 0 || (!readOnly && canEditValues);
       const displayName = getMetaValueLabel(value);
 
       children = entries.map<ReactElement<any>>(([key, keyValue]) => (
@@ -421,7 +424,7 @@ export default function KeyValue({
         />
       ));
 
-      if (canEditValues && !isReadOnly) {
+      if (!readOnly && canEditValues && !isReadOnly) {
         children.push(
           <NewKeyValue
             key="NewKeyValue"
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 629bc0f721139..061ea131a9bf3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -23,7 +23,7 @@ import {FixedSizeList} from 'react-window';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import Icon from '../Icon';
 import {SettingsContext} from '../Settings/SettingsContext';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
@@ -62,6 +62,7 @@ export default function Tree(props: Props) {
   } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const {hideSettings} = useContext(OptionsContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
     false,
   );
@@ -344,11 +345,11 @@ export default function Tree(props: Props) {
           <Suspense fallback={<Loading />}>
             {ownerID !== null ? <OwnersStack /> : <SearchInput />}
           </Suspense>
-          <div className={styles.VRule} />
           {showInlineWarningsAndErrors &&
             ownerID === null &&
             (errors > 0 || warnings > 0) && (
               <React.Fragment>
+                <div className={styles.VRule} />
                 {errors > 0 && (
                   <div className={styles.IconAndCount}>
                     <Icon className={styles.ErrorIcon} type="error" />
@@ -376,10 +377,14 @@ export default function Tree(props: Props) {
                   title="Clear all errors and warnings">
                   <ButtonIcon type="clear" />
                 </Button>
-                <div className={styles.VRule} />
               </React.Fragment>
             )}
-          <SettingsModalContextToggle />
+          {!hideSettings && (
+            <Fragment>
+              <div className={styles.VRule} />
+              <SettingsModalContextToggle />
+            </Fragment>
+          )}
         </div>
         <div
           className={styles.AutoSizerWrapper}
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 8f1ccc5540376..17a88d44cb5b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -15,7 +15,12 @@ import '@reach/tooltip/styles.css';
 import * as React from 'react';
 import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
-import {BridgeContext, ContextMenuContext, StoreContext} from './context';
+import {
+  BridgeContext,
+  ContextMenuContext,
+  StoreContext,
+  OptionsContext,
+} from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
 import TabBar from './TabBar';
@@ -74,6 +79,12 @@ export type Props = {|
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
   viewElementSourceFunction?: ?ViewElementSource,
+  readOnly?: boolean,
+  hideSettings?: boolean,
+  hideToggleErrorAction?: boolean,
+  hideToggleSuspenseAction?: boolean,
+  hideLogAction?: boolean,
+  hideViewSourceAction?: boolean,
 
   // This property is used only by the web extension target.
   // The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.
@@ -126,6 +137,12 @@ export default function DevTools({
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
   viewElementSourceFunction,
+  readOnly,
+  hideSettings,
+  hideToggleErrorAction,
+  hideToggleSuspenseAction,
+  hideLogAction,
+  hideViewSourceAction,
 }: Props) {
   const [currentTab, setTab] = useLocalStorage<TabID>(
     'React::DevTools::defaultTab',
@@ -138,6 +155,25 @@ export default function DevTools({
     tab = overrideTab;
   }
 
+  const options = useMemo(
+    () => ({
+      readOnly: readOnly || false,
+      hideSettings: hideSettings || false,
+      hideToggleErrorAction: hideToggleErrorAction || false,
+      hideToggleSuspenseAction: hideToggleSuspenseAction || false,
+      hideLogAction: hideLogAction || false,
+      hideViewSourceAction: hideViewSourceAction || false,
+    }),
+    [
+      readOnly,
+      hideSettings,
+      hideToggleErrorAction,
+      hideToggleSuspenseAction,
+      hideLogAction,
+      hideViewSourceAction,
+    ],
+  );
+
   const viewElementSource = useMemo(
     () => ({
       canViewElementSourceFunction: canViewElementSourceFunction || null,
@@ -210,65 +246,67 @@ export default function DevTools({
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <ContextMenuContext.Provider value={contextMenu}>
-          <ModalDialogContextController>
-            <SettingsContextController
-              browserTheme={browserTheme}
-              componentsPortalContainer={componentsPortalContainer}
-              profilerPortalContainer={profilerPortalContainer}>
-              <ViewElementSourceContext.Provider value={viewElementSource}>
-                <HookNamesContext.Provider value={hookNamesContext}>
-                  <TreeContextController>
-                    <ProfilerContextController>
-                      <SchedulingProfilerContextController>
-                        <ThemeProvider>
-                          <div
-                            className={styles.DevTools}
-                            ref={devToolsRef}
-                            data-react-devtools-portal-root={true}>
-                            {showTabBar && (
-                              <div className={styles.TabBar}>
-                                <ReactLogo />
-                                <span className={styles.DevToolsVersion}>
-                                  {process.env.DEVTOOLS_VERSION}
-                                </span>
-                                <div className={styles.Spacer} />
-                                <TabBar
-                                  currentTab={tab}
-                                  id="DevTools"
-                                  selectTab={setTab}
-                                  tabs={tabs}
-                                  type="navigation"
+        <OptionsContext.Provider value={options}>
+          <ContextMenuContext.Provider value={contextMenu}>
+            <ModalDialogContextController>
+              <SettingsContextController
+                browserTheme={browserTheme}
+                componentsPortalContainer={componentsPortalContainer}
+                profilerPortalContainer={profilerPortalContainer}>
+                <ViewElementSourceContext.Provider value={viewElementSource}>
+                  <HookNamesContext.Provider value={hookNamesContext}>
+                    <TreeContextController>
+                      <ProfilerContextController>
+                        <SchedulingProfilerContextController>
+                          <ThemeProvider>
+                            <div
+                              className={styles.DevTools}
+                              ref={devToolsRef}
+                              data-react-devtools-portal-root={true}>
+                              {showTabBar && (
+                                <div className={styles.TabBar}>
+                                  <ReactLogo />
+                                  <span className={styles.DevToolsVersion}>
+                                    {process.env.DEVTOOLS_VERSION}
+                                  </span>
+                                  <div className={styles.Spacer} />
+                                  <TabBar
+                                    currentTab={tab}
+                                    id="DevTools"
+                                    selectTab={setTab}
+                                    tabs={tabs}
+                                    type="navigation"
+                                  />
+                                </div>
+                              )}
+                              <div
+                                className={styles.TabContent}
+                                hidden={tab !== 'components'}>
+                                <Components
+                                  portalContainer={componentsPortalContainer}
+                                />
+                              </div>
+                              <div
+                                className={styles.TabContent}
+                                hidden={tab !== 'profiler'}>
+                                <Profiler
+                                  portalContainer={profilerPortalContainer}
                                 />
                               </div>
-                            )}
-                            <div
-                              className={styles.TabContent}
-                              hidden={tab !== 'components'}>
-                              <Components
-                                portalContainer={componentsPortalContainer}
-                              />
-                            </div>
-                            <div
-                              className={styles.TabContent}
-                              hidden={tab !== 'profiler'}>
-                              <Profiler
-                                portalContainer={profilerPortalContainer}
-                              />
                             </div>
-                          </div>
-                        </ThemeProvider>
-                      </SchedulingProfilerContextController>
-                    </ProfilerContextController>
-                  </TreeContextController>
-                </HookNamesContext.Provider>
-              </ViewElementSourceContext.Provider>
-            </SettingsContextController>
-            <UnsupportedBridgeProtocolDialog />
-            {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
-            {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
-          </ModalDialogContextController>
-        </ContextMenuContext.Provider>
+                          </ThemeProvider>
+                        </SchedulingProfilerContextController>
+                      </ProfilerContextController>
+                    </TreeContextController>
+                  </HookNamesContext.Provider>
+                </ViewElementSourceContext.Provider>
+              </SettingsContextController>
+              <UnsupportedBridgeProtocolDialog />
+              {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
+              {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
+            </ModalDialogContextController>
+          </ContextMenuContext.Provider>
+        </OptionsContext.Provider>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index a26d704cd28a6..169811b7b901b 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -31,3 +31,21 @@ export const ContextMenuContext = createContext<ContextMenuContextType>({
   viewAttributeSourceFunction: null,
 });
 ContextMenuContext.displayName = 'ContextMenuContext';
+
+export type OptionsContextType = {|
+  readOnly: boolean,
+  hideSettings: boolean,
+  hideToggleErrorAction: boolean,
+  hideToggleSuspenseAction: boolean,
+  hideLogAction: boolean,
+  hideViewSourceAction: boolean,
+|};
+
+export const OptionsContext = createContext<OptionsContextType>({
+  readOnly: false,
+  hideSettings: false,
+  hideToggleErrorAction: false,
+  hideToggleSuspenseAction: false,
+  hideLogAction: false,
+  hideViewSourceAction: false,
+});