Created attachment 621064 [details]
screenshot of the current implementation
The initial mockup (attachment 619038 [details]) was a good start point. Now we know more about what feature we want to see in the first version of the Responsive Mode.
* we need to see the current size of the browser
* we need handles. One to resize horizontally, one to resize vertical and (optional) horizontally.
* a rotate button (or "portrait / landscape" buttons)
We also need controls for the zoom level. Changing the zoom level is needed because some resolutions won't fit in the user's screen (iPad 3 is pretty big), so we need to scale down the browser. So the size of the browser is not the "real" size anymore. The current approach is to add some zoom controls that let the user zoom in, zoom out, reset the zoom, and set the zoom to make the browser fit Firefox window. This is very confusing.
Optional: the current menulist is a simple list of sizes. It might be interesting to have a richer list that would include some icons (for example: Market place devices icons: https://marketplace-cdn.addons.mozilla.net/media/img/mkt/icons/device_icons.png)
I am considering removing the Zoom feature. See https://bugzilla.mozilla.org/show_bug.cgi?id=749628#c41
> The initial reason I added the ability to zoom was to be able to work with
> huge resolution (like the iPad 3 or the iPhone 4). But I was mistaken. iPad
> 3 hardware resolution has nothing to do with the resolution exposed by the
> browser. And I don't think making this tool work for huge screen resolution
> on small screen justifies adding confusing controls.
- I removed the zoom feature. We now only have a menulist and a rotate button.
- the presets list is actually very small, and we might want to a couple of icons instead a menulist
Created attachment 625982 [details]
screenshot of the current implementation (no zoom)
Since we removed the zoom feature, I don't think we need a new mockup. We come back to the initial idea.
I need a ui-review.
Builds will be available at http://firstname.lastname@example.org
It needs to be preffed on (devtools.responsiveUI.enabled).
We were considering having some more elaborated presets, but it sounds like we won't get anything soon. So I am thinking about preffing-on the tool with the current menu.
Basically, the screenshot represents precisely what I want to ship.
About the zoom option : I think it's a must have. My work laptop is 1366x768. When I work on protrait tablet apps I need to see the hole screen. Without zoom I can't :-(
(In reply to hsablonniere from comment #5)
> About the zoom option : I think it's a must have. My work laptop is
> 1366x768. When I work on protrait tablet apps I need to see the hole screen.
> Without zoom I can't :-(
We still don't know how to correctly expose this feature. I don't want to bother most of the user for this specific case.
For now, no zoom feature. We need some more UX and product-related work for the zoom and dpi related functionality.
Created attachment 627366 [details]
Created attachment 627369 [details]
Resize Grippy - Horizontal
Created attachment 627685 [details]
Created attachment 627686 [details]
Thank you Stephen.