Last Comment Bug 751910 - [Responsive Mode] ui review
: [Responsive Mode] ui review
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Developer Tools (show other bugs)
: Trunk
: All All
: P1 normal (vote)
: ---
Assigned To: Stephen Horlander [:shorlander]
:
Mentors:
Depends on:
Blocks: 752857
  Show dependency treegraph
 
Reported: 2012-05-04 08:47 PDT by Paul Rouget [:paul]
Modified: 2012-05-29 09:50 PDT (History)
5 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
screenshot of the current implementation (172.03 KB, image/png)
2012-05-04 08:47 PDT, Paul Rouget [:paul]
no flags Details
screenshot of the current implementation (no zoom) (315.00 KB, image/png)
2012-05-22 06:00 PDT, Paul Rouget [:paul]
no flags Details
Resize Grippy (269 bytes, image/png)
2012-05-25 14:29 PDT, Stephen Horlander [:shorlander]
no flags Details
Resize Grippy - Horizontal (174 bytes, image/png)
2012-05-25 14:30 PDT, Stephen Horlander [:shorlander]
no flags Details
ui update (31.03 KB, image/png)
2012-05-28 06:33 PDT, Paul Rouget [:paul]
no flags Details
ui update (97.44 KB, image/png)
2012-05-28 06:34 PDT, Paul Rouget [:paul]
shorlander: ui‑review+
Details

Description Paul Rouget [:paul] 2012-05-04 08:47:31 PDT
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.

Requirements:

* 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)
Comment 1 Paul Rouget [:paul] 2012-05-18 04:04:13 PDT
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.
Comment 2 Paul Rouget [:paul] 2012-05-21 09:31:20 PDT
Update:
- 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
  (see https://bugzilla.mozilla.org/show_bug.cgi?id=752473#c12)
Comment 3 Paul Rouget [:paul] 2012-05-22 06:00:02 PDT
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://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/prouget@mozilla.com-ad8943fe25ca

It needs to be preffed on (devtools.responsiveUI.enabled).
Comment 4 Paul Rouget [:paul] 2012-05-23 13:14:44 PDT
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.
Comment 5 hsablonniere 2012-05-24 15:12:54 PDT
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 :-(
Comment 6 Paul Rouget [:paul] 2012-05-24 15:55:41 PDT
(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.
Comment 7 Stephen Horlander [:shorlander] 2012-05-25 14:29:38 PDT
Created attachment 627366 [details]
Resize Grippy
Comment 8 Stephen Horlander [:shorlander] 2012-05-25 14:30:33 PDT
Created attachment 627369 [details]
Resize Grippy - Horizontal
Comment 9 Paul Rouget [:paul] 2012-05-28 06:33:42 PDT
Created attachment 627685 [details]
ui update
Comment 10 Paul Rouget [:paul] 2012-05-28 06:34:31 PDT
Created attachment 627686 [details]
ui update
Comment 11 Paul Rouget [:paul] 2012-05-29 09:50:16 PDT
Thank you Stephen.

Note You need to log in before you can comment on or make changes to this bug.