Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 332509

Summary:

[Theming] Support CSS3 as a client-technology

Product:

[RT] RAP

Reporter:

Tim Buschtoens <tbuschto>

Component:

RWT

Assignee:

Project Inbox <rap-inbox>

Status:

RESOLVED FIXED

QA Contact:

Severity:

enhancement

Priority:

CC:

tbuschto

Version:

1.4

Target Milestone:

1.4 M7

Hardware:

All

OS:

All

Whiteboard:

Bug Depends on:

332510, 341924

Bug Blocks:

320759

Attachments:

Description	Flags
rounded border comparison	none

Description Tim Buschtoens

2010-12-14 05:45:47 EST

CSS3-enabled browser can now do everything we do with SVG/VML, i.e. rounded borders, gradients and (later on) shadows. So we should support it as an third option:
- Its more lighweight
- The default Android-Browser does not support SVG or VML

In case of Webkit, it should probably only used if performance is an issue (i.e. on mobile devices), since it doesnt look as good as SVG. (More research needed.)

Technically, it should be implemented as the default method in Widget.js and HtmlUtil.js. For SVG/VML, the GraphicsMixin will be applied at runtime as patch, overwriting the CSS3 implementation. That way GraphicsMixin could theoratically be removed from the client-code for clients that don't need it.

Comment 1 Tim Buschtoens

2010-12-14 05:50:56 EST

Its not a blocker, but part of Bug 327023 could be nicely covered while fixing this bug.

Comment 2 Tim Buschtoens

2011-01-11 09:57:16 EST

Created attachment 186508 [details]
rounded border comparison

The rounded border on css/webkit slightl blurs with the backgound-color of the element, but it's debateable if that justifies making an exception for these browser (using css on mobile-devices, svg on PCs). 

All css3-features we might use (rounded borders, gradients, shadows) are supported since Webkit 522 (Safari 3.1, Chrome 1.0) and Gecko 1.9 (Firefox 3.6).

Comment 3 Tim Buschtoens

2011-01-13 07:45:30 EST

CSS rounded border look great on the ipad, but ugly (bad AA) on the android browser (Samsung Galaxy Tab). Too bad thats the only system where we have no choice.

Comment 4 Tim Buschtoens

2011-04-14 10:16:25 EDT

Fixed in CVS HEAD.

A few notes:

- CSS3 is enabled for FF4+, Safari, Chrome (since webkit 522)

- Opera would probably not yet work, needs some research

- IE9 could probably be supported in standard-mode (See Bug 270397)

- Shadows blur-effect now works in Safari.

- There is an issue with the shell titlebar: There has always been the problem that a few white pixels from the background shine through in the upper corners. For webkit broser this got better with CSS3, while it got (very slightly) worse in Firefox. To minimize the effect i adapted the default shell theming a bit. Titlebar has now a smaller radius (1px) than the shell itself (3px).

- The "spread" parameter for css-shadows (that we currently dont support at all) is not supported by older webkit browser. That means should we want to support it, these (old) browser would need a specific solution (at worst revert to SVG or dont support it for those browser).

Comment 5 Tim Buschtoens

2011-04-14 10:39:09 EDT

One more note: The ProgressBar still uses SVG/VML. Supoorting CSS3 there would need some heavy rewrites in the ProgressBar.