Closed Bug 1754368 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(firefox99 verified)

VERIFIED FIXED
99 Branch
Tracking Status
firefox99 --- verified

People

(Reporter: nchevobbe, Assigned: osBins)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug)

Attachments

(2 files)

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.

Assignee: nobody → arpitjain.2001
Status: NEW → ASSIGNED

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!

Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/78d918ef82ba
fixed network-monitor block button padding. r=Honza
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 99 Branch
QA Whiteboard: [qa-99b-p2]

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)

Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-99b-p2]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: