2015-05-26 18:16:25 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
|
|
*
|
[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)
2015-06-11 20:50:48 +00:00
|
|
|
* @providesModule InspectorUtils
|
2015-05-26 18:16:25 +00:00
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var ReactInstanceHandles = require('ReactInstanceHandles');
|
|
|
|
var ReactInstanceMap = require('ReactInstanceMap');
|
|
|
|
var ReactNativeMount = require('ReactNativeMount');
|
|
|
|
var ReactNativeTagHandles = require('ReactNativeTagHandles');
|
|
|
|
|
|
|
|
function traverseOwnerTreeUp(hierarchy, instance) {
|
|
|
|
if (instance) {
|
|
|
|
hierarchy.unshift(instance);
|
|
|
|
traverseOwnerTreeUp(hierarchy, instance._currentElement._owner);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function findInstance(component, targetID) {
|
|
|
|
if (targetID === findRootNodeID(component)) {
|
|
|
|
return component;
|
|
|
|
}
|
|
|
|
if (component._renderedComponent) {
|
|
|
|
return findInstance(component._renderedComponent, targetID);
|
|
|
|
} else {
|
|
|
|
for (var key in component._renderedChildren) {
|
|
|
|
var child = component._renderedChildren[key];
|
|
|
|
if (ReactInstanceHandles.isAncestorIDOf(findRootNodeID(child), targetID)) {
|
|
|
|
var instance = findInstance(child, targetID);
|
|
|
|
if (instance) {
|
|
|
|
return instance;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function findRootNodeID(component) {
|
|
|
|
var internalInstance = ReactInstanceMap.get(component);
|
|
|
|
return internalInstance ? internalInstance._rootNodeID : component._rootNodeID;
|
|
|
|
}
|
|
|
|
|
|
|
|
function findInstanceByNativeTag(rootTag, nativeTag) {
|
|
|
|
var containerID = ReactNativeTagHandles.tagToRootNodeID[rootTag];
|
|
|
|
var rootInstance = ReactNativeMount._instancesByContainerID[containerID];
|
|
|
|
var targetID = ReactNativeTagHandles.tagToRootNodeID[nativeTag];
|
2015-06-03 20:55:52 +00:00
|
|
|
if (!targetID) {
|
|
|
|
return undefined;
|
|
|
|
}
|
2015-05-26 18:16:25 +00:00
|
|
|
return findInstance(rootInstance, targetID);
|
|
|
|
}
|
|
|
|
|
|
|
|
function getOwnerHierarchy(instance) {
|
|
|
|
var hierarchy = [];
|
|
|
|
traverseOwnerTreeUp(hierarchy, instance);
|
|
|
|
return hierarchy;
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {findInstanceByNativeTag, getOwnerHierarchy};
|