How Can We Restore The Previous Developer Responsive Design Mode in Quantum 57?
See attached image.
The previous Responsive Design Mode was great, why did it get redesigned?
Now it looks like Chrome and it's the reason why I didn't switch to Chrome...
1) Window in the top left - this allows for fluid resizing. This new centered window is very poor for resizing.
2) Dark background - much easier to focus on your content. White background is confusing.
3) Saved presets - why get rid of these? My presets are still saved in "devtools.responsiveUI.presets"
Modified by greyhood
All Replies (3)
Hi,
Sorry you don't like some of the changes to Responsive Design Mode!
If you prefer the darker background, it's easy to get this back. Just open the main Developer Tools pane (a keyboard shortcut for this is Ctrl+Shift+I), click the settings cog near the top-right of the pane and under Themes, choose Dark.
Not quite sure why you've lost your presets, but it's still possible (and easy) to set them back up. I notice they now seem to be stored in devtools.responsive.html.displayedDeviceList.
There's more info about the new tool and how to set presets here: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
Hey thanks for your help!
If you prefer the darker background, it's easy to get this back. Just open the main Developer Tools pane (a keyboard shortcut for this is Ctrl+Shift+I), click the settings cog near the top-right of the pane and under Themes, choose Dark.
Oh that's too bad, I only wanted the window background dark. I tried using the browser toolbox to find the classes and it worked for the index.css file, but when I tried pasting it into the userchrome.css it wouldn't work.
See attached image 1 for an example.
Do you know the css classe for this?
Not quite sure why you've lost your presets, but it's still possible (and easy) to set them back up. I notice they now seem to be stored in devtools.responsive.html.displayedDeviceList. There's more info about the new tool and how to set presets here: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
Ok thanks I read all of that article, but no mention how are we supposed to add our presets into that string?
If for example I add a custom size, it only shows the title in that string. See attached images.
Attached image 2 - Adding a new preset
Attached image 3 - Preset save and activated
Attached image 4 - Preset title shown in the string, but no reference to sizing. (You can also see my presets that were previously saved.)
Thank you
Modified by greyhood
You get the new design when multi-process is enabled as you can read in the article.
Maybe you previously had Legacy extensions that weren't multi-process compatible.
You can create custom settings in the responsive design mode window. You can drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions. You can edit the current value as shown and press Enter to accept the edited value and reset the RD window.
Firefox releases with multi-process enabled store device data (Add Device) in an IndexedDB SQLite database file in the object_data table as BLOB data and no longer use prefs (about:config).
- indexeddb+++fx-devtools/idb/478967115deegvatroootlss--cans.sqlite
You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> Troubleshooting Information -> Profile Directory:
Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder - http://kb.mozillazine.org/Profile_folder_-_Firefox