Closed Bug 1478162 Opened 4 years ago Closed 4 years ago

Network monitor toolbar buttons can overflow on window width around 960-1040 pixels

Categories

(DevTools :: Netmonitor, defect, P2)

defect

Tracking

(firefox63 fixed)

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: fvsch, Assigned: davidwalsh)

Details

Attachments

(3 files)

The network monitor toolbar is laid out on two rows for widths below 960px, and on a single row for widths over that.

I’m seeing the "HAR" select and sometimes the "Throttling" select overflowing to the right of the screen (in en-US locale). I wonder if the 960px breakpoint had been adjusted when the filtering feature landed?

What's more, when hovering or focusing the "Filter URLs" field, the help icon appears and makes this field (or its parent, more likely) bigger, with content shifting to the right.

Some possible solutions:

1. Change the breakpoint from 960px to a higher value, possibly 1050px.

2. For the "Filter URLs" help icon, <a class=learn-more-link> should be absolutely positioned, like its sibling <button class=devtools-searchinput-clear>.
Thank you, Florens!

David, unsure, but I thought you worked on the network toolbar redesign? How simple are the fixes for the 2 issues mentioned.
Flags: needinfo?(dwalsh)
Yep!  I'm going to check this out today.  I remember we ran into some slight layout differences between Mac and Windows so I'll check that out as well.
Flags: needinfo?(dwalsh)
Attached patch 1478162-1.patchSplinter Review
Attachment #8995272 - Flags: review?(pbrosset)
Attached image HARWidths.gif
Assignee: nobody → dwalsh
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
Comment on attachment 8995272 [details] [diff] [review]
1478162-1.patch

Review of attachment 8995272 [details] [diff] [review]:
-----------------------------------------------------------------

Tested on Windows 10, worked great for me. I see the 2 issues described in this bug fixed.
Attachment #8995272 - Flags: review?(pbrosset) → review+
Keywords: checkin-needed
Pushed by ccoroiu@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/d54bf48108b1
NetMonitor - Break to two rows earlier to prevent HAR overflow r=pbro
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/d54bf48108b1
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.