In bug https://bugzilla.mozilla.org/show_bug.cgi?id=1539344 we introduced multiple icons for the debug target depending on its type.

The size for this icons (as well for others in the DebugTargetInfo component at the about:devtools-toolbox) is 20x20 px, as appeared in the original mockups Matt made. However, most other icons on the new about:debugging are 16x16 px.

We need to decide whether we'd like to keep 20px or switch to 16px.

Matt said before he left that he wanted to go with 16px.

hi, want to work on it..
Is it open?

Hi Vishal,

Thanks for proposing to work on this, I am assigning this to you.
You can get started by reading our docs at https://docs.firefox-dev.tools/ (or ping me here with a need-info if you need any help).

Here the icons we want to modify are created by the following component: DebugTargetInfo.js

To see it in action, you can first go to about:debugging, then select "This Nightly" and click on the "Inspect" button for any of the items. It should open a new "toolbox" tab with a URL starting with "about:devtools-toolbox". The DebugTargetInfo component renders the header of this tab.

There are up to 3 icons displayed at the same time in this component:

• the connection icon
• the browser logo
• the debug target icon

I highlighted the lines where they are currently created at https://searchfox.org/mozilla-central/rev/b3fd653bc6078b3be4a8d06db39eddc5714755da/devtools/client/framework/components/DebugTargetInfo.js#154,173,189

The goal is to make the icons 16px * 16px instead of 20px * 20px. You might have to add new classnames to those images.
The CSS file to update for this component is https://searchfox.org/mozilla-central/source/devtools/client/themes/toolbox.css

Let us know if you have any question.

The bug assignee didn't login in Bugzilla in the last 7 months.
:jdescottes, could you have a look please?
For more information, please visit auto_nag documentation.