gtk-demo: Speed up characters scrolling

Use a simple label widget that does not queue a
resize when the text is changed.

.gitlab-ci/test-msys2.sh

@@ -15,9 +15,9 @@ pacman --noconfirm -Suy
 pacman --noconfirm -S --needed \
     base-devel \
     git \
-    mingw-w64-$MSYS2_ARCH-toolchain \
+    mingw-w64-$MSYS2_ARCH-cc \
     mingw-w64-$MSYS2_ARCH-ccache \
-    mingw-w64-$MSYS2_ARCH-pkg-config \
+    mingw-w64-$MSYS2_ARCH-pkgconf \
     mingw-w64-$MSYS2_ARCH-gobject-introspection \
     mingw-w64-$MSYS2_ARCH-meson \
     mingw-w64-$MSYS2_ARCH-adwaita-icon-theme \
@@ -30,7 +30,7 @@ pacman --noconfirm -S --needed \
     mingw-w64-$MSYS2_ARCH-libepoxy \
     mingw-w64-$MSYS2_ARCH-pango \
     mingw-w64-$MSYS2_ARCH-fribidi \
-    mingw-w64-$MSYS2_ARCH-gst-plugins-bad \
+    mingw-w64-$MSYS2_ARCH-gst-plugins-bad-libs \
     mingw-w64-$MSYS2_ARCH-shared-mime-info \
     mingw-w64-$MSYS2_ARCH-python-gobject
 

demos/gtk-demo/cursors.c

@@ -24,6 +24,7 @@ do_cursors (GtkWidget *do_widget)
 
       builder = gtk_builder_new_from_resource ("/cursors/cursors.ui");
       window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
+      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
       gtk_window_set_display (GTK_WINDOW (window),
                               gtk_widget_get_display (do_widget));
       g_signal_connect (window, "destroy",
@@ -34,9 +35,7 @@ do_cursors (GtkWidget *do_widget)
   if (!gtk_widget_get_visible (window))
     gtk_widget_show (window);
   else
-    {
-      gtk_window_destroy (GTK_WINDOW (window));
-    }
+    gtk_window_destroy (GTK_WINDOW (window));
 
   return window;
 }

demos/gtk-demo/hypertext.c

