From d5c1de7708c9761170255ea78fca10f882c94188 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Sat, 16 Apr 2016 11:56:07 -0700
Subject: [PATCH] Hook up touchable debugging to Inspector button

Reviewed By: vjeux

Differential Revision: D3188719

fb-gh-sync-id: 271e902399900242f577a77807868bd2a28add37
fbshipit-source-id: 271e902399900242f577a77807868bd2a28add37
---
 Libraries/Components/Touchable/Touchable.js     |  2 +-
 Libraries/Inspector/Inspector.js                | 17 ++++++++++++++++-
 Libraries/Inspector/InspectorPanel.js           |  9 ++++++---
 Libraries/ReactIOS/renderApplication.android.js | 17 ++++++++++-------
 Libraries/ReactIOS/renderApplication.ios.js     | 13 +++++++++++--
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 6bf9b976f..d465bfe04 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/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).
    */
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
index d65bc3e99..ac5ff34e9 100644
--- a/Libraries/Inspector/Inspector.js
+++ b/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>
diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js
index 2009aa213..0b62999d1 100644
--- a/Libraries/Inspector/InspectorPanel.js
+++ b/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 {
diff --git a/Libraries/ReactIOS/renderApplication.android.js b/Libraries/ReactIOS/renderApplication.android.js
index f386f0aed..99b0bd51a 100644
--- a/Libraries/ReactIOS/renderApplication.android.js
+++ b/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;
diff --git a/Libraries/ReactIOS/renderApplication.ios.js b/Libraries/ReactIOS/renderApplication.ios.js
index d4f835d5f..1a7512800 100644
--- a/Libraries/ReactIOS/renderApplication.ios.js
+++ b/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}