1503554 - Network header tab does not work in small viewport heights

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[:Harald Kirschner :digitarald]

STR:
- Resize network panel to small height and open sidebar.

AR: Can't scroll or reach header section

Comment 1

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

Attachment: image.png

See the attached screenshot, showing the problem.

The top section with data doesn't have scrollbar.

One way to fix this issue is turning the entire area of the Headers panel into an Accordion with the following (expandable/collapsible) sections and one scrollbar:

* General: this would contain the info now available at the top of the panel (URL, method, address, status code, version, etc.)
* Request Headers
* Response Headers

The current 'Filter headers' input field would have to be part of a section. I.e. the 'Request Headers' and 'Response Headers' sections would have its own filter.

Honza

Comment 2

[Lenka Pelechova]

Attachment: scrollbar in headers section

Comment 3

[Lenka Pelechova]

Hi everyone, 
I wanted to look at this bug but now wonder if it is really a bug to be considered. 
These are my thoughts:

- if a developer is working with Network panel, he knows what sections in header are available even when they are not seen. He/she can adjust the window accordingly to make it bigger to see what he needs to see. If it's not possible on the page that's being inspected, developer can dock the devtools to the right/left or even have a separate window to freely move around and have it then bigger to see everything.

- there are other things in devtools not showing when we resize to really small (width/height) e.g. the list of filtering options for requests (All, html, .... other) and I think it's normal :-) when we resize so small.

- I looked at google chrome and seems to also be hiding things once the window is too small

- @Honza, the screenshot that doesn't show the header (attachement 9023900) - I tried it and the section doesn't show the scrollbar because all the data is still visible. 'Version:' is the last data in that section. Once I tried going even smaller in size, the scrollbar correctly appeared. See attachment. 

So please consider the points above and correct me if I am wrong. I am new :-)
thanks,
Lenka

Comment 4

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

@Lenka, in order to make the work on this bug simple, let's just fix the CSS (specifically y-overflow prop) and make sure that the panel has just one v-scrollbar used for the entire area. 

Use the Browser Toolbox to inspect the UI
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Disable all y-overflow: auto and than create one on the `panel-container` element (note that there is yet one panel-container element inside, so you might use different class name)

Honza

Comment 5

[Lenka Pelechova]

Can you please assign me to this bug? thanks,
Lenka

Comment 6

[Lenka Pelechova]

Hi Honza,
panel container already has overflow-y: auto
so all I needed to do to get just one scrollbar was to disable overflow-x: hidden and overflow-y: auto
in the section 'properties-view'

.network-monitor .properties-view {
  display: flex;
  flex-direction: column;

remove --> overflow-x: hidden;
remove --> overflow-y: auto;
}


I want to ask if both bugs (this one and Bug 1506073) can be done in one patch should they both modify the same file. Or should I generate a patch separately.
thanks,
Lenka

Comment 7

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

(In reply to lba_2 from comment #6)
> Hi Honza,
> panel container already has overflow-y: auto
> so all I needed to do to get just one scrollbar was to disable overflow-x:
> hidden and overflow-y: auto
> in the section 'properties-view'
> 
> .network-monitor .properties-view {
>   display: flex;
>   flex-direction: column;
> 
> remove --> overflow-x: hidden;
> remove --> overflow-y: auto;
> }
Sounds great! Can you please attach a patch, so I can apply it
to the source code and test on my machine?

> I want to ask if both bugs (this one and Bug 1506073) can be done in one
> patch should they both modify the same file. Or should I generate a patch
> separately.
The bug 1506073 should have its own patch.

Thanks!
Honza

> thanks,
> Lenka

Comment 8

[Lenka Pelechova]

Attachment: header-panel-scrollbar.patch

Network header panel now has 1 vertical scrollbar for entire area

Comment 9

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

Comment on attachment 9024582 [details] [diff] [review]
header-panel-scrollbar.patch

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

Thanks for the patch!

Honza

Comment 10

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

The patch is ready to land and you need to set `checkin-needed` keyword, so one of the sheriffs can land it for us.

Thanks!
Honza

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/82925e53eab9
Network header panel now has 1 vertical scrollbar for entire area; r=Honza

Comment 12

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/82925e53eab9

Comment 13

[Sajedul Islam]

I have reproduced this bug with Nightly 65.0a1 (2018-10-31) on Windows 10, 64 Bit!

This bug's fix is verified with latest Beta 65.0b10!

Build ID - 20190110221328
User Agent - Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

[testday20190111]

Comment 14

[Daniel Cicas [:dcicas], Release QA]

I reproduced this issue using Fx 65.0a1, build ID: 20181031223503, on Windows 10 x64 and Ubuntu 18.04.1 LTS.

I can confirm this issue is fixed, I verified using Fx 65.0b12, build ID: 20190117232427, on Windows 10 x64 and Ubuntu 18.04.1 LTS.