@@ -100,7 +100,7 @@ show_page (GtkTextView *text_view,
 
       theme = gtk_icon_theme_get_for_display (gtk_widget_get_display (GTK_WIDGET (text_view)));
       icon = gtk_icon_theme_lookup_icon (theme,
-                                         "eye-not-looking-symbolic",
+                                         "view-conceal-symbolic",
                                          NULL,
                                          16,
                                          1,

demos/gtk-demo/listview_ucd.c

@@ -9,6 +9,7 @@
 #include <gtk/gtk.h>
 #include "script-names.h"
 #include "unicode-names.h"
+#include "simplelabel.h"
 
 
 #define UCD_TYPE_ITEM (ucd_item_get_type ())
@@ -102,7 +103,9 @@ setup_centered_label (GtkSignalListItemFactory *factory,
                       GObject                  *listitem)
 {
   GtkWidget *label;
-  label = gtk_label_new ("");
+  label = simple_label_new ();
+  simple_label_set_min_chars (SIMPLE_LABEL (label), 3);
+  simple_label_set_nat_chars (SIMPLE_LABEL (label), 20);
   gtk_list_item_set_child (GTK_LIST_ITEM (listitem), label);
 }
 
@@ -111,8 +114,9 @@ setup_label (GtkSignalListItemFactory *factory,
              GObject                  *listitem)
 {
   GtkWidget *label;
-  label = gtk_label_new ("");
-  gtk_label_set_xalign (GTK_LABEL (label), 0);
+  label = simple_label_new ();
+  simple_label_set_min_chars (SIMPLE_LABEL (label), 3);
+  simple_label_set_nat_chars (SIMPLE_LABEL (label), 20);
   gtk_list_item_set_child (GTK_LIST_ITEM (listitem), label);
 }
 
@@ -121,10 +125,9 @@ setup_ellipsizing_label (GtkSignalListItemFactory *factory,
                          GObject                  *listitem)
 {
   GtkWidget *label;
-  label = gtk_label_new ("");
-  gtk_label_set_xalign (GTK_LABEL (label), 0);
-  gtk_label_set_ellipsize (GTK_LABEL (label), PANGO_ELLIPSIZE_END);
-  gtk_label_set_width_chars (GTK_LABEL (label), 20);
+  label = simple_label_new ();
+  simple_label_set_min_chars (SIMPLE_LABEL (label), 3);
+  simple_label_set_nat_chars (SIMPLE_LABEL (label), 20);
   gtk_list_item_set_child (GTK_LIST_ITEM (listitem), label);
 }
 
@@ -142,7 +145,7 @@ bind_codepoint (GtkSignalListItemFactory *factory,
   codepoint = ucd_item_get_codepoint (UCD_ITEM (item));
 
   g_snprintf (buffer, 10, "%#06x", codepoint);
-  gtk_label_set_label (GTK_LABEL (label), buffer);
+  simple_label_set_text (SIMPLE_LABEL (label), buffer);
 }
 
 static void
@@ -161,7 +164,7 @@ bind_char (GtkSignalListItemFactory *factory,
   if (g_unichar_isprint (codepoint))
     g_unichar_to_utf8 (codepoint, buffer);
 
-  gtk_label_set_label (GTK_LABEL (label), buffer);
+  simple_label_set_text (SIMPLE_LABEL (label), buffer);
 }
 
 static void
@@ -176,7 +179,7 @@ bind_name (GtkSignalListItemFactory *factory,
   item = gtk_list_item_get_item (GTK_LIST_ITEM (listitem));
   name = ucd_item_get_name (UCD_ITEM (item));
 
-  gtk_label_set_label (GTK_LABEL (label), name);
+  simple_label_set_text (SIMPLE_LABEL (label), name);
 }
 
 static void
@@ -191,7 +194,7 @@ bind_type (GtkSignalListItemFactory *factory,
   item = gtk_list_item_get_item (GTK_LIST_ITEM (listitem));
   codepoint = ucd_item_get_codepoint (UCD_ITEM (item));
 
-  gtk_label_set_label (GTK_LABEL (label), get_unicode_type_name (g_unichar_type (codepoint)));
+  simple_label_set_text (SIMPLE_LABEL (label), get_unicode_type_name (g_unichar_type (codepoint)));
 }
 
 static void
@@ -206,7 +209,7 @@ bind_break_type (GtkSignalListItemFactory *factory,
   item = gtk_list_item_get_item (GTK_LIST_ITEM (listitem));
   codepoint = ucd_item_get_codepoint (UCD_ITEM (item));
 
-  gtk_label_set_label (GTK_LABEL (label), get_break_type_name (g_unichar_break_type (codepoint)));
+  simple_label_set_text (SIMPLE_LABEL (label), get_break_type_name (g_unichar_break_type (codepoint)));
 }
 
 static void
@@ -221,7 +224,7 @@ bind_combining_class (GtkSignalListItemFactory *factory,
   item = gtk_list_item_get_item (GTK_LIST_ITEM (listitem));
   codepoint = ucd_item_get_codepoint (UCD_ITEM (item));
 
-  gtk_label_set_label (GTK_LABEL (label), get_combining_class_name (g_unichar_combining_class (codepoint)));
+  simple_label_set_text (SIMPLE_LABEL (label), get_combining_class_name (g_unichar_combining_class (codepoint)));
 }
 
 static void
@@ -238,7 +241,7 @@ bind_script (GtkSignalListItemFactory *factory,
   codepoint = ucd_item_get_codepoint (UCD_ITEM (item));
   script = g_unichar_get_script (codepoint);
 
-  gtk_label_set_label (GTK_LABEL (label), get_script_name (script));
+  simple_label_set_text (SIMPLE_LABEL (label), get_script_name (script));
 }
 
 static void

demos/gtk-demo/main.c

@@ -512,7 +512,7 @@ load_file (const char *demoname,
 
   info_buffer = gtk_text_buffer_new (NULL);
   gtk_text_buffer_create_tag (info_buffer, "title",
-                              "font", "Sans 18",
+                              "size", 18 * 1024,
                               "pixels-below-lines", 10,
                               NULL);
 

demos/gtk-demo/meson.build

@@ -130,6 +130,7 @@ extra_demo_sources = files([
   'unicode-names.c',
   'suggestionentry.c',
   'language-names.c',
+  'simplelabel.c',
 ])
 
 if os_unix

demos/gtk-demo/simplelabel.c

@@ -0,0 +1,260 @@
+#include "simplelabel.h"
+
+struct _SimpleLabel
+{
+  GtkWidget parent_instance;
+
+  PangoLayout *layout;
+  int min_chars;
+  int nat_chars;
+
+  int min_width;
+  int nat_width;
+  int height;
+};
+
+struct _SimpleLabelClass
+{
+  GtkWidgetClass parent_class;
+};
+
+enum {
+  PROP_TEXT = 1,
+  PROP_MIN_CHARS,
+  PROP_NAT_CHARS,
+  NUM_PROPERTIES
+};
+
+static GParamSpec *properties[NUM_PROPERTIES] = { NULL, };
+
+G_DEFINE_TYPE (SimpleLabel, simple_label, GTK_TYPE_WIDGET)
+
+static void
+simple_label_init (SimpleLabel *self)
+{
+  self->layout = gtk_widget_create_pango_layout (GTK_WIDGET (self), "");
+  pango_layout_set_ellipsize (self->layout, PANGO_ELLIPSIZE_NONE);
+  pango_layout_set_wrap (self->layout, PANGO_WRAP_WORD);
+  pango_layout_set_width (self->layout, -1);
+}
+
+static void
+simple_label_dispose (GObject *object)
+{
+  SimpleLabel *self = SIMPLE_LABEL (object);
+
+  g_clear_object (&self->layout);
+
+  G_OBJECT_CLASS (simple_label_parent_class)->dispose (object);
+}
+
+static void
+simple_label_set_property (GObject      *object,
+                           guint         prop_id,
+                           const GValue *value,
+                           GParamSpec   *pspec)
+{
+  SimpleLabel *self = SIMPLE_LABEL (object);
+
+  switch (prop_id)
+    {
+    case PROP_TEXT:
+      simple_label_set_text (self, g_value_get_string (value));
+      break;
+
+    case PROP_MIN_CHARS:
+      simple_label_set_min_chars (self, g_value_get_int (value));
+      break;
+
+    case PROP_NAT_CHARS:
+      simple_label_set_nat_chars (self, g_value_get_int (value));
+      break;
+
+    default:
+      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+      break;
+    }
+}
+
+static void
+simple_label_get_property (GObject     *object,
+                           guint        prop_id,
+                           GValue      *value,
+                           GParamSpec  *pspec)
+{
+  SimpleLabel *self = SIMPLE_LABEL (object);
+
+  switch (prop_id)
+    {
+    case PROP_TEXT:
+      g_value_set_string (value, pango_layout_get_text (self->layout));
+      break;
+
+    case PROP_MIN_CHARS:
+      g_value_set_int (value, self->min_chars);
+      break;
+
+    case PROP_NAT_CHARS:
+      g_value_set_int (value, self->nat_chars);
+      break;
+
+    default:
+      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+      break;
+    }
+}
+
+static void
+simple_label_measure (GtkWidget      *widget,
+                      GtkOrientation  orientation,
+                      int             for_size,
+                      int            *minimum,
+                      int            *natural,
+                      int            *minimum_baseline,
+                      int            *natural_baseline)
+{
+  SimpleLabel *self = SIMPLE_LABEL (widget);
+
+  if (orientation == GTK_ORIENTATION_VERTICAL)
+    {
+      *minimum = *natural = self->height;
+    }
+  else
+    {
+      *minimum = self->min_width;
+      *natural = self->nat_width;
+    }
+}
+
+static void
+simple_label_size_allocate (GtkWidget *widget,
+                            int        width,
+                            int        height,
+                            int        baseline)
+{
+  SimpleLabel *self = SIMPLE_LABEL (widget);
+
+  pango_layout_set_width (self->layout, width * PANGO_SCALE);
+}
+
+static void
+simple_label_snapshot (GtkWidget   *widget,
+                       GtkSnapshot *snapshot)
+{
+  SimpleLabel *self = SIMPLE_LABEL (widget);
+  GtkStyleContext *context;
+
+  context = gtk_widget_get_style_context (widget);
+
+  gtk_snapshot_render_layout (snapshot, context, 0, 0, self->layout);
+}
+
+static void
+simple_label_class_init (SimpleLabelClass *class)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (class);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (class);
+
+  object_class->dispose = simple_label_dispose;
+  object_class->set_property = simple_label_set_property;
+  object_class->get_property = simple_label_get_property;
+
+  widget_class->measure = simple_label_measure;
+  widget_class->size_allocate = simple_label_size_allocate;
+  widget_class->snapshot = simple_label_snapshot;
+
+  properties[PROP_TEXT] =
+    g_param_spec_string ("text", "Text", "Text",
+                         NULL,
+                         G_PARAM_READWRITE);
+
+  properties[PROP_MIN_CHARS] =
+    g_param_spec_int ("min-chars", "Minimum Characters", "Minimum Characters",
+                      0, G_MAXINT, 0,
+                      G_PARAM_READWRITE);
+
+  properties[PROP_NAT_CHARS] =
+    g_param_spec_int ("nat-chars", "Natural Characters", "Natural Characters",
+                      0, G_MAXINT, 0,
+                      G_PARAM_READWRITE);
+
+  g_object_class_install_properties (object_class, NUM_PROPERTIES, properties);
+}
+
+GtkWidget *
+simple_label_new (void)
+{
+  return g_object_new (SIMPLE_TYPE_LABEL, NULL);
+}
+
+void
+simple_label_set_text (SimpleLabel *self,
+                       const char  *text)
+{
+  if (strcmp (text, pango_layout_get_text (self->layout)) == 0)
+    return;
+
+  pango_layout_set_text (self->layout, text, -1);
+
+  gtk_widget_queue_draw (GTK_WIDGET (self));
+
+  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_TEXT]);
+}
+
+static void
+recalculate (SimpleLabel *self)
+{
+  PangoContext *context;
+  PangoFontMetrics *metrics;
+  int char_width;
+  int digit_width;
+  int width;
+  int ascent;
+  int descent;
+
+  context = gtk_widget_get_pango_context (GTK_WIDGET (self));
+  metrics = pango_context_get_metrics (context,
+                                       pango_context_get_font_description (context),
+                                       pango_context_get_language (context));
+  char_width = pango_font_metrics_get_approximate_char_width (metrics);
+  digit_width = pango_font_metrics_get_approximate_digit_width (metrics);
+  ascent = pango_font_metrics_get_ascent (metrics);
+  descent = pango_font_metrics_get_descent (metrics);
+  pango_font_metrics_unref (metrics);
+
+  width = MAX (char_width, digit_width);
+
+  self->min_width = (width * self->min_chars) / PANGO_SCALE;
+  self->nat_width = (width * self->nat_chars) / PANGO_SCALE;
+  self->height = (ascent + descent) / PANGO_SCALE;
+}
+
+void
+simple_label_set_min_chars (SimpleLabel *self,
+                            int          min_chars)
+{
+  if (self->min_chars == min_chars)
+    return;
+
+  self->min_chars = min_chars;
+
+  recalculate (self);
+  gtk_widget_queue_resize (GTK_WIDGET (self));
+
+  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_MIN_CHARS]);
+}
+
+void
+simple_label_set_nat_chars (SimpleLabel *self,
+                            int          nat_chars)
+{
+  if (self->nat_chars == nat_chars)
+    return;
+
+  self->nat_chars = nat_chars;
+
+  recalculate (self);
+  gtk_widget_queue_resize (GTK_WIDGET (self));
+
+  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_NAT_CHARS]);
+}

