Commit Graph

12 Commits

Author SHA1 Message Date
Pavlos Vinieratos 5e6f39aace allow for dark background in the debugger view
Summary:
I prefer a darker environment when coding, and having the Chrome window be dark except the part that I cannot hide, is making my eyes hurt. This is for the people that prefer the darker color scheme when developing.
Closes https://github.com/facebook/react-native/pull/11878

Differential Revision: D4494415

Pulled By: mkonicek

fbshipit-source-id: 423473ec073e6ddd0d14322c22ee37abed1c55bc
2017-02-02 04:43:51 -08:00
Alex Kotliarskyi 8b4272b2fd Change favicon depending on the Chrome debugger state
Reviewed By: yungsters

Differential Revision: D4465694

fbshipit-source-id: fc740f176d6e1fe25dfc79c9ccd8a1ea2be35bb3
2017-01-26 11:58:32 -08:00
Tim Yung 8b653cde56 RN: Show Warning for Background Remote Debuggers
Summary:
Some recent change to Chrome causes the remote debugger to be throttled unexpectedly if it is in a background tab. Although this does not fix the problem, it raises the issue and suggests a workaround.

I also cleaned up some littering of the global namespace in the debugger web worker.

Reviewed By: jingc

Differential Revision: D4104515

fbshipit-source-id: 56e46c0e759bec4c42d3baedd4d2d46cdea2e4a0
2016-10-31 11:29:57 -07:00
Tim Yung 448e66b3fa RN: Cleanup Debugger HTML
Summary: Minor cleanup to `debugger.html`.

Reviewed By: fkgozali

Differential Revision: D4104499

fbshipit-source-id: f484711b4a855a1fd703d3a457b96ad45e0250e2
2016-10-31 11:29:57 -07:00
Jani Eväkallio 467b637656 Add a debugger favicon
Summary:
I frequently spend multiple seconds scanning my open Chrome tabs for the React Native debugger tab. It would be a lot quicker to find the correct tab if the debugger UI tab had a favicon.

This commit adds favicon (blue react logo in a white circle). It's a super minor change, but would help a lot with day-to-day DX.

I chose this icon to differentiate sufficiently from other tabs developer might have open: React docs (blue logo in black square) and React Native docs (white logo in black square). If the idea of having a favicon is agreeable but you want a different asset, I'm more than happy to change it to something else.

