Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to go back to the old Responsive Design Mode interface from Firefox Quantum

more options

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

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

Valgt løsning

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.

Les dette svaret i sammenhengen 👍 1

All Replies (11)

more options

Valgt løsning

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.

more options

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!

more options

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.

more options

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.

more options

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.

more options

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!

more options

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

more options

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!

more options

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

Endret av joshfromlondon

more options

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

more options

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!