[gnome-themes-standard: 11/26] notebook: theme notebook tabs like in the mockups

[Cosimo Cecchi <cosimoc src gnome org>]

commit a71b9d4793d3e3bd8bddc6680f3915c0e9a7d9d3
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu Mar 3 01:53:49 2011 -0500

    notebook: theme notebook tabs like in the mockups
    
    There's a couple of things to mention:
    - GtkNotebook should be able to resize the allocation of its page header
      according to the 'tab-curvature' and 'tab-overlap' style properties,
      in order not to make the action widget (or the label) overflow under
      the next tab. When it does, we should use that feature to make
      inactive tabs smaller and more tightly stacked.
    - The left and right orientations do not let the theme choose the render
      orientation of the label, and render the label horizontally, which
      conflicts with this design, so we let the GTK+ default handler render
      that, as no sane applications seem to use that; or maybe we need an
      updated design?

 src/adwaita_engine.c           |  143 ++++++++++++++++++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk.css |   24 +++++--
 2 files changed, 159 insertions(+), 8 deletions(-)
---
diff --git a/src/adwaita_engine.c b/src/adwaita_engine.c
index 417acd1..94b2674 100644
--- a/src/adwaita_engine.c
+++ b/src/adwaita_engine.c
@@ -527,6 +527,137 @@ adwaita_engine_render_option (GtkThemingEngine *engine,
 }
 
 static void
+draw_tab_arcs (cairo_t *cr,
+	       gdouble curve_width,
+	       gdouble x,
+	       gdouble y,
+	       gdouble width,
+	       gdouble height)
+{
+	cairo_arc (cr, 
+		   curve_width, 5.0,
+		   2.5,
+		   G_PI, G_PI + G_PI_2);
+
+	cairo_arc (cr,
+		   width - curve_width, 5.0,
+		   2.5,
+		   G_PI + G_PI_2, 2 * G_PI);
+}
+
+static void
+draw_tab_shape_active (cairo_t *cr,
+		       gdouble curve_width,
+		       gdouble x,
+		       gdouble y,
+		       gdouble width,
+		       gdouble height)
+{
+	cairo_move_to (cr, 0, height);
+
+	draw_tab_arcs (cr, curve_width, x, y, width, height);
+
+	cairo_line_to (cr, width, height);
+}
+
+static void
+render_notebook_extension (GtkThemingEngine *engine,
+			   cairo_t	  *cr,
+			   gdouble	   x,
+			   gdouble	   y,
+			   gdouble	   width,
+			   gdouble	   height,
+			   GtkPositionType   gap_side)
+{
+	gint tab_curvature;
+	GdkRGBA *color, *notebook_border_color, border_color, background_color;
+	GtkStateFlags state;
+	gdouble angle = 0;
+	cairo_pattern_t *pattern = NULL, *background_pattern = NULL;
+	cairo_matrix_t matrix;
+
+	gtk_theming_engine_get_style (engine,
+				      "tab-curvature", &tab_curvature,
+				      NULL);
+	state = gtk_theming_engine_get_state (engine);
+	gtk_theming_engine_get_background_color (engine, state, &background_color);
+	gtk_theming_engine_get_border_color (engine, state, &border_color);
+	gtk_theming_engine_get (engine, state,
+				"-adwaita-selected-tab-color", &color,
+				"-adwaita-notebook-border-color", &notebook_border_color,
+				"background-image", &background_pattern,
+				NULL);
+
+	cairo_save (cr);
+	cairo_set_line_width (cr, 1.0);
+
+	if (gap_side == GTK_POS_TOP) {
+		angle = G_PI;
+		cairo_translate (cr, width, height);
+	}
+
+	cairo_translate (cr, x, y);
+	cairo_rotate (cr, angle);
+
+	draw_tab_shape_active (cr, tab_curvature, 0, 0, width, height);
+
+	if (background_pattern != NULL) {
+		cairo_matrix_init_scale (&matrix,
+					 1. / width,
+					 1. / height);
+		cairo_pattern_set_matrix (background_pattern, &matrix);
+		cairo_set_source (cr, background_pattern);
+	} else {
+		gdk_cairo_set_source_rgba (cr, &background_color);
+	}
+
+	cairo_fill (cr);
+
+	if (state & GTK_STATE_FLAG_ACTIVE) {
+		draw_tab_shape_active (cr, tab_curvature, 0, 0, width, 5.0);
+		gdk_cairo_set_source_rgba (cr, color);
+		cairo_fill (cr);
+	}
+
+	draw_tab_shape_active (cr, tab_curvature, 0, 0, width, height);
+
+	if (state & GTK_STATE_FLAG_ACTIVE) {
+		pattern = cairo_pattern_create_linear (0, height, 0, 0);
+		cairo_pattern_set_extend (pattern, CAIRO_EXTEND_REPEAT);
+		cairo_pattern_add_color_stop_rgba (pattern, 0.0,
+						   notebook_border_color->red,
+						   notebook_border_color->green,
+						   notebook_border_color->blue,
+						   notebook_border_color->alpha);
+
+		cairo_pattern_add_color_stop_rgba (pattern, 1.0,
+						   border_color.red,
+						   border_color.green,
+						   border_color.blue,
+						   border_color.alpha);
+
+		cairo_set_source (cr, pattern);
+	} else {
+		gdk_cairo_set_source_rgba (cr, &border_color);
+	}
+
+	cairo_stroke (cr);
+
+	gdk_rgba_free (color);
+	gdk_rgba_free (notebook_border_color);
+
+	if (pattern != NULL) {
+		cairo_pattern_destroy (pattern);
+	}
+
+	if (background_pattern != NULL) {
+		cairo_pattern_destroy (background_pattern);
+	}
+	
+	cairo_restore (cr);
+}
+
+static void
 adwaita_engine_render_extension (GtkThemingEngine *engine,
 				 cairo_t	  *cr,
 				 gdouble	   x,
@@ -537,6 +668,13 @@ adwaita_engine_render_extension (GtkThemingEngine *engine,
 {
 	GtkStateFlags state;
 
+	if (gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_NOTEBOOK) &&
+	    ((gap_side == GTK_POS_TOP) || (gap_side == GTK_POS_BOTTOM))) {
+		render_notebook_extension (engine, cr, x, y, width, height, gap_side);
+
+		return;
+	}
+
 	GTK_THEMING_ENGINE_CLASS (adwaita_engine_parent_class)->render_extension (engine, cr,
 										  x, y, width, height,
 										  gap_side);
@@ -1129,6 +1267,11 @@ adwaita_engine_class_init (AdwaitaEngineClass *klass)
 								  "Selected tab color",
 								  "Selected tab color",
 								  GDK_TYPE_RGBA, 0));