demos/gtk-demo/simplelabel.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <gtk/gtk.h>
+
+#define SIMPLE_TYPE_LABEL (simple_label_get_type ())
+G_DECLARE_FINAL_TYPE (SimpleLabel, simple_label, SIMPLE, LABEL, GtkWidget)
+
+GtkWidget * simple_label_new           (void);
+
+void        simple_label_set_text      (SimpleLabel *self,
+                                        const char  *text);
+void        simple_label_set_min_chars (SimpleLabel *self,
+                                        int          min_chars);
+void        simple_label_set_nat_chars (SimpleLabel *self,
+                                        int          nat_chars);

demos/node-editor/meson.build

@@ -19,12 +19,24 @@ executable('gtk4-node-editor',
   ] + common_cflags,
   win_subsystem: 'windows',
   link_args: extra_demo_ldflags,
-  install: false,
+  install: true,
 )
 
-# icons, don't install them until we decide to install gtk4-node-editor
-#icontheme_dir = join_paths(gtk_datadir, 'icons/hicolor')
+# icons
+icontheme_dir = join_paths(gtk_datadir, 'icons/hicolor')
+
+foreach size: ['scalable', 'symbolic']
+  install_subdir('data/' + size, install_dir: icontheme_dir)
+endforeach
+
+# desktop file
+install_data('org.gtk.gtk4.NodeEditor.desktop', install_dir: gtk_applicationsdir)
+
+# appdata
+configure_file(
+  input: 'org.gtk.gtk4.NodeEditor.appdata.xml.in',
+  output: 'org.gtk.gtk4.NodeEditor.appdata.xml',
+  configuration: appdata_config,
+  install_dir: gtk_appdatadir
+)
 
