Skip to content

Commit 5ec5d48

Browse files
committed
Add options for disabling some features
1 parent aa25824 commit 5ec5d48

File tree

8 files changed

+170
-85
lines changed

8 files changed

+170
-85
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: 26 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 {
@@ -214,7 +220,7 @@ export default function InspectedElementWrapper(_: Props) {
214220
</div>
215221
</div>
216222

217-
{canToggleError && (
223+
{!hideToggleErrorAction && canToggleError && (
218224
<Toggle
219225
className={styles.IconButton}
220226
isChecked={isErrored}
@@ -227,7 +233,7 @@ export default function InspectedElementWrapper(_: Props) {
227233
<ButtonIcon type="error" />
228234
</Toggle>
229235
)}
230-
{canToggleSuspense && (
236+
{!hideToggleSuspenseAction && canToggleSuspense && (
231237
<Toggle
232238
className={styles.IconButton}
233239
isChecked={isSuspended}
@@ -248,19 +254,23 @@ export default function InspectedElementWrapper(_: Props) {
248254
<ButtonIcon type="view-dom" />
249255
</Button>
250256
)}
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>
257+
{!hideLogAction && (
258+
<Button
259+
className={styles.IconButton}
260+
onClick={logElement}
261+
title="Log this component data to the console">
262+
<ButtonIcon type="log-data" />
263+
</Button>
264+
)}
265+
{!hideViewSourceAction && (
266+
<Button
267+
className={styles.IconButton}
268+
disabled={!canViewSource}
269+
onClick={viewSource}
270+
title="View source for this element">
271+
<ButtonIcon type="view-source" />
272+
</Button>
273+
)}
264274
</div>
265275

266276
{inspectedElement === null && (

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

Lines changed: 4 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,
@@ -88,7 +91,7 @@ export default function InspectedElementPropsTree({
8891
value={value}
8992
/>
9093
))}
91-
{canEditValues && (
94+
{!readOnly && canEditValues && (
9295
<NewKeyValue
9396
bridge={bridge}
9497
depth={0}

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

Lines changed: 4 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,6 +28,8 @@ export default function InspectedElementSuspenseToggle({
2728
inspectedElement,
2829
store,
2930
}: Props) {
31+
const {readOnly} = React.useContext(OptionsContext);
32+
3033
const {canToggleSuspense, id, state, type} = inspectedElement;
3134

3235
if (type !== ElementTypeSuspense) {
@@ -53,7 +56,7 @@ export default function InspectedElementSuspenseToggle({
5356
</div>
5457
<div className={styles.ToggleSuspenseRow}>
5558
<span className={styles.Name}>Suspended</span>
56-
{canToggleSuspense ? (
59+
{!readOnly && canToggleSuspense ? (
5760
// key is required to keep <EditableValue> and header row toggle button in sync
5861
<EditableValue
5962
key={isSuspended}

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

Lines changed: 8 additions & 5 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,8 @@ export default function KeyValue({
7475
store,
7576
value,
7677
}: KeyValueProps) {
78+
const {readOnly} = useContext(OptionsContext);
79+
7780
const {id} = inspectedElement;
7881

7982
const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -264,7 +267,7 @@ export default function KeyValue({
264267
<div className={styles.ExpandCollapseToggleSpacer} />
265268
{renderedName}
266269
<div className={styles.AfterName}>:</div>
267-
{canEditValues ? (
270+
{!readOnly && canEditValues ? (
268271
<EditableValue
269272
overrideValue={overrideValue}
270273
path={path}
@@ -322,7 +325,7 @@ export default function KeyValue({
322325
}
323326
} else {
324327
if (Array.isArray(value)) {
325-
const hasChildren = value.length > 0 || canEditValues;
328+
const hasChildren = value.length > 0 || (!readOnly && canEditValues);
326329
const displayName = getMetaValueLabel(value);
327330

328331
children = value.map((innerValue, index) => (
@@ -348,7 +351,7 @@ export default function KeyValue({
348351
/>
349352
));
350353

351-
if (canEditValues && !isReadOnly) {
354+
if (!readOnly && canEditValues && !isReadOnly) {
352355
children.push(
353356
<NewArrayValue
354357
key="NewKeyValue"
@@ -396,7 +399,7 @@ export default function KeyValue({
396399
entries.sort(alphaSortEntries);
397400
}
398401

399-
const hasChildren = entries.length > 0 || canEditValues;
402+
const hasChildren = entries.length > 0 || (!readOnly && canEditValues);
400403
const displayName = getMetaValueLabel(value);
401404

402405
children = entries.map<ReactElement<any>>(([key, keyValue]) => (
@@ -421,7 +424,7 @@ export default function KeyValue({
421424
/>
422425
));
423426

424-
if (canEditValues && !isReadOnly) {
427+
if (!readOnly && canEditValues && !isReadOnly) {
425428
children.push(
426429
<NewKeyValue
427430
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)