much better focus indicator

Author: jcupitt

CHANGELOG.md

@@ -1,6 +1,7 @@
 master
 
 - fix a ref leak in tilesource_new_from_file()
+- much better focus indicator in imagedisplay
 
 ## 4.0.0 31/05/25
 

src/gtk/imagedisplay.css

@@ -0,0 +1,15 @@
+
+imagedisplay {
+  transition-property: outline-offset, outline-color;
+  transition-duration: 300ms;
+  animation-timing-function: ease-in-out;
+  border-radius: 7px;
+  outline-offset: 4px;
+  outline: 2px solid transparent;
+}
+
+imagedisplay:focus:focus-visible {
+  outline-offset: -3px;
+  outline-color: @theme_selected_bg_color;
+}
+

src/gtk/vipsdisp.gresources.xml

@@ -9,8 +9,10 @@
     <file preprocess="xml-stripblanks">ientry.ui</file>
     <file preprocess="xml-stripblanks">tslider.ui</file>
     <file preprocess="xml-stripblanks">saveoptions.ui</file>
-    <file>saveoptions.css</file>
     <file preprocess="xml-stripblanks">properties.ui</file>
+
+    <file>imagedisplay.css</file>
+    <file>saveoptions.css</file>
     <file>properties.css</file>
   </gresource>
 </gresources>

src/imagedisplay.c

@@ -863,6 +863,8 @@ imagedisplay_class_init(ImagedisplayClass *class)
 		g_cclosure_marshal_VOID__OBJECT,
 		G_TYPE_NONE, 1,
 		GTK_TYPE_SNAPSHOT);
+
+	gtk_widget_class_set_css_name(widget_class, "imagedisplay");
 }
 
 Imagedisplay *

src/vipsdispapp.c

@@ -124,10 +124,9 @@ vipsdisp_app_startup(GApplication *app)
 	/* We have custom CSS for our dynamic widgets.
 	 */
 	GtkCssProvider *provider = gtk_css_provider_new();
-	gtk_css_provider_load_from_resource(provider,
-		APP_PATH "/saveoptions.css");
-	gtk_css_provider_load_from_resource(provider,
-		APP_PATH "/properties.css");
+	gtk_css_provider_load_from_resource(provider, APP_PATH "/saveoptions.css");
+	gtk_css_provider_load_from_resource(provider, APP_PATH "/properties.css");
+	gtk_css_provider_load_from_resource(provider, APP_PATH "/imagedisplay.css");
 	gtk_style_context_add_provider_for_display(gdk_display_get_default(),
 		GTK_STYLE_PROVIDER(provider),
 		GTK_STYLE_PROVIDER_PRIORITY_FALLBACK);