Tuesday, 21 February 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


28 comments:

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

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

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

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

    ReplyDelete
  5. Wow, you're the man Robert!

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

    ReplyDelete
  7. 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.

    ReplyDelete
  8. Robert O'Callahan21 February 2006 09:12

    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...

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

    ReplyDelete
  10. 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.

    ReplyDelete
  11. Is it possible to export this page to pdf?

    ReplyDelete
  12. 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.

    ReplyDelete
  13. I like reading about the Cairo work :), keep it up!
    ~Grauw

    ReplyDelete
  14. Robert O'Callahan21 February 2006 20:32

    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.

    ReplyDelete
  15. 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.

    ReplyDelete
  16. 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.

    ReplyDelete
  17. Robert O'Callahan23 February 2006 04:28

    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.

    ReplyDelete
  18. 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.]

    ReplyDelete
  19. 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 ;)

    ReplyDelete
  20. 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 :)

    ReplyDelete
  21. 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

    ReplyDelete
  22. Robert O'Callahan28 February 2006 01:34

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

    ReplyDelete
  23. 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
    ??

    ReplyDelete
  24. Robert O'Callahan28 February 2006 02:29

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

    ReplyDelete
  25. 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

    ReplyDelete
  26. Robert O'Callahan15 March 2006 07:26

    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.

    ReplyDelete
  27. I wonder if this will ever be re-enabled.

    ReplyDelete
  28. 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?

    ReplyDelete