708700 - Update the Navigation Bar / Header for Firefox Mobile 11

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect, P3)

Description

[Patryk Adamczyk [:patryk] UX]

Mockup of the updated navigation (url) bar / header can be found here for various various 480w / 720w ICS and pre ICS:
http://www.flickr.com/photos/patrykdesign/sets/72157628320196833/

+ bar height reduced to 64px from 80px (in the 480x8XX screen size), to maximize view port content yet still maintain a comfortable touch target of 7mm, minimum would be around 5.5mm.
+ search bar corner radius increased to complement the tab shape from FF11 desktop.
+ styling = added blue tint to the gray to make it more friendly
+ styling = added slight noise texture to combat the poor dynamic range of certain screens

A spec and further graphic assets will follow soon.

Comment 1

[Ian Barlow (:ibarlow)]

Attachment: Header specs

Specs based on 320px screens

Comment 2

[Ian Barlow (:ibarlow)]

Attachment: Header graphics for GB / Froyo

This includes updated images in mdpi/hdpi/xhdpi for the 
- main background
- tab focused / unfocused states
- urlbar focused / unfocused states

It does _not_ yet include the tab down carat, new tab icon, stop, refresh, and lock. Those will be arriving soon.

Comment 3

[Ian Barlow (:ibarlow)]

Attachment: header assets

These assets should cover the basic header for Froyo, GB, ICS and HC

note: the ICS assets are sized slightly different from the original mocks, to account for the fact that 
a. we can't get at the action bar height to change it
b. the header height changes from portrait to landscape mode. 

Will post some updated icons that match these theme tweaks tomorrow.

Comment 4

[Ian Barlow (:ibarlow)]

Attachment: Updated tab graphics

with transparent cutout, as per sriram's request

Comment 5

[Ian Barlow (:ibarlow)]

Attachment: Updated urlbar assets

transparent borders cropped out, as per sriram's request

Comment 6

[Ian Barlow (:ibarlow)]

Attachment: hdpi header assets, corrected to 63px

here you go sriram!

Comment 7

[Ian Barlow (:ibarlow)]

Attachment: New urlbar assets

These all-new assets use our new 6-folder structure to cover all android phones at mdpi/hdpi/xhdpi

MDPI 40px header (ICS landscape)
MDPI 48px header (GB / FROYO / ICS portrait)
HDPI 60px header (ICS landscape)
HDPI 72px header (GB / FROYO / ICS portrait)
XHDPI 80px header (ICS landscape)
XHDPI 96px header (GB / FROYO / ICS portrait)

Note: updated icons are also included, so let's get those in as well!

Comment 8

[Ian Barlow (:ibarlow)]

Attachment: Updated tab graphics for Sriram

Comment 9

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch

This patch replaces all the assets for the URL bar and Awesomebar.
The layout works fine on both ICS and pre-ICS.

Additional things fixed:
1. ICS showed a menu button on the "usual 3 button navigation bar" at the bottom. This has been fixed by hiding its action-bar.
2. AwesomeBar also uses action-bar to make things simpler.
3. Site security icons are updated and now they show different colors for "identified" and "verified" certificates.

The layout might need some correction on landscape mode of ICS.
Please file polish bugs for the same. I would like to take them as a separate bug as this patch is already bigger. :(

Comment 10

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch

The last patch had tab related images wrongly copied (normal and pressed states interchanged :( ). They are now fixed in this patch.

Comment 11

[Sriram Ramasubramanian [:sriram]]

Attachment: Patch

The last patch copied the images into wrong folders. This time it is perfect (I hope). :(

Comment 12

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

Comment on attachment 582060 [details] [diff] [review]
Patch

Tested OK on a few devices

Comment 14

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

https://hg.mozilla.org/integration/mozilla-inbound/rev/51e30c4e5b5d

Comment 15

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/51e30c4e5b5d

Comment 16

[Brad Lassey [:blassey] (use needinfo?)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/51e30c4e5b5d

Comment 17

[Aaron Train [:aaronmt]]

Nexus S (Android 4.0.3)
Mozilla/5.0 (Android; Linux armv7l; rv:12.0a1) Gecko/20120110 Firefox/12.0a1 Fennec/12.0a1
Mozilla/5.0 (Android; Linux armv7l; rv:11.0a1) Gecko/20120110 Firefox/11.0a2 Fennec/11.0a1