516641 - Create better theme for web content form controls

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

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

The current non-native theme looks poor. We need to add styling for:
* textbox / textarea
* button
* combobox (select size=1)
* listbox (select size>1)
* radio (?)
* checkboxes (?)

Comment 1

[Madhava Enros [:madhava]]

Two questions --

1. Are we interested in having "system native" in-content controls, as we try to on desktop platforms?  Here is what controls look like in "Web" on the n900:
http://www.flickr.com/photos/madhava_work/3966664815/sizes/o/

2. If we want to create something else, do we have similar constraints, performance-wise, as with creating buttons we use in chrome?  In other words, should we be sticking to border image?

Comment 2

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

We do not want to mimic the microb ("Web") look for web form controls. We want something with a bit nicer. I personally like the look of the Linux desktop Firefox widgets or even the Windows Vista look.

We should try to make things as fast as possible. We are currently using the non-native theme for web form controls. This theme uses "border-color" and "border: inset and outset" for border styling. I don't think we want "border-image" unless we have a very hard time achieving our goals _or_ we show no performance/rendering issues.

Comment 3

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

Yeah, I know "border-image" would allow for some kick-ass theme options

Comment 4

[Madhava Enros [:madhava]]

Sean's working page:
http://mozilla.seanmartell.com/fennec/forms/

Comment 5

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: wip

This wip has some problems with:
 * radio buttons, the "dark circle" of the radio button is not centered on some pages (e.g: http://google.com)
 * buttons: The rendering is squarred on some sites (e.g: http://people.mozilla.com/~mfinkle/select.html)

Comment 6

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: wip-2

This wip add:
 * skin for all forms elements
 * as closed as possible to sean's working page
 * work on the previously mentionned select.html page

This wip missed:
 * some skin for disabled elements
 * some few bugs with the radio buttons when looking at internet
 * using images for internal of radio, checkbox, select

For the bug on radio button on google.fr I can already see it without this patch, it is just more obvious with it.

Comment 7

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: screenshot

This is pretty much like sean's mockup

Comment 8

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: wip-3

Actually theming regress performance when we're calling Browser.setVisibleRect, I'm diving into that.

Comment 9

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to comment #8)
> Created an attachment (id=433041) [details]
> wip-3
> 
> Actually theming regress performance when we're calling Browser.setVisibleRect,
> I'm diving into that.

To avoid this performance regression we should not not:
 * use different border colors for side, this mean we could use -moz-border-[tlbr]-colors: #aaaaa #bbbbb but the borders for each side should be the same

 * avoid combining -moz-border-[tlbr]-colors AND -moz-border-radius, these can be safely otherwise

This happen because if we know how exactly how to render the border it could be some optimization which is called here:
http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRenderingBorders.cpp#1070

Comment 10

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch

This new patch take into account the previous discovery and is in correlation with the new sean's mockup buttons style. Simple tests show that performance are not affected, but I will more tests to confirm that fact.

For an idea of how is it looking please see the next screenshot.
Feedback are welcome.

Comment 11

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: screenshot

A few webpages with forms and how they look with the new theme

Comment 12

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Sean,
I'm cc'ing because I want to keep in sync with you an have your feedback on where we are on this particular bug. A screenshot of what we can do without regressing performance is attached (I've seen your button's mockup)

Comment 13

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch

This version correct some paddings mistakes I have in the previous patch.

Sean,
can we have your opinion on the look and feel of the previous screenshot? Thanks.

Comment 14

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch

This patch implement sean's mockup style.

Comment 15

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch v0.3

Replace % per pixels where it is needed

Comment 16

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

Comment on attachment 435643 [details] [diff] [review]
Patch v0.3

Looks a lot better than our current theme _and_ very close to martell's proposal.

I think we will tweak some parts later and we need to be mindful of performance issues (pageload and zoom are possible issues)

Comment 17

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

pushed:
http://hg.mozilla.org/mobile-browser/rev/770dfc152795

Comment 18

[Aakash Desai [:aakashd]]

verified FIXED on builds:

Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.2.3pre) Gecko/20100331 Namoroka/3.6.3pre Fennec/1.1a2pre

and

Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.3a4pre) Gecko/20100331 Namoroka/3.7a4pre Fennec/1.1a2pre