Commit Graph

42 Commits

Author SHA1 Message Date
Janic Duplessis 850c71c2f3 Remove usages of RecyclerViewBackedScrollView in UIExplorer and NetworkOverlay
Summary:
RecyclerViewBackedScrollView was deprecated, this removes usages in Examples as well as in NetworkOverlay.

**Test plan**
Tested that RecyclerViewBackedScrollView deprecation warning doesn't show up anymore.
Closes https://github.com/facebook/react-native/pull/11999

Differential Revision: D4443707

Pulled By: hramos

fbshipit-source-id: 087afc9f183b3f2087965a2fe84301f422e48e9c
2017-01-28 10:43:35 -08:00
Spencer Ahrens 21ba956560 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
2017-01-03 13:43:35 -08:00
David Aurelio 3683beb88a RN: Update React (2/2)
Reviewed By: kentaromiura

Differential Revision: D4026114

fbshipit-source-id: 67808af91454d95941fea01eef58a4d9086f46e1
2016-11-04 05:43:44 -07:00
leeight 9db8910e36 Clean unused import modules.
Summary:
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**

Explain the **motivation** for making this change. What existing problem does the pull request solve?

Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

For more info, see
Closes https://github.com/facebook/react-native/pull/10413

Differential Revision: D4028108

fbshipit-source-id: 99a864dfda578d640f582b296583591415ba26cd
2016-10-16 11:13:40 -07:00
Konstantin Raev 6ea26c01de Reverted commit D4027388
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 8e3341b6f393ccf432c1a4e22a7cbf422284a06f
2016-10-16 04:13:42 -07:00
Jan Kassens e58d17e68b React.Element<any> » React.Element<*>
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 5bc178eab1ab72283622b4b7d418f9fd43ec0792
2016-10-15 17:58:38 -07:00
Tim Yung 7263c349c7 RN: Stop Deep Linking `ReactPropTypes`
Reviewed By: sebmarkbage

Differential Revision: D4025448

fbshipit-source-id: 4e9b6ee002a86f638fc57a4bbeb45bf35fabf74c
2016-10-14 18:59:10 -07:00
Tim Yung e8198aed8d Cleanup: Prefer `React.Element` over `React$?Element`
Reviewed By: vjeux

Differential Revision: D4013049

fbshipit-source-id: 18a447fdbc584418d6a51770363bcd221e7fb7dc
2016-10-14 08:59:37 -07:00
David Aurelio 94666f16c7 Auto-fix lint errors
Reviewed By: bestander

Differential Revision: D3683952

fbshipit-source-id: 9484d0b0e86859e8edaca0da1aa13a667f200905
2016-08-09 06:43:46 -07:00
Siqi Liu 43f73f675f Enable websocket interception in RN network inspector tool
Summary:
This diff enables network inspection for WebSocket APIs, so by now XMLHttpRequest, Fetch and WebSocket are all supported. Android and iOS are both supported.

This diff monkey-patches the RCTWebSocketModule which WebSocket API builds on, and now it is able to intercept all WebSocket requests when app is running. The intercepted information of a WebSocket includes url, protocols, status, messages (sent and received), close reason, server close event and server error information, etc.

Reviewed By: davidaurelio

Differential Revision: D3641770

fbshipit-source-id: 393df0da74ed95b1fd60e38b0d67ed61b3dd5ff3
2016-08-02 08:28:39 -07:00
Siqi Liu 1e8b83d2e6 Add unique ids to the intercepted XHR objects to make the tracking correctly across inspector restarts.
Summary: In previous `XHRInterceptor`, it sometimes crashes when restarting the network inspector because the id of the XHR objects are not unique all time. Fix this in diff by adding a global id "generator" for all intercepted xhr objects in order to make it safe across inspector restarts.

Reviewed By: davidaurelio

Differential Revision: D3641624

fbshipit-source-id: f9a1589f278023243aa182d3da93ce69c985587c
2016-08-02 08:28:39 -07:00
Siqi Liu b5abb87a6f Fix the potential bug for network inspector when receiving xhr objects without an "_index" property
Summary: It sometimes happens that there are already some existing `XMLHttpRequest` objects before we turn on the network inspector. So it is a must to check whether a `XMLHttpRequest` object has a property `_index` to determine if it should be tracked.

