make inspect() mutate, remove need to pass window

Author: jaredly

agent/Bridge.js

@@ -329,17 +329,19 @@ class Bridge {
         result[name] = dehydrate(val[name], cleaned, [name]);
       });
 
-      if (!protod && val.__proto__ && val.constructor.name !== 'Object') { // eslint-disable-line no-proto
+      // eslint-disable no-proto
+      if (!protod && val.__proto__ && val.constructor.name !== 'Object') {
         proto = {};
-        var pIsFn = typeof val.__proto__ === 'function'; // eslint-disable-line no-proto
-        Object.getOwnPropertyNames(val.__proto__).forEach(name => { // eslint-disable-line no-proto
+        var pIsFn = typeof val.__proto__ === 'function';
+        Object.getOwnPropertyNames(val.__proto__).forEach(name => {
           if (pIsFn && (name === 'arguments' || name === 'callee' || name === 'caller')) {
             return;
           }
           // $FlowFixMe flow thinks proto (and val) might be null
-          proto[name] = dehydrate(val.__proto__[name], protoclean, [name]); // eslint-disable-line no-proto
+          proto[name] = dehydrate(val.__proto__[name], protoclean, [name]);
         });
       }
+      // eslint-enable no-proto
     }
 
     this._wall.send({

frontend/Container.js

@@ -21,7 +21,6 @@ import type MenuItem from './ContextMenu';
 class Container extends React.Component {
   props: {
     reload: () => void,
-    win: Object,
     extraPanes: Array<(node: Object) => ReactElement>,
     menuItems: {
       tree?: (id: string, node: Object, store: Object) => ?Array<MenuItem>,
@@ -67,8 +66,7 @@ class Container extends React.Component {
       <div style={styles.container}>
         <SplitPane
           initialWidth={300}
-          win={this.props.win}
-          left={() => <SearchPane win={this.props.win} reload={this.props.reload} />}
+          left={() => <SearchPane reload={this.props.reload} />}
           right={() => <PropState extraPanes={this.props.extraPanes} />}
         />
         <ContextMenu itemSources={[defaultItems, this.props.menuItems]} />

frontend/DataView/DataView.js

@@ -80,9 +80,7 @@ class DataItem extends React.Component {
 
   inspect() {
     this.setState({loading: true, open: true});
-    this.props.inspect(this.props.path, value => {
-      assign(this.props.value, value);
-      this.props.value[consts.inspected] = true;
+    this.props.inspect(this.props.path, () => {
       this.setState({loading: false});
     });
   }
@@ -107,7 +105,7 @@ class DataItem extends React.Component {
 
     var complex = true;
     var preview;
-    if (otype === 'number' || otype === 'string' || data === null || data === undefined || otype === 'boolean') {
+    if (otype === 'number' || otype === 'string' || data == null /* null or undefined */ || otype === 'boolean') {
       preview = (
         <Simple
           readOnly={this.props.readOnly}

frontend/DataView/Simple.js

@@ -43,7 +43,7 @@ class Simple extends React.Component {
     }
   }
 
-  onSubmit(editing?: boolean) {
+  onSubmit(editing: boolean) {
     if (this.state.text === valueToText(this.props.data)) {
       this.setState({
         editing: editing,
@@ -97,7 +97,7 @@ class Simple extends React.Component {
           ref={i => this.input = i}
           style={styles.input}
           onChange={e => this.onChange(e)}
-          onBlur={() => this.onSubmit()}
+          onBlur={() => this.onSubmit(false)}
           onKeyDown={this.onKeyDown.bind(this)}
           value={this.state.text}
         />
@@ -112,14 +112,12 @@ class Simple extends React.Component {
       typeStyle = valueStyles.bool;
     } else if (!this.props.data) {
       typeStyle = valueStyles.empty;
-    }
-    if (type === 'string') {
+    } else if (type === 'string') {
       typeStyle = valueStyles.string;
       if (data.length > 200) {
         data = data.slice(0, 200) + '…';
       }
-    }
-    if (type === 'number') {
+    } else if (type === 'number') {
       typeStyle = valueStyles.number;
     }
     style = assign({}, style, typeStyle);

frontend/Draggable.js

@@ -25,9 +25,9 @@ class Draggable {
 
   _startDragging(evt: DOMEvent) {
     evt.preventDefault();
-    var win = this.props.win || window;
-    win.addEventListener('mousemove', this._onMove);
-    win.addEventListener('mouseup', this._onUp);
+    var doc = React.findDOMNode(this).ownerDocument;
+    doc.addEventListener('mousemove', this._onMove);
+    doc.addEventListener('mouseup', this._onUp);
     this.props.onStart();
   }
 
@@ -38,9 +38,9 @@ class Draggable {
 
   onUp(evt: DOMEvent) {
     evt.preventDefault();
-    var win = this.props.win || window;
-    win.removeEventListener('mousemove', this._onMove);
-    win.removeEventListener('mouseup', this._onUp);
+    var doc = React.findDOMNode(this).ownerDocument;
+    doc.removeEventListener('mousemove', this._onMove);
+    doc.removeEventListener('mouseup', this._onUp);
     this.props.onStop();
   }
 

frontend/SearchPane.js

@@ -27,30 +27,34 @@ type EventLike = {
 class SearchPane extends React.Component {
   input: ReactElement;
   _key: (evt: EventLike) => void;
+  constructor(props) {
+    super(props);
+    this.state = {focused: false};
+  }
 
-  componentWillMount() {
-    this._key = this.onWindowKeyDown.bind(this);
-    var win = this.props.win || window;
-    win.addEventListener('keydown', this._key, true);
+  componentDidMount() {
+    this._key = this.onDocumentKeyDown.bind(this);
+    var doc = React.findDOMNode(this).ownerDocument;
+    doc.addEventListener('keydown', this._key, true);
   }
 
   componentWillUnmount() {
-    var win = this.props.win || window;
-    win.removeEventListener('keydown', this._key, true);
+    var doc = React.findDOMNode(this).ownerDocument;
+    doc.removeEventListener('keydown', this._key, true);
   }
 
-  onWindowKeyDown(e) {
+  onDocumentKeyDown(e) {
     if (e.keyCode === 191) { // forward slash
       var node = React.findDOMNode(this.input);
-      var win = this.props.win || window;
-      if (win.document.activeElement === node) {
+      var doc = React.findDOMNode(this).ownerDocument;
+      if (doc.activeElement === node) {
         return;
       }
       node.focus();
       e.preventDefault();
     }
     if (e.keyCode === 27) { // escape
-      if (!this.props.searchText) {
+      if (!this.props.searchText && !this.state.focused) {
         return;
       }
       e.stopPropagation();
@@ -82,6 +86,8 @@ class SearchPane extends React.Component {
             style={styles.input}
             ref={i => this.input = i}
             value={this.props.searchText}
+            onFocus={() => this.setState({focused: true})}
+            onBlur={() => this.setState({focused: false})}
             onKeyDown={e => this.onKeyDown(e.key)}
             placeholder="Search by Component Name"
             onChange={e => this.props.onChangeSearch(e.target.value)}

frontend/SplitPane.js

@@ -44,7 +44,6 @@ class SplitPane extends React.Component {
       {/* $FlowFixMe the "extends React.Component" is just to help flow */}
       <Draggable
         style={dragStyle}
-        win={this.props.win}
         onStart={() => this.setState({moving: true})}
         onMove={x => this.onMove(x)}
         onStop={() => this.setState({moving: false})}

frontend/Store.js

@@ -18,6 +18,8 @@ var {EventEmitter} = require('events');
 var {Map, Set, List} = require('immutable');
 var assign = require('object-assign');
 var nodeMatchesText = require('./nodeMatchesText');
+var consts = require('../agent/consts');
+var invariant = require('./invariant');
 
 import type * as Bridge from '../agent/Bridge';
 import type {DOMEvent, ElementID} from './types';
@@ -350,8 +352,18 @@ class Store extends EventEmitter {
     this.removeListener(evt, fn);
   }
 
-  inspect(id: ElementID, path: Array<string>, cb: (val: any) => void) {
-    this._bridge.inspect(id, path, cb);
+  inspect(id: ElementID, path: Array<string>, cb: () => void) {
+    invariant(path[0] === 'props' || path[0] === 'state' || path[0] === 'context',
+              'Inspected path must be one of props, state, or context');
+    this._bridge.inspect(id, path, value => {
+      var base = this.get(id).get(path[0]);
+      var inspected = path.slice(1).reduce((obj, attr) => obj ? obj[attr] : null, base);
+      if (inspected) {
+        assign(inspected, value);
+        inspected[consts.inspected] = true;
+      }
+      cb();
+    });
   }
 
   // Private stuff

frontend/invariant.js

@@ -6,6 +6,8 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
+ * TODO: this is copied from fbjs because fbjs doesn't play well with
+ * non-haste module systems :/. Look into how to fix this.
  */
 'use strict';