Martin has explained more about how he would like the panel layout to work:

Docked to bottom toolbox:

• on first run, all 3 panels should take up exactly 1/3 in width (equal size)
• when the user resizes, then sizes should be saved so the next time devtools is opened, it will restore correctly
• when toggling between 2-pane and 3-pane mode, the right most pane should maintain it’s width as long is possible. I want people to be able to click the toggle button without it moving.
• example 1: 66%-33% => clicking the toggle => 33%-33%-33%
• example 2: 75%-25% => 50%-25%-25%
• example 3: 50%-25%-25% => 75%-25%
• example 4: 30%-70% => 30% - 35% - 35% (<= here doubling the right pane wouldn’t work, so we find better fitting sizes instead. this should happen whenever a min-width threshold for a panel can’t be kept, which I believe is 360px for the markup view. so if expanding through doubling would not manage to keep the 360px min width, we have to make it fit potentially shrinking the sizes of the right panel)
• if we want to store/restore user settings, it has to store them separate. so 60%-15%-25% => click toggle => 75%-25% => make right panel bigger to 30% => click toggle again => 55%-15%-30% (<= the right most panel should maintains new 30%, middle pane get’s user set 15% restored)

As a guiding principal, the UI control should move as little as possible around when the user clicks it, so you can quickly toggle 2-pane/3-pane on and off. it should only move if it doesn’t fit otherwise.

My take on this

On first run, all 3 panels should take up exactly 1/3 in width (equal size)

Side-by-side mode

panel3width is shared between 2 and 3 panel side-by-side modes

Changing from 2 panels to 3

  if (width - panel3width - storedPanel2Width >= minPanelWidth)
    panel2width = storedPanel2Width
  else if (width - panel3width * 2 >= minPanelWidth)
    panel2width = panel3width
  else
    panel3width = width - minPanelWidth * 2
    panel2width = minWidth

Changing from 3 panels to 2

  panel1 += panel2width

Stacked Mode:

panel3height is shared between 2 and 3 panel stacked modes

Changing from 2 panels to 3

  if (height - panel3height - storedPanel2Height >= minPanelHeight)
    panel2height = storedPanel2Height
  else if (height - panel3height * 2 >= minPanelHeight)
    panel2height = panel3height
  else
    panel3height = height - minPanelHeight * 2
    panel2height = minHeight

Changing from 3 panels to 2

  panel1 += panel2height

@Martin Gabe is holding off reviewing this until we have come to some agreement on how the behaviour should be. Can you apply the patch and let us know if you like the behaviour?

Remember that as we change from one host / layout to the other the panel sizes are saved.

To reset to default you need to reset devtools.inspector.panel.sizes in about:config before opening the tools.

I was playing with it for a while and I think that storing/restoring sizes was a bad idea. The behavior can be unexpected, esp. when you work with different positions of devtools (which I for example do while using RDM).

In the video attached, you can see one of those oddities: I switch from 2pane to 3pane, and the height of the panel changes. That shouldn't happen.

I feel that we would be better of when we don't store sizes, and instead double/split the 3rd pane.

I leave the final call to Victoria :)

This build is looking good!

Yes, I agree with Martin about the 2-3pane switch going to equal double/split sizes. It seems safer, for avoiding buggy situations like in Martin's video, and I don't think people will switch between 2 and 3 pane often enough to really care about custom sizes here.

(We would still store users' sizes when opening/closing DevTools though, I assume?)

This might not be the perfect solution but it would be great to get this into Nightly so we can get feedback, especially on the 3-stack experience.

Maybe later on, I can go into the rabbit hole I started thinking about where instead of T shape we should do an F shape ;D. The middle case of T/F-shape is going to be less common so no need to block on it now.

I don't think we want to save 3 different settings for the docking modes. I believe based on the comments, we only want to save the width, height, hostType when we close. I would imagine when we resize to the thresholds that changes the mode, we would resize these panels to a reasonable default like panel 2 and 3 are both equal widths/height as we have done in the current existing 3 pane implements.

Also, the toggling behaviour from 2 to 3 pane should probably follow the existing behaviour:
If doubling the sidebar's width is less than half the toolbox's width, then make 2 sidebars of equal width.
Otherwise, make all 3 panels equal width.
https://searchfox.org/mozilla-central/source/devtools/client/inspector/inspector.js#658-690

I have updated the table according to Gabe's comments.

Looking good and I appreciate the clear names for everything :).

One thought:

Seems like 2-panel-stacked and one-over-two should be 50:50 height. Giving the markup view 66% height just seems like too much. (I do like markup having 66% width in 2-side-by-side, however. This is based on how I see the HTML, but interested in other opinions.)

