Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Disable props/state inspection for Profiler #1260

Merged
bvaughn merged 4 commits into from
Jan 2, 2019
Merged

Disable props/state inspection for Profiler #1260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63a854e
Disable props/state inspection for Profiler
Jan 2, 2019
df55be8
Expand Profiler props/state objects by default
Jan 2, 2019
9e4ae08
Added comment about why props.inspect might be null
Jan 2, 2019
79aba09
Fixed Flow warning
Jan 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions agent/dehydrate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
// This value was originally set to 2, but we reduced it to improve performance:
// see https://github.com/facebook/react-devtools/issues/1200
// Note this value also indirectly determines how far props can be drilled into within the Profiler.
const LEVEL_THRESHOLD = 1;

/**
Expand Down
35 changes: 22 additions & 13 deletions frontend/DataView/DataView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type ShowMenu = boolean | (e: DOMEvent, val: any, path: Array<string>, name: str
type DataViewProps = {
data: ?any,
path: Array<string>,
inspect: Inspect,
inspect: Inspect | null,
showMenu: ShowMenu,
startOpen?: boolean,
noSort?: boolean,
Expand Down Expand Up @@ -155,7 +155,7 @@ DataView.contextTypes = {

type Props = {
path: Array<string>,
inspect: Inspect,
inspect: Inspect | null,
showMenu: ShowMenu,
startOpen?: boolean,
noSort?: boolean,
Expand Down Expand Up @@ -195,25 +195,34 @@ class DataItem extends React.Component<Props, State> {
}

inspect() {
const inspect = this.props.inspect;
if (inspect === null) {
// The Profiler displays props/state for oudated Fibers.
// These Fibers have already been mutated so they can't be inspected.
return;
Copy link
Contributor

@gaearon gaearon Jan 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be worth commenting why this is useful. Someone later might look at this code and think: "I'll just simplify this by passing an empty function!"

}

this.setState({loading: true, open: true});
this.props.inspect(this.props.path, () => {
inspect(this.props.path, () => {
this.setState({loading: false});
});
}

toggleOpen() {
toggleOpen = () => {
if (this.state.loading) {
return;
}
if (this.props.value && this.props.value[consts.inspected] === false) {

const { value } = this.props;
if (value && value[consts.inspected] === false) {
this.inspect();
return;
}

this.setState({
open: !this.state.open,
});
}
};

toggleBooleanValue(e) {
this.context.onChange(this.props.path, e.target.checked);
Expand All @@ -238,14 +247,14 @@ class DataItem extends React.Component<Props, State> {
preview = previewComplex(data, theme);
}

var inspectable = !data || !data[consts.meta] || !data[consts.meta].uninspectable;
var open = inspectable && this.state.open && (!data || data[consts.inspected] !== false);
var inspectable = typeof this.props.inspect === 'function' && (!data || !data[consts.meta] || !data[consts.meta].uninspectable);
var open = this.state.open && (!data || data[consts.inspected] !== false);
var opener = null;

if (complex && inspectable) {
opener = (
<div
onClick={this.toggleOpen.bind(this)}
onClick={this.toggleOpen}
style={styles.opener}>
{open ?
<span style={expandedArrowStyle(theme)} /> :
Expand Down Expand Up @@ -292,8 +301,8 @@ class DataItem extends React.Component<Props, State> {
{
!this.props.hideName &&
<div
style={nameStyle(complex, theme)}
onClick={inspectable && this.toggleOpen.bind(this)}
style={nameStyle(complex, inspectable, theme)}
onClick={inspectable ? this.toggleOpen : undefined}
>
{name}:
</div>
Expand Down Expand Up @@ -330,8 +339,8 @@ function alphanumericSort(a: string, b: string): number {
return (a < b) ? -1 : 1;
}

const nameStyle = (isComplex: boolean, theme: Theme) => ({
cursor: isComplex ? 'pointer' : 'default',
const nameStyle = (isComplex: boolean, isInspectable: boolean, theme: Theme) => ({
cursor: isComplex && isInspectable ? 'pointer' : 'default',
color: theme.special03,
margin: '0 0.25rem',
});
Expand Down
6 changes: 4 additions & 2 deletions plugins/Profiler/views/ProfilerFiberDetailPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,9 @@ const ProfilerFiberDetailPane = ({
<DataView
path={['props']}
readOnly={true}
inspect={emptyFunction}
inspect={null}
showMenu={emptyFunction}
startOpen={true}
data={snapshotFiber.get('props')}
/>
</DetailPaneSection>
Expand All @@ -124,8 +125,9 @@ const ProfilerFiberDetailPane = ({
<DataView
path={['state']}
readOnly={true}
inspect={emptyFunction}
inspect={null}
showMenu={emptyFunction}
startOpen={true}
data={snapshotFiber.get('state')}
/>
</DetailPaneSection>
Expand Down