1798564 - Improve thresholds for switching between horizontal and vertical layout

Status: NEW

(DevTools :: Netmonitor, enhancement)

Description

[Sebastian Zartner [:sebo]]

Attachment: Main panel too narrow.png

Currently, the thresholds for switching the side panels display within the Netmonitor to the bottom or the right are fixed. See https://searchfox.org/mozilla-central/rev/a3decf626dabd89620171f0ea7840cc4351fe218/devtools/client/netmonitor/src/components/MonitorPanel.js#52-58.

This sometimes leads to display issues regarding the main panel getting to small as described in https://stackoverflow.com/q/74140561/432681.

There are two (non-exclusive) solutions how to improve this UI:

1. Choose the thresholds dynamically depending on the width of the left and right side panels.
2. Allow users to set the thresholds manually.

This actually applies to all panels that have side panels. Though the code related to displaying side panels vertically is inconsistent at the moment. Some panels like the Netmonitor and the Inspector change the layout using thresholds set in JavaScript. Other panels like the Style Editor or the Storage Inspector use a pure CSS solution for that.

So, it might also make sense to unify those solutions first and then improve the behavior by implementing one or both of the solutions above.

Sebastian

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

note that in Bug 1602455 we could have an option for users to manually chose the horizontal/vertical layout

Comment 2

[Sebastian Zartner [:sebo]]

Do you plan to replace the automatic switching by a manual solution or will the manual solution be an additional option to the automatic behavior?

Sebastian

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

I was thinking having 3 options in the settings menu:

• auto
• horizontal
• vertical