osd: support percent values for window switcher width

Add ability to set width with percentage of monitor instead of just pixels.
With this the OSD sizes itself properly on both my 4k and 2k monitors.

example: 50% or 75% instead of 600, max 100%

docs/labwc-theme.5.scd

@@ -164,6 +164,8 @@ elements are not listed here, but are supported.
 
 *osd.window-switcher.width*
 	Width of window switcher in pixels. Default is 600.
+	Width can also be percent of the width of the monitor.
+	% is mandatory as last character in this case, max 100%
 
 *osd.window-switcher.padding*
 	Padding of window switcher in pixels. This is the space between the

docs/themerc

@@ -60,7 +60,10 @@ osd.border.color: #000000
 osd.border.width: 1
 osd.label.text.color: #000000
 
+# width can be set as percent (of screen width)
+# example 50% or 75% instead of 600, max 100%
 osd.window-switcher.width: 600
+
 osd.window-switcher.padding: 4
 osd.window-switcher.item.padding.x: 10
 osd.window-switcher.item.padding.y: 1

include/theme.h

@@ -75,6 +75,7 @@ struct theme {
 	int osd_window_switcher_item_padding_x;
 	int osd_window_switcher_item_padding_y;
 	int osd_window_switcher_item_active_border_width;
+	bool osd_window_switcher_width_is_percent;
 
 	int osd_workspace_switcher_boxes_width;
 	int osd_workspace_switcher_boxes_height;

src/osd.c

@@ -321,7 +321,7 @@ render_osd(struct server *server, cairo_t *cairo, int w, int h,
 	if (show_workspace) {
 		/* Center workspace indicator on the x axis */
 		int x = font_width(&rc.font_osd, workspace_name);
-		x = (theme->osd_window_switcher_width - x) / 2;
+		x = (w - x) / 2;
 		cairo_move_to(cairo, x, y + theme->osd_window_switcher_item_active_border_width);
 		PangoWeight weight = pango_font_description_get_weight(desc);
 		pango_font_description_set_weight(desc, PANGO_WEIGHT_BOLD);
@@ -432,7 +432,7 @@ render_osd(struct server *server, cairo_t *cairo, int w, int h,
 			struct wlr_fbox fbox = {
 				.x = theme->osd_border_width + theme->osd_window_switcher_padding,
 				.y = y,
-				.width = theme->osd_window_switcher_width
+				.width = w
 					- 2 * theme->osd_border_width
 					- 2 * theme->osd_window_switcher_padding,
 				.height = theme->osd_window_switcher_item_height,
@@ -460,6 +460,10 @@ display_osd(struct output *output, struct wl_array *views)
 
 	float scale = output->wlr_output->scale;
 	int w = theme->osd_window_switcher_width;
+	if (theme->osd_window_switcher_width_is_percent) {
+		w = output->wlr_output->width / output->wlr_output->scale
+			* theme->osd_window_switcher_width / 100;
+	}
 	int h = wl_array_len(views) * rc.theme->osd_window_switcher_item_height
 		+ 2 * rc.theme->osd_border_width
 		+ 2 * rc.theme->osd_window_switcher_padding;

src/theme.c

@@ -494,6 +494,7 @@ theme_builtin(struct theme *theme)
 	parse_hexstr("#888888", theme->menu_separator_color);
 
 	theme->osd_window_switcher_width = 600;
+	theme->osd_window_switcher_width_is_percent = false;
 	theme->osd_window_switcher_padding = 4;
 	theme->osd_window_switcher_item_padding_x = 10;
 	theme->osd_window_switcher_item_padding_y = 1;
@@ -674,7 +675,12 @@ entry(struct theme *theme, const char *key, const char *value)
 		parse_hexstr(value, theme->osd_border_color);
 	}
 	if (match_glob(key, "osd.window-switcher.width")) {
-		theme->osd_window_switcher_width = atoi(value);
+		if (strrchr(value, '%')) {
+			theme->osd_window_switcher_width_is_percent = true;
+		} else {
+			theme->osd_window_switcher_width_is_percent = false;
+		}
+		theme->osd_window_switcher_width = MAX(atoi(value), 0);
 	}
 	if (match_glob(key, "osd.window-switcher.padding")) {
 		theme->osd_window_switcher_padding = atoi(value);
@@ -1011,6 +1017,10 @@ post_processing(struct theme *theme)
 	if (theme->osd_workspace_switcher_boxes_height == 0) {
 		theme->osd_workspace_switcher_boxes_width = 0;
 	}
+	if (theme->osd_window_switcher_width_is_percent) {
+		theme->osd_window_switcher_width =
+			MIN(theme->osd_window_switcher_width, 100);
+	}
 }
 
 void