[DevTools Bug]: provide an icon to Edge devtools?

[yanlingwang23]

Website or app

Website: https://reactjs.org/

Repro steps

1. open developer tools in Edge

2. go to settings -> experiment -> enable Focus Mode -> reload DevTools

3. we can see the react extension is loaded as below in devtools:
   

4. since the react extension doesn't provide the icon when it's created, devtools fallback to use the default icon to represent the extension. However, we've received couple of requests from users that they'd like to see the icon in the panel.
   for instance:
   

Wondering if it's possible to provide an icon to Edge in the chrome.devtools.panels.create()?
Thank you for your support.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[github-actions]

@yanlingwang23: We're sorry you've seen this error. ❤️

It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

[github-actions]

Thank you for providing repro steps! Re-opening issue now for triage.

[captainbrosset]

I was looking at the code a little bit yesterday and, as Yanling said, the React extension does not include an icon when calling chrome.devtools.panels.create() (source).

The icon was probably omitted from this line of code because Firefox was, so far, the only browser to support DevTools panel icons, but also supported using the icon defined in the manifest file if the panel icon was missing.

Now, Edge DevTools also supports icons on DevTools panels (only when Focus Mode is enabled), but does so only if the icon is passed in the create() function call.

So it'd be great if React would pass an icon there, and remove the emoji in the panel title. This way, both Firefox and Edge (Focus Mode) would have the nice icon on the DevTools panel.