Skip to content

Commit 58c7a26

Browse files
hbenlhbenl
committed
Add options for disabling some features
1 parent aa25824 commit 58c7a26

File tree

8 files changed

+184
-90
lines changed

8 files changed

+184
-90
lines changed

‎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: 5 additions & 1 deletion
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 canEditValues =
52+
!readOnly && (type === ElementTypeClass || canEditFunctionProps);
4953
const canRenamePaths =
5054
type === ElementTypeClass || canEditFunctionPropsRenamePaths;
5155

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

Lines changed: 5 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,10 @@ 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 {id, state, type} = inspectedElement;
34+
const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense;
3135

3236
if (type !== ElementTypeSuspense) {
3337
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';
@@ -74,6 +75,11 @@ export default function KeyValue({
7475
store,
7576
value,
7677
}: KeyValueProps) {
78+
const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
79+
canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
80+
canEditValues = !readOnlyGlobalFlag && canEditValues;
81+
canRenamePaths = !readOnlyGlobalFlag && canRenamePaths;
82+
7783
const {id} = inspectedElement;
7884

7985
const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -82,10 +88,10 @@ export default function KeyValue({
8288
const {inspectPaths} = useContext(InspectedElementContext);
8389

8490
let isInspectable = false;
85-
let isReadOnly = false;
91+
let isReadOnlyBasedOnMetadata = false;
8692
if (value !== null && typeof value === 'object') {
8793
isInspectable = value[meta.inspectable] && value[meta.size] !== 0;
88-
isReadOnly = value[meta.readonly];
94+
isReadOnlyBasedOnMetadata = value[meta.readonly];
8995
}
9096

9197
const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
@@ -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={canDeletePaths && !isReadOnlyBasedOnMetadata}
340+
canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
341+
canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
336342
canRenamePathsAtDepth={canRenamePathsAtDepth}
337343
depth={depth + 1}
338344
element={element}
@@ -348,7 +354,7 @@ export default function KeyValue({
348354
/>
349355
));
350356

351-
if (canEditValues && !isReadOnly) {
357+
if (canEditValues && !isReadOnlyBasedOnMetadata) {
352358
children.push(
353359
<NewArrayValue
354360
key="NewKeyValue"
@@ -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={canDeletePaths && !isReadOnlyBasedOnMetadata}
414+
canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
415+
canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
410416
canRenamePathsAtDepth={canRenamePathsAtDepth}
411417
depth={depth + 1}
412418
element={element}
@@ -421,7 +427,7 @@ export default function KeyValue({
421427
/>
422428
));
423429

424-
if (canEditValues && !isReadOnly) {
430+
if (canEditValues && !isReadOnlyBasedOnMetadata) {
425431
children.push(
426432
<NewKeyValue
427433
key="NewKeyValue"

‎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)