1594489 - Inspector does not respect panel layout

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Shane]

Attachment: devtools.jpg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

Dock the inspector to the right with html and css open. They are split vertically (html on top and css below it) - when the panel is resized at a certain width the css splits to the right of the html instead of staying below it.

Actual results:

The html and css did not stay split vertically (html on top and css below it). They instead became to very small columns side by side instead of staying in a single column split horizontally - html on top and css below it.

Expected results:

The HTML should always stay on top and the css should always stay below it.
Toggle Option would be nice to change how panels splits and resize. The vertical 2-column split makes the rules very hard to read and is disorienting when trying to look at a wide view of html and having the css "snap-in" next to it in a column, effectively making the html view smaller and impossible to read.

The image attached shows what is happening (left) and what should happen regardless of devtools width (right).

An option or toggle would be nice ("Lock devtools panel layout" or "Single column with horizontal split panels")

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Patrick Brosset <:pbro>]

Thanks for filing. I've heard the same feedback before. It's interesting because the logic right now is such that the inspector tries to adapt to whatever real estate is available and make the most of it. That's why it decide on its own to either stack things vertically or horizontally. Related to this: in 3-panel mode, we're making changes right now so it would switch from 3 rows (if very narrow), to 1 row on top and 2 columns below (if somewhat narrow), all the way to 3 columns (if very wide). But what you're saying is, on contrary, that you do not necessarily want things to change on their own while you are resizing.
And I have to admit I've myself also been frustrated by this when I'm used to a certain layout (say everything in columns) and I just want to make devtools bigger for some time but keep that layout. Well after some point things jump to another layout and I have to get used to the way things look now.
So an option or toggle might indeed make sense.

Martin: maybe some new food for thoughts to consider while we're working on this 3-panel layout.

Comment 3

[Martin Balfanz [:mbalfanz]]

That's a good idea. We've struggled quite a bit to find a good solution, so giving the user the option to control the layout sounds like a good idea to me 👍