Create a toggle for inspecting Immutable objects as JS

agent/Bridge.js

@@ -132,7 +132,7 @@ class Bridge {
     this._wall.listen(this._handleMessage.bind(this));
   }
 
-  inspect(id: string, path: Array<string>, cb: (val: any) => any) {
+  inspect(id: string, path: Array<string>, immutablesAsJS: boolean, cb: (val: any) => any) {
     var _cid = this._cid++;
     this._cbs.set(_cid, (data, cleaned, proto, protoclean) => {
       if (cleaned.length) {
@@ -152,6 +152,7 @@ class Bridge {
       callback: _cid,
       path,
       id,
+      immutablesAsJS
     });
   }
 
@@ -259,7 +260,7 @@ class Bridge {
     }
 
     if (payload.type === 'inspect') {
-      this._inspectResponse(payload.id, payload.path, payload.callback);
+      this._inspectResponse(payload.id, payload.path, payload.immutablesAsJS, payload.callback);
       return;
     }
 
@@ -311,7 +312,7 @@ class Bridge {
     });
   }
 
-  _inspectResponse(id: string, path: Array<string>, callback: number) {
+  _inspectResponse(id: string, path: Array<string>, immutablesAsJS: boolean, callback: number) {
     var val = getIn(this._inspectables.get(id), path);
     var result = {};
     var cleaned = [];
@@ -321,7 +322,7 @@ class Bridge {
       var protod = false;
       var isFn = typeof val === 'function';
 
-      if (immutableUtils.isImmutable(val)) {
+      if (immutablesAsJS && immutableUtils.isImmutable(val)) {
         val = immutableUtils.shallowToJS(val);
       }
 

agent/consts.js

@@ -16,6 +16,7 @@ module.exports = {
   name: Symbol('name'),
   type: Symbol('type'),
   inspected: Symbol('inspected'),
+  immutablesAsJS: Symbol('immutablesAsJS'),
   meta: Symbol('meta'),
   proto: Symbol('proto'),
 };

frontend/Container.js

@@ -67,7 +67,7 @@ class Container extends React.Component {
         <SplitPane
           initialWidth={300}
           left={() => <SearchPane reload={this.props.reload} />}
-          right={() => <PropState extraPanes={this.props.extraPanes} />}
+          right={() => <PropState reload={this.forceUpdate.bind(this)} extraPanes={this.props.extraPanes}/>}
         />
         <ContextMenu itemSources={[defaultItems, this.props.menuItems]} />
       </div>

frontend/DataView/DataView.js

@@ -72,8 +72,18 @@ class DataItem extends React.Component {
     this.state = {open: false, loading: false};
   }
 
+  shouldInspect(props) {
+    return (
+      props.value &&
+      (
+        props.value[consts.inspected] === false ||
+        props.value[consts.immutablesAsJS] !== props.immutablesAsJS
+      )
+    );
+  }
+
   componentWillReceiveProps(nextProps) {
-    if (this.state.open && nextProps.value && nextProps.value[consts.inspected] === false) {
+    if (this.state.open && this.shouldInspect(nextProps)) {
       this.inspect();
     }
   }
@@ -89,7 +99,7 @@ class DataItem extends React.Component {
     if (this.state.loading) {
       return;
     }
-    if (this.props.value && this.props.value[consts.inspected] === false) {
+    if (this.shouldInspect(this.props)) {
       this.inspect();
       return;
     }
@@ -140,6 +150,7 @@ class DataItem extends React.Component {
           <DataView
             data={this.props.value}
             path={this.props.path}
+            immutablesAsJS={this.props.immutablesAsJS}
             inspect={this.props.inspect}
             showMenu={this.props.showMenu}
             readOnly={this.props.readOnly}

frontend/PropState.js

@@ -67,9 +67,12 @@ class PropState extends React.Component {
     var state = this.props.node.get('state');
     var context = this.props.node.get('context');
     var propsReadOnly = !this.props.node.get('canUpdate');
-
     return (
       <div style={styles.container}>
+        <div>
+          <input type='checkbox' checked={this.props.immutablesAsJS} onChange={this.props.onToggleImmutablesAsJS.bind(this)} id='immutables-as-js'/>
+          <label for='immutables-as-js'>Show Immutables as JS</label>
+        </div>
         <div style={styles.header}>
           <span style={styles.headerName}>
             &lt;{this.props.node.get('name')}&gt;
@@ -85,6 +88,7 @@ class PropState extends React.Component {
           <DataView
             path={['props']}
             readOnly={propsReadOnly}
+            immutablesAsJS={this.props.immutablesAsJS}
             inspect={this.props.inspect}
             showMenu={this.props.showMenu}
             key={this.props.id + '-props'}
@@ -98,6 +102,7 @@ class PropState extends React.Component {
             <DataView
               data={state}
               path={['state']}
+              immutablesAsJS={this.props.immutablesAsJS}
               inspect={this.props.inspect}
               showMenu={this.props.showMenu}
               key={this.props.id + '-state'}
@@ -110,6 +115,7 @@ class PropState extends React.Component {
             <DataView
               data={context}
               path={['context']}
+              immutablesAsJS={this.props.immutablesAsJS}
               inspect={this.props.inspect}
               showMenu={this.props.showMenu}
               key={this.props.id + '-context'}
@@ -131,15 +137,23 @@ var WrappedPropState = decorate({
     return ['selected', store.selected];
   },
 
+  shouldUpdate() {
+    return true;
+  },
+
   props(store) {
     var node = store.selected ? store.get(store.selected) : null;
     return {
       id: store.selected,
+      immutablesAsJS: store.immutablesAsJS,
       node,
       canEditTextContent: store.capabilities.editTextContent,
       onChangeText(text) {
         store.changeTextContent(store.selected, text);
       },
+      onToggleImmutablesAsJS() {
+        store.toggleImmutablesAsJS(this.props.reload);
+      },
       onChange(path, val) {
         if (path[0] === 'props') {
           store.setProps(store.selected, path.slice(1), val);

frontend/Store.js

@@ -58,6 +58,7 @@ type ContextMenu = {
  * Public actions:
  * - scrollToNode(id)
  * - changeTextContent(id, text)
+ * - toggleImmutablesAsJS
  * - changeSearch
  * - hoverClass
  * - selectFirstOfClass
@@ -88,6 +89,7 @@ class Store extends EventEmitter {
 
   // Public state
   contextMenu: ?ContextMenu;
+  immutablesAsJS: boolean;
   hovered: ?ElementID;
   isBottomTagSelected: boolean;
   roots: List;
@@ -109,6 +111,7 @@ class Store extends EventEmitter {
     // Public state
     this.roots = new List();
     this.contextMenu = null;
+    this.immutablesAsJS = false;
     this.searchRoots = null;
     this.hovered = null;
     this.selected = null;
@@ -162,6 +165,11 @@ class Store extends EventEmitter {
     this.emit(id);
   }
 
+  toggleImmutablesAsJS(cb: () => void): void {
+    this.immutablesAsJS = !this.immutablesAsJS;
+    cb();
+  }
+
   changeSearch(text: string): void {
     var needle = text.toLowerCase();
     if (needle === this.searchText.toLowerCase()) {
@@ -363,12 +371,18 @@ class Store extends EventEmitter {
   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 => {
+    this._bridge.inspect(id, path, this.immutablesAsJS, value => {
       var base = this.get(id).get(path[0]);
       var inspected = path.slice(1).reduce((obj, attr) => obj ? obj[attr] : null, base);
       if (inspected) {
+        if (inspected[consts.immutablesAsJS] !== this.immutablesAsJS) {
+          Object.getOwnPropertyNames(inspected).forEach(key => {
+            delete inspected[key];
+          })
+        }
         assign(inspected, value);
         inspected[consts.inspected] = true;
+        inspected[consts.immutablesAsJS] = this.immutablesAsJS;
       }
       cb();
     });