Commit Graph
19463 Commits
Author SHA1 Message Date
Brian Vaughn f74c89b145 Misc improvements based on user feedback from Tim
* Added shadow to modals
* Change default "collapse new nodes" to be disabled rather than enabled
* Changed setting label "Collapse newly added components by default" to "Expand component tree by default"
* Change CSS media query for settings popup to show labels at smaller size
* Hide "Inspect the matching DOM element" button (since it doesnt really serve a purpose in standalone)
* Fixed small size bug for settings icon (viewbox of 20x20 instead of 24x24)
* bugfix: window.addEventListener/window.removeEventListener is not defined in Hermes.
2019-07-24 11:25:11 -07:00
Brian Vaughn 13959aa8fb Removed accidental log statement 2019-07-24 11:13:30 -07:00
Benoit Girard 144dba1a11 Fix suspenseCallback type warning, add a test (#16194) 2019-07-24 18:32:00 +01:00
Dominic Gannaway 7ad221126f [Flare] Ensure Flare components are no-ops for TestRenderer (#16192) 2019-07-24 11:31:33 +01:00
lunaruan 06cc996994 Edit Suspense Priority Warning Message (#16186)
* move 'component that triggered the update' in suspense priority warning message to the beginning of the message

* renamed warnings
2019-07-23 19:08:41 -07:00
Benoit Girard 42b75ab007 Add suspenseCallback feature for runtime tracing of loading states (#16134)
This adds a 'SuspenseCallback' feature flag. When the property is set on
a suspense component it will be called during the commit phase with a
set of the immediate thenable for this component. This will allow user
code to build runtime tracing of the cause for a suspense boundary.
2019-07-23 17:13:46 -07:00
Sunil Pai c73e1f236f flush work on exiting outermost act(), with nested act()s from different renderers (#16181)
Given this snippet:
```jsx
    TestRenderer.act(() => {
      TestUtils.act(() => {
        TestRenderer.create(<Effecty />);
      });
    });
```
We want to make sure that all work is only flushed on exiting the outermost act().

Now, naively doing this based on actingScopeDepth would work with a mocked scheduler, where flushAll() would flush all work across renderers.

This doesn't work without mocking the scheduler though; and where flushing work only works per renderer. So we disable this behaviour for a non-mocked scenario. This seems like an ok tradeoff.
2019-07-24 00:20:28 +01:00
Dominic Gannaway 5098891193 [Flare] Redesign core event system (#16163) 2019-07-23 23:46:44 +01:00
Andrew Clark 19354db511 [Scheduler] Add names to inline functions (#16180)
Noticed when looking at the performance profiler with Luna that it's
hard to tell which event causes `performWorkUntilDeadline` to fire
because these functions are anonymous.
2019-07-23 11:08:24 -07:00
Andrew Clark bff7abf6ba [Scheduler][Bugfix] Multiple rAFs in same frame (#16184)
Always sets `isRAFLoopRunning` back to false when an animation frame is
scheduled. Fixes a bug where two rAFs fire in the same frame, but the
second one exits and fails to schedule a new rAF.

Fixes bug observed in Safari.
2019-07-23 10:44:27 -07:00
Brian Vaughn afb5991686 Enable profiler+tracing for test renderer (#16178)
This commit just brings the feature flags to parity with other renderers.
2019-07-23 08:20:12 -07:00
Dan Abramov 2237efcef9 [Fresh] Track unrecoverable errors (#16183)
* [Fresh] Track unrecoverable errors

* Only initial errors set the flag
2019-07-23 16:11:13 +01:00
Brian Vaughn 1178d57257 Fixed a module resolution issue and a syntax error from a bad merge 2019-07-23 07:46:19 -07:00
Nicolas Gallagher bbd21066e6 [Flare] Press: fix keyboard interactions (#16179)
Prevents Spacebar from scrolling the window.
Prevents Enter from triggering a navigation if preventDefault is true.
Fixes the emulated mouse events test.
2019-07-22 18:16:40 -07:00
lunaruan 03944bfb0b Update Suspense Priority Warning to Include Component that Triggered Update (#16030)
Improved warning whenever lower priority events (ex. data fetching, page load) happen during a high priority update (ex. hover/click events) to include:
1.) Name of component that triggered the high priority update or
2.) Information that the update was triggered on the root
2019-07-22 14:17:43 -07:00
Andrew Clark 3f2cafe8be [WIP][Scheduler] Use rIC to post first callback (#16166)
Scheduler uses `requestAnimationFrame` to post tasks to the browser.
If this happens at the beginning of a frame, the callback might not
fire until the subsequent frame, even if the main thread is idle.

Our theory was that this wouldn't be an issue in practice, because once
the first rAF fires, we schedule the next rAF as early as possible in
that frame. Combined with our heuristic for computing frame deadlines,
we shouldn't get any idle time in between frames — only before the
*first* frame.

This reasoning holds true when you have a small number of large tasks,
such as the ones posted by React. The idle time before the task starts
is negligible relative to the lifetime of the entire task.

However, it does not hold if you have many small tasks posted over a
span of time, perhaps spawned by a flurry of IO events. In this case,
instead of single, contiguous rAF loop preceded by an idle frame, you
get many rAF loops preceded by many idle frames. Our new theory is that
this is contributing to poor main thread utilization during page loads.

To try to reclaim as much idle time as possible, this PR adds two
experimental flags. The first one adds a `requestIdleCallback` call to
start the rAF loop, which will fire before rAF if there's idle time left
in the frame. (We still call rAF in case there isn't. We start working
in whichever event fires first.)

The second flag tries a similar strategy using `setTimeout(fn, 0)`. If
the timer fires before rAF, we'll assume that the main thread is idle.

If either `requestIdleCallback` or `setTimeout` fires before rAF, we'll
immediately peform some work. Since we don't have a real frame time that
we can use to compute the frame deadline, we'll do an entire frame
length of work. This will probably push us past the vsync, but this is
fine because we can catch up during the next frame, by which point a
real rAF will have fired and the loop can proceed the same way it
does today.

Test plan: Try this on Facebook to see if it improves load times
2019-07-22 13:12:33 -07:00
Andrew Clark 2bd88e38aa [Scheduler] Bugfix: Cancelling a continuation (#16151)
Cancelling the original task should also cancel its continuation.
2019-07-22 13:10:33 -07:00
Brian Vaughn ffb19346c7 NPM packages 4.0.0-alpha.0 -> 4.0.0-alpha.1 2019-07-22 11:19:53 -07:00
Dominic Gannaway 783b8f4ae1 [Flare] Ensure mouse events can use target to validate press (#16172) 2019-07-22 12:31:19 +01:00
Brian Vaughn 4b34a77d29 Improve Bridge Flow types (#352)
* Updated local fork of react-window
* Updated Fow 97 -> 103
* Lint ignore NPM dist
* Improved Bridge Flow types
2019-07-20 14:08:23 -07:00
Brian Vaughn 39ad101ea2 Removed reference to setDefaultThemeName() method
This functionality was added to v3 to support external changing of theme at runtime. This isn't supported in v4.
2019-07-20 09:28:09 -07:00
Brian Vaughn 33da657178 Make console override detectable (for RN YellowBox) 2019-07-20 08:05:08 -07:00
Dominic Gannaway 2c4d61e102 Adds experimental fundamental interface (#16049) 2019-07-19 22:20:28 +01:00
Brian Vaughn 167daf7a4a Updating NPM packages as 4.0.0-alpha.0 2019-07-19 10:09:49 -07:00
Brian Vaughn abe75b0e39 Slight tweak to avoid setting an invalid numeric value in props editor 2019-07-19 09:19:03 -07:00
Brian Vaughn f0a4b2f8e8 Merge branch 'fix-input-number-in-props' of https://github.com/koba04/react-devtools-experimental into koba04-fix-input-number-in-props 2019-07-19 09:16:26 -07:00
Brian Vaughn 0abaefb7c2 Cleanup legacy backend event listener if modern backend is detected 2019-07-19 09:02:30 -07:00
Brian Vaughn dbbf30a332 Make my code PRETTIER 2019-07-18 16:37:57 -07:00
Brian Vaughn 67e749a73a Tweaked modal font size style 2019-07-18 16:28:20 -07:00
Brian Vaughn bd0a0c58fd Tweaked modal title to better fit without wrapping 2019-07-18 16:26:27 -07:00
Brian Vaughn 249a2e043d Detect React Native v3 backend and show warning 2019-07-18 16:24:22 -07:00
Paul Shen b4178af81b clean up nextEffect pointers (#16115) 2019-07-17 17:21:19 -07:00
Nicolas Gallagher 997154bcc7 [Flare] Add FocusWithin responder (#16152)
FocusWithin is implemented as a separate responder, which keeps both focus
responders simple and allows for easier composition of behaviours.
2019-07-17 15:17:13 -07:00
Brian Vaughn 9fb753b5cd Hardened logic around when and how to patch console methods 2019-07-17 15:08:34 -07:00
Dominic Gannaway 65b80fdd94 [Flare] Add Input event responder surface (#16148) 2019-07-17 21:04:41 +01:00
Brian Vaughn cb3fb42129 Patch console to append component stacks (#348)
* Patch console.warn and console.error to auto-append owners-only component stacks.

This setting is enabled by default and will work for React Native even if no front-end DevTools shell is being used. The setting can be disabled via a new, persisted user preference though.
2019-07-17 11:12:39 -07:00
Brian Vaughn ce883a19d8 useSubscription hook (#15022)
* Added use-subscription package with README
2019-07-16 15:59:37 -07:00
Moti Zilberman c45c2c3a26 Move ReactFiberErrorDialog RN fork into RN itself (#16141) 2019-07-16 09:38:14 +01:00
Sunil Pai d9b4c55d53 unify deprecated/unsafe lifecycle warnings, pass tests (#16103)
- redoes #15431 from scratch, taking on the feedback there
- unifies the messaging between "deprecated" and UNSAFE_ lifecycle messages. It reorganizes ReactStrictModeWarnings.js to capture and flush all the lifecycle warnings in one procedure each.
- matches the warning from ReactPartialRenderer to match the above change
- passes all the tests
- this also turns on `warnAboutDeprecatedLifecycles` for the test renderer. I think we missed doing so it previously. In a future PR, I'll remove the feature flag altogether.
- this DOES NOT do the same treatment for context warnings, I'll do that in another PR too
2019-07-15 20:56:44 +01:00
Brian Vaughn 424099da60 Inject getCurrentFiber() function to DevTools (#16133)
This returns the current value of ReactCurrentFiber and enables DevTools to append a custom (owner-only) component stack to warnings and errors in DEV mode.
2019-07-15 07:38:44 -07:00
Toru Kobayashi 41c00cb0cb fix to input a number value to props 2019-07-14 23:11:08 +09:00
Brian Vaughn 0f2fb5badf Standalone NPM packages and React Native support (#335)
* Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage.
* Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed.
* Adds support for React Native (paper renderer)
* Adds a style editor for react-native and react-native-web
2019-07-13 10:05:04 -07:00
Brian Vaughn 9f395904c6 Inject ReactDebugCurrentFrame into DevTools so it can append component stacks to warnings in DEV mode (#16127) 2019-07-13 08:53:21 -07:00
Sebastian Markbåge fcff9c57bc Add tail="hidden" option to SuspenseList (#16024)
* Move misaligned comment

* Add tail="hidden" option

* isShowingAnyFallbacks -> findFirstSuspended

* We can't reset Placement tags or we'll forget to insert them

* Delete hasSuspendedChildrenAndNewContent optimization
2019-07-12 15:55:47 -07:00
Brian Vaughn 8d413bf2c3 Remove React.error and React.warn (#16126)
* Remove React.error/React.warn with React.getComponentStack
2019-07-12 15:41:47 -07:00
Andrew Clark 29b4559635 .watchmanconfig must be valid json (#16118)
faceworldproblems?
2019-07-11 19:01:02 -07:00
Nicolas Gallagher ca4d78f9b6 [Flare] Press: fix middle-click handling (#16114)
Make sure the root events are removed after middle-click completes
2019-07-11 22:12:10 +01:00
Sunil Pai 3f1dee09a4 expose act() sigil correctly for umd builds (#16110)
after https://github.com/facebook/react/pull/16039, act was broken for umd builds. This PR fixes it.
2019-07-11 14:56:03 +01:00
Sebastian Markbåge b7669044d9 Use Map instead of object as map in ReactNativeComponentTree (#16107)
Real Maps should now be used in RN JS engines. In theory this should
be faster (but might not actually be in practice), and it avoids hitting
upper bounds of property max counts.

We don't use these types of Maps in Fabric.
2019-07-10 19:11:36 -07:00
Andrew Clark d2d9b1f701 [Scheduler] Support inferring priority from stack (#16105)
When executing a task, wraps the callback in an extra function whose
name includes the current priority level. Profiling tools with access
to function names can use this to determine the priority of the task.
2019-07-10 18:59:44 -07:00