Reviewed By: davidaurelio

Differential Revision: D3635184

fbshipit-source-id: a5552d7244c994b0fe782ac35baae39ec7488494
2016-07-28 14:13:46 -07:00
Siqi Liu d12d075977 Add detail view for network inspector
Summary:
This diff adds a detail view for the network inspector. When pressing one item in the network flow list, a popup scrollView with detailed information about the network request will be shown. More interesting, the detail information is shown in real time, which means the detail information will be updated dynamically as soon as the network request is updated (maybe receiving a response after waiting).

Also have made sure this works on both Android and iOS.

Reviewed By: davidaurelio

Differential Revision: D3627566

fbshipit-source-id: e868d0c0287d392018b9fa64fce53b4c4b3d76d9
2016-07-27 12:28:32 -07:00
Siqi Liu ecea0cef74 Add UI to show intercepted network information in the inspector
Summary:
This diff adds a UI to display network information flows in the inspector tool (Android and iOS both supported):
- uses a ListView to show network flows, always scrolling to the latest item when a new network request occurs.
- displays the network requests as soon as they were created.
- highlights the selection row and toggles events to log the detailed intercepted information. (Next diff will draw UIs for this).

Follow-up:
- Will add one detail view to show all valuable information about a network request, after user clicks on one item in the ListView.
- Add more tabs in the detail view, ideally looking like the chrome network panel.

Reviewed By: davidaurelio

Differential Revision: D3598900

fbshipit-source-id: 5ec9ade6d13e3a9110db105fafbc7ba52adc515d
2016-07-27 12:28:32 -07:00
Siqi Liu f20d5ed67f Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".

This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.

By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.

Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.

Reviewed By: davidaurelio

Differential Revision: D3598873

fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 12:28:32 -07:00
Ben Alpert a2fb703bbb Convert from React.createClass to ES6 classes
Reviewed By: cpojer

Differential Revision: D3619143

fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c
2016-07-26 01:13:31 -07:00
Sokovikov c65eb4ef19 open in editor button for yellow box
Summary:
Here is the demo https://www.dropbox.com/s/ljh7f9654sqgdqc/demo.mov?dl=0
Closes https://github.com/facebook/react-native/pull/8418

Differential Revision: D3499515

Pulled By: frantic

fbshipit-source-id: 1bd4cd79770f1bf1b82723ad803359df177ca3c5
2016-07-13 04:43:25 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Ben Alpert 92d6632d7a Update React to 15.2.0-rc.1
Summary:
Notable changes (excluding DOM-only things):

- Improved warning messages for propTypes and key warnings
- Production error codes
- Improved performance in DEV mode
- More accurate data in ReactPerf instrumentation
- Experimental JSON test renderer
- Minor bug fixes

Full changelog: fef495942a...c66f40f749.

Reviewed By: AaaChiuuu

Differential Revision: D3442002

fbshipit-source-id: 940fc65ba5d0b742417bbe2fcbd36eb9dc7443e1
2016-06-16 14:44:18 -07:00
Emil Sjolander 9803f3b0dc Fix inspector wrapping layout
Summary: the default child alignment of 'stretch' is not compatible with flexWrap:'wrap'. By aligning children to the start of the container we fix this.

Reviewed By: jingc

Differential Revision: D3436864

fbshipit-source-id: ead5a5765ed0c336ed6e727af2970d4e6d7ff34f
2016-06-15 11:13:25 -07:00
Alex Kotliarskyi 30e9c40898 Remove unused rootTag
Summary:
`rootTag` is a lie, it's passed around but never actually used. IIRC
`findInstanceByNativeTag` needed it but seems like not anymore.

Reviewed By: spicyj

Differential Revision: D3382144

fbshipit-source-id: eb96870a3848333e66bf045e78e95c7763812cc4
2016-06-08 14:43:30 -07:00
Alex Kotliarskyi 7e100ac7a2 Extract getDevServerURL into reusable module
Summary:
Many RN devtools (inspector, source maps, etc.) rely on packager.
This refactors individual SourceCode.scriptURL parsing into one function
that will be easier to change in the future.

Reviewed By: javache

