From 15907419f3ed7197eb77f1ebc885e429f0ac15ec Mon Sep 17 00:00:00 2001
From: Jared Forsyth <jaredly@fb.com>
Date: Thu, 11 Jun 2015 13:50:48 -0700
Subject: [PATCH] [ReactNative] refactor the inspector

Summary:
The `InspectorOverlay` component was getting unwieldy, so I broke it into three components:

- Inspector
- InspectorOverlay
- InspectorPanel

and added @flow types.

The inspector was also living under the `ReactIOS` directory, and I moved it
up into the `Libraries` directory, as the inspector will soon be usable [on
Android](https://phabricator.fb.com/D2138319).

All features of the inspector should remain functional, with the addition of
one feature:

- you can toggle "touch to inspect" by tapping the "Inspect" button at the
  bottom of the inspection panel. When inspection is disabled, the panel remains, but you can interact with
  the app normally without touches being intercepted

@public

Test Plan:
Open the inspector:

- touch to inspect things, verify that margin, padding, size and position are
  reported correctly, and that the component hierarchy is navigable.
- tap the "Inspect" button, and verify that you can interact with the app
  normally.

{F22548949}

[Video of toggling inspection](https://www.latest.facebook.com/pxlcld/mrs9)
---
 .../BorderBox.js                              |   0
 .../BoxInspector.js                           |   0
 .../ElementBox.js                             |   0
 .../ElementProperties.js                      |   9 +-
 Libraries/Inspector/Inspector.js              | 115 +++++++++++++++
 Libraries/Inspector/InspectorOverlay.js       |  81 +++++++++++
 Libraries/Inspector/InspectorPanel.js         | 119 ++++++++++++++++
 .../InspectorUtils.js}                        |   2 +-
 .../StyleInspector.js                         |   0
 .../resolveBoxStyle.js                        |   0
 .../InspectorOverlay/InspectorOverlay.js      | 132 ------------------
 Libraries/ReactIOS/renderApplication.ios.js   |   4 +-
 12 files changed, 322 insertions(+), 140 deletions(-)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/BorderBox.js (100%)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/BoxInspector.js (100%)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/ElementBox.js (100%)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/ElementProperties.js (98%)
 create mode 100644 Libraries/Inspector/Inspector.js
 create mode 100644 Libraries/Inspector/InspectorOverlay.js
 create mode 100644 Libraries/Inspector/InspectorPanel.js
 rename Libraries/{Inspector.js => Inspector/InspectorUtils.js} (98%)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/StyleInspector.js (100%)
 rename Libraries/{ReactIOS/InspectorOverlay => Inspector}/resolveBoxStyle.js (100%)
 delete mode 100644 Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js

diff --git a/Libraries/ReactIOS/InspectorOverlay/BorderBox.js b/Libraries/Inspector/BorderBox.js
similarity index 100%
rename from Libraries/ReactIOS/InspectorOverlay/BorderBox.js
rename to Libraries/Inspector/BorderBox.js
diff --git a/Libraries/ReactIOS/InspectorOverlay/BoxInspector.js b/Libraries/Inspector/BoxInspector.js
similarity index 100%
rename from Libraries/ReactIOS/InspectorOverlay/BoxInspector.js
rename to Libraries/Inspector/BoxInspector.js
diff --git a/Libraries/ReactIOS/InspectorOverlay/ElementBox.js b/Libraries/Inspector/ElementBox.js
similarity index 100%
rename from Libraries/ReactIOS/InspectorOverlay/ElementBox.js
rename to Libraries/Inspector/ElementBox.js
diff --git a/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js b/Libraries/Inspector/ElementProperties.js
similarity index 98%
rename from Libraries/ReactIOS/InspectorOverlay/ElementProperties.js
rename to Libraries/Inspector/ElementProperties.js
index 310374fb1..855423845 100644
--- a/Libraries/ReactIOS/InspectorOverlay/ElementProperties.js
+++ b/Libraries/Inspector/ElementProperties.js
@@ -11,15 +11,15 @@
  */
 'use strict';
 
+var BoxInspector = require('BoxInspector');
+var PropTypes = require('ReactPropTypes');
 var React = require('React');
+var StyleInspector = require('StyleInspector');
 var StyleSheet = require('StyleSheet');
 var Text = require('Text');
-var View = require('View');
-var PropTypes = require('ReactPropTypes');
-var BoxInspector = require('BoxInspector');
-var StyleInspector = require('StyleInspector');
 var TouchableHighlight = require('TouchableHighlight');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+var View = require('View');
 
 var flattenStyle = require('flattenStyle');
 var mapWithSeparator = require('mapWithSeparator');
@@ -93,7 +93,6 @@ var styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   info: {
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
     padding: 10,
   },
   path: {
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
new file mode 100644
index 000000000..46615d967
--- /dev/null
+++ b/Libraries/Inspector/Inspector.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * 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.
+ *
+ * @providesModule Inspector
+ * @flow
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+var InspectorOverlay = require('InspectorOverlay');
+var InspectorPanel = require('InspectorPanel');
+var InspectorUtils = require('InspectorUtils');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var UIManager = require('NativeModules').UIManager;
+var View = require('View');
+
+class Inspector extends React.Component {
+  constructor(props: Object) {
+    super(props);
+    this.state = {
+      panelPos: 'bottom',
+      inspecting: true,
+      inspected: null,
+    };
+  }
+
+  setSelection(i: number) {
+    var instance = this.state.hierarchy[i];
+    var publicInstance = instance.getPublicInstance();
+    UIManager.measure(React.findNodeHandle(instance), (x, y, width, height, left, top) => {
+      this.setState({
+        inspected: {
+          frame: {left, top, width, height},
+          style: publicInstance.props ? publicInstance.props.style : {},
+        },
+        selection: i,
+      });
+    });
+  }
+
+  onTouchInstance(instance: Object, frame: Object, pointerY: number) {
+    var hierarchy = InspectorUtils.getOwnerHierarchy(instance);
+    var publicInstance = instance.getPublicInstance();
+    var props = publicInstance.props || {};
+    this.setState({
+      panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
+      selection: hierarchy.length - 1,
+      hierarchy,
+      inspected: {
+        style: props.style || {},
+        frame,
+      },
+    });
+  }
+
+  setInspecting(val: bool) {
+    this.setState({
+      inspecting: val,
+    });
+  }
+
+  render() {
+    var panelPosition;
+    if (this.state.panelPos === 'bottom') {
+      panelPosition = {bottom: -Dimensions.get('window').height};
+    } else {
+      panelPosition = {top: 0};
+    }
+    return (
+      <View style={styles.container}>
+        {this.state.inspecting &&
+          <InspectorOverlay
+            rootTag={this.props.rootTag}
+            inspected={this.state.inspected}
+            inspectedViewTag={this.props.inspectedViewTag}
+            onTouchInstance={this.onTouchInstance.bind(this)}
+          />}
+        <View style={[styles.panelContainer, panelPosition]}>
+          <InspectorPanel
+            inspecting={this.state.inspecting}
+            setInspecting={this.setInspecting.bind(this)}
+            inspected={this.state.inspected}
+            hierarchy={this.state.hierarchy}
+            selection={this.state.selection}
+            setSelection={this.setSelection.bind(this)}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 0,
+  },
+  panelContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+});
+
+module.exports = Inspector;
diff --git a/Libraries/Inspector/InspectorOverlay.js b/Libraries/Inspector/InspectorOverlay.js
new file mode 100644
index 000000000..cf9dd8d68
--- /dev/null
+++ b/Libraries/Inspector/InspectorOverlay.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * 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.
+ *
+ * @providesModule InspectorOverlay
+ * @flow
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+var InspectorUtils = require('InspectorUtils');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var UIManager = require('NativeModules').UIManager;
+var View = require('View');
+var ElementBox = require('ElementBox');
+
+var PropTypes = React.PropTypes;
+
+type EventLike = {
+  nativeEvent: Object;
+};
+
+var InspectorOverlay = React.createClass({
+  propTypes: {
+    inspectedViewTag: PropTypes.object,
+    onTouchInstance: PropTypes.func.isRequired,
+  },
+
+  findViewForTouchEvent: function(e: EventLike) {
+    var {locationX, locationY} = e.nativeEvent.touches[0];
+    UIManager.findSubviewIn(
+      this.props.inspectedViewTag,
+      [locationX, locationY],
+      (nativeViewTag, left, top, width, height) => {
+        var instance = InspectorUtils.findInstanceByNativeTag(this.props.rootTag, nativeViewTag);
+        if (!instance) {
+          return;
+        }
+        this.props.onTouchInstance(instance, {left, top, width, height}, locationY);
+      }
+    );
+  },
+
+  shouldSetResponser: function(e: EventLike): bool {
+    this.findViewForTouchEvent(e);
+    return true;
+  },
+
+  render: function() {
+    var content = null;
+    if (this.props.inspected) {
+      content = <ElementBox frame={this.props.inspected.frame} style={this.props.inspected.style} />;
+    }
+
+    return (
+      <View
+        onStartShouldSetResponder={this.shouldSetResponser}
+        onResponderMove={this.findViewForTouchEvent}
+        style={[styles.inspector, {height: Dimensions.get('window').height}]}>
+        {content}
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+  },
+});
+
+module.exports = InspectorOverlay;
diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js
new file mode 100644
index 000000000..7f49f19dc
--- /dev/null
+++ b/Libraries/Inspector/InspectorPanel.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * 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.
+ *
+ * @providesModule InspectorPanel
+ * @flow
+ */
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+var ElementProperties = require('ElementProperties');
+var TouchableHighlight = require('TouchableHighlight');
+
+var PropTypes = React.PropTypes;
+
+class InspectorPanel extends React.Component {
+  renderWaiting() {
+    if (this.props.inspecting) {
+      return (
+        <Text style={styles.waitingText}>
+          Tap something to inspect it
+        </Text>
+      );
+    }
+    return <Text style={styles.waitingText}>Nothing is inspected</Text>;
+  }
+
+  render() {
+    var contents;
+    if (this.props.inspected) {
+      contents = (
+        <ElementProperties
+          style={this.props.inspected.style}
+          frame={this.props.inspected.frame}
+          hierarchy={this.props.hierarchy}
+          selection={this.props.selection}
+          setSelection={this.props.setSelection}
+        />
+      );
+    } else {
+      contents = (
+        <View style={styles.waiting}>
+          {this.renderWaiting()}
+        </View>
+      );
+    }
+    return (
+      <View style={styles.container}>
+        {contents}
+        <View style={styles.buttonRow}>
+          <Button
+            title={'Inspect'}
+            pressed={this.props.inspecting}
+            onClick={this.props.setInspecting}/>
+        </View>
+      </View>
+    );
+  }
+}
+
+InspectorPanel.propTypes = {
+  inspecting: PropTypes.bool,
+  setInspecting: PropTypes.func,
+  inspected: PropTypes.object,
+};
+
+class Button extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight onPress={() => this.props.onClick(!this.props.pressed)} style={[
+        styles.button,
+        this.props.pressed && styles.buttonPressed
+      ]}>
+        <Text style={styles.buttonText}>{this.props.title}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  buttonRow: {
+    flexDirection: 'row',
+  },
+  button: {
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    margin: 2,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonPressed: {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+    margin: 5,
+  },
+  container: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  waiting: {
+    height: 100,
+  },
+  waitingText: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 20,
+  },
+});
+
+module.exports = InspectorPanel;
diff --git a/Libraries/Inspector.js b/Libraries/Inspector/InspectorUtils.js
similarity index 98%
rename from Libraries/Inspector.js
rename to Libraries/Inspector/InspectorUtils.js
index e0017c3cf..a0362dfe2 100644
--- a/Libraries/Inspector.js
+++ b/Libraries/Inspector/InspectorUtils.js
@@ -6,7 +6,7 @@
  * 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.
  *
- * @providesModule Inspector
+ * @providesModule InspectorUtils
  */
 'use strict';
 
diff --git a/Libraries/ReactIOS/InspectorOverlay/StyleInspector.js b/Libraries/Inspector/StyleInspector.js
similarity index 100%
rename from Libraries/ReactIOS/InspectorOverlay/StyleInspector.js
rename to Libraries/Inspector/StyleInspector.js
diff --git a/Libraries/ReactIOS/InspectorOverlay/resolveBoxStyle.js b/Libraries/Inspector/resolveBoxStyle.js
similarity index 100%
rename from Libraries/ReactIOS/InspectorOverlay/resolveBoxStyle.js
rename to Libraries/Inspector/resolveBoxStyle.js
diff --git a/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js b/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js
deleted file mode 100644
index 3b391502f..000000000
--- a/Libraries/ReactIOS/InspectorOverlay/InspectorOverlay.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * 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.
- *
- * @providesModule InspectorOverlay
- */
-'use strict';
-
-var Dimensions = require('Dimensions');
-var Inspector = require('Inspector');
-var React = require('React');
-var StyleSheet = require('StyleSheet');
-var Text = require('Text');
-var UIManager = require('NativeModules').UIManager;
-var View = require('View');
-var ElementBox = require('ElementBox');
-var ElementProperties = require('ElementProperties');
-
-var InspectorOverlay = React.createClass({
-  getInitialState: function() {
-    return {
-      frame: null,
-      pointerY: 0,
-      hierarchy: [],
-      selection: -1,
-    };
-  },
-
-  findViewForTouchEvent: function(e) {
-    var {locationX, locationY} = e.nativeEvent.touches[0];
-    UIManager.findSubviewIn(
-      this.props.inspectedViewTag,
-      [locationX, locationY],
-      (nativeViewTag, left, top, width, height) => {
-        var instance = Inspector.findInstanceByNativeTag(this.props.rootTag, nativeViewTag);
-        if (!instance) {
-          return;
-        }
-        var hierarchy = Inspector.getOwnerHierarchy(instance);
-        var publicInstance = instance.getPublicInstance();
-        this.setState({
-          hierarchy,
-          pointerY: locationY,
-          selection: hierarchy.length - 1,
-          frame: {left, top, width, height},
-          style: publicInstance.props ? publicInstance.props.style : {},
-        });
-      }
-    );
-  },
-
-  setSelection(i) {
-    var instance = this.state.hierarchy[i];
-    var publicInstance = instance.getPublicInstance();
-    UIManager.measure(React.findNodeHandle(instance), (x, y, width, height, left, top) => {
-      this.setState({
-        frame: {left, top, width, height},
-        style: publicInstance.props ? publicInstance.props.style : {},
-        selection: i,
-      });
-    });
-  },
-
-  shouldSetResponser: function(e) {
-    this.findViewForTouchEvent(e);
-    return true;
-  },
-
-  render: function() {
-    var content = [];
-    var justifyContent = 'flex-end';
-
-    if (this.state.frame) {
-      var distanceToTop = this.state.pointerY;
-      var distanceToBottom = Dimensions.get('window').height - distanceToTop;
-
-      justifyContent = distanceToTop > distanceToBottom
-        ? 'flex-start'
-        : 'flex-end';
-
-      content.push(<ElementBox frame={this.state.frame} style={this.state.style} />);
-      content.push(
-        <ElementProperties
-          style={this.state.style}
-          frame={this.state.frame}
-          hierarchy={this.state.hierarchy}
-          selection={this.state.selection}
-          setSelection={this.setSelection}
-        />
-      );
-    } else {
-      content.push(
-        <View style={styles.welcomeMessage}>
-          <Text style={styles.welcomeText}>Welcome to the inspector! Tap something to inspect it.</Text>
-        </View>
-      );
-    }
-    return (
-      <View
-        onStartShouldSetResponder={this.shouldSetResponser}
-        onResponderMove={this.findViewForTouchEvent}
-        style={[styles.inspector, {justifyContent}]}>
-        {content}
-      </View>
-    );
-  }
-});
-
-var styles = StyleSheet.create({
-  welcomeMessage: {
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    padding: 10,
-    paddingVertical: 50,
-  },
-  welcomeText: {
-    color: 'white',
-  },
-  inspector: {
-    backgroundColor: 'rgba(255,255,255,0.0)',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-  },
-});
-
-module.exports = InspectorOverlay;
diff --git a/Libraries/ReactIOS/renderApplication.ios.js b/Libraries/ReactIOS/renderApplication.ios.js
index 1cb24aa71..c215f1413 100644
--- a/Libraries/ReactIOS/renderApplication.ios.js
+++ b/Libraries/ReactIOS/renderApplication.ios.js
@@ -10,7 +10,7 @@
  */
 'use strict';
 
-var InspectorOverlay = require('InspectorOverlay');
+var Inspector = require('Inspector');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
@@ -30,7 +30,7 @@ var AppContainer = React.createClass({
   toggleElementInspector: function() {
     var inspector = this.state.inspector
       ? null
-      : <InspectorOverlay
+      : <Inspector
           rootTag={this.props.rootTag}
           inspectedViewTag={React.findNodeHandle(this.refs.main)}
         />;