How to go back to the old Responsive Design Mode interface from Firefox Quantum
The new Responsive Design Mode is significantly less usable than the old one.
There are many annoyances in the new interface, but the worst is the centring of the viewport in the window, so that when you resize it, everything moves, and you can't see how your design is responding to the new size, since _everything's_ moving. Maybe centring looks cool, but Responsive Design Mode is for designers and developers, it doesn't need to look cool, it needs to work!
You used to be able to get the old Responsive Design Mode - the one that had the viewport aligned top-left - by disabling multi-processes. This no longer works in Firefox 57.
Is there any way to get back the old Responsive Design Mode? Or, if not, configure the new one _not_ to centre the viewport in the window? I do a lot of responsive web design and development, so this is a real showstopper for me.
Thanks,
Mark
Wubrane rozrisanje
You can only get the new design when multi-process is enabled. Still works for me with multi-process disabled.
What do you see with multi-process disabled?
You can look in "Help -> Troubleshooting Information" (about:support) to see the current multi-process state.
- "Help -> Troubleshooting Information" -> "Application Basics":
Multiprocess Windows
Web Content Processes
You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.
- browser.tabs.remote.autostart = false
- browser.tabs.remote.autostart.2 = false
You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.
Tutu wotmołwu w konteksće čitać 👍 1Wšě wotmołwy (11)
Wubrane rozrisanje
You can only get the new design when multi-process is enabled. Still works for me with multi-process disabled.
What do you see with multi-process disabled?
You can look in "Help -> Troubleshooting Information" (about:support) to see the current multi-process state.
- "Help -> Troubleshooting Information" -> "Application Basics":
Multiprocess Windows
Web Content Processes
You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.
- browser.tabs.remote.autostart = false
- browser.tabs.remote.autostart.2 = false
You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.
Thanks cor-el... that does it!
I'd tried to change those preferences based on other posts, but hadn't quite got it right.
Thanks for giving such clear instructions!
Another solution is to edit userContent.css, i have created a gist for this:
https://gist.github.com/mtness/039b14943a40099fb1bc977e23cce5b3
much more usable now, no messing around with other settings.
That's a great alternative, one that doesn't require disabling multi-process windows, thanks mtness!
It fixes the problem with the resizing beautifully. Is there any way to make the background darker, too? I've heard other designers say that they find the bright white distracting.
Thanks mark, I appreciate it!
Do you mean the unused background #2A2A2E? Yes, of course - just add 'background-color: #000 !important;' to #app
The bright white in my screenshot is just the default blank html background - one could adjust that, toio, but it would affect every page.
Ah, yes, I did mean the bright white background. I can see that it wouldn't be great to change that if it would affect every page. Thanks again!
I agree that the new design lacks the functionality of the previous version.
Please see this video I've created that outlines some of the flaws:
https://www.youtube.com/watch?v=oWZ5JvDFIp8
Let me know what you think, and if any Mozilla devs are here reading this can we please bring the old version back?
At least allow for the ability to enable it if we choose.
Thank you
I have to agree with joshfromlondon's video.
I'd add that committed Firefox users like joshfromlondon and me don't want to complain, we just want Firefox to get better and better, and feel frustrated when a change like the new Responsive Design Mode makes it a whole lot less usable for us in our day-to-day work.
As Josh says in his video, the old Responsive Design Mode was so awesome!
Mark.J.J said
we just want Firefox to get better and better, and feel frustrated when a change like the new Responsive Design Mode makes it a whole lot less usable for us in our day-to-day work.
Thanks Mark!
Check out these design concepts I created today:
Image Album: https://imgur.com/a/hEtdf
Video: https://youtu.be/t9MfQKjHrmc
Let me know what you think
Wot joshfromlondon změnjeny
Hi Josh - Great work, I like it a lot. Especially your remarks on the curent state just nail it!
I just found out another annoying behavior: when switching between RDM an default view and back again, the "selected device" is forgotten and the viewport is reset to default.
It would be nice if the selected setting is saved.
One other thing is not quite clear to me yet:
How should the toolbars behave when the "rotate"-Button is clicked and the viewport expands or contracts sideways?
I will touchup my userContent to reflect your design soon - but I don't know how to update the other necessary features.
Best regards, M
Thanks M!
Yes great point about the "Last View" resetting, something I did notice as well but should have mentioned, so thank you for bringing that up. Yes absolutely the last view should take effect as it did in the previous version of RDM.
How should the toolbars behave when the rotate is pressed? The toolbar should remain fixed in the upper left, in my opinion. See attached images for examples.
In a perfect world, I'd have the new RDM look like my examples, but I do understand that's my preference and we all have unique tastes, that's why personalized options exist.
However, I do strongly believe my design concepts would be more desired by web developers. The function is there, the toolbar is bigger (yet takes up less screen real estate) and is designed for greater function in a more practical layout.
Looking forward to your userContent.css updates!