-#foreach size: ['scalable', 'symbolic']
-#  install_subdir('data/' + size, install_dir: icontheme_dir)
-#endforeach

demos/node-editor/org.gtk.gtk4.NodeEditor.appdata.xml.in

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop">
+  <id>org.gtk.gtk4.NodeEditor</id>
+  <launchable type="desktop-id">org.gtk.gtk4.NodeEditor.desktop</launchable>
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>LGPL-2.1-or-later</project_license>
+  <name>GTK Node Editor</name>
+  <summary>Program to edit render node files</summary>
+  <description>
+    <p>
+      GTK Node Editor is a simple application to show and edit
+      render node files.
+    </p>
+    <p>
+      Render node files can e.g. be created by the GTK inspector.
+    </p>
+  </description>
+  <screenshots>
+    <screenshot>
+      <image>https://static.gnome.org/appdata/gtk4-node-editor/gtk4-node-editor.png</image>
+      <caption>Node Editor</caption>
+    </screenshot>
+  </screenshots>
+  <kudos>
+    <kudo>HiDpiIcon</kudo>
+    <kudo>ModernToolkit</kudo>
+  </kudos>
+  <url type="homepage">https://www.gtk.org</url>
+  <translation type="gettext">gtk-4.0</translation>
+  <update_contact>matthias.clasen_at_gmail.com</update_contact>
+  <developer_name>Matthias Clasen and others</developer_name>
+  <content_rating type="oars-1.1"/>
+  <releases>
+    <release version="@BUILD_VERSION@">
+      <description>
+        <p>A new build of GTK.</p>
+      </description>
+    </release>
+  </releases>
+</component>

