475356 - revise theme for smaller screens and lower resolutions (winCE)

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Madhava Enros [:madhava]]

Attachment: mockup showing all buttons NOT AN ACTUAL SCREEN DESIGN (page content would end like that)

Devices with (a) smaller and/or (b) lower-resolution (c) portrait-as-default screens have different UI layout requirements than high-res landscape screens like the n810.  At the moment, these screens are common on winCE devices.  See this page for some discussion of the situation:

https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI/small-format

Given lower-resolution screens, where the the pixels are larger, the graphics can be smaller, in terms of pixels, while still being the same finger-touchable size (physical dimensions) as on higher-res screens (in fact, there's not room to use the same graphics as on higher-res screens).

Sean and I have come up with a revision of the Fennec working theme that is better suited to the screen on a device like the samsung i780 (320x320).  I've attached the screen design.

Slices for the actual theme will be attached to the next comment.

Comment 1

[Madhava Enros [:madhava]]

Attachment: slices for this version of the theme

Here are the PNG slices for the theme

Comment 2

[Madhava Enros [:madhava]]

And, of course, what I mean by "page content would end like that" is "page content would NOT end like that."  Basically, the mockup looks like Fennec in a non-real state -- the sidebars would not be deployed simultaneously and page content would not end abruptly when there's more to the page.  This is a composite to show all UI elements at the same time.

(In reply to comment #0)
> Created an attachment (id=358852) [details]
> mockup showing all buttons NOT AN ACTUAL SCREEN DESIGN (page content would end
> like that)
> 
> Devices with (a) smaller and/or (b) lower-resolution (c) portrait-as-default
> screens have different UI layout requirements than high-res landscape screens
> like the n810.  At the moment, these screens are common on winCE devices.  See
> this page for some discussion of the situation:
> 
> https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI/small-format
> 
> Given lower-resolution screens, where the the pixels are larger, the graphics
> can be smaller, in terms of pixels, while still being the same finger-touchable
> size (physical dimensions) as on higher-res screens (in fact, there's not room
> to use the same graphics as on higher-res screens).
> 
> Sean and I have come up with a revision of the Fennec working theme that is
> better suited to the screen on a device like the samsung i780 (320x320).  I've
> attached the screen design.
> 
> Slices for the actual theme will be attached to the next comment.

Comment 3

[Mark Finkle (:mfinkle) (use needinfo?)]

Ok, now that the dust has settled on the high-res theme, we can take a shot at the low-res theme. Our current high-res theme uses a mix of 64px and 30px images. For low-res, we want to make these 36px and 16px respectively.

Rational: The Samsung Omnia (our low-res device) has ~5.2px/mm and we want to shoot for buttons that are ~7.2mm -> 37.4px buttons. We are rounding to 36px. The 30px images on high-res are purely informational and not really for touch. 16px images should work fine on the low-res screens.

The current inventory of images can be found here:
http://mxr.mozilla.org/mobile-browser/source/themes/wince/jar.mn

Nearly all (except the favicon-fennec-30.png) can be seen here:
http://mxr.mozilla.org/mobile-browser/source/themes/wince/images/

Comment 5

[kantha kanchiraju]

Attachment: Patch for Low resolution devices

Here is a patch for the low resolution devices (omnia, ...).

browser.css for the wince theme now imports low.css and high.css. 
low.css specifies style rules for devices with width less than 400px. if the device width is greater than 400 rules from high.css get applied. CSS Media Queries are used for getting the device width information.

Comment 6

[kantha kanchiraju]

Attachment: Image slices for Low res patch

Here are images resized for low resolution devices

Comment 7

[kantha kanchiraju]

Attachment: fullscreen* images missing from earlier archive

Here are the scaled fullscreen-close-16.png and fullscreen-up-16.png's.

Comment 8

[kantha kanchiraju]

Attachment: fullscreen* images missing from earlier archive

fullscreen-*-24.png's

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 387314 [details] [diff] [review]
Patch for Low resolution devices

This is good. I had to unbitrot and add the fullscreen-* images

I'll post a patch for checkin

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch for checkin

Unbitrotted and added the fullscreen-*-24.png images and styles

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 387723 [details] [diff] [review]
patch for checkin

Carrying my r+ on Kantha's patch.

This patch is not perfect. The BookmarkList header height is not the same as the main URLBar height, which causes a visual shift.

We can handle that in a followup bug.

Comment 12

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed: http://hg.mozilla.org/mobile-browser/rev/50b6574df1ec

filed bug 503388 for followup issues

Comment 13

[Joel Maher ( :jmaher ) (UTC -8)]

verified with alpha3 winmo candidate