Friday, November 26, 2010

Oxygen + Gtk

For the past few month, Ruslan Kabatsayev, Cédric Bellegarde and I have been working on writing (yet another) Gtk port of KDE's oxygen widget style.

Unlike previous attempts we decided to
  • start a new gtk-engine from scratch (as opposed to re-using an existing one). All painting is performed using Cairo; there is no hidden interfacing to Qt, nor hard-coded pixmaps.
  • stick as close as possible to KDE's and oxygen's options. Amongst other things, the engine loads kde palette, icons, and fonts; it respects the color contrast setting, and a number of oxygen's display options (such as the tab style, the list's expander style, the scrollbar width, etc.)
  • try implement at least some of the fancy features of KDE's Oxygen style. Amongst other things, we added mouse-over effects on almost all widgets; support for ARGB colormap (in order to have nice non-pixelated corners for menus, combo boxes or tooltips), and full support for grabbing windows from empty areas (a feature that is in KDE's Oxygen since KDE SC 4.5). We also have plans for adding a large number of the animations found in KDE's Oxygen style, but that will be for the next release.
The primary goal of this port is to improve significantly the integration of Gtk/Gnome applications in KDE. However, we also aim to provide Oxygen as a modern, professional and polished theme for other desktop environments, that works seamlessly without having KDE even installed.

Some screenshots are available at the end of this post.

The sources for this first release are available on KDE ftp servers. We plan to follow the same release plan as KDE:
  • one minor bug-fixing release every month,
  • one major feature release every 6 month
Daring users can also get the latest sources from the git repository directly. We are hosted by git.kde.org.

Bug reports and feature requests can be sent to KDE bug tracking system. When doing so one should select product=Oxygen, and component=gtk-engine.

One can also talk to the developers and give direct feedback on IRC, channel #oxygen (ask for hugo).

Now for the screenshots:

Nautilus (front) and Dolphin (back)


GEdit (front) and Kate (back)


Compiz Config Settings Manager (CCSM)


Mandriva's RPM manager (urpmi)


Firefox (unthemed)

