SpitAndPolish

Revision 18 as of 2008-06-17 13:10:45

Clear message

Summary

GTK+ supports RGBA-colormaps, which allow to improve the aesthetic looks of the UI, especially in combination with a composited environment (e.g. compiz, metacity with enabled compositor). RGBA-colormaps make it possible to composite child-widgets against their parents background. In addition to that it is also possible to composite top-level windows against the desktop or whatever window is stacked below it, if run under a composited environment. There are two common approaches to make use of this GTK+-feature. The first one is a GTK+-theme engine (e.g. murrine) drawing widgets by default with a RGBA-colormap and choose the opacity on a per-widget-basis. The most popular variation of this - under composited environments - is to have the top-level windows background to be slightly transparent (see screenshot A). The second approach, which also works without a RGBA-capable GTK+-theme, is to manually take care of the clearing and filling of a widgets background in its expose-handler (see screenshots B, C and D).

screenshot A (GTK+-theme-engine murrine with RGBA-support)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/murrine-rgba.jpg http://people.ubuntu.com/~mmueller/spit-and-polish/small_murrine-rgba.png]

screenshot B (top-level window composited against desktop)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/authenticate-rgba.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_authenticate-rgba.png]

screenshot C (top-level window composited against desktop)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/logout-rgba.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_logout-rgba.png]

screenshot D (buttons composited against window-background)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/brasero-rgba.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_brasero-rgba.png]

This spec does not have a targetted release of Ubuntu and should rather be viewed as an on-going effort to improve the looks of the desktop in general. Not all mentioned improvements of UI-elements need to be implemented at once, although it would be nicer from a consistency point of view.

Release Note

Decoration-less popup-dialogs now use slightly rounded corners and subtle transparencies in order to make them visually more pleasing and provide a more consistent look in regards to enabled desktop-effects. Main application windows also have very light transparencies now as long as the application does not override this with custom drawing. These visual effects are only active, if desktop-effects are turned on. Also menus and comboboxes use slightly rounded corners to help unify the look of UI-elements.

Rationale

Unification of UI-elements across the desktop needs to be continued. Offering theme-artists and UI-designers greater flexibilty, makes their work more fun thus more productive. Increasing the visual attractiveness of the GNOME- and Ubuntu-desktop is of paramount importance, because users demand and expect good looking desktop-systems these days. Furthermore we need to stay competitive with offereings form other projects and vendors.

Use Cases

A list with dialogs and widgets that should make use of visual enhancements possible due to the use of RGBA-colormaps and a composited desktop (desktop-effects):

mockup of gnome-screensaver's unlock-dialog (already partly implemented)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/unlock-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_unlock-mockup.png]

mockup of GTK+-widget menuBR [http://people.ubuntu.com/~mmueller/spit-and-polish/menu-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_menu-mockup.png]

mockup of GTK+-widget comboboxBR [http://people.ubuntu.com/~mmueller/spit-and-polish/combobox-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_combobox-mockup.png]

mockup of libgksu's authenticate-dialog (already implemented)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/authenticate-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_authenticate-mockup.png]

mockup of gnome-session's logout-dialog (already implemented)BR [http://people.ubuntu.com/~mmueller/spit-and-polish/logout-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_logout-mockup.png]

Design

There are three sections to address. First there are the decoration-less dialogs, which should be drawn with rounded corners - using roughly the same corner-radius as buttons of the set GTK+-theme do - and a slight transparency in the dialogs background. Then there is the GTK+-theme that needs to make use of RGBA-colormaps, thus a theme-artist can make consistent use of transparencies for certain widgets and application-developers can more easily handle RGBA-drawing without needing to do the needed boiler-plate code themselves. Lastly there are a few GTK+-widgets that need to be adjusted in the way they draw themselves to avoid visual glitches when rendered with RGBA-colormaps on non-opaque backgrounds.

Implementation

Decoration-less dialogs

Good examples for decoration-less dialogs are the unlock-dialog of gnome-screensaver, the logout-dialog of gnome-session and the authenticate-dialog of libgksu. The general approach here is to...

  • test if composited is available in the initialization part of the dialog
  • set a rgba-colormap for the main dialog-background
  • only if those two were successful connect a custom handler to its expose-event
  • increase the border-width of the corresponding widget a bit
  • in the custom expose-handler clear the background to fully be transparent
  • get the themes background-color of the normal-state of a widget

  • use that to draw a non-opaque rectangle with rounded corners (yay for cairo! Smile :)

  • draw your own drop-shadows, since compi
  • enjoy the new looks

This already works very well with the logout-dialog of gnome-session and the authenticate-dialog of libgksu. The unlock-dialog of gnome-screensaver is displayed on its own screen and is usually not composited. Therefore the proposed looks of the mockup above are not easily implemented and require some more work. For the moment only a plain RGB-colormap is used and the

GTK+-theme

GTK+-widgets

UI Changes

Should cover changes required to the UI, or specific UI that is required to implement this

Code Changes

Code changes should include an overview of what needs to change, and in some cases even the specific details.

Migration

There will most certainly be legacy (GTK+-based) applications, which will crash or break in some kind of way, if RGBA-colormaps become the new default colormap of the used GTK+-theme. These need to be identified and fixed as soon as Ubuntu is able to ship a beta of a RGBA-enabled GTK+-theme. Those applications then need to be fixed upstream one at a time. Should the application in question be closed source its users have to switch back to a non-RGBA GTK+-theme. Or we could provide a wrapper start-script that could be used to disable the use of RGBA-colormaps by default, when such closed source legacy applications are started with it.

Test/Demo Plan

It's important that we are able to test new features, and demonstrate them to users. Use this section to describe a short plan that anybody can follow that demonstrates the feature is working. This can then be used during testing, and to show off after release.

This need not be added or completed until the specification is nearing beta.

CategorySpec