Skip to content
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

Merged
merged 4 commits into from
Apr 11, 2023
Merged

Conversation

harrygz889
Copy link
Contributor

@harrygz889 harrygz889 commented Apr 3, 2023

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

Before Changes After Changes

@harrygz889 harrygz889 changed the title Pass icon to create method and remove emoji if edge. Provide icon to edge devtools. Apr 3, 2023
@@ -472,8 +472,8 @@ function createPanelIfReactLoaded() {
let needsToSyncElementSelection = false;

chrome.devtools.panels.create(
IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components',

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.

@yanlingwang23
Copy link

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.

@yanlingwang23
Copy link

main.js LGTM, though not sure if we need to modify the ReactVersion file, thank you!

@harrygz889
Copy link
Contributor Author

I did not modify this file directly, so I'm unsure why that occurred. It seems that must be part of some build output.

@mondaychen mondaychen self-assigned this Apr 11, 2023
@mondaychen mondaychen merged commit 5426af3 into facebook:main Apr 11, 2023
hoxyq added a commit that referenced this pull request Apr 17, 2023
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))
kassens pushed a commit to kassens/react that referenced this pull request Apr 17, 2023
<!--
  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.
-->
kassens pushed a commit to kassens/react that referenced this pull request Apr 17, 2023
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))
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
<!--
  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.
-->
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
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))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
<!--
  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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants