« Irrational Glumness | Main | Choosing Sides »

February 20, 2006

Cairo, Linux And GTK2 Themes

In the last week or two I've been spending most of my time working on cairo-gtk2 trunk builds, trying to get them back into shape. Vlad did some wonderful, long-needed work to move all double-buffering and window translucency management out of the view manager into into platform-specific windowing code, in a very elegant way, but he only updated Windows, so GTK2 needed to catch up there. When I fixed that, I encountered a serious cairo issue --- it was creating 24-bit temporary pixmaps for the offscreen buffer, which was killing performance on my 16-bit display setup --- and it took a while to diagnose and fix (in cairo).

But the biggest chunk of work has been reenabling GTK2 native themes in cairo builds, without which Firefox looks completely naff. This isn't easy since we want to be able to render GTK2 themes to any cairo context (e.g., a PDF context, or a screen context with some rotation applied) but GTK2 themes expect to be rendering to an X pixmap or window. We can hack around this by having the theme render to an offscreen pixmap and then extracting the data, but that's painful and slow especially when the theme paints with transparency or translucency. It's important that the common case of painting the theme to an X window with no scaling or rotation remain as efficient as it is today. Well, it's done :-).

One bonus of this work is that we can finally enable GTK2 themes for HTML content. We never did so before because we never wrote the code to handle rendering to a non-X printing context (i.e. render to temporary pixmaps and send them as images to the printer). Now that we've solved this problem in a general way, we will (when my patches land) turn on GTK2 themes for HTML. The screenshot below is using the "Industrial" theme. The Cancel button is being hovered.


GTK2-themed GMail preferences

Posted by roc at February 20, 2006 3:19 PM

Comments

Great work! I'm looking forward to seeing this in cairo builds and on the trunk in the near future.

Posted by: Rishi at February 20, 2006 3:47 PM

It is cool.
But how about to enable current Firefox skins for HTML content (buttons, etc.)?

Posted by: Foxfan@ at February 20, 2006 4:26 PM

Awesome work! I've been wanting gtk2 goodness in firefox for a long time.

Posted by: Joseph at February 20, 2006 4:40 PM

Been waiting for this for a long time. Thanks, Roc! :-D

Posted by: Philip Withnall at February 20, 2006 5:32 PM

Wow, you're the man Robert!

Posted by: Ernst at February 20, 2006 5:53 PM

You realize you get more GMail features if you set your language to English (US) rather than UK ?

Posted by: RichB at February 20, 2006 6:24 PM

Actually, I think using native widgets in the viewport is a pretty bad idea -- better stick to a set of design-neutral, highly themable widgets as people (and authors) expect.

Posted by: Eike Hein at February 20, 2006 6:39 PM

Foxfan: I think you can just set rules to style HTML form elements the way forms.css does, but I'm not sure where you'd put those rules; I know little about Firefox theme packaging.

RichB: No, I didn't know that. Interesting...

Eike: These widgets are still stylable by Web authors. We disable GTK2 themes on styled widgets in exactly the same way Firefox does on Windows --- which is pretty close to what IE does --- so I think that's what people and authors will expect...

Posted by: Robert O'Callahan [TypeKey Profile Page] at February 20, 2006 8:12 PM

Nice looking forms, finally! Will this be included in Firefox 2.0?

Posted by: Flavio at February 20, 2006 8:12 PM

Robert: I do get that, however the problem remains that many GTK2 themes are quite a bit more involved design-wise than the Windows widgets or the current Firefox form widgets, and can look out of place in websites not designed to accomodate them. I'm of the opinion that browsers should use a neutral, non-native appearance for form widgets. Trying to go native is more trouble than it's worth.

Posted by: Eike Hein at February 20, 2006 10:43 PM

Is it possible to export this page to pdf?

Posted by: Nico at February 20, 2006 11:26 PM

Is it normal that for some time both my cairo-gtk2 build and the cairo experimental builds from the mozilla ftp are completely unusable because only the last two hovered widgets are visible ?

I sometimes see other widgets painting, but almost instantaneously they are overdrawn by the background color.

Posted by: _FrnchFrgg_ at February 21, 2006 12:28 AM

I like reading about the Cairo work :), keep it up!

~Grauw

Posted by: Laurens Holst at February 21, 2006 5:32 AM

Flavio: no

Eike: how do you know GTK2 themes look out of place on some Websites? I'm not aware of any other implementation of GTK2 themes for HTML.

"Going native" has significant potential benefits for UI consistency and aesthetic appeal. In any case I'm afraid that your opinion has not won the day, almost all users use a browser that supports native themes, and if you don't like it, you still have the option of changing your GTK2 theme to somethine more "neutral".

Nico: I'm not 100% sure what you mean, but "print to PDF" is definitely a feature we're planning to have for 1.9. How well it works will depend more on cairo than on our code.

_FrenchFrgg_: Yes. My changes fix these issues.

Posted by: Robert O'Callahan at February 21, 2006 7:32 AM

Robert: KDEs Konqueror uses native widgets in its viewport. The default KDE theme, Plastik, is similar to Industrial and Clearlooks; there's a Clearlooks port called Klearlook; there's a Bluecurve port called QtCurve. And of course, there are loads of other KDE themes. I draw my experience from that, and from Safari on OS X.

Posted by: Eike Heins at February 22, 2006 12:56 AM

Brilliant!

I see one small bug: in that screenshot <select>s look like combo boxes, when they should look like option menus (what the HIG calls "drop-down lists"). These two controls have identical appearance on Windows for some bizarre reason, but on other platforms, including GTK, they look different.

Posted by: mpt at February 22, 2006 2:31 PM

That's actually a pretty big bug. The <select> feel is hardcoded in layout to work like a Windows combobox; it needs to be reimplemented to work like a GTK2-style drop-down list.

Posted by: Robert O'Callahan at February 22, 2006 3:28 PM

Camino seems to have solved that problem, so perhaps looking at its code would be useful.

[BTW, the comment preview on your Weblog is broken.]

Posted by: mpt at February 23, 2006 12:23 AM

Camino's <select>/popup implementation is "a big hack" (with lots of bugs because of it) and changes really need to be made in layout in order to get things right ;)

Posted by: Smokey Ardisson at February 23, 2006 7:37 PM

wow. i was just searching for that - wonderful gtk2 themed widgets in the content area of firefox :) well done.. hope this gets into a official release soon :)

Posted by: thp at February 26, 2006 11:27 PM

I'm having a hard time trying to get all this to work on linux. Is there anything special I need in order to make it work? I tried the latest cairo nightlies, but images with alpha look black (the alpha bits), and the gtk html doesn't work. I tried using the latest cairo source (downloaded from git), but it's still the same. Is there anything special anyone should do in order to get this to work?

Thanks

Posted by: Andrés at February 27, 2006 11:36 AM

Andrés: sounds like you're using a build before my stuff landed. You need a nightly build produced in the last few days.

Posted by: Robert O'Callahan at February 27, 2006 12:34 PM

Damn! I've been downloading nightlies since you posted this, but i quit doing that 2 or 3 days ago. Apparently it's ok now! looks really cool, great job. I hated the way controls looked in linux compared to windows. Native rendering IS the way to go! Keep it up roc!! Looking good!

What's with the:
TAKING FAST PATH
TAKING SLOW PATH: unsupported clip

??

Posted by: Andrés at February 27, 2006 1:22 PM

That's debug spew that I forgot to turn off. Ignore it.

Posted by: Robert O'Callahan at February 27, 2006 1:29 PM

link to a build please? im interested in seeing how this gtk html themes works with various themes.
i tried latest trunk from ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/experimental/cairo/
but i still get the old style html buttons etc

Posted by: at March 11, 2006 3:46 PM

We've actually turned off the HTML theming for now because of bugs with some themes. I need to fix those bugs before we turn it back on.

Posted by: Robert O'Callahan [TypeKey Profile Page] at March 14, 2006 6:26 PM

I wonder if this will ever be re-enabled.

Posted by: at August 10, 2006 3:44 AM

No news about this?

I mean, new trunk builds have the cairo enabled, but I can't get gtk forms in my PC... Is there something that should be enabled?

Posted by: Treviño at June 1, 2007 3:20 PM