Restore Legacy Responsive Design Mode (58.0)
Hey everyone,
Just got the version 58 update.
Myself and many others are very dissatisfied with the new responsive design mode (pretty much google chrome)
In the last version we could go to > about:config > devtools.responsive.html.enabled > false
Unfortunately, this no longer works. Is there any way to restore the legacy responsive design mode?
This new RDM is not intuitive and in fact slows down productivity and lacks customization.
Previous version was great, why break it?
Gewysig op deur greyhood
All Replies (6)
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
It is gone for good in 58+.
- bug 1305777 - Remove old RDM [58]
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
cor-el said
It is gone for good in 58+.(please do not comment in bug reports
- bug 1305777 - Remove old RDM [58]
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
Guess it's time for us to move on to Chrome then...
It's been a fun 10 years Firefox. Sad to say goodbye because of these poor UI decisions.
The function is such bad judgement on whoever endorsed this new design.
I wish those involved could make a case for the benefits of this new design?
This is a great video: https://www.youtube.com/watch?v=oWZ5JvDFIp8
Some of these issues could be filed as bugs, such as losing changes on reload. Some of the others can be hacked with custom style rules in a userContent.css file, such as:
- background color
- not centering the contents
- enlarging text and buttons
- positioning the orientation button left instead of right so it doesn't move
(Example screenshot attached.)
These were the rules I came up with, but if you search around, it wouldn't surprise me if there are other examples on the web:
@-moz-document url-prefix(chrome://devtools/content/responsive.html){
div#root {
background-color: #444 !important;
}
div#app {
align-items: left !important;
padding-left: 15px;
padding-right: 15px;
}
header#global-toolbar *,
div.viewport-dimension *,
div.viewport-toolbar * {
font-size: 16px !important;
line-height: 22.4px !important;
}
select#global-network-throttling-selector {
height: 22px !important;
width: 125px !important;
}
label#global-dpr-selector {
height: 22px !important;
}
#global-toolbar > .toolbar-button::before {
width: 16px !important;
height: 16px !important;
}
div.viewport-toolbar {
height: auto !important;
}
button.viewport-rotate-button {
width: 28px !important;
height: 28px !important;
padding-top: 4px !important;
left: 0 !important;
}
button.viewport-rotate-button::before {
width: 22px !important;
height: 22px !important;
}
}
When creating your userContent.css file, do not use the HTML namespace, since this is a XUL document. You can just omit the namespace line.
In general, a better forum to pitch changes to dev tools would be: https://discourse.mozilla.org/c/devtools
In another thread, there is a link to a more comprehensive userContent.css file:
https://support.mozilla.org/questions/1197929#answer-1067233
Thanks jscher2000,
Yes I've been active in that thread as well. Getting some help from mtness to update the userContent.css file