[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.

[harrygz889]

Hi! I'm interested in working on this as a first contribution.

Is the intention to pass the icon to create() only when Focus Mode is enabled, or to unconditionally pass the icon if the browser isEdge?

[DiegoCascavita]

After looking into the issue, I found that the reason the icon was omitted is because Firefox was 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. However, Edge DevTools now 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.

To solve this issue, I propose that we add an icon URL as the second argument to the chrome.devtools.panels.create() function and replace the emoji in the panel title with the desired text

[yanlingwang23]

Hi Diego, thanks for looking into this. Yes, you are right about the icon. But we're good with the current panel title since we still have the default UI that does not support the icon. I think Harry is working on this and has a PR out, I've left a few comments there. Thank you all for looking into this issue.

[shubham-singh-748]

is it still open if yes i want to work on this

[harryzumwalt-wk]

@yanlingwang23 Thanks for the feedback. I have updated the PR.

[chaithraramesh31]

@harryzumwalt-wk Would it be possible for you to show me how you are working on this issue? I'm new to open source contributions and would like to learn more about the process.

[harrygz889]

@chaithraramesh31 You can look at the PR linked in this issue to see the work I’ve done. I recommend reading the contribution docs that are referenced in the README. There is also this video, which shows how some of the key internals work.

[itsnoa04]

if this is taken can you guys change the tag to good-first-issue (taken)

[mondaychen]

Resolved with #26543
Thanks for the contribution @harrygz889