Commit Graph

10 Commits

Author SHA1 Message Date
Ruslan Lesiutin
1b1dcb8a40 feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic (#27373)
Changes:
1. Refactored react polling logic, now each `.eval()` call is wrapped in
Promise, so we can chain them properly.
2. When user has browser DevTools opened and React DevTools panels were
mounted, user might navigate to the page, which doesn't have React
running. Previously, we would show just blank white page, now we will
show disclaimer. Disclaimer appears after 5 failed attempts to find
React. We will also show this disclaimer if it takes too long to load
the page, but once any React instance is loaded and registered, we will
update the panels.
3. Dark theme support for this disclaimer and popups in Firefox &
Chromium-based browsers

**Important**: this is only valid for case when React DevTools panels
were already created, like when user started debugging React app and
then switched to non-React page. If user starts to debug non-React app
(by opening browser DevTools for it), we will not create these panels,
just like before.

Q: "Why do we poll to get information about react?"
A: To handle case when react is loaded after the page has been loaded,
some sandboxes for example.

| Before | After |
| --- | --- |
| <img width="1840" alt="Screenshot 2023-09-14 at 15 37 37"
src="https://github.com/facebook/react/assets/28902667/2e6ffb39-5698-461d-bfd6-be2defb41aad">
| <img width="1840" alt="Screenshot 2023-09-14 at 15 26 16"
src="https://github.com/facebook/react/assets/28902667/1c8ad2b7-0955-41c5-b8cc-d0fdb03e13ca">
|
2023-09-20 13:30:50 +01:00
Pavel
627b7abd62 feat[devtools/extension]: add dark theme for popup (#27330)
## Summary

If the system/browser uses a dark theme, then the extension popup still
remains with a light background. And so that the eyes do not hurt in a
dark room, you need a dark theme.

## How did you test this change?

Make sure the dark theme is enabled on your system/browser.

**Before:**

![Screenshot 2023-09-02 at 22 20
56](https://github.com/facebook/react/assets/19418601/f7166ea7-f562-4d11-8851-be08fa9629a7)

**After:**

![Screenshot 2023-09-02 at 22 21
30](https://github.com/facebook/react/assets/19418601/e51ecd5f-3e71-4193-83ff-a548bce76bd4)
2023-09-11 14:02:54 +01:00
Jan Kassens
6b30832666 Upgrade prettier (#26081)
The old version of prettier we were using didn't support the Flow syntax
to access properties in a type using `SomeType['prop']`. This updates
`prettier` and `rollup-plugin-prettier` to the latest versions.

I added the prettier config `arrowParens: "avoid"` to reduce the diff
size as the default has changed in Prettier 2.0. The largest amount of
changes comes from function expressions now having a space. This doesn't
have an option to preserve the old behavior, so we have to update this.
2023-01-31 08:25:05 -05:00
Brian Vaughn
d483463bc8 Updated scripts and config to replace "master" with "main" branch (#21768) 2021-06-29 14:26:24 -04:00
Saikat Guha
4eb589169c DevTools: Handle restricted browser pages properly like new tab page, extensions page etc(only chrome and edge for now) (#20023) 2020-10-14 13:59:05 -04:00
Saikat Guha
f46a80ae11 Update outdated links and fix two broken links (#19985)
* update all facebook.github.io links

* facebookincubator links : update some outdated links and fix two other broken links where they are actually the latest updated ones
2020-10-09 02:56:30 +01:00
ᴜɴвʏтᴇ
24f1923b1b fix: open two same tabs on firefox (#19632)
close #19629
2020-08-18 10:17:00 -04:00
Liad Yosef
c317fc273b Correct link for troubleshooting react-dev-tools (#16690) (#16708)
* Correct link for troubleshooting react-dev-tools (#16690)

As pointed out in #16690 - the link for 'React Tab Doesn't Show Up' points to the empty README.MD.
This points it to that section in the v3 version README.MD - until an updated section will be added to the new dev-tools.

* Add a "The React Tab Doesn't Show Up" section

Add the troubleshooting section to the react dev tools readme

* point to the correct section in react-dev-tools readme

After adding the troubleshooting section to the readme - this will point to the correct place

* Moved README file to GitHub

* Update new issue link to include DevTools label
2019-09-10 13:14:19 -07:00
Brian Vaughn
9d4fd7a249 Merged changes from 4.0.5 -> 4.0.6 from DevTools fork 2019-08-26 10:12:18 -07:00
Brian Vaughn
ac2e861fbe Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00