demos/node-editor/org.gtk.gtk4.NodeEditor.desktop

@@ -0,0 +1,9 @@
+[Desktop Entry]
+Name=Node Editor
+Comment=An application that edits render nodes
+Exec=gtk4-node-editor
+Icon=org.gtk.gtk4.NodeEditor
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=Development;GTK;

docs/reference/gtk/gtk4-builder-tool.rst

@@ -16,6 +16,7 @@ SYNOPSIS
 |   **gtk4-builder-tool** enumerate <FILE>
 |   **gtk4-builder-tool** simplify [OPTIONS...] <FILE>
 |   **gtk4-builder-tool** preview [OPTIONS...] <FILE>
+|   **gtk4-builder-tool** screenshot [OPTIONS...] <FILE>
 
 DESCRIPTION
 -----------
@@ -41,7 +42,7 @@ definition file.
 Preview
 ^^^^^^^
 
-The ``preview`` command displays the UI dfinition file.
+The ``preview`` command displays the UI definition file.
 
 This command accepts options to specify the ID of the toplevel object and a CSS
 file to use.
@@ -55,6 +56,33 @@ file to use.
 
   Load style information from the given CSS file.
 
+Screenshot
+^^^^^^^^^^
+
+The ``screenshot`` command saves a rendering of the UI definition file
+as a png image or node file. The name of the file to write can be specified as
+a second FILE argument.
+
+This command accepts options to specify the ID of the toplevel object and a CSS
+file to use.
+
+``--id=ID``
+
+  The ID of the object to preview. If not specified, gtk4-builder-tool will
+  choose a suitable object on its own.
+
+``--css=FILE``
+
+  Load style information from the given CSS file.
+
+``--node``
+
+  Write a serialized node file instead of a png image.
+
+``--force``
+
+  Overwrite an existing file.
+
 Simplification
 ^^^^^^^^^^^^^^
 

docs/reference/gtk/gtk4-node-editor.rst

@@ -0,0 +1,27 @@
+.. _gtk4-node-editor(1):
+
+=================
+gtk4-node-editor
+=================
+
+-----------------
+Editor render nodes
+-----------------
+
+SYNOPSIS
+--------
+
+|   **gtk4-node-editor** [OPTIONS...]
+
+DESCRIPTION
+-----------
+
+``gtk4-node-editor`` is a utility to show and edit render node files.
+Such render node files can be obtained e.g. from the GTK inspector.
+
+OPTIONS
+-------
+
+``-h, --help``
+
+  Show the application help.

docs/reference/gtk/images/aboutdialog.ui

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAboutDialog">
+    <property name="program-name">GTK Code Demos</property>
+    <property name="version">4.8.0</property>
+    <property name="copyright">© 1997-2022 The GTK Team</property>
+    <property name="comments">Program to demonstrate GTK functions</property>
+    <property name="logo">gtk-logo.png</property>
+    <property name="title">About GTK Code Demos</property>
+    <property name="authors">Peter Mattis
+Spencer Kimball
+Josh MacDonald
+and many more…
+</property>
+  </object>
+</interface>

docs/reference/gtk/images/action-bar.ui

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <child>
+              <object class="GtkTextView">
+                <property name="vexpand">1</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkActionBar">
+                <child>
+                  <object class="GtkButton">
+                    <property name="icon-name">object-select-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="icon-name">call-start-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/appchooserbutton.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkAppChooserButton">
+                <property name="content-type">text/plain</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Application Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/appchooserdialog.ui

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAppChooserDialog">
+    <property name="content-type">image/png</property>
+    <property name="default-width">200</property>
+    <property name="default-height">300</property>
+  </object>
+</interface>

