How to create a window like Google Chrome in GTK+

Question

I'm pretty new to GTK libraries and trying to develop a small project in GTK+2 with its C API's. The requirement is to do it in a Google-Chrome type window . It'll be having it's own title bar and controls with different colors.

Can anybody help me out with any tutorial or reference or any opensource code that already implemented this?

I appreciate your help.

Answer 1

Since the Crhomium browser is an open source project, its source is available here: http://src.chromium.org/viewvc/chrome/trunk/

What you seek should by definition be available there :)

Answer 2

What you want to do is custom decoration.

My understanding is that you have to set_decorated False on the window so that the WM doesn't add border/title bar itself to your windows and then have your own custom Window subclass that handles drawing it's decorations itself manually in the paint() method.

Not trivial.

Answer 3

what you might be looking for is the gtk wheelbarrow example. It shows you how to create a shaped window using an xpm file.there is an example in C, Perl and Python. I did one of these a few years back but haven't used it for some time now.

Here is the C version ...

The Python Example is Here ...

Here is a tutorial on pixmaps and GTK+

Just create your image with Gimp and save it as an xpm file.

Answer 4

Adding to 246tNt's answer, Chrome uses Skia. Here is an example (Gtk+ 3, cairo, skia):

  g_signal_connect(window_container_, "draw",
                   G_CALLBACK(OnWindowContainerDraw), NULL);

gboolean OnWindowContainerDraw(GtkWidget* widget,
                               cairo_t *cr) {                  
  SkBitmap bitmap;
  bitmap.setConfig(SkBitmap::kARGB_8888_Config, 100, 100);
  bitmap.allocPixels();

  SkDevice device(bitmap);
  SkCanvas canvas(&device);
  SkPaint paint;
  SkRect r;

  paint.setARGB(255, 255, 255, 255);
  r.set(10, 10, 20, 20);
  canvas.drawRect(r, paint);

  cairo_surface_t* surface = cairo_image_surface_create_for_data(
      (unsigned char*)bitmap.getPixels(), CAIRO_FORMAT_ARGB32,
      bitmap.width(), bitmap.height(), bitmap.rowBytes());
  cairo_surface_mark_dirty(surface);
  cairo_set_source_surface(cr, surface, 0, 0);
  cairo_paint(cr);

  return FALSE;
}

Answer 5

I'm a bit confused as to what you're actually looking for, but I think that what you want is a control that provides a web browser inside your window.

WebKitGTK+ is one such control: http://webkitgtk.org/

GtkMozEmbed is another: http://www.mozilla.org/unix/gtk-embedding.html

Last time I did this, I had to try a few to find one that worked. The controls have different bugs and support for HTML (and Flash.)