Differential Revision: D3348465

fbshipit-source-id: 5a55939ea59e1517cb63bcbe4963f57f02ab15f3
2016-06-01 13:59:16 -07:00
Alex Kotliarskyi bdab834036 Improve how inspector handles native components
Reviewed By: sebmarkbage

Differential Revision: D3347768

fbshipit-source-id: 221ec54dc7bf9513a76578d90a272ed41fe189f9
2016-05-26 10:58:30 -07:00
Alex Kotliarskyi e4753867ea Fix internal fields access for inspector
Reviewed By: sebmarkbage

Differential Revision: D3325549

fbshipit-source-id: d6cf89f5dbbe9db5bec37632e6976c6e537575fb
2016-05-20 12:13:48 -07:00
Alex Kotliarskyi f203c5d78c Add "Open file" button to elements inspector
Summary:
Depends on #6351

Now you can open file directly from Elements Inspector!

Credit for the original implementation goes to jaredly

![zcichu7kem](https://cloud.githubusercontent.com/assets/192222/14573876/cb100f6e-030c-11e6-925f-6a6dff510145.gif)

**Test plan**

Made sure it doesn't crash the app with or without #6351 (i.e. can be merged safely before #6351 gets in).
Closes https://github.com/facebook/react-native/pull/7005

Differential Revision: D3313714

Pulled By: frantic

fbshipit-source-id: 3b80abd3e81a0db5ca5136e2d2c94c775fa04f3a
2016-05-17 20:58:25 -07:00
Pieter De Baets 57ceeafd4f Move UI-specific logic from NativeModules to UIManager
Summary: Move all requires of UIManager to UIManager.js, so we can load the view manager configuration lazily when UIManager is required.

Reviewed By: majak

Differential Revision: D3270147

fb-gh-sync-id: 8208ee8d5919102ea5345e7031af47ee78162fe0
fbshipit-source-id: 8208ee8d5919102ea5345e7031af47ee78162fe0
2016-05-09 08:21:19 -07:00
Sebastian Markbage 47a470a97c Move React Core Integration to a Dependency
Summary:Adding the react native renderer dependency and various fixes to support React 15.

Don't use dispatchID for touchableHandleResponderGrant

This callback argument was removed because "IDs" no longer exist. Instead, we'll
use the tag from the event target.

The corresponding PR on React Core is: https://github.com/facebook/react/pull/6338

Reviewed By: spicyj

Differential Revision: D3159788

fb-gh-sync-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9
fbshipit-source-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9
2016-04-21 09:28:23 -07:00
Spencer Ahrens d5c1de7708 Hook up touchable debugging to Inspector button
Reviewed By: vjeux

Differential Revision: D3188719

fb-gh-sync-id: 271e902399900242f577a77807868bd2a28add37
fbshipit-source-id: 271e902399900242f577a77807868bd2a28add37
2016-04-16 11:57:22 -07:00
Spencer Ahrens 5c9b46c15e Improve touchable debugging
Summary:Set `Touchable.TOUCH_TARGET_DEBUG` to see colored borders/text to all touchables.

Different touchable types are color-coded differently.

If there is `hitSlop`, it will be rendered with an extra view with a dashed border of the same color (not visible on
Android because `overflow: 'hidden'`).

`Text` with `onPress` directly set is just colored.

Added some extra checks to `TouchableWithoutFeedback` since it could silently break if the child is not a native
component.

Also added better error output for `ensureComponentIsNative` so it's easier to track down issues. I really wish there
was a cleaner way to get the component and owner names consistently, it would help make good debug messages way easier
to write.

Reviewed By: ericvicenti

Differential Revision: D3149865

fb-gh-sync-id: 602fc3474ae7636e32af529eb7ac52ac5b858030
fbshipit-source-id: 602fc3474ae7636e32af529eb7ac52ac5b858030
2016-04-14 14:28:31 -07:00
Goran Gajic b7a32726aa Fix perf tab missing key warnings
Summary: Closes https://github.com/facebook/react-native/pull/6865

Differential Revision: D3155343

fb-gh-sync-id: e020d92e928723db1a96a47f45627a4d85af4a0f
fbshipit-source-id: e020d92e928723db1a96a47f45627a4d85af4a0f
2016-04-07 23:38:32 -07:00
Sebastian Markbage 613ca14612 React.findNodeHandle -> ReactNative.findNodeHandle
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.

This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.

I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.

I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.

Reviewed By: vjeux

Differential Revision: D3149356

fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
2016-04-07 19:44:31 -07:00
wenzhao.yin 50141f9d3f fix RCTPerfMonitor display unit error
Summary:The  RCTPerformanceLogger log the time in ms not us. Especially the unit of RCTPLBundleSize is byte.
Closes https://github.com/facebook/react-native/pull/5919

Differential Revision: D2982116

Pulled By: nicklockwood

fb-gh-sync-id: 18aad5ff2eb83c6f302b2c10382bf214b51df133
shipit-source-id: 18aad5ff2eb83c6f302b2c10382bf214b51df133
2016-02-26 04:54:32 -08:00
wusuopu 97741af8b9 Fix warnings of StyleInspector
Summary:
Fix issue #5831
Closes https://github.com/facebook/react-native/pull/5832

Reviewed By: svcscm

Differential Revision: D2917760

Pulled By: vjeux

fb-gh-sync-id: 3808d14075b259dd21056a7111205edae1e3eb48
shipit-source-id: 3808d14075b259dd21056a7111205edae1e3eb48
2016-02-10 08:40:39 -08:00
wusuopu 97b8a57bdb Fix inspector for displaying styles' value
Summary:
StyleInspector will occur a error if a style's value is an object, such as transform. Now it converts the value to string before display.

fix issue #5774 .

Now it can display okay.

![simulator screen shot feb 6 2016 12 32 24 am](https://cloud.githubusercontent.com/assets/1478284/12852296/36736966-cc69-11e5-8f28-9e4681585bcb.png)
Closes https://github.com/facebook/react-native/pull/5777

Reviewed By: svcscm

Differential Revision: D2908135

Pulled By: nicklockwood

fb-gh-sync-id: 5914f9e9538f90ae9a38ef7d8dc85b2df84ec43e
2016-02-05 16:30:39 -08:00
Alex Kotliarskyi c1aed7ba41 Fix warnings generated by Elements Inspector
Summary:
public

When using dev menu - elements inspector, a yellow box appears
with React warning regarding missing key prop in elements array.
This commit fixes this issue.

Reviewed By: martinbigio

Differential Revision: D2835332

fb-gh-sync-id: 3fcb37dfb6bdcff3788963b36416b7da190b9a84
2016-01-25 18:43:47 -08:00
Edvin Erikson c489660f26 Inspecting stateless components.
Summary:
Fixes #4602

Fixes a bug where the app crashes when you try to inspect a stateless
component.
Fixed by replacing all occurrences of the getPublicInstance method in
Libraries/Inspector/Inspector.js with the _instance property instead.
Defaults to an empty object if _instance is falsy.
Closes https://github.com/facebook/react-native/pull/4642

Reviewed By: svcscm

Differential Revision: D2734491

Pulled By: androidtrunkagent

fb-gh-sync-id: 4ea753b7e0ef3fd05af2d80abadc365c5c787f98
2015-12-08 10:13:25 -08:00
Jared Forsyth 9e4af68d91 [react-native] enable react devtools from JavascriptCore 2015-07-23 17:14:09 -08:00
Jared Forsyth e06af51cf9 [react-native] inspector + devtools, naming things 2015-07-22 16:50:32 -08:00
Jared Forsyth a43987309d [react native] prepare the react native inspector for the new react devtools
Summary:
These are the changes needed for full interop with the (as yet unreleased) new
version of React Devtools.

- the on-device inspector is minimized when devtools is open
- devtools highlight -> device and device touch -> devtools select works
- editing react native styles :)
2015-07-14 12:35:43 -08:00
Jing Chen b58578e935 [rn] Add PerformanceOverlay to the inspector 2015-06-23 15:41:41 -08:00
Olivier Notteghem 58d01c7981 [RN Inspector] : fix CSS not to use view overflow which is not supported on iOS 2015-06-18 05:46:33 -08:00
Jared Forsyth 15907419f3 [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 13:49:54 -08:00