See attachment.
Block should have more padding, to match what we have in Resend

Hey, I would like to work on this issue!

Assigned to you, thank you for helping.

Hey I ran into an issue while working on this problem and I have a few other doubts. I hope you can clear them up for me.

Current issue related -

1. I added a red border to the specified selector

https://searchfox.org/mozilla-central/rev/b697834e78a3ef7613e2fa57c07624b1d9d1c909/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css#26
but in addition to applying the border just to the 'block' and 'resend' buttons, it applies this border to all the 'question mark' icons in 'Status' and under 'response headers' and 'request headers' too. (link to image showing the same- https://paste.pics/G1EWF).
How do I select just the 'block' button since it needs to be resized to match the 'resend' button's padding?

Development related -
2. According to the firefox-source documentation at here, if I make changes to the CSS, I just need to restart devtools in order to see the changes I make. However simply restarting devtools (or even the locally built Nightly) the changes don't show up until I rebuild it using mach build.

1. The rebuild takes up to 2 minutes. Do builds usually take this much time or am I doing something wrong?

Also, I stand to be corrected in case I have violated any Bugzilla comment etiquettes. Thank you.

(In reply to Arpit Jain from comment #4)

but in addition to applying the border just to the 'block' and 'resend' buttons, it applies this border to all the 'question mark' icons in 'Status' and under 'response headers' and 'request headers' too. (link to image showing the same- https://paste.pics/G1EWF).
How do I select just the 'block' button since it needs to be resized to match the 'resend' button's padding?

I see, you can create a new selector targeting specifically the Block button using ID:

.network-monitor .headers-panel-container #block-button.devtools-button {
  border: 1px solid red;
}

Development related -
2. According to the firefox-source documentation at here, if I make changes to the CSS, I just need to restart devtools in order to see the changes I make. However simply restarting devtools (or even the locally built Nightly) the changes don't show up until I rebuild it using mach build.

Yes, you need to rebuild, the doc is obsolete. I filed bug 1755656 to fix this.
(please, let me know if you are interested in fixing it, thank you)

1. The rebuild takes up to 2 minutes. Do builds usually take this much time or am I doing something wrong?

Use mach build faster

Honza

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #5)

(In reply to Arpit Jain from comment #4)

but in addition to applying the border just to the 'block' and 'resend' buttons, it applies this border to all the 'question mark' icons in 'Status' and under 'response headers' and 'request headers' too. (link to image showing the same- https://paste.pics/G1EWF).
How do I select just the 'block' button since it needs to be resized to match the 'resend' button's padding?

I see, you can create a new selector targeting specifically the Block button using ID:

.network-monitor .headers-panel-container #block-button.devtools-button {
  border: 1px solid red;
}

Understood, thank you!
Is there a resource I could've referred to in order to find out the Block button ID and other similar parts?

Development related -
2. According to the firefox-source documentation at here, if I make changes to the CSS, I just need to restart devtools in order to see the changes I make. However simply restarting devtools (or even the locally built Nightly) the changes don't show up until I rebuild it using mach build.

Yes, you need to rebuild, the doc is obsolete. I filed bug 1755656 to fix this.
(please, let me know if you are interested in fixing it, thank you)
Gladly. I'll comment on the bug for the same.

(In reply to Arpit Jain [:osBins] from comment #6)

Is there a resource I could've referred to in order to find out the Block button ID and other similar parts?

You can use Browser Toolbox (a tool for debugging Firefox UI including Firefox DevTools)
https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

Gladly. I'll comment on the bug for the same.

Thank you!

https://hg.mozilla.org/mozilla-central/rev/78d918ef82ba