1754368 - "Block" and "Resend" buttons don't have the same padding

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: CleanShot 2022-02-09 at 08.08.46.png

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

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

This looks like good firs bug

Padding of the Block button can be customized here:
https://searchfox.org/mozilla-central/rev/b697834e78a3ef7613e2fa57c07624b1d9d1c909/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css#26

Comment 2

[Arpit Jain [:osBins]]

Hey, I would like to work on this issue!

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Assigned to you, thank you for helping.

Comment 4

[Arpit Jain [:osBins]]

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.

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

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(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)

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

Comment 6

[Arpit Jain [:osBins]]

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

Comment 7

[Arpit Jain [:osBins]]

Attachment: Bug 1754368 - fixed network-monitor block button padding. r=Honza

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(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!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/78d918ef82ba
fixed network-monitor block button padding. r=Honza

Comment 10

[Iulian Moraru]

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

Comment 11

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2022-02-08 Nightly build on macOS 11. I can confirm this is fixed on Firefox 99.0b8(20220328190900) and Nightly 100.a1(20220328213646) on macOS 11, Win10 64-bits and Linux x86_64(Ubuntu 20.04)