X
Tap here to go to the mobile version of the site.

Support Forum

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

Posted

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

Chosen solution

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.

Read this answer in context 1
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 27.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
16223 solutions 146466 answers

Chosen Solution

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.

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":<br>Multiprocess Windows<br>Web Content Processes You can disable multi-process windows in Firefox by setting these prefs to false on the <b>about:config</b> page. *browser.tabs.remote.autostart = false *browser.tabs.remote.autostart.2 = false You can open the <b>about:config</b> page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue. *http://kb.mozillazine.org/about:config
Was this helpful to you? 1
Quote

Question owner

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!

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!
Was this helpful to you?
Quote
mtness 0 solutions 3 answers

Helpful Reply

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.

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.
Was this helpful to you? 2
Quote

Question owner

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.

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.
Was this helpful to you? 1
Quote
mtness 0 solutions 3 answers

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.

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.
Was this helpful to you? 1
Quote

Question owner

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!

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!
Was this helpful to you? 1
Quote
joshfromlondon 0 solutions 8 answers

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 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 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
Was this helpful to you?
Quote

Question owner

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!

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!
Was this helpful to you? 1
Quote
joshfromlondon 0 solutions 8 answers

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

''Mark.J.J [[#answer-1073812|said]]'' <blockquote> 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. </blockquote> Thanks Mark! Check out these design concepts I created today: Image Album: [https://imgur.com/a/hEtdf https://imgur.com/a/hEtdf] Video: [https://youtu.be/t9MfQKjHrmc https://youtu.be/t9MfQKjHrmc] Let me know what you think

Modified by joshfromlondon

Was this helpful to you? 1
Quote
mtness 0 solutions 3 answers

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

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
Was this helpful to you?
Quote
joshfromlondon 0 solutions 8 answers

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!

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!
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.