Add options for disabling some features

facebook · Aug 19, 2021 · 5ec5d48 · 5ec5d48
1 parent aa25824
commit 5ec5d48
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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/...ges/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/...ges/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
@@ -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
@@ -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}