Browser stack pushes subsequent siblings out of viewport area
Categories
(DevTools :: Responsive Design Mode, defect, P1)
Tracking
(firefox72 fixed)
| 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)
devtools_cutoff.png
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 1•5 years ago
|
||
After landing Bug 1578839, the devtools toolbox is pushed out of view depending on the size of the device we are emulating.
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
||
Comment 2•5 years ago
|
||
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)?
|
|
Assignee | |
Comment 3•5 years ago
|
||
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.
|
|
Assignee | |
Comment 4•5 years ago
|
||
(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.
|
|
Assignee | |
Comment 5•5 years ago
|
||
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 6•5 years ago
|
||
|
|
||
Comment 7•5 years ago
|
||
|
|
||
Comment 8•5 years ago
|
||
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?
|
|
Assignee | |
Comment 9•5 years ago
|
||
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 :)
|
||
Comment 10•5 years ago
|
||
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?
|
|
Assignee | |
Comment 11•5 years ago
|
||
(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,promptandconfirmdialogs. 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.
|
|
||
Comment 12•5 years ago
|
||
(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)?
|
|
||
Comment 13•5 years ago
|
||
(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,promptandconfirmdialogs. 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.
|
|
Assignee | |
Comment 14•5 years ago
|
||
(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.
|
||
Updated•5 years ago
|
|
||
Comment 16•5 years ago
|
||
Pushed by mtigley@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/aec752727b47 Make RDM browser <stack> use CSS Grid r=mconley,gl
|
||
Comment 17•5 years ago
|
||
| bugherder | ||
|
|
||
Updated•5 years ago
|
|
||
Comment 18•5 years ago
|
||
| bugherder landing | ||
Description
•