After landing Bug 1578839, the devtools toolbox is pushed out of view depending on the size of the device we are emulating.

I'd like to remove the <stack> layout frame, which may or may not help you here. Would you be able to check with the patch from Bug 1576946 applied and see if that fixes the issue (or at least somehow changes it)?

This attachment illustrates devtools being cutoff when docked to the bottom of the browser. In some cases, its cutoff entirely depending on the height of the device being simulated.

(In reply to Brian Grinstead [:bgrins] from comment #2)

I'd like to remove the <stack> layout frame, which may or may not help you here. Would you be able to check with the patch from Bug 1576946 applied and see if that fixes the issue (or at least somehow changes it)?

Thanks, I tried this out. Unfortunately it doesn't solve the issue with the DevTools toolbox being cut off when it's docked to the bottom. However, it fixed other layout issues such as tabmodalprompt. I'll attach another screenshot for reference.

Micah, I posted a patch which seems to fix most of the layout problems for me in local testing. It switches the stack to a css grid and then resizes the <browser> element directly instead of the parent stack (which seems to fix the devtools splitter). Also the RDM iframe has 100% width regardless of the browser size. Could you take a look and see if it's working correctly?

One issue I found is if you give the RDM viewport a large width (i.e: 1024px) and dock the toolbox to the side, the splitter and toolbox end up being pushed off to the side now. Perhaps we can add 'min-width: 0` to the browser stack to fix this?
Otherwise, it's working quite well! Thank you for posting this :)

I seem to recall that one of the reasons why we choose to resize the stack was so that we'd also end up resizing the tab modal overlay for alert, prompt and confirm dialogs. Is that no longer an issue?

(In reply to Mike Conley (:mconley) (:⚙️) (Wayyyy behind on needinfos) from comment #10)

I seem to recall that one of the reasons why we choose to resize the stack was so that we'd also end up resizing the tab modal overlay for alert, prompt and confirm dialogs. Is that no longer an issue?

For RDM, we had an earlier issue that needed the stack to be resized to fix the sizing issues with the tab modal overlays (See: Bug 1585089). But it seems to be fixed by something else that had landed. Not sure what it is though.

(In reply to Micah Tigley [:mtigley] from comment #9)

One issue I found is if you give the RDM viewport a large width (i.e: 1024px) and dock the toolbox to the side, the splitter and toolbox end up being pushed off to the side now. Perhaps we can add 'min-width: 0` to the browser stack to fix this?
Otherwise, it's working quite well! Thank you for posting this :)

Yes, I suspect that would fix it. Do you want to take this patch over and make sure it's working for your needs (and then we can ask someone new who hasn't worked on it to review it)?

(In reply to Mike Conley (:mconley) (:⚙️) (Wayyyy behind on needinfos) from comment #10)

I seem to recall that one of the reasons why we choose to resize the stack was so that we'd also end up resizing the tab modal overlay for alert, prompt and confirm dialogs. Is that no longer an issue?

I did check this briefly on OSX with this patch and the overlay covers the whole area (even outside of the browser). It's a bit inconsistent with normal styling but actually doesn't look bad (I believe it looks different on each platform and may look worse depending on the styling). So we should probably try resizing that too by moving the:

height: var(--rdm-height);
width: var(--rdm-width);

rules from .browserContainer.responsive-mode > .browserStack > browser to the .browserContainer.responsive-mode > .browserStack > * rule.

(In reply to Brian Grinstead [:bgrins] from comment #12)

Yes, I suspect that would fix it. Do you want to take this patch over and make sure it's working for your needs (and then we can ask someone new who hasn't worked on it to review it)?

Sure, I can take over from here. Thanks Brian.

https://hg.mozilla.org/mozilla-central/rev/aec752727b47

https://hg.mozilla.org/integration/mozilla-inbound/rev/aec752727b47