Skip to content

Commit 1394ee3

Browse files
hbenlhbenl
committed
Add options for disabling some features
1 parent aa25824 commit 1394ee3

8 files changed

Lines changed: 190 additions & 91 deletions

File tree

‎packages/react-devtools-inline/src/frontend.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,16 @@ import type {Wall} from 'react-devtools-shared/src/types';
2020
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
2121
import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
2222

23-
export function createStore(bridge: FrontendBridge): Store {
23+
type Config = {|
24+
supportsNativeInspection?: boolean,
25+
|};
26+
27+
export function createStore(bridge: FrontendBridge, config?: Config): Store {
2428
return new Store(bridge, {
2529
checkBridgeProtocolCompatibility: true,
2630
supportsTraceUpdates: true,
2731
supportsSchedulingProfiler: true,
32+
supportsNativeInspection: config?.supportsNativeInspection !== false,
2833
});
2934
}
3035

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import * as React from 'react';
1111
import {useCallback, useContext} from 'react';
1212
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
13-
import {BridgeContext, StoreContext} from '../context';
13+
import {BridgeContext, StoreContext, OptionsContext} from '../context';
1414
import Button from '../Button';
1515
import ButtonIcon from '../ButtonIcon';
1616
import {ModalDialogContext} from '../ModalDialog';
@@ -37,6 +37,12 @@ export default function InspectedElementWrapper(_: Props) {
3737
);
3838
const bridge = useContext(BridgeContext);
3939
const store = useContext(StoreContext);
40+
const {
41+
hideToggleErrorAction,
42+
hideToggleSuspenseAction,
43+
hideLogAction,
44+
hideViewSourceAction,
45+
} = useContext(OptionsContext);
4046
const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
4147

4248
const {
@@ -108,10 +114,14 @@ export default function InspectedElementWrapper(_: Props) {
108114
inspectedElement.state != null;
109115

110116
const canToggleError =
111-
inspectedElement != null && inspectedElement.canToggleError;
117+
!hideToggleErrorAction &&
118+
inspectedElement != null &&
119+
inspectedElement.canToggleError;
112120

113121
const canToggleSuspense =
114-
inspectedElement != null && inspectedElement.canToggleSuspense;
122+
!hideToggleSuspenseAction &&
123+
inspectedElement != null &&
124+
inspectedElement.canToggleSuspense;
115125

116126
const toggleErrored = useCallback(() => {
117127
if (inspectedElement == null || targetErrorBoundaryID == null) {
@@ -248,19 +258,23 @@ export default function InspectedElementWrapper(_: Props) {
248258
<ButtonIcon type="view-dom" />
249259
</Button>
250260
)}
251-
<Button
252-
className={styles.IconButton}
253-
onClick={logElement}
254-
title="Log this component data to the console">
255-
<ButtonIcon type="log-data" />
256-
</Button>
257-
<Button
258-
className={styles.IconButton}
259-
disabled={!canViewSource}
260-
onClick={viewSource}
261-
title="View source for this element">
262-
<ButtonIcon type="view-source" />
263-
</Button>
261+
{!hideLogAction && (
262+
<Button
263+
className={styles.IconButton}
264+
onClick={logElement}
265+
title="Log this component data to the console">
266+
<ButtonIcon type="log-data" />
267+
</Button>
268+
)}
269+
{!hideViewSourceAction && (
270+
<Button
271+
className={styles.IconButton}
272+
disabled={!canViewSource}
273+
onClick={viewSource}
274+
title="View source for this element">
275+
<ButtonIcon type="view-source" />
276+
</Button>
277+
)}
264278
</div>
265279

266280
{inspectedElement === null && (

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
import {copy} from 'clipboard-js';
1111
import * as React from 'react';
12+
import {OptionsContext} from '../context';
1213
import Button from '../Button';
1314
import ButtonIcon from '../ButtonIcon';
1415
import KeyValue from './KeyValue';
@@ -35,6 +36,8 @@ export default function InspectedElementPropsTree({
3536
inspectedElement,
3637
store,
3738
}: Props) {
39+
const {readOnly} = React.useContext(OptionsContext);
40+
3841
const {
3942
canEditFunctionProps,
4043
canEditFunctionPropsDeletePaths,
@@ -45,7 +48,8 @@ export default function InspectedElementPropsTree({
4548

4649
const canDeletePaths =
4750
type === ElementTypeClass || canEditFunctionPropsDeletePaths;
48-
const canEditValues = type === ElementTypeClass || canEditFunctionProps;
51+
const canEditValuesProp = type === ElementTypeClass || canEditFunctionProps;
52+
const canEditValues = !readOnly && canEditValuesProp;
4953
const canRenamePaths =
5054
type === ElementTypeClass || canEditFunctionPropsRenamePaths;
5155

@@ -75,7 +79,7 @@ export default function InspectedElementPropsTree({
7579
alphaSort={true}
7680
bridge={bridge}
7781
canDeletePaths={canDeletePaths}
78-
canEditValues={canEditValues}
82+
canEditValues={canEditValuesProp}
7983
canRenamePaths={canRenamePaths}
8084
depth={1}
8185
element={element}

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import * as React from 'react';
11+
import {OptionsContext} from '../context';
1112
import EditableValue from './EditableValue';
1213
import Store from '../../store';
1314
import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
@@ -27,7 +28,15 @@ export default function InspectedElementSuspenseToggle({
2728
inspectedElement,
2829
store,
2930
}: Props) {
30-
const {canToggleSuspense, id, state, type} = inspectedElement;
31+
const {readOnly} = React.useContext(OptionsContext);
32+
33+
const {
34+
canToggleSuspense: elementCanToggleSuspense,
35+
id,
36+
state,
37+
type,
38+
} = inspectedElement;
39+
const canToggleSuspense = !readOnly && elementCanToggleSuspense;
3140

3241
if (type !== ElementTypeSuspense) {
3342
return null;

‎packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
import * as React from 'react';
1111
import {useTransition, useContext, useRef, useState} from 'react';
12+
import {OptionsContext} from '../context';
1213
import EditableName from './EditableName';
1314
import EditableValue from './EditableValue';
1415
import NewArrayValue from './NewArrayValue';
@@ -57,9 +58,9 @@ type KeyValueProps = {|
5758
export default function KeyValue({
5859
alphaSort,
5960
bridge,
60-
canDeletePaths,
61-
canEditValues,
62-
canRenamePaths,
61+
canDeletePaths: canDeletePathsProp,
62+
canEditValues: canEditValuesProp,
63+
canRenamePaths: canRenamePathsProp,
6364
canRenamePathsAtDepth,
6465
depth,
6566
element,
@@ -74,6 +75,11 @@ export default function KeyValue({
7475
store,
7576
value,
7677
}: KeyValueProps) {
78+
const {readOnly} = useContext(OptionsContext);
79+
const canDeletePaths = !readOnly && canDeletePathsProp;
80+
const canEditValues = !readOnly && canEditValuesProp;
81+
const canRenamePaths = !readOnly && canRenamePathsProp;
82+
7783
const {id} = inspectedElement;
7884

7985
const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -195,7 +201,7 @@ export default function KeyValue({
195201
// Only certain types of hooks should be editable.
196202
let canRenameTheCurrentPath = canRenamePaths;
197203
if (canRenameTheCurrentPath && typeof canRenamePathsAtDepth === 'function') {
198-
canRenameTheCurrentPath = canRenamePathsAtDepth(depth);
204+
canRenameTheCurrentPath = !readOnly && canRenamePathsAtDepth(depth);
199205
}
200206

201207
let renderedName;
@@ -330,9 +336,9 @@ export default function KeyValue({
330336
key={index}
331337
alphaSort={alphaSort}
332338
bridge={bridge}
333-
canDeletePaths={canDeletePaths && !isReadOnly}
334-
canEditValues={canEditValues && !isReadOnly}
335-
canRenamePaths={canRenamePaths && !isReadOnly}
339+
canDeletePaths={canDeletePathsProp && !isReadOnly}
340+
canEditValues={canEditValuesProp && !isReadOnly}
341+
canRenamePaths={canRenamePathsProp && !isReadOnly}
336342
canRenamePathsAtDepth={canRenamePathsAtDepth}
337343
depth={depth + 1}
338344
element={element}
@@ -404,9 +410,9 @@ export default function KeyValue({
404410
key={key}
405411
alphaSort={alphaSort}
406412
bridge={bridge}
407-
canDeletePaths={canDeletePaths && !isReadOnly}
408-
canEditValues={canEditValues && !isReadOnly}
409-
canRenamePaths={canRenamePaths && !isReadOnly}
413+
canDeletePaths={canDeletePathsProp && !isReadOnly}
414+
canEditValues={canEditValuesProp && !isReadOnly}
415+
canRenamePaths={canRenamePathsProp && !isReadOnly}
410416
canRenamePathsAtDepth={canRenamePathsAtDepth}
411417
depth={depth + 1}
412418
element={element}

‎packages/react-devtools-shared/src/devtools/views/Components/Tree.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {FixedSizeList} from 'react-window';
2323
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
2424
import Icon from '../Icon';
2525
import {SettingsContext} from '../Settings/SettingsContext';
26-
import {BridgeContext, StoreContext} from '../context';
26+
import {BridgeContext, StoreContext, OptionsContext} from '../context';
2727
import Element from './Element';
2828
import InspectHostNodesToggle from './InspectHostNodesToggle';
2929
import OwnersStack from './OwnersStack';
@@ -62,6 +62,7 @@ export default function Tree(props: Props) {
6262
} = useContext(TreeStateContext);
6363
const bridge = useContext(BridgeContext);
6464
const store = useContext(StoreContext);
65+
const {hideSettings} = useContext(OptionsContext);
6566
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
6667
false,
6768
);
@@ -344,11 +345,11 @@ export default function Tree(props: Props) {
344345
<Suspense fallback={<Loading />}>
345346
{ownerID !== null ? <OwnersStack /> : <SearchInput />}
346347
</Suspense>
347-
<div className={styles.VRule} />
348348
{showInlineWarningsAndErrors &&
349349
ownerID === null &&
350350
(errors > 0 || warnings > 0) && (
351351
<React.Fragment>
352+
<div className={styles.VRule} />
352353
{errors > 0 && (
353354
<div className={styles.IconAndCount}>
354355
<Icon className={styles.ErrorIcon} type="error" />
@@ -376,10 +377,14 @@ export default function Tree(props: Props) {
376377
title="Clear all errors and warnings">
377378
<ButtonIcon type="clear" />
378379
</Button>
379-
<div className={styles.VRule} />
380380
</React.Fragment>
381381
)}
382-
<SettingsModalContextToggle />
382+
{!hideSettings && (
383+
<Fragment>
384+
<div className={styles.VRule} />
385+
<SettingsModalContextToggle />
386+
</Fragment>
387+
)}
383388
</div>
384389
<div
385390
className={styles.AutoSizerWrapper}

0 commit comments

Comments
 (0)