docs/reference/gtk/images/assistant.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAssistant">
+    <property name="resizable">0</property>
+    <property name="default-width">300</property>
+    <property name="default-height">140</property>
+    <property name="title">Assistant</property>
+    <child>
+      <object class="GtkAssistantPage">
+        <property name="title">Assistant page</property>
+        <property name="complete">1</property>
+        <property name="child">
+          <object class="GtkLabel">
+            <property name="label">Assistant</property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkAssistantPage">
+        <property name="page-type">confirm</property>
+        <property name="child">
+          <object class="GtkLabel">
+            <property name="label">You sure?</property>
+          </object>
+        </property>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/box.ui

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">horizontal</property>
+                <property name="homogeneous">1</property>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">4</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">⋯</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">4</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="halign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="halign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">⋮</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="justify">center</property>
+                <property name="label">Horizontal and Vertical Boxes</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/button.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="label">Button</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/calendar.ui

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <child>
+              <object class="GtkCalendar">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Calendar</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/centerbox.ui

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">20</property>
+            <property name="margin-end">20</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkCenterBox">
+                <property name="orientation">horizontal</property>
+                <property name="hexpand">1</property>
+                <property name="vexpand">1</property>
+                <property name="halign">fill</property>
+                <child type="start">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+                <child type="center">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="justify">center</property>
+                <property name="label">Center Box</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/check-button.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkCheckButton">
+                <property name="active">1</property>
+                <property name="label">Check Button</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkCheckButton">
+                <property name="active">0</property>
+                <property name="label">Check Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/color-button.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkColorButton">
+                <property name="rgba">#1e90ff</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Color Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/colorchooser.ui

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkColorChooserDialog">
+    <property name="title">Color Chooser Dialog</property>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box-entry.ui

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBox">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="has-entry">1</property>
+            <child internal-child="entry">
+              <object class="GtkEntry">
+                <property name="text">Combo Box Entry</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box-text.ui

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBoxText">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <items>
+              <item>Combo Box Text</item>
+            </items>
+            <property name="active">0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box.ui

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBox">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="model">
+              <object class="GtkListStore">
+                <columns>
+                  <column type="gchararray"/>
+                </columns>
+                <data>
+                  <row>
+                    <col id="0">Combo Box</col>
+                  </row>
+                </data>
+              </object>
+            </property>
+            <child>
+              <object class="GtkCellRendererText">
+              </object>
+              <attributes>
+                <attribute name="text">0</attribute>
+              </attributes>
+            </child>
+            <property name="active">0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/dialog.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkDialog">
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <property name="title">Dialog</property>
+    <child type="action">
+      <object class="GtkButton" id="button_cancel">
+        <property name="label">Cancel</property>
+      </object>
+    </child>
+    <child type="action">
+      <object class="GtkButton" id="button_ok">
+        <property name="label">Accept</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="label">Content</property>
+        <property name="hexpand">1</property>
+        <property name="halign">center</property>
+      </object>
+    </child>
+    <action-widgets>
+      <action-widget response="ok" default="true">button_ok</action-widget>
+      <action-widget response="cancel" default="true">button_cancel</action-widget>
+    </action-widgets>
+  </object>
+</interface>

docs/reference/gtk/images/drawingarea.ui

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <child>
+              <object class="GtkFrame">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <child>
+                  <object class="GtkPicture">
+                    <property name="paintable">drawingarea-content.png</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Drawing Area</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/drop-down.ui

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkDropDown">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="model">
+              <object class="GtkStringList">
+                <items>
+                  <item>Drop Down</item>
+                  <item>Almost a combo</item>
+                </items>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/editable-label.ui

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <property name="focus-widget">editable2</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">12</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkEditableLabel">
+                <property name="text">Editable Label</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSeparator">
+              </object>
+            </child>
+            <child>
+              <object class="GtkEditableLabel" id="editable2">
+                <property name="text">Editable Label</property>
+                <property name="editing">1</property>
+                <style>
+                  <class name="frame"/>
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/emojichooser.ui

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+      <object class="GtkEmojiChooser">
+        <property name="autohide">0</property>
+      </object>
+</interface>

docs/reference/gtk/images/entry.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkEntry">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="text">Entry</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/expander.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkExpander">
+            <property name="label">Expander</property>
+            <property name="hexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Hidden Content</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/flow-box.ui

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="frame"/>
+          <class name="shadow"/>
+          <class name="background"/>
+        </style>
+        <property name="orientation">vertical</property>
+        <property name="spacing">3</property>
+        <property name="hexpand">1</property>
+        <property name="vexpand">1</property>
+        <child>
+          <object class="GtkFlowBox">
+            <property name="min-children-per-line">2</property>
+            <property name="max-children-per-line">2</property>
+            <property name="selection-mode">browse</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Child One</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton">
+                <property name="label">Child Two</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkFlowBoxChild">
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">6</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">Child Three</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkCheckButton">
+                        <property name="active">1</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Flow Box</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/font-button.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkFontButton">
+                <property name="font-desc">Sans Serif 10</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Font Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/fontchooser.ui

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkFontChooserDialog">
+    <property name="default-width">200</property>
+    <property name="default-height">300</property>
+    <property name="title">Font Chooser Dialog</property>
+  </object>
+</interface>

