Fix inspector overflow

Summary:
Puts hierarchy and other inspector data in a fixed height scrollview so it never takes up
too much space and you can always scroll to see everything you want.

Reviewed By: fkgozali

Differential Revision: D4374819

fbshipit-source-id: 89356670c984c693db345ad66a97d4cb54a98aee

Libraries/Inspector/ElementProperties.js

@@ -11,20 +11,20 @@
  */
 'use strict';
 
-var BoxInspector = require('BoxInspector');
-var React = require('React');
-var StyleInspector = require('StyleInspector');
-var StyleSheet = require('StyleSheet');
-var Text = require('Text');
-var TouchableHighlight = require('TouchableHighlight');
-var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
-var View = require('View');
+const BoxInspector = require('BoxInspector');
+const React = require('React');
+const StyleInspector = require('StyleInspector');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableHighlight = require('TouchableHighlight');
+const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+const View = require('View');
 
-var flattenStyle = require('flattenStyle');
-var mapWithSeparator = require('mapWithSeparator');
-var openFileInEditor = require('openFileInEditor');
+const flattenStyle = require('flattenStyle');
+const mapWithSeparator = require('mapWithSeparator');
+const openFileInEditor = require('openFileInEditor');
 
-var PropTypes = React.PropTypes;
+const PropTypes = React.PropTypes;
 
 class ElementProperties extends React.Component {
   props: {
@@ -50,15 +50,15 @@ class ElementProperties extends React.Component {
   };
 
   render() {
-    var style = flattenStyle(this.props.style);
+    const style = flattenStyle(this.props.style);
     // $FlowFixMe found when converting React.createClass to ES6
-    var selection = this.props.selection;
-    var openFileButton;
-    var source = this.props.source;
-    var {fileName, lineNumber} = source || {};
+    const selection = this.props.selection;
+    let openFileButton;
+    const source = this.props.source;
+    const {fileName, lineNumber} = source || {};
     if (fileName && lineNumber) {
-      var parts = fileName.split('/');
-      var fileNameShort = parts[parts.length - 1];
+      const parts = fileName.split('/');
+      const fileNameShort = parts[parts.length - 1];
       openFileButton = (
         <TouchableHighlight
           style={styles.openButton}
@@ -120,7 +120,7 @@ function getInstanceName(instance) {
   return 'Unknown';
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   breadSep: {
     fontSize: 8,
     color: 'white',
@@ -156,10 +156,6 @@ var styles = StyleSheet.create({
   info: {
     padding: 10,
   },
-  path: {
-    color: 'white',
-    fontSize: 9,
-  },
   openButton: {
     padding: 10,
     backgroundColor: '#000',

Libraries/Inspector/Inspector.js

@@ -14,15 +14,16 @@
 
 '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 Touchable = require('Touchable');
-var UIManager = require('UIManager');
-var View = require('View');
+const Dimensions = require('Dimensions');
+const InspectorOverlay = require('InspectorOverlay');
+const InspectorPanel = require('InspectorPanel');
+const InspectorUtils = require('InspectorUtils');
+const Platform = require('Platform');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Touchable = require('Touchable');
+const UIManager = require('UIManager');
+const View = require('View');
 
 if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
   // required for devtools to be able to edit react native styles
@@ -89,9 +90,9 @@ class Inspector extends React.Component {
     this.setState({inspectedViewTag: newProps.inspectedViewTag});
   }
 
-  attachToDevtools(agent: Object) {
-    var _hideWait = null;
-    var hlSub = agent.sub('highlight', ({node, name, props}) => {
+  attachToDevtools = (agent: Object) => {
+    let _hideWait = null;
+    const hlSub = agent.sub('highlight', ({node, name, props}) => {
       clearTimeout(_hideWait);
       UIManager.measure(node, (x, y, width, height, left, top) => {
         this.setState({
@@ -103,7 +104,7 @@ class Inspector extends React.Component {
         });
       });
     });
-    var hideSub = agent.sub('hideHighlight', () => {
+    const hideSub = agent.sub('hideHighlight', () => {
       if (this.state.inspected === null) {
         return;
       }
@@ -123,14 +124,14 @@ class Inspector extends React.Component {
     this.setState({
       devtoolsAgent: agent,
     });
-  }
+  };
 
   setSelection(i: number) {
-    var instance = this.state.hierarchy[i];
+    const instance = this.state.hierarchy[i];
     // if we inspect a stateless component we can't use the getPublicInstance method
     // therefore we use the internal _instance property directly.
-    var publicInstance = instance['_instance'] || {};
-    var source = instance['_currentElement'] && instance['_currentElement']['_source'];
+    const publicInstance = instance['_instance'] || {};
+    const source = instance['_currentElement'] && instance['_currentElement']['_source'];
     UIManager.measure(instance.getHostNode(), (x, y, width, height, left, top) => {
       this.setState({
         inspected: {
@@ -147,8 +148,8 @@ class Inspector extends React.Component {
     // Most likely the touched instance is a native wrapper (like RCTView)
     // which is not very interesting. Most likely user wants a composite
     // instance that contains it (like View)
-    var hierarchy = InspectorUtils.getOwnerHierarchy(touched);
-    var instance = InspectorUtils.lastNotNativeInstance(hierarchy);
+    const hierarchy = InspectorUtils.getOwnerHierarchy(touched);
+    const instance = InspectorUtils.lastNotNativeInstance(hierarchy);
 
     if (this.state.devtoolsAgent) {
       this.state.devtoolsAgent.selectFromReactInstance(instance, true);
@@ -156,9 +157,9 @@ class Inspector extends React.Component {
 
     // if we inspect a stateless component we can't use the getPublicInstance method
     // therefore we use the internal _instance property directly.
-    var publicInstance = instance['_instance'] || {};
-    var props = publicInstance.props || {};
-    var source = instance['_currentElement'] && instance['_currentElement']['_source'];
+    const publicInstance = instance['_instance'] || {};
+    const props = publicInstance.props || {};
+    const source = instance['_currentElement'] && instance['_currentElement']['_source'];
     this.setState({
       panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
       selection: hierarchy.indexOf(instance),
@@ -204,7 +205,9 @@ class Inspector extends React.Component {
   }
 
   render() {
-    var panelContainerStyle = (this.state.panelPos === 'bottom') ? {bottom: 0} : {top: 0};
+    const panelContainerStyle = (this.state.panelPos === 'bottom') ?
+      {bottom: 0} :
+      {top: Platform.OS === 'ios' ? 20 : 0};
     return (
       <View style={styles.container} pointerEvents="box-none">
         {this.state.inspecting &&
@@ -235,7 +238,7 @@ class Inspector extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     position: 'absolute',
     backgroundColor: 'transparent',

Libraries/Inspector/InspectorPanel.js

@@ -11,16 +11,17 @@
  */
 'use strict';
 
-var React = require('React');
-var StyleSheet = require('StyleSheet');
-var Text = require('Text');
-var View = require('View');
-var ElementProperties = require('ElementProperties');
-var PerformanceOverlay = require('PerformanceOverlay');
-var TouchableHighlight = require('TouchableHighlight');
-var NetworkOverlay = require('NetworkOverlay');
+const ElementProperties = require('ElementProperties');
+const NetworkOverlay = require('NetworkOverlay');
+const PerformanceOverlay = require('PerformanceOverlay');
+const React = require('React');
+const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableHighlight = require('TouchableHighlight');
+const View = require('View');
 
-var PropTypes = React.PropTypes;
+const PropTypes = React.PropTypes;
 
 class InspectorPanel extends React.Component {
   renderWaiting() {
@@ -35,17 +36,19 @@ class InspectorPanel extends React.Component {
   }
 
   render() {
-    var contents;
+    let contents;
     if (this.props.inspected) {
       contents = (
-        <ElementProperties
-          style={this.props.inspected.style}
-          frame={this.props.inspected.frame}
-          source={this.props.inspected.source}
-          hierarchy={this.props.hierarchy}
-          selection={this.props.selection}
-          setSelection={this.props.setSelection}
-        />
+        <ScrollView style={styles.properties}>
+          <ElementProperties
+            style={this.props.inspected.style}
+            frame={this.props.inspected.frame}
+            source={this.props.inspected.source}
+            hierarchy={this.props.hierarchy}
+            selection={this.props.selection}
+            setSelection={this.props.setSelection}
+          />
+        </ScrollView>
       );
     } else if (this.props.perfing) {
       contents = (
@@ -115,7 +118,7 @@ class Button extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   buttonRow: {
     flexDirection: 'row',
   },
@@ -137,6 +140,9 @@ var styles = StyleSheet.create({
   container: {
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
   },
+  properties: {
+    height: 200,
+  },
   waiting: {
     height: 100,
   },