Closed Bug 1503554 Opened Last year Closed Last year

Network header tab does not work in small viewport heights

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(firefox65 verified)

VERIFIED FIXED
Firefox 65
Tracking Status
firefox65 --- verified

People

(Reporter: Harald, Assigned: lba_2)

References

(Regressed 1 open bug)

Details

Attachments

(3 files)

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

AR: Can't scroll or reach header section
Attached image 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
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
@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
Can you please assign me to this bug? thanks,
Lenka
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
Flags: needinfo?(odvarko)
(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
Assignee: nobody → lba_2
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)
Priority: -- → P3
Network header panel now has 1 vertical scrollbar for entire area
Attachment #9024582 - Flags: review?(odvarko)
Comment on attachment 9024582 [details] [diff] [review]
header-panel-scrollbar.patch

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

Thanks for the patch!

Honza
Attachment #9024582 - Flags: review?(odvarko) → review+
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
Flags: needinfo?(lba_2)
Flags: needinfo?(lba_2)
Keywords: checkin-needed
Pushed by nerli@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/82925e53eab9
Network header panel now has 1 vertical scrollbar for entire area; r=Honza
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/82925e53eab9
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+

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]

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Regressions: 1584214
You need to log in before you can comment on or make changes to this bug.