-
Notifications
You must be signed in to change notification settings - Fork 47k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide icon to edge devtools. #26543
Conversation
@@ -472,8 +472,8 @@ function createPanelIfReactLoaded() { | |||
let needsToSyncElementSelection = false; | |||
|
|||
chrome.devtools.panels.create( | |||
IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we keep the IS_EDGE here? since Edge still has the default UI that need this emoji version title.
Hi Harry, thank you so much for addressing this issue. I feel like it might be safer to limit the icon only provided for Edge cause we've no idea how's other browsers treat this api. Also left a comment there. |
main.js LGTM, though not sure if we need to modify the ReactVersion file, thank you! |
I did not modify this file directly, so I'm unsure why that occurred. It seems that must be part of some build output. |
Full list of changes (not everything included in changelog): * refactor[devtools]: copy to clipboard only on frontend side ([hoxyq](https://github.com/hoxyq) in [#26604](#26604)) * Provide icon to edge devtools. ([harrygz889](https://github.com/harrygz889) in [#26543](#26543)) * [BE] move shared types & constants to consolidated locations ([mondaychen](https://github.com/mondaychen) in [#26572](#26572)) * remove backend dependency from the global hook ([mondaychen](https://github.com/mondaychen) in [#26563](#26563)) * Replace deprecated `new-window` with `webContents.setWindowOpenHandler()` ([Willie-Boy](https://github.com/Willie-Boy) in [#26559](#26559)) * DevTools: Inline references to fiber flags ([acdlite](https://github.com/acdlite) in [#26542](#26542)) * refactor[devtools]: forbid editing class instances in props ([hoxyq](https://github.com/hoxyq) in [#26522](#26522)) * Move update scheduling to microtask ([acdlite](https://github.com/acdlite) in [#26512](#26512)) * Remove unnecessary CIRCLE_CI_API_TOKEN checks ([mondaychen](https://github.com/mondaychen) in [#26499](#26499)) * browser extension: improve script injection logic ([mondaychen](https://github.com/mondaychen) in [#26492](#26492)) * [flow] make Flow suppressions explicit on the error ([kassens](https://github.com/kassens) in [#26487](#26487))
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Addresses facebook#26352. This PR explicitly passes an icon to `chrome.devtools.panels.create()`, so that edge devtools will display the icon when in [Focus Mode](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode). <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? Passing test suite (`yarn test` & `yarn test --prod`) ✅ Passing lint (`yarn linc`) ✅ Passing type checks (`yarn flow`) ✅ **Visual Testing** Before Changes | After Changes :-------------------------:|:-------------------------: ![](https://user-images.githubusercontent.com/15645169/229591145-fe99df06-e2e3-4f21-ae31-f770d584ca6c.png) | ![](https://user-images.githubusercontent.com/15645169/229591594-26c6cbaf-f345-4367-b234-8f3c8ab3ccb1.png) <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. -->
Full list of changes (not everything included in changelog): * refactor[devtools]: copy to clipboard only on frontend side ([hoxyq](https://github.com/hoxyq) in [facebook#26604](facebook#26604)) * Provide icon to edge devtools. ([harrygz889](https://github.com/harrygz889) in [facebook#26543](facebook#26543)) * [BE] move shared types & constants to consolidated locations ([mondaychen](https://github.com/mondaychen) in [facebook#26572](facebook#26572)) * remove backend dependency from the global hook ([mondaychen](https://github.com/mondaychen) in [facebook#26563](facebook#26563)) * Replace deprecated `new-window` with `webContents.setWindowOpenHandler()` ([Willie-Boy](https://github.com/Willie-Boy) in [facebook#26559](facebook#26559)) * DevTools: Inline references to fiber flags ([acdlite](https://github.com/acdlite) in [facebook#26542](facebook#26542)) * refactor[devtools]: forbid editing class instances in props ([hoxyq](https://github.com/hoxyq) in [facebook#26522](facebook#26522)) * Move update scheduling to microtask ([acdlite](https://github.com/acdlite) in [facebook#26512](facebook#26512)) * Remove unnecessary CIRCLE_CI_API_TOKEN checks ([mondaychen](https://github.com/mondaychen) in [facebook#26499](facebook#26499)) * browser extension: improve script injection logic ([mondaychen](https://github.com/mondaychen) in [facebook#26492](facebook#26492)) * [flow] make Flow suppressions explicit on the error ([kassens](https://github.com/kassens) in [facebook#26487](facebook#26487))
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Addresses facebook#26352. This PR explicitly passes an icon to `chrome.devtools.panels.create()`, so that edge devtools will display the icon when in [Focus Mode](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode). <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? Passing test suite (`yarn test` & `yarn test --prod`) ✅ Passing lint (`yarn linc`) ✅ Passing type checks (`yarn flow`) ✅ **Visual Testing** Before Changes | After Changes :-------------------------:|:-------------------------: ![](https://user-images.githubusercontent.com/15645169/229591145-fe99df06-e2e3-4f21-ae31-f770d584ca6c.png) | ![](https://user-images.githubusercontent.com/15645169/229591594-26c6cbaf-f345-4367-b234-8f3c8ab3ccb1.png) <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. -->
Full list of changes (not everything included in changelog): * refactor[devtools]: copy to clipboard only on frontend side ([hoxyq](https://github.com/hoxyq) in [facebook#26604](facebook#26604)) * Provide icon to edge devtools. ([harrygz889](https://github.com/harrygz889) in [facebook#26543](facebook#26543)) * [BE] move shared types & constants to consolidated locations ([mondaychen](https://github.com/mondaychen) in [facebook#26572](facebook#26572)) * remove backend dependency from the global hook ([mondaychen](https://github.com/mondaychen) in [facebook#26563](facebook#26563)) * Replace deprecated `new-window` with `webContents.setWindowOpenHandler()` ([Willie-Boy](https://github.com/Willie-Boy) in [facebook#26559](facebook#26559)) * DevTools: Inline references to fiber flags ([acdlite](https://github.com/acdlite) in [facebook#26542](facebook#26542)) * refactor[devtools]: forbid editing class instances in props ([hoxyq](https://github.com/hoxyq) in [facebook#26522](facebook#26522)) * Move update scheduling to microtask ([acdlite](https://github.com/acdlite) in [facebook#26512](facebook#26512)) * Remove unnecessary CIRCLE_CI_API_TOKEN checks ([mondaychen](https://github.com/mondaychen) in [facebook#26499](facebook#26499)) * browser extension: improve script injection logic ([mondaychen](https://github.com/mondaychen) in [facebook#26492](facebook#26492)) * [flow] make Flow suppressions explicit on the error ([kassens](https://github.com/kassens) in [facebook#26487](facebook#26487))
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Addresses #26352. This PR explicitly passes an icon to `chrome.devtools.panels.create()`, so that edge devtools will display the icon when in [Focus Mode](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode). <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? Passing test suite (`yarn test` & `yarn test --prod`) ✅ Passing lint (`yarn linc`) ✅ Passing type checks (`yarn flow`) ✅ **Visual Testing** Before Changes | After Changes :-------------------------:|:-------------------------: ![](https://user-images.githubusercontent.com/15645169/229591145-fe99df06-e2e3-4f21-ae31-f770d584ca6c.png) | ![](https://user-images.githubusercontent.com/15645169/229591594-26c6cbaf-f345-4367-b234-8f3c8ab3ccb1.png) <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> DiffTrain build for commit 5426af3.
Summary
Addresses #26352.
This PR explicitly passes an icon to
chrome.devtools.panels.create()
, so that edge devtools will display the icon when in Focus Mode.How did you test this change?
Passing test suite (
yarn test
&yarn test --prod
) ✅Passing lint (
yarn linc
) ✅Passing type checks (
yarn flow
) ✅Visual Testing