docs/reference/gtk/images/frame.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkFrame">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">fill</property>
+            <property name="label">Frame</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/glarea.ui

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-width">150</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <child>
+              <object class="GtkFrame">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <style>
+                  <class name="black"/>
+                </style>
+                <child>
+                  <object class="GtkPicture">
+                    <property name="paintable">glarea-content.png</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">GL Area</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/grid.ui

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">20</property>
+            <property name="margin-end">20</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkGrid">
+                <property name="row-spacing">4</property>
+                <property name="column-spacing">4</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">1</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">1</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label">⋯</property>
+                    <layout>
+                      <property name="column">2</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label">⋮</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">2</property>
+                    </layout>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="justify">center</property>
+                <property name="label">Grid</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/headerbar.ui

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="resizable">0</property>
+    <property name="default-width">220</property>
+    <property name="default-height">150</property>
+    <property name="title">Header Bar</property>
+    <child type='titlebar'>
+      <object class="GtkHeaderBar">
+        <child type='end'>
+          <object class="GtkButton">
+            <property name="icon-name">bookmark-new-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkTextView">
+        <property name="cursor-visible">0</property>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/icon-view.ui

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkListStore" id="store">
+    <columns>
+      <column type="gchararray"/>
+      <column type="GdkPixbuf"/>
+    </columns>
+    <data>
+      <row>
+        <col id="0">One</col>
+        <col id="1">folder.png</col>
+      </row>
+      <row>
+        <col id="0">Two</col>
+        <col id="1">gnome.png</col>
+      </row>
+    </data>
+  </object>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkScrolledWindow">
+                <style>
+                  <class name="frame"/>
+                </style>
+                <property name="hscrollbar-policy">never</property>
+                <property name="vscrollbar-policy">never</property>
+                <property name="propagate-natural-height">1</property>
+                <child>
+                  <object class="GtkIconView">
+                    <property name="hexpand">1</property>
+                    <property name="vexpand">1</property>
+                    <property name="model">store</property>
+                    <property name="text-column">0</property>
+                    <property name="pixbuf-column">1</property>
+                    <property name="item-orientation">horizontal</property>
+                    <property name="row-spacing">0</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Icon View</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/image.ui

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkImage">
+                <property name="icon-name">applications-graphics</property>
+                <property name="icon-size">large</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Image</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/info-bar.ui

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkInfoBar">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="show-close-button">1</property>
+            <property name="message-type">info</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Info Bar</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/label.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkLabel">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="label">Label</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/levelbar.ui

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkLevelBar">
+                <property name="value">0.3333</property>
+                <property name="hexpand">1</property>
+                <property name="halign">fill</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Level Bar</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/link-button.ui

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkLinkButton">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="label">Link Button</property>
+            <property name="uri">http://www.gtk.org</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/list-and-tree.ui

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkTreeStore" id="store">
+    <columns>
+      <column type="gchararray"/>
+      <column type="gboolean"/>
+      <column type="gchararray"/>
+    </columns>
+    <data>
+      <row>
+        <col id="0">Line One</col>
+        <col id="1">False</col>
+        <col id="2">A</col>
+      </row>
+      <row>
+        <col id="0">Line Two</col>
+        <col id="1">True</col>
+        <col id="2">B</col>
+        <row>
+          <col id="0">Line Three</col>
+          <col id="1">False</col>
+          <col id="2">C</col>
+        </row>
+      </row>
+    </data>
+  </object>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkTreeView">
+        <style>
+          <class name="frame"/>
+        </style>
+        <property name="hexpand">1</property>
+        <property name="vexpand">1</property>
+        <property name="model">store</property>
+        <child>
+          <object class="GtkTreeViewColumn">
+            <property name="title">List</property>
+            <child>
+              <object class="GtkCellRendererText"/>
+              <attributes>
+                <attribute name="text">0</attribute>
+              </attributes>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkTreeViewColumn">
+            <property name="title">and</property>
+            <child>
+              <object class="GtkCellRendererToggle"/>
+              <attributes>
+                <attribute name="active">1</attribute>
+              </attributes>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkTreeViewColumn">
+            <property name="title">Tree</property>
+            <child>
+              <object class="GtkCellRendererText"/>
+              <attributes>
+                <attribute name="text">2</attribute>
+              </attributes>
+            </child>
+          </object>
+        </child>
+        <property name="enable-tree-lines">0</property>
+        <property name="enable-grid-lines">0</property>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/list-box.ui

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="frame"/>
+          <class name="shadow"/>
+          <class name="background"/>
+        </style>
+        <property name="orientation">vertical</property>
+        <property name="spacing">3</property>
+        <property name="hexpand">1</property>
+        <property name="vexpand">1</property>
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">single</property>
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="selectable">0</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="hexpand">1</property>
+                    <property name="halign">center</property>
+                    <property name="label">List Box</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">horizontal</property>
+                <property name="spacing">10</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="hexpand">1</property>
+                    <property name="label">Line One</property>
+                    <property name="xalign">0</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton">
+                    <property name="active">1</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">horizontal</property>
+                <property name="spacing">10</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="hexpand">1</property>
+                    <property name="label">Line Two</property>
+                    <property name="xalign">0</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="label">2</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">horizontal</property>
+                <property name="spacing">10</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label">Line Three</property>
+                    <property name="xalign">0</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkEntry">
+                    <property name="hexpand">1</property>
+                    <property name="halign">end</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/media-controls.ui

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkVideo" id="video">
+            <property name="visible">0</property>
+            <property name="file">file:///home/mclasen/Sources/gtk-master/docs/reference/gtk/images/gtk-logo.webm</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkMediaControls">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <binding name="media-stream">
+                  <lookup type="GtkVideo" name="media-stream">video</lookup>
+                </binding>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Media Controls</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/menu-button.ui

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkMenuButton">
+                <property name="icon-name">emblem-system-symbolic</property>
+                <property name="popover"><object class="GtkPopover"></object></property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Menu Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/menu.ui

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <menu id="model">
+    <section>
+      <submenu>
+        <attribute name="label">Style</attribute>
+        <section>
+          <item>
+            <attribute name="label">Item</attribute>
+          </item>
+        </section>
+      </submenu>
+      <item>
+        <attribute name="label">Transition</attribute>
+        <attribute name="action">misc.toggle-visibility</attribute>
+      </item>
+    </section>
+    <section>
+      <item>
+        <attribute name="label">Inspector</attribute>
+      </item>
+      <item>
+        <attribute name="label">About</attribute>
+        <attribute name="action">text.redo</attribute>
+      </item>
+    </section>
+  </menu>
+  <object class="GtkText">
+    <child>
+      <object class="GtkPopoverMenu">
+        <property name="autohide">0</property>
+        <property name="menu-model">model</property>
+        <property name="halign">center</property>
+        <property name="valign">center</property>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/menubar.ui

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <menu id="model">
+    <submenu>
+      <attribute name="label">File</attribute>
+    </submenu>
+    <submenu>
+      <attribute name="label">Edit</attribute>
+    </submenu>
+    <submenu>
+      <attribute name="label">View</attribute>
+    </submenu>
+  </menu>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkPopoverMenuBar">
+                <property name="menu-model">model</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Menu Bar</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/meson.build

