[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)
This commit is contained in:
Jared Forsyth
2015-06-11 13:50:48 -07:00
parent 1b9067a3e3
commit 15907419f3
12 changed files with 322 additions and 140 deletions

View File

@@ -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)}
/>;