Hook up touchable debugging to Inspector button

Reviewed By: vjeux

Differential Revision: D3188719

fb-gh-sync-id: 271e902399900242f577a77807868bd2a28add37
fbshipit-source-id: 271e902399900242f577a77807868bd2a28add37

Author: sahrens

Libraries/Components/Touchable/Touchable.js

@@ -724,7 +724,7 @@ var TouchableMixin = {
 
 var Touchable = {
   Mixin: TouchableMixin,
-  TOUCH_TARGET_DEBUG: false, // Set this locally to help debug touch targets.
+  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
    */

Libraries/Inspector/Inspector.js

@@ -18,6 +18,7 @@ var InspectorUtils = require('InspectorUtils');
 var React = require('React');
 var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
+var Touchable = require('Touchable');
 var UIManager = require('NativeModules').UIManager;
 var View = require('View');
 
@@ -38,6 +39,7 @@ class Inspector extends React.Component {
       inspecting: true,
       perfing: false,
       inspected: null,
+      inspectedViewTag: this.props.inspectedViewTag,
     };
   }
 
@@ -61,6 +63,10 @@ class Inspector extends React.Component {
     }
   }
 
+  componentWillReceiveProps(newProps: Object) {
+    this.setState({inspectedViewTag: newProps.inspectedViewTag});
+  }
+
   attachToDevtools(agent: Object) {
     var _hideWait = null;
     var hlSub = agent.sub('highlight', ({node, name, props}) => {
@@ -148,6 +154,13 @@ class Inspector extends React.Component {
     });
   }
 
+  setTouchTargetting(val: bool) {
+    Touchable.TOUCH_TARGET_DEBUG = val;
+    this.props.onRequestRerenderApp((inspectedViewTag) => {
+      this.setState({inspectedViewTag});
+    });
+  }
+
   render() {
     var panelContainerStyle = (this.state.panelPos === 'bottom') ? {bottom: 0} : {top: 0};
     return (
@@ -156,7 +169,7 @@ class Inspector extends React.Component {
           <InspectorOverlay
             rootTag={this.props.rootTag}
             inspected={this.state.inspected}
-            inspectedViewTag={this.props.inspectedViewTag}
+            inspectedViewTag={this.state.inspectedViewTag}
             onTouchInstance={this.onTouchInstance.bind(this)}
           />}
         <View style={[styles.panelContainer, panelContainerStyle]}>
@@ -170,6 +183,8 @@ class Inspector extends React.Component {
             hierarchy={this.state.hierarchy}
             selection={this.state.selection}
             setSelection={this.setSelection.bind(this)}
+            touchTargetting={Touchable.TOUCH_TARGET_DEBUG}
+            setTouchTargetting={this.setTouchTargetting.bind(this)}
           />
         </View>
       </View>

Libraries/Inspector/InspectorPanel.js

@@ -70,10 +70,11 @@ class InspectorPanel extends React.Component {
             pressed={this.props.perfing}
             onClick={this.props.setPerfing}
           />
+          <Button title={'Touchables'}
+            pressed={this.props.touchTargetting}
+            onClick={this.props.setTouchTargetting}
+          />
         </View>
-        <Text style={styles.buttonText}>
-          {'Touchable.TOUCH_TARGET_DEBUG is ' + Touchable.TOUCH_TARGET_DEBUG}
-        </Text>
       </View>
     );
   }
@@ -86,6 +87,8 @@ InspectorPanel.propTypes = {
   inspected: PropTypes.object,
   perfing: PropTypes.bool,
   setPerfing: PropTypes.func,
+  touchTargetting: PropTypes.bool,
+  setTouchTargetting: PropTypes.func,
 };
 
 class Button extends React.Component {

Libraries/ReactIOS/renderApplication.android.js

@@ -32,10 +32,10 @@ var AppContainer = React.createClass({
 
   getInitialState: function() {
     return {
-      enabled: __DEV__,
       inspectorVisible: false,
       rootNodeHandle: null,
       rootImportanceForAccessibility: 'auto',
+      mainKey: 1,
     };
   },
 
@@ -61,6 +61,12 @@ var AppContainer = React.createClass({
       <Inspector
         rootTag={this.props.rootTag}
         inspectedViewTag={this.state.rootNodeHandle}
+        onRequestRerenderApp={(updateInspectedViewTag) => {
+          this.setState(
+            (s) => ({mainKey: s.mainKey + 1}),
+            () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+          );
+        }}
       /> :
       null;
   },
@@ -84,6 +90,7 @@ var AppContainer = React.createClass({
     var appView =
       <View
         ref="main"
+        key={this.state.mainKey}
         collapsable={!this.state.inspectorVisible}
         style={styles.appContainer}>
         <RootComponent
@@ -93,14 +100,10 @@ var AppContainer = React.createClass({
         <Portal
           onModalVisibilityChanged={this.setRootAccessibility}/>
       </View>;
-    let yellowBox = null;
-    if (__DEV__) {
-      yellowBox = <YellowBox />;
-    }
-    return this.state.enabled ?
+    return __DEV__ ?
       <View style={styles.appContainer}>
         {appView}
-        {yellowBox}
+        <YellowBox />
         {this.renderInspector()}
       </View> :
       appView;

Libraries/ReactIOS/renderApplication.ios.js

@@ -28,7 +28,7 @@ var AppContainer = React.createClass({
   mixins: [Subscribable.Mixin],
 
   getInitialState: function() {
-    return { inspector: null };
+    return { inspector: null, mainKey: 1 };
   },
 
   toggleElementInspector: function() {
@@ -37,6 +37,12 @@ var AppContainer = React.createClass({
       : <Inspector
           rootTag={this.props.rootTag}
           inspectedViewTag={ReactNative.findNodeHandle(this.refs.main)}
+          onRequestRerenderApp={(updateInspectedViewTag) => {
+            this.setState(
+              (s) => ({mainKey: s.mainKey + 1}),
+              () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+            );
+          }}
         />;
     this.setState({inspector});
   },
@@ -56,7 +62,10 @@ var AppContainer = React.createClass({
     }
     return (
       <View style={styles.appContainer}>
-        <View collapsible={false} style={styles.appContainer} ref="main">
+        <View
+          collapsible={false}
+          key={this.state.mainKey}
+          style={styles.appContainer} ref="main">
           {this.props.children}
         </View>
         {yellowBox}