Provide control over switching between horizontal and vertical layout in Inspector
Categories
(DevTools :: Inspector, enhancement, P2)
Tracking
(Not tracked)
People
(Reporter: sebo, Unassigned)
References
(Blocks 1 open bug)
Details
Currently, the thresholds for switching the side panels display of the Inspector to the bottom or the side are hardcoded. See https://searchfox.org/mozilla-central/rev/f1c3f57cfdddd17b0a249a9c511d1791d5edd444/devtools/client/inspector/inspector.js#92-98.
This sometimes leads to display issues regarding the main panel getting to small as described in https://stackoverflow.com/q/79174911/432681.
There are two (non-exclusive) solutions how to improve this UI:
- Choose the thresholds dynamically depending on the width of the left and right side panels.
- Allow users to set the thresholds manually.
Like noted in bug 1798564, 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•1 year ago
|
||
We would be happy with letting users manually choose their layout. It's difficult/impossible to find thresholds which work for all cases.
We can do this on a panel by panel basis, but the UX/UI should at least be done in a way that can easily apply to other panels.
Discussing quickly, at least in the inspector it's not clear where such a setting could go. So maybe a first step could be to add a devtools-wide setting to force a layout? (either in devtools settings directly or in hamburger menu?)
Description
•