@@ -0,0 +1,91 @@
+# commented-out ui files need more work
+
+ui_files = [
+  'aboutdialog.ui',
+  'action-bar.ui',
+  'appchooserbutton.ui',
+  'appchooserdialog.ui',
+  'assistant.ui',
+  'box.ui',
+  'button.ui',
+  'calendar.ui',
+  'centerbox.ui',
+  'check-button.ui',
+  'colorchooser.ui',
+  'color-button.ui',
+  'combo-box.ui',
+  'combo-box-entry.ui',
+  'combo-box-text.ui',
+  'dialog.ui',
+  'drawingarea.ui',
+  'drop-down.ui',
+  'editable-label.ui',
+  'emojichooser.ui',
+  'entry.ui',
+  'expander.ui',
+  'flow-box.ui',
+  'fontchooser.ui',
+  'font-button.ui',
+  'frame.ui',
+  'glarea.ui',
+  'grid.ui',
+  'headerbar.ui',
+  'icon-view.ui',
+  'image.ui',
+  'info-bar.ui',
+  'label.ui',
+  'levelbar.ui',
+  'link-button.ui',
+  'list-box.ui',
+  'list-and-tree.ui',
+  'media-controls.ui',
+  'menu.ui',
+  'menubar.ui',
+  'menu-button.ui',
+  'messagedialog.ui',
+  'multiline-text.ui',
+  'notebook.ui',
+  'overlay.ui',
+  'pagesetupdialog.ui',
+  'panes.ui',
+  'password-entry.ui',
+  'picture.ui',
+  'popover.ui',
+  'printdialog.ui',
+  'progressbar.ui',
+  'radio-button.ui',
+  'scales.ui',
+  'scrollbar.ui',
+  'scrolledwindow.ui',
+  'search-bar.ui',
+  'search-entry.ui',
+  'separator.ui',
+  'shortcuts-window.ui',
+  'sidebar.ui',
+  'spinbutton.ui',
+  'spinner.ui',
+  'stack.ui',
+  'stackswitcher.ui',
+  'statusbar.ui',
+  'switch.ui',
+  'toggle-button.ui',
+  'video.ui',
+  'volumebutton.ui',
+  'window.ui',
+  'windowcontrols.ui',
+]
+
+gtk_builder_tool = find_program('gtk4-builder-tool')
+
+if get_option('update_screenshots')
+  foreach ui_file: ui_files
+    png_file = ui_file.replace('.ui', '.png')
+    gtk_images += custom_target('@0@ from @1@'.format(png_file, ui_file),
+                                input: [ui_file, 'style.css'],
+                                output: png_file,
+                                command: [ gtk_builder_tool, 'screenshot',
+                                           '--force',
+                                           '--css', '@INPUT1@',
+                                           '@INPUT0@', '@OUTPUT@' ])
+  endforeach
+endif