Original asset before base-64 encoding:
![favicon-32x32](https://cloud.githubusercontent.com/assets/1203949/19117546/44b36fd2-8b11-11e6-8a94-c8956fe7533c.png)

In the wild:
<img width="335" alt="screen shot 2016-10-05 at 15 40 58" src="https://cloud.githubusercontent.com/assets/1203949/19117811/43cad316-8b12-11e6-8406-4c9b74efdaf2.png">
Closes https://github.com/facebook/react-native/pull/10252

Differential Revision: D3974983

Pulled By: hramos

fbshipit-source-id: 6b07d446dd972c4c171062134b45bc3850886349
2016-10-05 10:43:43 -07:00
Damien f4e3e19f8c Add shorcuts for windows & linux to debugger.html
Summary:
Very simple PR to add the shorcuts for windows/linux to the web debuger interface so it's less mac-centric.

**Test plan**: Open the debugger and see the shorcuts for windows/linux/mac
Closes https://github.com/facebook/react-native/pull/9812

Differential Revision: D3862570

fbshipit-source-id: 54605af66b674d176b3cbbb9efcfa93f84fcd552
2016-09-14 02:58:40 -07:00
Chris Nager 481e1c77a0 Update keyboard input element from `span` to `kbd`
Summary:
Updated the keyboard input element on the browser debugger page that contains "⌘⌥J" from a `span` to the more semantic `kbd`.
Closes https://github.com/facebook/react-native/pull/8998

Differential Revision: D3620668

fbshipit-source-id: ab3081688202c85978f6f400a42eb1aa1abb77c6
2016-07-26 10:13:45 -07:00
Tim Yung b03a725447 RN: Clear Debug Console on Reload JS
Summary:
Clears the debug console whenever the React Native JS is reloaded.

NOTE: This respects "Preserve log" in Chrome by default.

Reviewed By: jingc

Differential Revision: D3409713

fbshipit-source-id: ce215e3125cf43ab3ea5811c707fab9dfa4bcbb3
2016-06-08 19:13:25 -07:00
Alex Kotliarskyi 64d56f34b7 Improve Chrome debugger
Summary:
`debugger.html` contained a ton of hacky code that was needed to ensure we have a clean JS runtime every time a client RN app connects. That was needed because we used the page's global environment as runtime. Some time ago WebWorker support was added and now we run RN code inside an isolated WebWorker instance, and we can safely get rid of all these hacks.

This has a bunch of nice side-effects: debug reload works faster, `console.log`s are preserved, `debuggerWorker.js` selection doesn't change.

Made sure the debugging (breakpoints, etc.) still works as before.

Small demo
![](http://g.recordit.co/FPdVHLHPUW.gif)
Closes https://github.com/facebook/react-native/pull/5715

Reviewed By: svcscm

Differential Revision: D2906602

Pulled By: frantic

fb-gh-sync-id: 1a6ab9a5655d7c32ddd23619564e59c377b53a35
2016-02-05 15:17:33 -08:00
Christopher Chedeau 184c708b14 Remove React dev tools upsell
Summary:
React dev tools have been broken since we moved to web worker but we had a gigantic upsell for them. This must be a very frustrating experience for people just starting to use react native to be told to use something and see that it doesn't work.

Removing that upsell until it works again

<img width="1090" alt="screen shot 2016-02-04 at 2 00 37 pm" src="https://cloud.githubusercontent.com/assets/197597/12831501/8eba3f4e-cb49-11e5-8bdc-84f902053321.png">
Closes https://github.com/facebook/react-native/pull/5768

Reviewed By: svcscm

Differential Revision: D2903017

Pulled By: vjeux

fb-gh-sync-id: 731c5fefbef1a5249d632fc62ca36813533f2639
2016-02-04 15:37:35 -08:00
Sebastian Markbage 8d397b4cbc Decouple Module System from Native Calls
Summary:
The JavaScript ecosystem doesn't have the notion of a built-in native module loader. Even Node is decoupled from its module loader. The module loader system is just JS that runs on top of the global `process` object which has all the built-in goodies.

Additionally there is no such thing as a global require. That is something unique to our providesModule system. In other module systems such as node, every require is contextual. Even registered npm names are localized by version.

The only global namespace that is accessible to the host environment is the global object. Normally module systems attaches itself onto the hooks provided by the host environment on the global object.

Currently, we have two forms of dispatch that reaches directly into the module system. executeJSCall which reaches directly into require. Everything now calls through the BatchedBridge module (except one RCTLog edge case that I will fix). I propose that the executors calls directly onto `BatchedBridge` through an instance on the global so that everything is guaranteed to go through it. It becomes the main communication hub.

I also propose that we drop the dynamic requires inside of MessageQueue/BatchBridge and instead have the modules register themselves with the bridge.

executeJSCall was originally modeled after the XHP equivalent. The XHP equivalent was designed that way because the act of doing the call was the thing that defined a dependency on the module from the page. However, that is not how React Native works.

The JS side is driving the dependencies by virtue of requiring new modules and frameworks and the existence of dependencies is driven by the JS side, so this design doesn't make as much sense.

The main driver for this is to be able to introduce a new module system like Prepack's module system. However, it also unlocks the possibility to do dead module elimination even in our current module system. It is currently not possible because we don't know which module might be called from native.

Since the module system now becomes decoupled we could publish all our providesModule modules as npm/CommonJS modules using a rewrite script. That's what React Core does.

That way people could use any CommonJS bundler such as Webpack, Closure Compiler, Rollup or some new innovation to create a JS bundle.

This diff expands the executeJSCalls to the BatchedBridge's three individual pieces to make them first class instead of being dynamic. This removes one layer of abstraction. Hopefully we can also remove more of the things that register themselves with the BatchedBridge (various EventEmitters) and instead have everything go through the public protocol. ReactMethod/RCT_EXPORT_METHOD.

public

Reviewed By: vjeux

Differential Revision: D2717535

fb-gh-sync-id: 70114f05483124f5ac5c4570422bb91a60a727f6
2015-12-08 16:03:37 -08:00
Martín Bigio bcf762af60 Move files from `packager/` to `local-cli`
Summary: public

This is not only to put the files on a place where it makes more sense but also to allow to use ES6 features on them as `/packager` is not whitelisted on `babel`.

Reviewed By: mkonicek

Differential Revision: D2577267

fb-gh-sync-id: b69a17c0aad349a3eda987e33d1778d97a8e1549
2015-10-26 15:38:14 -07:00