In both cases: starting up those two modes, but also switching from 3-stacked, it seems like the two 'rows' should be 50% tall.

(In reply to Victoria Wang [:victoria] from comment #22)

Looking good and I appreciate the clear names for everything :).

One thought:

Seems like 2-panel-stacked and one-over-two should be 50:50 height. Giving the markup view 66% height just seems like too much. (I do like markup having 66% width in 2-side-by-side, however. This is based on how I see the HTML, but interested in other opinions.)

In both cases: starting up those two modes, but also switching from 3-stacked, it seems like the two 'rows' should be 50% tall.

I have updated the table to make 2-panel-stacked mode 50%:50%. Of course this means that we can no longer share panel 3 height between 2-panel-stacked, 3-panel-stacked and one-over-two modes.

This also means that switching between 2-panel-stacked and 3-panel-stacked modes could result in a change in panel height as per Martin's video but until we have more rounds of feedback I have added this info to the table.

Before I make any more changes I want to make sure we are all on the same page... here is what we have so far:

Save only on close.
Save height as a percentage.

@gl, @martin and @victoria As per your comments we now use this to determine some panel widths and heights:

if (panel 3 width < toolbox width / 4) then Panel 2 will open at panel 3 width else open at 33%:33%:33%

In my opinion toolbox width / 3 would be better as that would then match the 33%:33%:33% split better... 1/4 panel is not very much space.

A change in height when going from 2 panel stacked to 3 panel stacked seems ok (if required). In my video however, we're going from 2 panel stacked to one-over-two, and there should be no reason for a change in height in this case. Instead, the height should remain the same and panel 2 and 3 should get a 50%:50% side-by-side split.

As for your formula, I think it should be in thirds, too. (toolbox {width, height} / 3). As you said, it matches the split better.

(In reply to Martin Balfanz [:mbalfanz] from comment #25)

As for your formula, I think it should be in thirds, too. (toolbox {width, height} / 3). As you said, it matches the split better.

Done

There's also the case where we have open and closed the toolbox (prev width/height has been saved), and the browser was resized. I believe the existing patch saves the width/height in ratios, but I think if the panels don't fit nicely anymore, we should quickly invalidate the size of the panels we were to restore and go with the default first open sizes.

I think this sounds good - would be interested in a try .dmg so I can test it out :)

I have implemented the table according to the specifications in comment 30.

@victoria I have sent you a .dmg package over slack so if you could give it a try and leave some feedback that would be great.

@martin @gl Can you give it another whirl and give me your feedback? If you want a .dmg I can generate one for you or you could just grab one from try.

Thanks Mike! I think we're getting closer :)

Here are 3 things I noticed, see screenshot attached.

I have taken Martin's comments into account and updated the table:

Save only on close and on toggle (saving on toggle is necessary as panel 3 width is shared between two and three panel side-by-side modes).

Gave it another testing round. The docked to side issue is gone, so I think it's ready to go now :)

I have been testing this, and I think the saved dimensions requirement got misinterpreted from when I was talking about toggling between 2 to 3 pane panel and I unfortunately didn't catch it from interpreting the table.

For 3 panel side-by-side + if panel 3 dimensions saved,
"if (panel 3 width < toolbox width / 3) then Panel 2 will open at panel 3 width else open at 33%:33%:33%". This was describing the toggling behaviour from 2 to 3 panel panel.

Unless I am still mistaken from the discussions so far, I think we still want to restore the previous dimensions when we reopen the toolbox.

Gonna throw a needinfo to Martin to check.

Yes, I agree. When closing/reopening the toolbox we want to restore the previous dimensions.

I know we had this discussion briefly on Slack, and you referred to a comment of me saying that restoring should not happen. I think you meant comment 17. Looking at the comment again I was talking about toggling between 2pane/3pane modes, not opening/closing the toolbox. Sorry about the confusion :(

So just to confirm this before I make any changes:

1. When toggling between 2 and 3 panel side-by-side modes you want panel2 width to match panel3 width when it can.
2. When panel2 or panel3 have been resized if we open in 3 panel side-by-side mode we should restore both panel's previous sizes.

1. When toggling between 2 and 3 panel side-by-side modes you want panel2 width to match panel3 width when it can.

Yes.

2. When panel2 or panel3 have been resized if we open in 3 panel side-by-side mode we should restore both panel's previous sizes.

Not sure I fully understand this, so here's my attempt: If I close and reopen devtools I want to see the exact same again, that means the same layout (2 vs 3 pane) with the same sizes I set before closing devtools.

Hope that helps!

Depends on D20812

The following patches are waiting for review from an inactive reviewer:

:miker, could you please find another reviewer or abandon the patch if it is no longer relevant?

For more information, please visit auto_nag documentation.