+	gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL,
+					      g_param_spec_boxed ("notebook-border-color",
+								  "Notebook border color",
+								  "Notebook border color",
+								  GDK_TYPE_RGBA, 0));
 }
 
 static void
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index a3b20ec..d12de6a 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -70,7 +70,8 @@
 @define-color highlighted_border #8a8f8a;
 @define-color internal_element_color #888a85;
 
- define-color notebook_border #918e8a;
+ define-color notebook_border #a6a6a6;
+ define-color notebook_active_tab_border #1372d3;
 
 @define-color toolbar_gradient_base #aaaa9e;
 @define-color toolbar_gradient_step1 #bcbcb4;
@@ -230,26 +231,33 @@ GtkScale {
     background-color: @theme_selected_bg_color;
 }
 
-/* Notebooks/Tabs */
-
+/*****************
+ * Notebooks and *
+ * tabs          *
+ *****************/
 .notebook {
-    -adwaita-selected-tab-color: shade (@theme_selected_bg_color, 1.33);
     background-color: shade (@theme_bg_color, 1.12);
     border-color: @notebook_border;
     padding: 2;
     border-style: solid;
     border-radius: 0;
-    -GtkNotebook-tab-overlay: 10;
-    -GtkNotebook-tab-curvature: 5;
+    -GtkNotebook-tab-overlap: 6;
+    -GtkNotebook-tab-curvature: 6;
 }
 
 .notebook tab {
-    padding: 3;
-    border-radius: 2;
+    background-image: -gtk-gradient (linear,
+                                     left top, left bottom,
+                                     from (@theme_base_color),
+                                     to (@switch_slider_color));
 }
 
 .notebook tab:active {
+    -adwaita-selected-tab-color: #8dc0f3;
+    -adwaita-notebook-border-color: @notebook_border;
+    border-color: @notebook_active_tab_border;
     background-color: @theme_base_color;
+    background-image: none;
 }
 
 /**************