1701566 - DevTools Netmonitor - Analyze button icon no longer centered when Search/Blocking tab opened

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Cristian Fogel [:cfogel]]

Attachment: centeNmonitor.png

Affected versions

• 88.0a1(2021-03-25); 88.0b2;

Affected platforms

• Windows 10, Ubuntu 20;

Steps to reproduce

1. Launch Firefox, enable DevTools;
2. Open the Search/Blocking tab;
3. Grab and resize either the Search/Blocking section or the browser window shrinking the width in the requests list section;

Expected result

• buttons and elements reflow as expected, elements remain centered;

Actual result

• button for Analyze shrinks in width, but the icon is not centered it remains offset to left;

Regression range

• while checking for the regression window, issue was manifesting but only with 1-3 pixels making it not as visible; range if for when it became more obvious:
• First bad: 2020-05-13;
• Last good: 2020-05-12;
• Pushlog: URL;
• potential regressor: bug 1634380 seems the likely candidate based on the pushlog;

Additional notes

• attached screenshot to best illustrate the issue.

Comment 1

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

Thanks for the report and regression window Cristian!
I can reproduce it on my machine: Win10 + Firefox Nightly

Honza

Comment 2

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

This might be a good first bug:

1. The button is rendered using React here:
   https://searchfox.org/mozilla-central/rev/d58860eb739af613774c942c3bb61754123e449b/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js#74

2. Related CSS is declared here:
   https://searchfox.org/mozilla-central/rev/d58860eb739af613774c942c3bb61754123e449b/devtools/client/netmonitor/src/assets/styles/RequestList.css#25

Honza

Comment 3

[Larissa]

Hi - May I take this one? This will be my first contribution. I took a look at the code and I think it may be an issue with the CSS.

Comment 4

[Hubert Boma Manilla (:bomsy)]

Sure! Assigned to you.
Feel free to ask any questions if you need help.

Comment 5

[Larissa]

Thanks! I have a fix working and am ready to commit it. Is it correct to set the reviewer=Honza in the commit message?

Comment 6

[Hubert Boma Manilla (:bomsy)]

(In reply to Larissa from comment #5)

Thanks! I have a fix working and am ready to commit it. Is it correct to set the reviewer=Honza in the commit message?

Yes that's correct. You can also send review to me if you like i.e reviewer=bomsy

Comment 7

[Larissa]

Attachment: Bug 1701566 - Removed flexbox from outer div (.notice-perf-mesage). r?bomsy,Honza

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bbfd6d1b4f05
Removed flexbox from outer div (.notice-perf-mesage). r=bomsy,Honza

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/bbfd6d1b4f05

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Does this need a Beta approval request?

Comment 11

[Hubert Boma Manilla (:bomsy)]

Hey Ryan,
No not critical. Thanks

Comment 12

[Giorgia Nichita, Release Desktop QA]

Hello,
I have reproduced the issue using STR from comment 0, on an affected Nightly build 2021-03-25.

The fix was verified using the latest Nightly (20210507095221) and Firefox 89.0b9 (2021-05-06), on both Ubuntu 20.04 and Windows 10x64.
The issue is not reproducing anymore.

Thanks!