653134 - Create Fennec Gingerbread theme

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Madhava Enros [:madhava]]

We should make design changes to the Fennec UI to better fit in on Android 2.3 (Gingerbread).

Comment 1

[Ian Barlow (:ibarlow)]

Attachment: Gingerbread UI Specs (colours and fonts)

Hi team,

Attached are a set of specs for:
* right and left bars
* options menu
* Awesomebar results pages

Still to come:
* specs for the awesomebar itself
* specs for preferences/downloads/addons
* specs for popup windows
* and of course graphic assets

Thanks!
Ian

Comment 2

[Martijn Wargers (dead)]

I don't like the arrows (which are triangles) in the right bar at all, but I guess that is normal for the Gingerbread theme?

Comment 3

[Ian Barlow (:ibarlow)]

Hi Martijn, the arrow styling is part of an overall shift we're making toward crisper, more simplified icon design on mobile. Coincidentally, this also fits in with Gingerbread's sharper and more angular graphic theme.

Having said that, I am more than willing to entertain suggestions, if you could articulate what specifically you don't like about these particular arrows.

Ian

Comment 4

[Martijn Wargers (dead)]

Well, I just like current arrows more than the triangles I'm seeing in the screenshots, that's all. But if the Gingerbread theme is using triangles, then I guess we should use them too.

Comment 5

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

Hi guys, attached is a zip file of updated gingerbread graphics. The images are named and sized as per the current version, so you should be able to just add these into your image folder and they will replace the old versions. 

Ian

Comment 6

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

Comment 7

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

Comment 8

[Ian Barlow (:ibarlow)]

Hi Mark and all, I took a look at tonight's build, it looks great! I have some layout comments below:

Awesomebar
* Remove gradient/button image from background
** Should just be solid white, with a light grey shadow band along the bottom
* When awesomebar is focused - decrease height of top shadow bar by 50%
* Change "enter search or address" text to #808080
* Adjust all/bookmarks/history/dekstop tabs so they're all the same width
* Thicken grey keyline below tabs by 50%

Left bar - tabs
* Add 50% more space between each tab
* Any chance of getting Favicons?
* add tab button - change selected state to #525252

Right bar - nav
* change selected state background to # 525252

List pages (preferences, bookmarks, etc) 
* adjust light grey subheadings so that text is legible. Using row-header-bg.png should fix this


Popover menus
* Remove gradients from menu background
* Update styling of site info popover as per mocks http://www.flickr.com/photos/61892693@N03/5726890406/in/photostream

Dialog boxes
* Left-align headings

Text Buttons
* reduce text size by 10%
* increase left and right text padding by 200%

Thanks!
Ian

Comment 9

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

Updated assets attached here. The previous set had some transparency issues that would have caused problems. 

Also, Martijn's comment about the back/forward arrows got me thinking, and I did some more research into gingerbread UI elements and android elements in general. Typically it seems that the more open arrows (like in our current version of fennec) are more of an android standard, and the closed triangles are more of an iOS thing (which may explain why I personally prefer them). So to keep our Android friends feeling happy, I have gone back to open arrows, and just trimmed down a bit of the bulkiness they had previously. They are also included in this updated attachment. :)

Ian

Comment 10

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

Some more graphics updates to fix banding issues and generally make things look better: 

NOTE: There are some new assets that don't exist in the current build:
urlbar-default.png
urlbar-active.png

Other ipdates include cleanups to
* endcap states
* list headers
* toggles
* tab backgrounds
* tab close buttons
* right/left popover arrow

Comment 11

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

