Disable props/state inspection for Profiler (#1260)

* Disable props/state inspection for Profiler
* Expand Profiler props/state objects by default
* Added comment about why props.inspect might be null

Author: bvaughn

agent/dehydrate.js

@@ -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;
 
 /**

frontend/DataView/DataView.js

@@ -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,
@@ -155,7 +155,7 @@ DataView.contextTypes = {
 
 type Props = {
   path: Array<string>,
-  inspect: Inspect,
+  inspect: Inspect | null,
   showMenu: ShowMenu,
   startOpen?: boolean,
   noSort?: boolean,
@@ -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;
+    }
+
     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);
@@ -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)} /> :
@@ -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>
@@ -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',
 });

plugins/Profiler/views/ProfilerFiberDetailPane.js

@@ -114,8 +114,9 @@ const ProfilerFiberDetailPane = ({
             <DataView
               path={['props']}
               readOnly={true}
-              inspect={emptyFunction}
+              inspect={null}
               showMenu={emptyFunction}
+              startOpen={true}
               data={snapshotFiber.get('props')}
             />
           </DetailPaneSection>
@@ -124,8 +125,9 @@ const ProfilerFiberDetailPane = ({
               <DataView
                 path={['state']}
                 readOnly={true}
-                inspect={emptyFunction}
+                inspect={null}
                 showMenu={emptyFunction}
+                startOpen={true}
                 data={snapshotFiber.get('state')}
               />
             </DetailPaneSection>