RN: Move TOUCH_TARGET_DEBUG to PressabilityDebug

Summary:
This is just cleanup. When I migrated components to `Pressability` instead of `Touchable`, I left `TOUCH_TARGET_DEBUG` alone to minimize moving pieces. But I had created `PressabilityDebug` as the eventual destination for this logic.

Now that `Text` is migrated away from `Touchable` (see D26106824 (https://github.com/facebook/react-native/commit/f275514f275fdc404a853a1a2ab46620eea484f0)), this cleans up the final internal reference to `Touchable`.

Changelog:
[General][Changed] - `Touchable.renderDebugView` now accepts `ColorValue` instead of `string | number`.
[General][Removed] - Removed `Touchable.TOUCH_TARGET_DEBUG` property.

Reviewed By: kacieb

Differential Revision: D26108570

fbshipit-source-id: 2694c9a9c29182ae04a77ba6c2e4406fcd5a277e

Libraries/Components/Touchable/Touchable.js

@@ -14,13 +14,12 @@ const BoundingDimensions = require('./BoundingDimensions');
 const Platform = require('../../Utilities/Platform');
 const Position = require('./Position');
 const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
 const UIManager = require('../../ReactNative/UIManager');
-const View = require('../View/View');
 const SoundManager = require('../Sound/SoundManager');
 
-const normalizeColor = require('../../StyleSheet/normalizeColor');
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
@@ -899,7 +898,6 @@ TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAnd
 
 const Touchable = {
   Mixin: TouchableMixin,
-  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).
    */
@@ -907,54 +905,15 @@ const Touchable = {
     color,
     hitSlop,
   }: {
-    color: string | number,
+    color: ColorValue,
     hitSlop: EdgeInsetsProp,
     ...
   }): null | React.Node => {
-    if (!Touchable.TOUCH_TARGET_DEBUG) {
-      return null;
+    if (__DEV__) {
+      return <PressabilityDebugView color={color} hitSlop={hitSlop} />;
     }
-    if (!__DEV__) {
-      throw Error(
-        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!',
-      );
-    }
-    const debugHitSlopStyle = {};
-    hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
-    for (const key in hitSlop) {
-      debugHitSlopStyle[key] = -hitSlop[key];
-    }
-    const normalizedColor = normalizeColor(color);
-    if (typeof normalizedColor !== 'number') {
-      return null;
-    }
-    const hexColor =
-      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
-    return (
-      <View
-        pointerEvents="none"
-        style={[
-          styles.debug,
-          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
-           * an error found when Flow v0.111 was deployed. To see the error,
-           * delete this comment and run Flow. */
-          {
-            borderColor: hexColor.slice(0, -2) + '55', // More opaque
-            backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
-            ...debugHitSlopStyle,
-          },
-        ]}
-      />
-    );
+    return null;
   },
 };
 
-const styles = StyleSheet.create({
-  debug: {
-    position: 'absolute',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-  },
-});
-
 module.exports = Touchable;

Libraries/Inspector/Inspector.js

@@ -14,10 +14,10 @@ const Dimensions = require('../Utilities/Dimensions');
 const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
 const Platform = require('../Utilities/Platform');
+const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Touchable = require('../Components/Touchable/Touchable');
 const View = require('../Components/View/View');
 
 const invariant = require('invariant');
@@ -279,7 +279,7 @@ class Inspector extends React.Component<
   }
 
   setTouchTargeting(val: boolean) {
-    Touchable.TOUCH_TARGET_DEBUG = val;
+    PressabilityDebug.setEnabled(val);
     this.props.onRequestRerenderApp(inspectedView => {
       this.setState({inspectedView});
     });
@@ -318,7 +318,7 @@ class Inspector extends React.Component<
             hierarchy={this.state.hierarchy}
             selection={this.state.selection}
             setSelection={this.setSelection.bind(this)}
-            touchTargeting={Touchable.TOUCH_TARGET_DEBUG}
+            touchTargeting={PressabilityDebug.isEnabled()}
             setTouchTargeting={this.setTouchTargeting.bind(this)}
             networking={this.state.networking}
             setNetworking={this.setNetworking.bind(this)}

Libraries/Pressability/PressabilityDebug.js

@@ -13,7 +13,6 @@
 import normalizeColor from '../StyleSheet/normalizeColor';
 import type {ColorValue} from '../StyleSheet/StyleSheet';
 
-import Touchable from '../Components/Touchable/Touchable';
 import View from '../Components/View/View';
 import * as React from 'react';
 
@@ -73,9 +72,17 @@ export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
   return null;
 }
 
+let isDebugEnabled = false;
+
 export function isEnabled(): boolean {
   if (__DEV__) {
-    return Touchable.TOUCH_TARGET_DEBUG;
+    return isDebugEnabled;
   }
   return false;
 }
+
+export function setEnabled(value: boolean): void {
+  if (__DEV__) {
+    isDebugEnabled = value;
+  }
+}