Improve browser item rendition, use CSS

It's not fully hardcoded anymore, and the border is better adjustable.

Item spacing and the fade constant can't be /meaningfully/ put in CSS.

fastiv-browser.c

@@ -35,6 +35,8 @@
 //                    │    s  p  a  c  i  n  g
 //                    │   ╭┄┄┄┄┄┄┄┄┄┄┄┄╮   ╭┄┄┄┄┄┄┄┄┄┄┄┄
 //
+// The glow is actually a glowing margin, the border is rendered in two parts.
+//
 
 struct _FastivBrowser {
 	GtkWidget parent_instance;
@@ -44,6 +46,8 @@ struct _FastivBrowser {
 	int selected;
 
 	cairo_surface_t *glow;              ///< CAIRO_FORMAT_A8 mask
+	int item_border_x;                  ///< L/R .item margin + border
+	int item_border_y;                  ///< T/B .item margin + border
 };
 
 typedef struct entry Entry;
@@ -57,9 +61,6 @@ static const double g_permitted_width_multiplier = 2;
 // TODO(p): Make a property for this.
 static const int g_item_spacing = 1;
 
-// All around, from the primary colour to transparency.
-static const int g_item_border = 10;
-
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
 struct entry {
@@ -84,8 +85,8 @@ struct item {
 
 struct row {
 	Item *items;                        ///< Ends with a NULL entry
-	int x_offset;                       ///< Start position including padding
+	int x_offset;                       ///< Start position outside borders
-	int y_offset;                       ///< Start position including padding
+	int y_offset;                       ///< Start position inside borders
 };
 
 static void
@@ -102,7 +103,7 @@ append_row(FastivBrowser *self, int *y, int x, GArray *items_array)
 	if (self->layouted_rows->len)
 		*y += g_item_spacing;
 
-	*y += g_item_border;
+	*y += self->item_border_y;
 	g_array_append_val(self->layouted_rows, ((Row) {
 		.items = g_array_steal(items_array, NULL),
 		.x_offset = x,
@@ -111,17 +112,17 @@ append_row(FastivBrowser *self, int *y, int x, GArray *items_array)
 
 	// Not trying to pack them vertically, but this would be the place to do it.
 	*y += g_row_height;
-	*y += g_item_border;
+	*y += self->item_border_y;
 }
 
 static int
 relayout(FastivBrowser *self, int width)
 {
 	GtkWidget *widget = GTK_WIDGET(self);
-	GtkStyleContext *context = gtk_widget_get_style_context(widget);
+	GtkStyleContext *style = gtk_widget_get_style_context(widget);
 
 	GtkBorder padding = {};
-	gtk_style_context_get_padding(context, GTK_STATE_FLAG_NORMAL, &padding);
+	gtk_style_context_get_padding(style, GTK_STATE_FLAG_NORMAL, &padding);
 	int available_width = width - padding.left - padding.right;
 
 	g_array_set_size(self->layouted_rows, 0);
@@ -133,8 +134,8 @@ relayout(FastivBrowser *self, int width)
 		if (!entry->thumbnail)
 			continue;
 
-		int width =
+		int width = cairo_image_surface_get_width(entry->thumbnail) +
-			cairo_image_surface_get_width(entry->thumbnail) + 2 * g_item_border;
+			2 * self->item_border_x;
 		if (!items->len) {
 			// Just insert it, whether or not there's any space.
 		} else if (x + g_item_spacing + width <= available_width) {
@@ -145,8 +146,8 @@ relayout(FastivBrowser *self, int width)
 			x = 0;
 		}
 
-		g_array_append_val(
+		g_array_append_val(items,
-			items, ((Item){.entry = entry, .x_offset = x + g_item_border}));
+			((Item) {.entry = entry, .x_offset = x + self->item_border_x}));
 		x += width;
 	}
 	if (items->len) {
@@ -159,22 +160,23 @@ relayout(FastivBrowser *self, int width)
 }
 
 static void
-draw_item_border(FastivBrowser *self, cairo_t *cr, int width, int height)
+draw_outer_border(FastivBrowser *self, cairo_t *cr, int width, int height)
 {
-	cairo_set_source_rgb(cr, .75, .75, .75);
+	int offset_x = cairo_image_surface_get_width(self->glow);
+	int offset_y = cairo_image_surface_get_height(self->glow);
 	cairo_pattern_t *mask = cairo_pattern_create_for_surface(self->glow);
 	cairo_matrix_t matrix;
 
 	cairo_pattern_set_extend(mask, CAIRO_EXTEND_PAD);
 	cairo_save(cr);
-	cairo_translate(cr, -g_item_border, -g_item_border);
+	cairo_translate(cr, -offset_x, -offset_y);
-	cairo_rectangle(cr, 0, 0, g_item_border + width, g_item_border + height);
+	cairo_rectangle(cr, 0, 0, offset_x + width, offset_y + height);
 	cairo_clip(cr);
 	cairo_mask(cr, mask);
 	cairo_restore(cr);
 	cairo_save(cr);
-	cairo_translate(cr, width + g_item_border, height + g_item_border);
+	cairo_translate(cr, width + offset_x, height + offset_y);
-	cairo_rectangle(cr, 0, 0, -g_item_border - width, -g_item_border - height);
+	cairo_rectangle(cr, 0, 0, -offset_x - width, -offset_y - height);
 	cairo_clip(cr);
 	cairo_scale(cr, -1, -1);
 	cairo_mask(cr, mask);
@@ -182,21 +184,14 @@ draw_item_border(FastivBrowser *self, cairo_t *cr, int width, int height)
 
 	cairo_pattern_set_extend(mask, CAIRO_EXTEND_NONE);
 	cairo_matrix_init_scale(&matrix, -1, 1);
-	cairo_matrix_translate(&matrix, -width - g_item_border, g_item_border);
+	cairo_matrix_translate(&matrix, -width - offset_x, offset_y);
 	cairo_pattern_set_matrix(mask, &matrix);
 	cairo_mask(cr, mask);
 	cairo_matrix_init_scale(&matrix, 1, -1);
-	cairo_matrix_translate(&matrix, g_item_border, -height - g_item_border);
+	cairo_matrix_translate(&matrix, offset_x, -height - offset_y);
 	cairo_pattern_set_matrix(mask, &matrix);
 	cairo_mask(cr, mask);
 
-	// TODO(p): Distinguish between an inner and outer border,
-	// don't override part of the glow.
-	cairo_rectangle(cr, -.5, -.5, width + 1, height + 1);
-	cairo_set_source_rgba(cr, 1, 1, 1, 0.75);
-	cairo_set_line_width(cr, 1);
-	cairo_stroke(cr);
-
 	cairo_pattern_destroy(mask);
 }
 
@@ -233,22 +228,40 @@ entry_at(FastivBrowser *self, int x, int y)
 static void
 draw_row(FastivBrowser *self, cairo_t *cr, const Row *row)
 {
-	for (Item *item = row->items; item->entry; item++) {
+	GtkStyleContext *style = gtk_widget_get_style_context(GTK_WIDGET(self));
-		GdkRectangle extents = item_extents(item, row);
+	gtk_style_context_save(style);
+	gtk_style_context_add_class(style, "item");
 
+	GdkRGBA glow_color = {};
+	GtkStateFlags state = gtk_style_context_get_state (style);
+	gtk_style_context_get_color(style, state, &glow_color);
+
+	GtkBorder border;
+	gtk_style_context_get_border(style, state, &border);
+	for (Item *item = row->items; item->entry; item++) {
 		cairo_save(cr);
-		cairo_translate(cr, extents.x, extents.y);
+		GdkRectangle extents = item_extents(item, row);
-		draw_item_border(self, cr, extents.width, extents.height);
+		cairo_translate(cr, extents.x - border.left, extents.y - border.top);
+
+		gdk_cairo_set_source_rgba(cr, &glow_color);
+		draw_outer_border(self, cr,
+			border.left + extents.width + border.right,
+			border.top + extents.height + border.bottom);
 
 		// TODO(p): See if a mild checkerboard pattern would not look nice.
-		cairo_rectangle(cr, 0, 0, extents.width, extents.height);
+		gtk_render_background(
-		cairo_set_source_rgb(cr, .25, .25, .25);
+			style, cr, border.left, border.top, extents.width, extents.height);
-		cairo_fill(cr);
 
-		cairo_set_source_surface(cr, item->entry->thumbnail, 0, 0);
+		gtk_render_frame(style, cr, 0, 0,
+			border.left + extents.width + border.right,
+			border.top + extents.height + border.bottom);
+
+		cairo_set_source_surface(
+			cr, item->entry->thumbnail, border.left, border.top);
 		cairo_paint(cr);
 		cairo_restore(cr);
 	}
+	gtk_style_context_restore(style);
 }
 
 // --- Boilerplate -------------------------------------------------------------
@@ -287,11 +300,13 @@ static void
 fastiv_browser_get_preferred_width(
 	GtkWidget *widget, gint *minimum, gint *natural)
 {
+	FastivBrowser *self = FASTIV_BROWSER(widget);
+	GtkStyleContext *style = gtk_widget_get_style_context(widget);
+
 	GtkBorder padding = {};
-	GtkStyleContext *context = gtk_widget_get_style_context(widget);
+	gtk_style_context_get_padding(style, GTK_STATE_FLAG_NORMAL, &padding);
-	gtk_style_context_get_padding(context, GTK_STATE_FLAG_NORMAL, &padding);
 	*minimum = *natural = g_permitted_width_multiplier * g_row_height +
-		padding.left + 2 * g_item_border + padding.right;
+		padding.left + 2 * self->item_border_x + padding.right;
 }
 
 static void
@@ -361,9 +376,9 @@ fastiv_browser_draw(GtkWidget *widget, cairo_t *cr)
 		const Row *row = &g_array_index(self->layouted_rows, Row, i);
 		GdkRectangle extents = {
 			.x = 0,
-			.y = row->y_offset,
+			.y = row->y_offset - self->item_border_y,
 			.width = allocation.width,
-			.height = g_row_height + 2 * g_item_border,
+			.height = g_row_height + 2 * self->item_border_y,
 		};
 		if (!have_clip || gdk_rectangle_intersect(&clip, &extents, NULL))
 			draw_row(self, cr, row);
@@ -387,6 +402,66 @@ fastiv_browser_button_press_event(GtkWidget *widget, GdkEventButton *event)
 	return TRUE;
 }
 
+static void
+fastiv_browser_style_updated(GtkWidget *widget)
+{
+	GTK_WIDGET_CLASS(fastiv_browser_parent_class)->style_updated(widget);
+
+	FastivBrowser *self = FASTIV_BROWSER(widget);
+	GtkStyleContext *style = gtk_widget_get_style_context(widget);
+	GtkBorder border = {}, margin = {};
+
+	// Using a pseudo-class, because GTK+ regions are deprecated.
+	gtk_style_context_save(style);
+	gtk_style_context_add_class(style, "item");
+	gtk_style_context_get_margin(style, GTK_STATE_FLAG_NORMAL, &margin);
+	gtk_style_context_get_border(style, GTK_STATE_FLAG_NORMAL, &border);
+	gtk_style_context_restore(style);
+
+	const int glow_w = (margin.left + margin.right) / 2;
+	const int glow_h = (margin.top + margin.bottom) / 2;
+
+	// Don't set different opposing sides, it will misrender, your problem.
+	// When the style of the class changes, this virtual method isn't invoked,
+	// so the update check is mildly pointless.
+	int item_border_x = glow_w + (border.left + border.right) / 2;
+	int item_border_y = glow_h + (border.top + border.bottom) / 2;
+	if (item_border_x != self->item_border_x ||
+		item_border_y != self->item_border_y) {
+		self->item_border_x = item_border_x;
+		self->item_border_y = item_border_y;
+		gtk_widget_queue_resize(widget);
+	}
+
+	if (self->glow)
+		cairo_surface_destroy(self->glow);
+	if (glow_w <= 0 || glow_h <= 0) {
+		self->glow = cairo_image_surface_create(CAIRO_FORMAT_A1, 0, 0);
+		return;
+	}
+
+	self->glow =
+		cairo_image_surface_create(CAIRO_FORMAT_A8, glow_w, glow_h);
+	unsigned char *data = cairo_image_surface_get_data(self->glow);
+	int stride = cairo_image_surface_get_stride(self->glow);
+
+	// Smooth out the curve, so that the edge of the glow isn't too jarring.
+	const double fade_factor = 1.5;
+
+	const int x_max = glow_w - 1;
+	const int y_max = glow_h - 1;
+	const double x_scale = 1. / MAX(1, x_max);
+	const double y_scale = 1. / MAX(1, y_max);
+	for (int y = 0; y <= y_max; y++)
+		for (int x = 0; x <= x_max; x++) {
+			const double xn = x_scale * (x_max - x);
+			const double yn = y_scale * (y_max - y);
+			double v = MIN(sqrt(xn * xn + yn * yn), 1);
+			data[y * stride + x] = round(pow(1 - v, fade_factor) * 255);
+		}
+	cairo_surface_mark_dirty(self->glow);
+}
+
 static void
 fastiv_browser_class_init(FastivBrowserClass *klass)
 {
@@ -402,6 +477,7 @@ fastiv_browser_class_init(FastivBrowserClass *klass)
 	widget_class->draw = fastiv_browser_draw;
 	widget_class->size_allocate = fastiv_browser_size_allocate;
 	widget_class->button_press_event = fastiv_browser_button_press_event;
+	widget_class->style_updated = fastiv_browser_style_updated;
 
 	browser_signals[ITEM_ACTIVATED] =
 		g_signal_new("item-activated", G_TYPE_FROM_CLASS(klass), 0, 0,
@@ -423,24 +499,7 @@ fastiv_browser_init(FastivBrowser *self)
 	g_array_set_clear_func(self->layouted_rows, (GDestroyNotify) row_free);
 
 	self->selected = -1;
-
+	self->glow = cairo_image_surface_create(CAIRO_FORMAT_A1, 0, 0);
-	self->glow = cairo_image_surface_create(
-		CAIRO_FORMAT_A8, g_item_border, g_item_border);
-	unsigned char *data = cairo_image_surface_get_data(self->glow);
-	int stride = cairo_image_surface_get_stride(self->glow);
-
-	// Smooth out the curve, so that the edge of the glow doesn't stand out
-	const double fade_factor = 1.5;
-
-	const int max = g_item_border - 1;
-	for (int y = 0; y <= max; y++)
-		for (int x = 0; x <= max; x++) {
-			int xn = max - x;
-			int yn = max - y;
-			double v = MIN(sqrt(xn * xn + yn * yn) / max, 1);
-			data[y * stride + x] = round(pow(1 - v, fade_factor) * 255);
-		}
-	cairo_surface_mark_dirty(self->glow);
 }
 
 static cairo_surface_t *

fastiv.c

@@ -336,7 +336,9 @@ main(int argc, char *argv[])
 	gtk_window_set_default_icon_name(PROJECT_NAME);
 
 	const char *style = "fastiv-view, fastiv-browser { background: #222; }"
-		"fastiv-browser { padding: 5px; }";
+		"fastiv-browser { padding: 5px; } fastiv-browser.item {"
+			"border: 1px solid rgba(255, 255, 255, 0.5); "
+			"margin: 10px; color: #000; background: #444; }";
 	GtkCssProvider *provider = gtk_css_provider_new();
 	gtk_css_provider_load_from_data(provider, style, strlen(style), NULL);
 	gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),