Skip to content

Commit

Permalink
refactor: remove source usages from getInspectorData
Browse files Browse the repository at this point in the history
Summary:
Changelog: [Internal]

Required for landing D53543159.

2 reasons for landing this:
1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging.
2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265

Differential Revision: D53757524
  • Loading branch information
hoxyq authored and facebook-github-bot committed Feb 14, 2024
1 parent 3272b05 commit 25dad31
Show file tree
Hide file tree
Showing 4 changed files with 2 additions and 41 deletions.
32 changes: 1 addition & 31 deletions packages/react-native/Libraries/Inspector/ElementProperties.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,10 @@

import type {InspectorData} from '../Renderer/shims/ReactNativeTypes';
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
import type {InspectedElementSource} from './Inspector';

const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
const View = require('../Components/View/View');
const openFileInEditor = require('../Core/Devtools/openFileInEditor');
const flattenStyle = require('../StyleSheet/flattenStyle');
const StyleSheet = require('../StyleSheet/StyleSheet');
const Text = require('../Text/Text');
Expand All @@ -29,7 +27,6 @@ const React = require('react');
type Props = $ReadOnly<{|
hierarchy: ?InspectorData['hierarchy'],
style?: ?ViewStyleProp,
source?: ?InspectedElementSource,
frame?: ?Object,
selection?: ?number,
setSelection?: number => mixed,
Expand All @@ -39,22 +36,7 @@ class ElementProperties extends React.Component<Props> {
render(): React.Node {
const style = flattenStyle(this.props.style);
const selection = this.props.selection;
let openFileButton;
const source = this.props.source;
const {fileName, lineNumber} = source || {};
if (fileName && lineNumber) {
const parts = fileName.split('/');
const fileNameShort = parts[parts.length - 1];
openFileButton = (
<TouchableHighlight
style={styles.openButton}
onPress={openFileInEditor.bind(null, fileName, lineNumber)}>
<Text style={styles.openButtonTitle} numberOfLines={1}>
{fileNameShort}:{lineNumber}
</Text>
</TouchableHighlight>
);
}

// Without the `TouchableWithoutFeedback`, taps on this inspector pane
// would change the inspected element to whatever is under the inspector
return (
Expand Down Expand Up @@ -88,7 +70,6 @@ class ElementProperties extends React.Component<Props> {
<View style={styles.row}>
<View style={styles.col}>
<StyleInspector style={style} />
{openFileButton}
</View>
{<BoxInspector style={style} frame={this.props.frame} />}
</View>
Expand Down Expand Up @@ -134,17 +115,6 @@ const styles = StyleSheet.create({
info: {
padding: 10,
},
openButton: {
padding: 10,
backgroundColor: '#000',
marginVertical: 5,
marginRight: 5,
borderRadius: 2,
},
openButtonTitle: {
color: 'white',
fontSize: 8,
},
});

module.exports = ElementProperties;
8 changes: 1 addition & 7 deletions packages/react-native/Libraries/Inspector/Inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,8 @@ type SelectedTab =
| 'performance-profiling';

export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
export type InspectedElementSource = InspectorData['source'];
export type InspectedElement = $ReadOnly<{
frame: InspectedElementFrame,
source?: InspectedElementSource,
style?: ViewStyleProp,
}>;
export type ElementsHierarchy = InspectorData['hierarchy'];
Expand Down Expand Up @@ -74,14 +72,12 @@ function Inspector({
}

// We pass in findNodeHandle as the method is injected
const {measure, props, source} =
hierarchyItem.getInspectorData(findNodeHandle);
const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);

measure((x, y, width, height, left, top) => {
// $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
setInspectedElement({
frame: {left, top, width, height},
source,
style: props.style,
});

Expand All @@ -95,7 +91,6 @@ function Inspector({
hierarchy,
props,
selectedIndex,
source,
frame,
pointerY,
touchedViewTag,
Expand All @@ -120,7 +115,6 @@ function Inspector({
// $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
setInspectedElement({
frame,
source,
style: props.style,
});
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ class InspectorPanel extends React.Component<Props> {
<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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4626,10 +4626,8 @@ declare module.exports: resolveAssetSource;
exports[`public API should not change unintentionally Libraries/Inspector/Inspector.js 1`] = `
"declare const React: $FlowFixMe;
export type InspectedElementFrame = TouchedViewDataAtPoint[\\"frame\\"];
export type InspectedElementSource = InspectorData[\\"source\\"];
export type InspectedElement = $ReadOnly<{
frame: InspectedElementFrame,
source?: InspectedElementSource,
style?: ViewStyleProp,
}>;
export type ElementsHierarchy = InspectorData[\\"hierarchy\\"];
Expand Down

0 comments on commit 25dad31

Please sign in to comment.