{"patch":"diff --git a\/packages\/react-devtools-inline\/src\/frontend.js b\/packages\/react-devtools-inline\/src\/frontend.js\nindex d9645999b3..79bda7ecd8 100644\n--- a\/packages\/react-devtools-inline\/src\/frontend.js\n+++ b\/packages\/react-devtools-inline\/src\/frontend.js\n@@ -20,11 +20,16 @@ import type {Wall} from 'react-devtools-shared\/src\/types';\n import type {FrontendBridge} from 'react-devtools-shared\/src\/bridge';\n import type {Props} from 'react-devtools-shared\/src\/devtools\/views\/DevTools';\n \n-export function createStore(bridge: FrontendBridge): Store {\n+type Config = {|\n+ supportsNativeInspection?: boolean,\n+|};\n+\n+export function createStore(bridge: FrontendBridge, config?: Config): Store {\n return new Store(bridge, {\n checkBridgeProtocolCompatibility: true,\n supportsTraceUpdates: true,\n supportsSchedulingProfiler: true,\n+ supportsNativeInspection: config?.supportsNativeInspection !== false,\n });\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\nindex d0774d95f9..f63da7b54a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\n@@ -10,7 +10,7 @@\n import * as React from 'react';\n import {useCallback, useContext} from 'react';\n import {TreeDispatcherContext, TreeStateContext} from '.\/TreeContext';\n-import {BridgeContext, StoreContext} from '..\/context';\n+import {BridgeContext, StoreContext, OptionsContext} from '..\/context';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import {ModalDialogContext} from '..\/ModalDialog';\n@@ -37,6 +37,12 @@ export default function InspectedElementWrapper(_: Props) {\n );\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n+ const {\n+ hideToggleErrorAction,\n+ hideToggleSuspenseAction,\n+ hideLogAction,\n+ hideViewSourceAction,\n+ } = useContext(OptionsContext);\n const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);\n \n const {\n@@ -108,10 +114,14 @@ export default function InspectedElementWrapper(_: Props) {\n inspectedElement.state != null;\n \n const canToggleError =\n- inspectedElement != null && inspectedElement.canToggleError;\n+ !hideToggleErrorAction &&\n+ inspectedElement != null &&\n+ inspectedElement.canToggleError;\n \n const canToggleSuspense =\n- inspectedElement != null && inspectedElement.canToggleSuspense;\n+ !hideToggleSuspenseAction &&\n+ inspectedElement != null &&\n+ inspectedElement.canToggleSuspense;\n \n const toggleErrored = useCallback(() => {\n if (inspectedElement == null || targetErrorBoundaryID == null) {\n@@ -248,19 +258,23 @@ export default function InspectedElementWrapper(_: Props) {\n \n <\/Button>\n )}\n- \n- \n- <\/Button>\n- \n- \n- <\/Button>\n+ {!hideLogAction && (\n+ \n+ \n+ <\/Button>\n+ )}\n+ {!hideViewSourceAction && (\n+ \n+ \n+ <\/Button>\n+ )}\n <\/div>\n \n {inspectedElement === null && (\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementPropsTree.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementPropsTree.js\nindex 7b6569cd32..1673b5f9b1 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementPropsTree.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementPropsTree.js\n@@ -9,6 +9,7 @@\n \n import {copy} from 'clipboard-js';\n import * as React from 'react';\n+import {OptionsContext} from '..\/context';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import KeyValue from '.\/KeyValue';\n@@ -35,6 +36,8 @@ export default function InspectedElementPropsTree({\n inspectedElement,\n store,\n }: Props) {\n+ const {readOnly} = React.useContext(OptionsContext);\n+\n const {\n canEditFunctionProps,\n canEditFunctionPropsDeletePaths,\n@@ -45,7 +48,8 @@ export default function InspectedElementPropsTree({\n \n const canDeletePaths =\n type === ElementTypeClass || canEditFunctionPropsDeletePaths;\n- const canEditValues = type === ElementTypeClass || canEditFunctionProps;\n+ const canEditValues =\n+ !readOnly && (type === ElementTypeClass || canEditFunctionProps);\n const canRenamePaths =\n type === ElementTypeClass || canEditFunctionPropsRenamePaths;\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementSuspenseToggle.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementSuspenseToggle.js\nindex d486116bb8..0b0ce0ecac 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementSuspenseToggle.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementSuspenseToggle.js\n@@ -8,6 +8,7 @@\n *\/\n \n import * as React from 'react';\n+import {OptionsContext} from '..\/context';\n import EditableValue from '.\/EditableValue';\n import Store from '..\/..\/store';\n import {ElementTypeSuspense} from 'react-devtools-shared\/src\/types';\n@@ -27,7 +28,10 @@ export default function InspectedElementSuspenseToggle({\n inspectedElement,\n store,\n }: Props) {\n- const {canToggleSuspense, id, state, type} = inspectedElement;\n+ const {readOnly} = React.useContext(OptionsContext);\n+\n+ const {id, state, type} = inspectedElement;\n+ const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense;\n \n if (type !== ElementTypeSuspense) {\n return null;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\nindex be45bab429..f09c9f3d60 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -9,6 +9,7 @@\n \n import * as React from 'react';\n import {useTransition, useContext, useRef, useState} from 'react';\n+import {OptionsContext} from '..\/context';\n import EditableName from '.\/EditableName';\n import EditableValue from '.\/EditableValue';\n import NewArrayValue from '.\/NewArrayValue';\n@@ -74,6 +75,11 @@ export default function KeyValue({\n store,\n value,\n }: KeyValueProps) {\n+ const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);\n+ canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;\n+ canEditValues = !readOnlyGlobalFlag && canEditValues;\n+ canRenamePaths = !readOnlyGlobalFlag && canRenamePaths;\n+\n const {id} = inspectedElement;\n \n const [isOpen, setIsOpen] = useState(false);\n@@ -82,10 +88,10 @@ export default function KeyValue({\n const {inspectPaths} = useContext(InspectedElementContext);\n \n let isInspectable = false;\n- let isReadOnly = false;\n+ let isReadOnlyBasedOnMetadata = false;\n if (value !== null && typeof value === 'object') {\n isInspectable = value[meta.inspectable] && value[meta.size] !== 0;\n- isReadOnly = value[meta.readonly];\n+ isReadOnlyBasedOnMetadata = value[meta.readonly];\n }\n \n const [isInspectPathsPending, startInspectPathsTransition] = useTransition();\n@@ -330,9 +336,9 @@ export default function KeyValue({\n key={index}\n alphaSort={alphaSort}\n bridge={bridge}\n- canDeletePaths={canDeletePaths && !isReadOnly}\n- canEditValues={canEditValues && !isReadOnly}\n- canRenamePaths={canRenamePaths && !isReadOnly}\n+ canDeletePaths={canDeletePaths && !isReadOnlyBasedOnMetadata}\n+ canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}\n+ canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}\n canRenamePathsAtDepth={canRenamePathsAtDepth}\n depth={depth + 1}\n element={element}\n@@ -348,7 +354,7 @@ export default function KeyValue({\n \/>\n ));\n \n- if (canEditValues && !isReadOnly) {\n+ if (canEditValues && !isReadOnlyBasedOnMetadata) {\n children.push(\n \n ));\n \n- if (canEditValues && !isReadOnly) {\n+ if (canEditValues && !isReadOnlyBasedOnMetadata) {\n children.push(\n }>\n {ownerID !== null ? : }\n <\/Suspense>\n-

\n {showInlineWarningsAndErrors &&\n ownerID === null &&\n (errors > 0 || warnings > 0) && (\n \n+

\n {errors > 0 && (\n

\n \n@@ -376,10 +377,14 @@ export default function Tree(props: Props) {\n title=\"Clear all errors and warnings\">\n \n <\/Button>\n-

\n <\/React.Fragment>\n )}\n- \n+ {!hideSettings && (\n+ \n+

\n+ \n+ <\/Fragment>\n+ )}\n <\/div>\n (\n 'React::DevTools::defaultTab',\n@@ -138,6 +155,25 @@ export default function DevTools({\n tab = overrideTab;\n }\n \n+ const options = useMemo(\n+ () => ({\n+ readOnly: readOnly || false,\n+ hideSettings: hideSettings || false,\n+ hideToggleErrorAction: hideToggleErrorAction || false,\n+ hideToggleSuspenseAction: hideToggleSuspenseAction || false,\n+ hideLogAction: hideLogAction || false,\n+ hideViewSourceAction: hideViewSourceAction || false,\n+ }),\n+ [\n+ readOnly,\n+ hideSettings,\n+ hideToggleErrorAction,\n+ hideToggleSuspenseAction,\n+ hideLogAction,\n+ hideViewSourceAction,\n+ ],\n+ );\n+\n const viewElementSource = useMemo(\n () => ({\n canViewElementSourceFunction: canViewElementSourceFunction || null,\n@@ -210,65 +246,67 @@ export default function DevTools({\n return (\n \n \n- \n- \n- \n- \n- \n- \n- \n- \n- \n- \n- {showTabBar && (\n-

\n- \n- \n- {process.env.DEVTOOLS_VERSION}\n- <\/span>\n-

\n- \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ {showTabBar && (\n+

\n+ \n+ \n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+

\n+ \n+ <\/div>\n+ )}\n+ \n+ \n+ <\/div>\n+ \n+ \n <\/div>\n- )}\n- \n- \n- <\/div>\n- \n- \n <\/div>\n- <\/div>\n- <\/ThemeProvider>\n- <\/SchedulingProfilerContextController>\n- <\/ProfilerContextController>\n- <\/TreeContextController>\n- <\/HookNamesContext.Provider>\n- <\/ViewElementSourceContext.Provider>\n- <\/SettingsContextController>\n- \n- {warnIfLegacyBackendDetected && }\n- {warnIfUnsupportedVersionDetected && }\n- <\/ModalDialogContextController>\n- <\/ContextMenuContext.Provider>\n+ <\/ThemeProvider>\n+ <\/SchedulingProfilerContextController>\n+ <\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/HookNamesContext.Provider>\n+ <\/ViewElementSourceContext.Provider>\n+ <\/SettingsContextController>\n+ \n+ {warnIfLegacyBackendDetected && }\n+ {warnIfUnsupportedVersionDetected && }\n+ <\/ModalDialogContextController>\n+ <\/ContextMenuContext.Provider>\n+ <\/OptionsContext.Provider>\n <\/StoreContext.Provider>\n <\/BridgeContext.Provider>\n );\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/context.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/context.js\nindex a26d704cd2..169811b7b9 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/context.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/context.js\n@@ -31,3 +31,21 @@ export const ContextMenuContext = createContext({\n viewAttributeSourceFunction: null,\n });\n ContextMenuContext.displayName = 'ContextMenuContext';\n+\n+export type OptionsContextType = {|\n+ readOnly: boolean,\n+ hideSettings: boolean,\n+ hideToggleErrorAction: boolean,\n+ hideToggleSuspenseAction: boolean,\n+ hideLogAction: boolean,\n+ hideViewSourceAction: boolean,\n+|};\n+\n+export const OptionsContext = createContext({\n+ readOnly: false,\n+ hideSettings: false,\n+ hideToggleErrorAction: false,\n+ hideToggleSuspenseAction: false,\n+ hideLogAction: false,\n+ hideViewSourceAction: false,\n+});\n","commit":{"revision":"83205c0aea3226eac063910bab128f3258d7c7dc","shortRevision":"83205c0aea","authorEmail":"hbenl@evandor.de","authoredAt":"2021-08-20T18:55:50+02:00","authorName":"Holger Benl","subject":"[DevTools] Add options for disabling some features (#22136)"},"body":"","files":[{"path":"packages\/react-devtools-inline\/src\/frontend.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementPropsTree.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementSuspenseToggle.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/context.js","status":"M"}],"parents":["75a3e9fa4074b4b18ee95398ceabc361a6c9f82e"]}

dillon1000/react

Files changed