(In reply to comment #8)

> Awesomebar
> * Remove gradient/button image from background

done

> ** Should just be solid white, with a light grey shadow band along the bottom

not sure what you mean

> * When awesomebar is focused - decrease height of top shadow bar by 50%

not sure what you mean

> * Change "enter search or address" text to #808080

done

> * Adjust all/bookmarks/history/dekstop tabs so they're all the same width

separate bug

> * Thicken grey keyline below tabs by 50%

done

> Left bar - tabs
> * Add 50% more space between each tab

haven't done this yet. the spacing might change the number of thumbnails we can see in a column

> * Any chance of getting Favicons?

not yet. too much work outside of theming

> * add tab button - change selected state to #525252

done

> Right bar - nav
> * change selected state background to # 525252

done

> List pages (preferences, bookmarks, etc) 
> * adjust light grey subheadings so that text is legible. Using
> row-header-bg.png should fix this

done

> Popover menus
> * Remove gradients from menu background

done

> * Update styling of site info popover as per mocks
> http://www.flickr.com/photos/61892693@N03/5726890406/in/photostream

need some details

> Dialog boxes
> * Left-align headings

done

> Text Buttons
> * reduce text size by 10%

done

> * increase left and right text padding by 200%

made the min-width 200% larger

Comment 12

[Ian Barlow (:ibarlow)]

Attachment: Graphic assets for gingerbread update

NEW, larger assets (46x46) for checkbox: check-selected-46.png and check-unselected-46.png

I would prefer to use these, but just in case we need them somewhere, i've attached smaller versions (30x30) as well.

Other updates include
- tweaks to tab close buttons
- tweaks to url stop button
- tweaks to alert menu icons

Comment 13

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

Attachment: patch - full patch

This is the full patch. It is very hard to review the CSS since the 2 files, browser.css and platform.css, are both new. I will upload an interdiff patch for those two files.

I removed and added a few images (look in jar.mn) - the rest are just style change images. The only image that changed size was the check-selected / check-unselected image. They went from 30px to 46px. The a few places we can see the checkbox look fine.

Comment 14

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

Attachment: interdiff of the css files

Just to help you review, here is the interdiff between the old theme and new theme.

Comment 15

[Matt Brubeck (:mbrubeck)]

Comment on attachment 534096 [details] [diff] [review]
patch - full patch

Some new files are missing from the patch:

gingerbread/notification.css
gingerbread/images/popup-bg-hdpi.png
gingerbread/images/check-selected-46.png
gingerbread/images/check-unselected-46.png
gingerbread/images/check-unselected-46.png
gingerbread/images/panelrow-active-hdpi.png
gingerbread/images/panelrow-default-hdpi.png
gingerbread/images/panelrow-selected-hdpi.png
gingerbread/images/sidebarbutton-active-hdpi.png


> % skin browser classic/1.0 %skin/gingerbread/ os=Android osversion=2.3 osversion=2.3.3 osversion=2.3.4

While it's not introduced by this patch, this line worries me.  The Firefox theme will suddenly revert to Froyo-style as soon as the user receives a newer version of Gingerbread, unless we commit to shipping a quick fix anytime a vendor introduces a new Android 2.3.x version.

I guess the long term solution is bug 380401 or its successor.  But for the short term, maybe we should add flags for 2.3.5, 2.3.6, etc. ahead of time. Or would this work for now?

% skin browser classic/1.0 %skin/             os=Android osversion<2.3
% skin browser classic/1.0 %skin/gingerbread/ os=Android
% skin browser classic/1.0 %skin/honeycomb/   os=Android osversion>=3.0

Comment 16

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

(In reply to comment #15)
> Comment on attachment 534096 [details] [diff] [review] [review]
> patch - full patch
> 
> Some new files are missing from the patch:
> 
> gingerbread/notification.css

This shouldn't added. I'll fix the jar.mn

> gingerbread/images/check-selected-46.png
> gingerbread/images/check-unselected-46.png

These need to be added

> gingerbread/images/popup-bg-hdpi.png
> gingerbread/images/panelrow-active-hdpi.png
> gingerbread/images/panelrow-default-hdpi.png
> gingerbread/images/panelrow-selected-hdpi.png
> gingerbread/images/sidebarbutton-active-hdpi.png

These are not needed in gingerbread

> > % skin browser classic/1.0 %skin/gingerbread/ os=Android osversion=2.3 osversion=2.3.3 osversion=2.3.4
> 
> While it's not introduced by this patch, this line worries me.  The Firefox
> theme will suddenly revert to Froyo-style as soon as the user receives a
> newer version of Gingerbread, unless we commit to shipping a quick fix
> anytime a vendor introduces a new Android 2.3.x version.
> 
> I guess the long term solution is bug 380401 or its successor.  But for the
> short term, maybe we should add flags for 2.3.5, 2.3.6, etc. ahead of time.
> Or would this work for now?
> 
> % skin browser classic/1.0 %skin/             os=Android osversion<2.3
> % skin browser classic/1.0 %skin/gingerbread/ os=Android
> % skin browser classic/1.0 %skin/honeycomb/   os=Android osversion>=3.0

We can try this approach

Comment 17

[Matt Brubeck (:mbrubeck)]

(In reply to comment #16)
> > gingerbread/images/popup-bg-hdpi.png
> > gingerbread/images/panelrow-active-hdpi.png
> > gingerbread/images/panelrow-default-hdpi.png
> > gingerbread/images/panelrow-selected-hdpi.png
> > gingerbread/images/sidebarbutton-active-hdpi.png
> 
> These are not needed in gingerbread

They need to be removed from jar.mn then.

Comment 18

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

(In reply to comment #16)

> > % skin browser classic/1.0 %skin/             os=Android osversion<2.3
> > % skin browser classic/1.0 %skin/gingerbread/ os=Android
> > % skin browser classic/1.0 %skin/honeycomb/   os=Android osversion>=3.0
> 
> We can try this approach

Actually, this won't work. Both froyo and gingerbread will be active. We can add more osversions as needed, up until Fx6 goes to beta. Then we can add an extra, if we want. We are only ever 6 weeks from an update.

Comment 19

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

Attachment: full patch v2

Adds the check-*-46.png images
Removes the unused images from the jar.mn

Comment 20

[Matt Brubeck (:mbrubeck)]

Comment on attachment 534466 [details] [diff] [review]
full patch v2

>-  skin/honeycomb/images/popup-bg-hdpi.png             (honeycomb/images/popup-bg-hdpi.png)

Accidentally removed the honeycomb version instead of gingerbread.

Aside from that, looks good to me... I'm still worried about the long-term maintainability of this approach.  Maybe as a followup we could generate both core/browser.css and gingerbread/browser.css from the same source file with different defines.inc?

Comment 21

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

(In reply to comment #20)

> Aside from that, looks good to me... I'm still worried about the long-term
> maintainability of this approach.  Maybe as a followup we could generate
> both core/browser.css and gingerbread/browser.css from the same source file
> with different defines.inc?

I do want to backport the defines to the froyo theme. We can certainly look into any and all ways to make maintenance easier. Desktop uses this approach for Windows (normal and aero) themes. I wonder if they have any pain points we should be aware of now.

Comment 22

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

pushed:
http://hg.mozilla.org/mozilla-central/rev/208d28e29a0a

Open new bugs for any tweaks

Comment 23

[Tony Chung [:tchung]]

Verified fix on Nexus S, 2.3.3. Mozilla/5.0 (Android; Linux armv71; rv:7.0a1) Gecko/20110527 Firefox/7.0a1 Fennec/7.0a1

Also verified no theme changes to Xoom Tablet, 3.1.

Comment 24

[Paul [pwd]]

I'm not sure where this would go, but we've adopted a funky colour scheme on the bookmarks which doesn't match the rest of the awesome screen. Also the preferences seem to be using a high-contract colour scheme which is incredibly harsh when going from a light web page. Can we not simply use something more akin to the OS? i.e. white tick-boxes rather than green?

Comment 25

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

(In reply to comment #24)
> I'm not sure where this would go, but we've adopted a funky colour scheme on
> the bookmarks which doesn't match the rest of the awesome screen. Also the
> preferences seem to be using a high-contract colour scheme which is
> incredibly harsh when going from a light web page. Can we not simply use
> something more akin to the OS? i.e. white tick-boxes rather than green?

It's bug 660570