67 comments:

  1. Is this Gtk 3 ready? AFAIK version 3.0 will be released this month with a completely new CSS-based styling system.

    ReplyDelete
  2. Great. Thanks man for this. Of corse appearence is somethig supercificial but... having a consistent appearance through different apps is pleasing.

    ReplyDelete
  3. @Stephen:
    No this is Gtk+2.0

    We'll see about gtk 3.0 when this is out.
    I doubt CSS will fullfill oxygen's need. As a matter of fact, css styling support inside Qt never really worked (or rather, I know of no Qt based CSS style).

    ReplyDelete
  4. Wow!! Impressive work, it's really beautiful
    I don't use gtk application (but chrome, which is not really influenced by the gtk style) but I know this was an annoying issue for a lot of people

    Thanks for your work :D

    About the QT's css styling..
    yeah it works (I've used in a couplt of project in which I needed a really customized gui) but I don't believe it was meant to be used by style makers, just by the lazy designers of a single applications

    ReplyDelete
  5. Actually, chrome uses gtk for the settings dialog and the menu dropdowns.

    I quite like looking at my dark color scheme render correctly in GTK apps.

    :D

    ReplyDelete
  6. @Framp, Sam
    Isn't there a option to completely use a gtk+ theme in Chrome?

    http://arstechnica.com/open-source/news/2009/07/google-chromium-gains-native-theming-support-on-linux.ars

    ReplyDelete
  7. Qt's CSS stuff actually works by hooking into the style system - when you set a stylesheet on a widget, requests by widgets to render style elements are forwarded to a special CSS style engine rather than the otherwise active style. In other words, the CSS painting is just another style in some sense.

    ReplyDelete
  8. The GTK+ 3 theming stuff isn't really CSS-based, the CSS just replaces the gtkrc snippets, the rest is still C code. There are some API changes though.

    http://www.lanedo.com/~carlos/gtk3-doc/gtk-migrating-GtkStyleContext.html

    If you test, make sure you test against 2.91.6 and use GTK_DISABLE_DEPRECATED. 2.91.5 still has the old theming API.

    The good news there is that ARGB support and animation support appears to come out of the box there, so it should make the theming less hackish.


    The problem about "We'll see about gtk 3.0 when this is out." is that Fedora 15 is very likely to ship with GNOME 3 in May, if we don't have a GTK+ 3 version of oxygen-gtk by then, it will be relatively useless for us for Fedora 15. Our GNOME folks are actively trying to get as many GTK+ 2 apps as possible ported to GTK+ 3. (The core system tools use PyGTK and will likely keep using GTK+ 2 though.)

    I'm not sure about the plans of other distributions such as Ubuntu, but GTK+ 3 is coming sooner than you may think. (On the other hand, the kind of API changes still getting done doesn't exactly encourage early adoption. Those themes which already ported to GTK+ 3 now have to get ported again.)

    ReplyDelete
  9. How to enable it after installation? I already have other gtk engines that install gtkrc-2.0 file in home directory

    ReplyDelete
  10. @netcelli
    This is something we have to work on.
    If you use kde, you can enable the theme via "system-settings", provided you have the gtk-qt-engine package installed (you then should have an entry about gtk style at the bottom of the system-settings main window).

    If you are not using kde, I think gtk-chtheme does the job.

    ReplyDelete
  11. WOW! that's amazing, finally a really good gtk unification :)

    ReplyDelete
  12. I don't understand why Gnome isn't doing more towards this. I mean, the guys at Qt created and shipped a GTK+ theme engine (protip for KDE-on-Gnome users: System Settings --> Application Appearance --> Style --> Widget Style: GTK+ Style) in the interest of cross-desktop integration. Do Gnome care about KDE Workspace users at all?

    ReplyDelete
  13. @The Madman
    In short, no.

    ReplyDelete
  14. Great job!
    Firefox / Chrome looks perfect...
    However... Eclipse does not look good.
    The menu bars have 2 colors, and look weird...
    Have a look at http://www.flickr.com/photos/17576361@N00/5257690751/
    This example is under KDE 4.5.4, using the Oxygen cold color scheme, and Oxygen-gkt 1.0.0
    This doesn't happen with QtCurve, for example.

    ReplyDelete
  15. Sorry, I meant the tool bars, not menu bars.

    ReplyDelete
  16. @Luis, hugo said .. "Actually, neither openoffice nor eclipse are good test case for any gtk style (nor firefox for that matter) because they both really really mis-use Gtk.

    If you look at any gtk theme, it is full of hacks around gtk so that it does not look too ugly for the application aboves, but no matter how hard you try, they all do (including ours).

    This is because these applications are crapy (and should not be supported at all, in my oppinion), both UI wise, and code wise.

    To the point that no matter how good a coder you are, there is no way your code will work right with the above (trust me, I digged into their code)."

    ReplyDelete
  17. Ok.
    So, I'll keep using QtCurve for Eclipse.
    For those interested, just set the following environment variable before running eclipse:
    GTK2_RC_FILES=/usr/share/themes/QtCurve/gtk-2.0/gtkrc

    ReplyDelete
  18. @Luis
    unfortunately there is nothing we can do about it.
    Its because ecclipse doesn't let us paint our "background" gradient on these toolbar elements.
    It paints a flat background, using the default background color.

    QtCurve does not have the problem, because it uses a flat background everywhere ...

    We could in principle do the same for ecclipse (use flat background everywhere), but I'd rather have ecclipse and/or gtk fix their code, rather that give up one of the nicest feature (design wise) from oxygen.

    For firefox: it disregards the gradient everywhere anyway (without giving us a chance). That's why it looks better.

    ReplyDelete
  19. @luis again:
    PS: you will find these kind of issues in a lot of places (that is: in many applications. See: gconf-editor).
    Originally, we had the same issue with the oxygen-qt gradient (notably in kdevelop, and there is still some of it in e.g. krita). The proper path is to go fix the application. Not change the style. This is doable. Some apps work just fine with that regard. For instance gedit, pidgin, nautilus. And many other.

    ReplyDelete
  20. I agree with @madman, i would like to see something like this but the other way around: KDE apps in gnome that feel native.

    The theme or desktop should NOT matter. ALL apps should look native in whatever you have, be it gnome or KDE.

    But this is now true in KDE, while in gnome i see no progress of this happening.

    gnome users dismiss 50% of the apps available in linux, just because they dont "look" gnomeish...

    Not very fair for kde app developers IMHO.

    Now kde have complete integration of all apps with these advancements. Which am very thank ful off. Its a start, maybe gnome will be more considerate with gtk3..

    ReplyDelete
  21. Wow! It's working great! The only little thing is that sometimes the scrollbar is not calculated right, and it's going 4-5 pixels out of his area. but this is barely noticeable ...

    ReplyDelete
  22. @Кирил
    I've seen this happen when you have the gtk style set improperly. Could you try
    1/ set the style once with kde's systemsetting module
    2/ set it again with gtk-chtheme
    For me it fixed these kind of glitches
    I think its because some apps would load two gtkrc files (the style config) one from oxygen and another one from any other style you were using in the past, which results in glitches.

    Alternatively if you provide me with an application (and/or screenshot) for which you have this glitch, I can try to fix.

    ReplyDelete
  23. @manny
    Some while ago we discussed (on IRC) the possibility to have a Qt-only (as opposed to KDE) version of the oxygen style. Its actually no big deal.

    Not everybody on IRC is happy with the idea, but that would fix your issue. You could then use Oxygen-Qt for Qt apps, and oxygen-gtk for gnome.

    You would need some oxygen community-port of the windeco for metacity or beryl though, but there are some on the market.

    Some day ... maybe ...
    I must say, its rather low priority today.

    ReplyDelete
  24. How do I change the fonts to use the GTK or GNOME fonts instead of KDE. I like the GNOME fonts better. Also I don't see any options to configure this theme, like other GTK+ engines have. Are there any plans for more configuration.

    I'm a GNOME users that loves the oxygen. I used the pixmap version up until this release. Please take into consideration GTK+ users who would want to use this theme in GNOME.

    Thanks

    ReplyDelete
  25. @Mystilleef
    Unfortunately, I don't have enough gtk/gnome skills to write any config tool for oxygen-gtk in gnome.
    Now: you should be able to change the fonts by edditing the gtkrc file
    (but you would need to use the git version, either stable or trunk, e.g.:
    git clone -b 1.0 git://git.kde.org/oxygen-gtk)

    or to edit the kdeglobals file, and follow kde standards to set the font. E.g:


    Editing the kdeglobals file would also allow you to change colors.

    Notes:
    1/ there is a chance that just updating to the 1.0 branch fixes your issue, because I removed the use of a default hard coded font when no kde font is found anywhere. So you might want to give it a shot anyway

    2/

    ReplyDelete
  26. oops. Pressed "post comment too fast"

    So:

    kdeglobals font settings:
    [General]
    desktopFont=Sans Serif,8,-1,5,50,0,0,0,0,0
    fixed=Monospace,8,-1,5,50,0,0,0,0,0
    font=Sans Serif,8,-1,5,50,0,0,0,0,0
    menuFont=Sans Serif,8,-1,5,50,0,0,0,0,0
    smallestReadableFont=Sans Serif,8,-1,5,50,0,0,0,0,0
    taskbarFont=Sans Serif,8,-1,5,50,0,0,0,0,0
    toolBarFont=Sans Serif,8,-1,5,50,0,0,0,0,0

    As for notes:
    2/ as soon as you have a kde installation, unfortunately kde settings will be used (even when running in gnome).

    You understand it will be very difficult to have both a configuration that follows gnome settings and one that follows kde settings. They will conflict as soon as one user will have both gnome and kde installed (makes sense ?)

    So far we gave priority to kde. Make sense ?

    ReplyDelete
  27. @Mystilleef easy make KDE use the same font settings gnome does :) contrary to what many people think fonts are not managed by Qt or Gtk but by libfreetype so you can have the exact same font in KDE or Gnome. Cheers

    ReplyDelete
  28. amule/amulegui crashes with oxygen-gtk
    reverting to previous theme solves...
    all the other gtk apps that i have works well.

    ReplyDelete
  29. @Dass
    most likely the application does not support ARGB.
    See README file to black list.
    Please send me the correct application names when done so that I add them to the official sources

    ReplyDelete
  30. @Hugo Pereira Da Costa, great! In gtk-chtheme I was set another oxygen like theme(not so good, though).

    Now when I set oxygen-gtk everything went the way it should be!

    Thank you for the help and for the Oxygen-GTK in general!

    Regards,
    Kiril Vladimiroff

    ReplyDelete
  31. Looks promising.

    I've noticed one strange problem so far. Using Nicotine+ (soulseek p2p app in PyGtk), the text labels of tabs is not "clickable". To switch between tabs I need to click on the 1-2 pixels around the text in the tab.

    I didn't have this problem with oxygen-molecule nor gtk-oxygen-engine.

    ReplyDelete
  32. @mschlander
    could you file a bug report at https://bugs.kde.org
    (selecting Oxygen and gtk-engine as product and component) ?

    This might be a serious issue.

    ReplyDelete
  33. @mshlander
    I can confirm the problem.
    It is due to a conflict with the window-grabbing issue: you can actually move around the window by clicking on one of these tabs just like you would do in the window decoration. This is obviously a bug :)
    (likely due to some ill-design in the app, but we must find a way to go around it).

    ReplyDelete
  34. @mshlander
    Correction: no need to file a bug, its now fixed :)
    Thanks for reporting.

    ReplyDelete
  35. I don't know if this is the place to ask for help, but I can't seem to get it to work properly.

    I can download and compile the source, but then it looks like this:
    https://photos-1.dropbox.com/i/o/_lLGvmhYovhEzNmrEx_9M6ChhYOr0lS49lBd2SwsWIY/88490/1292619600/915548a

    ReplyDelete
  36. I've got the same problem with Eddie with Java applications. e.g. netbeans and eclipse. Is this a problem of argb?

    ReplyDelete
  37. Hugo, the application is amule (both standard and gui only)
    so what i should do to use this theme AND amule? is there some way to use amule with a different theme and the rest with this one?

    ReplyDelete
  38. @Dass
    You have to add the proper application name to the argb blacklist (argb-apps.conf). Look into the README (and in the file itself) for details. That should fix the problem.

    ReplyDelete
  39. @Eddie and angun33
    Somehow I can't see the picture but I think I know the matter: flat grey background almost all over the place ?
    If yes, yes it is an issue with java binding to gtk. Most widgets don't let the style paint its background on them and use smthing flat instead.

    We might flatten entirely all java apps (maybe).
    You can also get the sources from git (see comments in the post), since we since then reduced the contrast between the flat background and the gradient, so that the issue (though still there), is less unpleasant.

    A Java+Gtk bug, really.

    ReplyDelete
  40. ok now it works :-)
    just one thing: firefox has a slight different colour in it's window decoration:
    http://www.santbaniashram.it/dass/robavaria/firefox.jpeg

    ReplyDelete
  41. @Dass

    Yes. Its because firefox can't support background gradient. So you have to disable it in the window decoration. This can be achieved by adding a "window-specific override" rule in kde's oxygen decoration configuration (last tab). This way you can achieve the same as the picture.

    In some undefined future, I'll add a way to detect this automatically.

    ReplyDelete
  42. it remains darker than the rest of the window...

    ReplyDelete
  43. This is amazing! Thanks for all of your hard work!

    ReplyDelete
  44. Hello again,

    No, Java is not quite my problem -- I can't seem to get the theme to work correctly at all: http://db.tt/C44G5LW (This link should work)

    I manage to download from git, compile and "make install", as far as I can tell, so I have no idea why it won't look properly, but uses an ugly-ass default GTK-theme instead.

    Might I be lacking some kind of package/library? I'm running Arch Linux, perhaps that is a problem?

    ReplyDelete
  45. When I ran gtk-chtheme from the terminal it gives this error message:

    "(gtk-chtheme:10832): Gtk-WARNING **: Unable to locate theme engine in module_path: "oxygen-gtk","

    So I suppose I have a theme engine problem. Not sure how I can solve it, since I thought you implemented your own theme engine, and as such, it should be installed together with the theme?

    ReplyDelete
  46. @Eddie
    Do you have a 64 bits machine ? If yes, read the readme file. You need another option to cmake to have the style installed at the right place so that gtk-chtheme gets it right (as well as the kde's systemsettings gtk config page).

    If not, then we have a problem :)

    ReplyDelete
  47. is it just me or does nautilus indeed look better than dolphin?

    ReplyDelete
  48. @Thomas
    Well, ain't it somewhat off-topic ? ;)

    ReplyDelete
  49. Hugo,

    Yes, I'm running 64-bit (nowadays, everyone should :P ), and yes I compiled with the DLIB_SUFFIX=64-switch. To make sure, I did it again, but still got the same warning from gtk-chtheme. Here's a pastebin address for the terminal output:
    http://pastebin.com/6qx1jy0z

    ReplyDelete
  50. LOL

    OK, your comment about enabling 64-bit compilation got me thinking, so I just tried recompiling it the normal way instead ("cmake ../"). Lo and behold -- now it works!

    However, I'm not sure if this is a special case for Arch Linux, or what the problem is.

    ReplyDelete
  51. I've pulled it down with Git and installed it all well. Now, how do I update the copy to the latest version? As in, the "svn up" of git.

    ReplyDelete
  52. @The Madman
    See:
    https://projects.kde.org/projects/playground/artwork/oxygen-gtk/repository

    ReplyDelete
  53. @The Madman
    oh sorry. Update, not checkout.
    That would be "git pull" in the directory you checked out

    ReplyDelete
  54. Hi Hugo,

    I've really appreciated your work: as you can read from the kde-look page (), I've created the .deb package for amd64. I apologize if I made some mistakes: it's my first package ever!

    Hope you appreciate it!

    Bye

    Mokmo

    ReplyDelete
  55. The page on kde-look is this one: http://kde-look.org/content/show.php?content=136216

    ReplyDelete
  56. Hello Hugo,

    just a short question, how did you hide the visualisation of menu accelerators (underline) in both gtk and kde application?

    Regards,
    Jens

    PS: really cool work, consistency is so important!

    ReplyDelete
  57. @Jens:
    disabling the keyboard accelerators is a 'new' feature of Oxygen-Qt, copied (more or less) from bespin, for kde4.6. The option is available only from "oxygen-settings".

    Oxygen-gtk just respects whatever settings is set in oxygen-settings, and also shows/hides accelerators accordingly.

    ReplyDelete
  58. Found it, thanks a lot for your tip!

    May be something to consider: what about drawing the keyboard accelerators only when the alt is pressed (ms office handles visualization of accelerators that way, i like that a lot)?

    ReplyDelete
  59. please add "amule" and "amulegui" to argb-apps.conf :-)

    ReplyDelete
  60. @Jens
    The feature is actually already present with Gtk.
    It is a bit buggy, but that's gtk.
    I have plans (and QtCurve already does that), to implement the same in oxygen-Qt

    ReplyDelete
  61. @Dass: really ? it seems to work just fine here ...
    (PS: this kind of issues are best reported at:
    https://bugs.kde.org, and notably, this bug report:
    https://bugs.kde.org/show_bug.cgi?id=260640)

    ReplyDelete
  62. Everything seems to work nicely for me except the GTK file dialog.

    ReplyDelete
  63. @Tavis:
    Screenshot ?
    I have no issue with it here:

    http://simplest-image-hosting.net/png-0-google12

    You can also file a bug at bugs.kde.org

    ReplyDelete
  64. This looks really cool. I'm getting the Linux Mint 10 KDE RC right now, and will be able to check this out in a short while.

    Hopefully this will be less buggy than the previous "curve" thing.

    Thank you so much for your work! :)

    ReplyDelete
  65. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    o2 drops

    ReplyDelete

Followers