1385742 - Dev tools network monitor header wraps strangely when too narrow

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Rhys Powell]

Attachment: Screen Shot 2017-07-31 at 10.03.41 am.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170730100307

Steps to reproduce:

Opened the Network Monitor when the dev tools panel was docked to the side and quite narrow


Actual results:

in the 'header' section allowing you to filter to specific request / response types, the label for the 'disable cache' checkbox wraps strangely, causing the header to grow taller


Expected results:

The header should properly lay itself out at smaller widths, perhaps wrapping items onto another line.

Comment 1

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

Thanks for the report, agree the wrapping-layout logic should be fixed here.

Honza

Comment 2

[Xavier ALT [:dex]]

I'm interested in working on this ticket ? where do I start?

Comment 3

[Xavier ALT [:dex]]

Attachment: fix-netmonitor-filter-button-style-to-wrap.patch

Allowing network monitor filter buttons to wrap.

Comment 4

[Xavier ALT [:dex]]

Attachment: Bug 1385742 - Network monitor: allow filter buttons to wrap, avoid disable cache label to wrap

Review commit: https://reviewboard.mozilla.org/r/169236/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/169236/

Comment 5

[Tim Nguyen :ntim]

Attachment: Screenshot of patch

Thanks for the patch!

It's a definite improvement, however the original issue (about "Disable Cache" moving to a new line) doesn't seem to be fixed.

Can you add a white-space: nowrap; to the checkbox label to fix that?

Comment 6

[Tim Nguyen :ntim]

Comment on attachment 8897943 [details]
Bug 1385742 - Network monitor: allow filter buttons to wrap, avoid disable cache label to wrap

https://reviewboard.mozilla.org/r/169236/#review174860

Comment 7

[Xavier ALT [:dex]]

Comment on attachment 8897943 [details]
Bug 1385742 - Network monitor: allow filter buttons to wrap, avoid disable cache label to wrap

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/169236/diff/1-2/

Comment 8

[Xavier ALT [:dex]]

Hi Tim, I've update the commit/review to avoid "disable cache" label to wrap, should I change something else ?

Comment 9

[Tim Nguyen :ntim]

Comment on attachment 8897943 [details]
Bug 1385742 - Network monitor: allow filter buttons to wrap, avoid disable cache label to wrap

https://reviewboard.mozilla.org/r/169236/#review175046

Thanks!

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0db049b28c65
Network monitor: allow filter buttons to wrap, avoid disable cache label to wrap r=ntim

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/0db049b28c65

Comment 12

[Azmina]

I have reproduced this bug with 56.0a1 (2017-07-30) on Windows 7(64 Bit!)

This bug's fix is now verified on Latest Beta.

Build ID : 20171016185129
User Agent : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:57.0) Gecko/20100101 Firefox/57.0