Add Show / Hide button for the built-in inspector

Libraries/Inspector/InspectorPanel.js

@@ -24,6 +24,17 @@ const View = require('View');
 const PropTypes = React.PropTypes;
 
 class InspectorPanel extends React.Component {
+  state: {
+    devtoolsIsOpen: ?bool,
+  };
+
+  constructor(props: Object) {
+    super(props);
+    this.state = {
+      devtoolsIsOpen: null
+    };
+  }
+
   renderWaiting() {
     if (this.props.inspecting) {
       return (
@@ -35,6 +46,16 @@ class InspectorPanel extends React.Component {
     return <Text style={styles.waitingText}>Nothing is inspected</Text>;
   }
 
+  devtoolsIsOpen(): ?bool {
+    return this.state.devtoolsIsOpen === null ?
+      this.props.devtoolsIsOpen :
+      this.state.devtoolsIsOpen;
+  }
+
+  toggleContents = () => {
+    this.setState({ devtoolsIsOpen: !this.devtoolsIsOpen() });
+  }
+
   render() {
     let contents;
     if (this.props.inspected) {
@@ -65,9 +86,10 @@ class InspectorPanel extends React.Component {
         </View>
       );
     }
+    var devtoolsIsOpen = this.devtoolsIsOpen();
     return (
       <View style={styles.container}>
-        {!this.props.devtoolsIsOpen && contents}
+        {!devtoolsIsOpen && contents}
         <View style={styles.buttonRow}>
           <Button
             title={'Inspect'}
@@ -86,6 +108,10 @@ class InspectorPanel extends React.Component {
             pressed={this.props.touchTargetting}
             onClick={this.props.setTouchTargetting}
           />
+          <Button title={devtoolsIsOpen ? 'Show' : 'Hide'}
+            pressed={!devtoolsIsOpen}
+            onClick={this.toggleContents}
+          />
         </View>
       </View>
     );