diff --git a/Libraries/Inspector/ElementProperties.js b/Libraries/Inspector/ElementProperties.js index 4c90d8abd..b2bcd0d68 100644 --- a/Libraries/Inspector/ElementProperties.js +++ b/Libraries/Inspector/ElementProperties.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 = ( { + 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,8 +148,8 @@ 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); @@ -156,9 +157,9 @@ class Inspector extends React.Component { // 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 ( {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', diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js index b053a7f69..0704466b1 100644 --- a/Libraries/Inspector/InspectorPanel.js +++ b/Libraries/Inspector/InspectorPanel.js @@ -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 = ( - + + + ); } 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, },