Closed Bug 1585080 Opened 5 years ago Closed 4 years ago

Browser stack pushes subsequent siblings out of viewport area

Categories

(DevTools :: Responsive Design Mode, defect, P1)

defect

Tracking

(firefox72 fixed)

RESOLVED FIXED
Firefox 72
Tracking Status
firefox72 --- fixed

People

(Reporter: mtigley, Assigned: mtigley)

References

(Blocks 1 open bug)

Details

(Whiteboard: fission-rdm-mvp)

Attachments

(3 files, 1 obsolete file)

No description provided.
Summary: Browser stack pushes devtools iframe out of viewport → Browser stack pushes devtools iframe out of viewport area

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

Priority: -- → P3
Priority: P3 → P2
Whiteboard: fission-rdm-mvp
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Priority: P2 → P1

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)?

See Also: → 1576946
Attached image devtools_cutoff.png

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.

Summary: Browser stack pushes devtools iframe out of viewport area → Browser stack pushes subsequent siblings out of viewport area

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?

Flags: needinfo?(mtigley)

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 :)

Flags: needinfo?(mtigley)

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.

Attachment #9104122 - Attachment description: Bug 1585080 - Experiment with some frontend changes to support devtools.responsive.browserUI.enabled → Bug 1585080 - Make RDM browser <stack> use CSS Grid
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/aec752727b47
Make RDM browser <stack> use CSS Grid r=mconley,gl
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72
Attachment #9102625 - Attachment is obsolete: true
Blocks: 1596047
You need to log in before you can comment on or make changes to this bug.