Permalink
Browse files

Fix inspector overflow

Summary:
Puts hierarchy and other inspector data in a fixed height scrollview so it never takes up
too much space and you can always scroll to see everything you want.

Reviewed By: fkgozali

Differential Revision: D4374819

fbshipit-source-id: 89356670c984c693db345ad66a97d4cb54a98aee
  • Loading branch information...
sahrens authored and facebook-github-bot committed Jan 3, 2017
1 parent 2577947 commit 21ba956560a18ea6b83da798fbebed88312b3c49
Showing with 72 additions and 67 deletions.
  1. +20 −24 Libraries/Inspector/ElementProperties.js
  2. +27 −24 Libraries/Inspector/Inspector.js
  3. +25 −19 Libraries/Inspector/InspectorPanel.js
@@ -11,20 +11,20 @@
*/
'use strict';
var BoxInspector = require('BoxInspector');
var React = require('React');
var StyleInspector = require('StyleInspector');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var TouchableHighlight = require('TouchableHighlight');
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
var View = require('View');
const BoxInspector = require('BoxInspector');
const React = require('React');
const StyleInspector = require('StyleInspector');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const TouchableHighlight = require('TouchableHighlight');
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const View = require('View');
var flattenStyle = require('flattenStyle');
var mapWithSeparator = require('mapWithSeparator');
var openFileInEditor = require('openFileInEditor');
const flattenStyle = require('flattenStyle');
const mapWithSeparator = require('mapWithSeparator');
const openFileInEditor = require('openFileInEditor');
var PropTypes = React.PropTypes;
const PropTypes = React.PropTypes;
class ElementProperties extends React.Component {
props: {
@@ -50,15 +50,15 @@ class ElementProperties extends React.Component {
};
render() {
var style = flattenStyle(this.props.style);
const style = flattenStyle(this.props.style);
// $FlowFixMe found when converting React.createClass to ES6
var selection = this.props.selection;
var openFileButton;
var source = this.props.source;
var {fileName, lineNumber} = source || {};
const selection = this.props.selection;
let openFileButton;
const source = this.props.source;
const {fileName, lineNumber} = source || {};
if (fileName && lineNumber) {
var parts = fileName.split('/');
var fileNameShort = parts[parts.length - 1];
const parts = fileName.split('/');
const fileNameShort = parts[parts.length - 1];
openFileButton = (
<TouchableHighlight
style={styles.openButton}
@@ -120,7 +120,7 @@ function getInstanceName(instance) {
return 'Unknown';
}
var styles = StyleSheet.create({
const styles = StyleSheet.create({
breadSep: {
fontSize: 8,
color: 'white',
@@ -156,10 +156,6 @@ var styles = StyleSheet.create({
info: {
padding: 10,
},
path: {
color: 'white',
fontSize: 9,
},
openButton: {
padding: 10,
backgroundColor: '#000',
@@ -14,15 +14,16 @@
'use strict';
var Dimensions = require('Dimensions');
var InspectorOverlay = require('InspectorOverlay');
var InspectorPanel = require('InspectorPanel');
var InspectorUtils = require('InspectorUtils');
var React = require('React');
var StyleSheet = require('StyleSheet');
var Touchable = require('Touchable');
var UIManager = require('UIManager');
var View = require('View');
const Dimensions = require('Dimensions');
const InspectorOverlay = require('InspectorOverlay');
const InspectorPanel = require('InspectorPanel');
const InspectorUtils = require('InspectorUtils');
const Platform = require('Platform');
const React = require('React');
const StyleSheet = require('StyleSheet');
const Touchable = require('Touchable');
const UIManager = require('UIManager');
const View = require('View');
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
// required for devtools to be able to edit react native styles
@@ -89,9 +90,9 @@ class Inspector extends React.Component {
this.setState({inspectedViewTag: newProps.inspectedViewTag});
}
attachToDevtools(agent: Object) {
var _hideWait = null;
var hlSub = agent.sub('highlight', ({node, name, props}) => {
attachToDevtools = (agent: Object) => {
let _hideWait = null;
const hlSub = agent.sub('highlight', ({node, name, props}) => {
clearTimeout(_hideWait);
UIManager.measure(node, (x, y, width, height, left, top) => {
this.setState({
@@ -103,7 +104,7 @@ class Inspector extends React.Component {
});
});
});
var hideSub = agent.sub('hideHighlight', () => {
const hideSub = agent.sub('hideHighlight', () => {
if (this.state.inspected === null) {
return;
}
@@ -123,14 +124,14 @@ class Inspector extends React.Component {
this.setState({
devtoolsAgent: agent,
});
}
};
setSelection(i: number) {
var instance = this.state.hierarchy[i];
const instance = this.state.hierarchy[i];
// if we inspect a stateless component we can't use the getPublicInstance method
// therefore we use the internal _instance property directly.
var publicInstance = instance['_instance'] || {};
var source = instance['_currentElement'] && instance['_currentElement']['_source'];
const publicInstance = instance['_instance'] || {};
const source = instance['_currentElement'] && instance['_currentElement']['_source'];
UIManager.measure(instance.getHostNode(), (x, y, width, height, left, top) => {
this.setState({
inspected: {
@@ -147,18 +148,18 @@ class Inspector extends React.Component {
// Most likely the touched instance is a native wrapper (like RCTView)
// which is not very interesting. Most likely user wants a composite
// instance that contains it (like View)
var hierarchy = InspectorUtils.getOwnerHierarchy(touched);
var instance = InspectorUtils.lastNotNativeInstance(hierarchy);
const hierarchy = InspectorUtils.getOwnerHierarchy(touched);
const instance = InspectorUtils.lastNotNativeInstance(hierarchy);
if (this.state.devtoolsAgent) {
this.state.devtoolsAgent.selectFromReactInstance(instance, true);
}
// if we inspect a stateless component we can't use the getPublicInstance method
// therefore we use the internal _instance property directly.
var publicInstance = instance['_instance'] || {};
var props = publicInstance.props || {};
var source = instance['_currentElement'] && instance['_currentElement']['_source'];
const publicInstance = instance['_instance'] || {};
const props = publicInstance.props || {};
const source = instance['_currentElement'] && instance['_currentElement']['_source'];
this.setState({
panelPos: pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
selection: hierarchy.indexOf(instance),
@@ -204,7 +205,9 @@ class Inspector extends React.Component {
}
render() {
var panelContainerStyle = (this.state.panelPos === 'bottom') ? {bottom: 0} : {top: 0};
const panelContainerStyle = (this.state.panelPos === 'bottom') ?
{bottom: 0} :
{top: Platform.OS === 'ios' ? 20 : 0};
return (
<View style={styles.container} pointerEvents="box-none">
{this.state.inspecting &&
@@ -235,7 +238,7 @@ class Inspector extends React.Component {
}
}
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
position: 'absolute',
backgroundColor: 'transparent',
@@ -11,16 +11,17 @@
*/
'use strict';
var React = require('React');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var View = require('View');
var ElementProperties = require('ElementProperties');
var PerformanceOverlay = require('PerformanceOverlay');
var TouchableHighlight = require('TouchableHighlight');
var NetworkOverlay = require('NetworkOverlay');
const ElementProperties = require('ElementProperties');
const NetworkOverlay = require('NetworkOverlay');
const PerformanceOverlay = require('PerformanceOverlay');
const React = require('React');
const ScrollView = require('ScrollView');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const TouchableHighlight = require('TouchableHighlight');
const View = require('View');
var PropTypes = React.PropTypes;
const PropTypes = React.PropTypes;
class InspectorPanel extends React.Component {
renderWaiting() {
@@ -35,17 +36,19 @@ class InspectorPanel extends React.Component {
}
render() {
var contents;
let contents;
if (this.props.inspected) {
contents = (
<ElementProperties
style={this.props.inspected.style}
frame={this.props.inspected.frame}
source={this.props.inspected.source}
hierarchy={this.props.hierarchy}
selection={this.props.selection}
setSelection={this.props.setSelection}
/>
<ScrollView style={styles.properties}>
<ElementProperties
style={this.props.inspected.style}
frame={this.props.inspected.frame}
source={this.props.inspected.source}
hierarchy={this.props.hierarchy}
selection={this.props.selection}
setSelection={this.props.setSelection}
/>
</ScrollView>
);
} else if (this.props.perfing) {
contents = (
@@ -115,7 +118,7 @@ class Button extends React.Component {
}
}
var styles = StyleSheet.create({
const styles = StyleSheet.create({
buttonRow: {
flexDirection: 'row',
},
@@ -137,6 +140,9 @@ var styles = StyleSheet.create({
container: {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
},
properties: {
height: 200,
},
waiting: {
height: 100,
},

0 comments on commit 21ba956

Please sign in to comment.