1491881 - responsive design mode needs preset browser width buttons like Chrome

Status: NEW

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[zotobi]

Attachment: What it looks like in Chrome

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Steps to reproduce:

In Firefox Developer Edition 63.0b6 (64-bit) (on macOS?), enter responsive design mode on any web page.


Actual results:

Must manually enter the width and height to what I want or select preset devices from the drop-down.


Expected results:

There should be a bar, much like in Chrome's responsive design mode, that has different widths that are easy to click. This should just change with viewport width and leave the height unaffected and they should be customizable.

This would be very helpful when working on the responsive design of a particular site. In that situation, I'm constantly testing specific browser widths to see how my changes have affected the different media query breakpoints. To not have to enter those widths over and over again, but instead to just be able to click a width from a ruler type shortcut bar would be way faster.

I've highlighted this feature in Chrome in the attached screenshot.

Comment 1

[Patrick Brosset <:pbro>]

Thanks for filing. I have a hunch this might already be tracked in another bug, but I can't find it for now, so let's keep this one.