Cut down on type-checking overhead

We *know* what the parent class is. There is
no point in checking every time we want to
chain up. We only do this because the
foo_parent_class that the G_DEFINE_TYPE macro
provides for us is a generic pointer. And that
is just because we don't have the C name for
the parent type available there.

Just cast things, and avoid taking type system
locks.

.gitlab-ci.yml

@@ -25,7 +25,7 @@ variables:
   BACKEND_FLAGS: "-Dx11-backend=true -Dwayland-backend=true -Dbroadway-backend=true"
   FEATURE_FLAGS: "-Dvulkan=enabled -Dcloudproviders=enabled"
   MESON_TEST_TIMEOUT_MULTIPLIER: 3
-  FEDORA_IMAGE: "registry.gitlab.gnome.org/gnome/gtk/fedora:v36"
+  FEDORA_IMAGE: "registry.gitlab.gnome.org/gnome/gtk/fedora:v38"
   FLATPAK_IMAGE: "registry.gitlab.gnome.org/gnome/gnome-runtime-images/gnome:master"
 
 .only-default:

.gitlab-ci/README.md

@@ -14,6 +14,9 @@ Each Docker image has a tag composed of two parts:
 See the [container registry][registry] for the available images for each
 branch, as well as their available versions.
 
+Note that using `latest` as version number will overwrite the most
+recently uploaded image in the registry.
+
 ### Checklist for Updating a CI image
 
  - [ ] Update the `${image}.Dockerfile` file with the dependencies

.gitlab-ci/fedora.Dockerfile

@@ -1,4 +1,4 @@
-FROM fedora:34
+FROM fedora:36
 
 RUN dnf -y install \
     adwaita-icon-theme \
@@ -87,7 +87,6 @@ RUN dnf -y install \
     python3-wheel \
     redhat-rpm-config \
     sassc \
-    systemtap-sdt-devel \
     vulkan-devel \
     wayland-devel \
     wayland-protocols-devel \

.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
 

NEWS

@@ -1,83 +1,145 @@
-Overview of Changes in 4.6.2, 18-03-2022
+Overview of Changes in 4.7.0, 07-05-2022
 ========================================
 
-* GtkScrolledWindow:
- - Set scroll-to-focus on viewports
- - Avoid doubly triggering deceleration
+* GtkTextView:
+ - Reduce overdraws
 
-* GtkEntry:
- - Stop cursor blinking on focus-out
+* GtkViewport:
+ - Default scroll-to-focus to TRUE
+
+* GtkText:
+ - Stop blinking when we lose focus
+
+* GtkSearchEntry:
+ - Make search delay configurable
+
+* GtkPopoverMenu:
+ - Fix RTL positioning of buttons
+
+* GtkLabel:
+ - Fix focus keynav with links
+
+* GtkFileChooser:
+ - Prevent undesirable completion popups
+ - Fix a corner case in save mode
+ - Keep the portal filechooser alive long enough
+
+* GtkCheckButton:
+ - Allow setting a custom child
+
+* GtkEditableLabel:
+ - Make the :editing property writable
+
+* GtkColumnView:
+ - Various optimizations to improve scrolling performance
+
+* GtkTreeStore:
+ - Allow populating tree stores from ui files
+
+* GtkBoxLayout:
+ - Avoid infinite loops
+
+* CSS:
+ - Optimize reordering within the same parent
 
 * Emoji:
- - Update Emoji data to CLDR 40 and Unicode 14
- - Add more locales for Emoji data (da, de, en, es,
-   fr hu, it, ko, lt, ms, nl, pl, pt, ru, s, uk zh)
+ - Update to CLDR v40 / Unicode 14
+ - Add more locales
 
-* GDK
- - Optimize texture conversions on x86 and ARM
- - Use EGK_KHR_swap_buffers_with_damage if available
+* Input:
+ - Add scroll unit handling
+ - Handle display changes in GtkIMMultiContext
+ - Always populate GDK_AXIS_X/Y in event history
+ - Don't crash for large compose tables
 
-* GSK
- - Avoid clearing opaque regions
- - Support using a non-default framebuffer
- - Handle large viewports by tiling
+* Accessibility:
+ - Fix a crash at start when orca is running
+
+* Theme:
+ - Refresh icons
+ - Fix selection in vertical spin buttons
+ - Fix selection in editable labels
+
+* gdk:
+ - Optimize pixel format conversions
+ - Use EGL_KHR_swap_buffers_with_damage for NVidia
+
+* gsk:
+ - Handle large viewports
+ - Prepare texture libraries for glyphy rendering
+ - Don't leak big glyphs in the glyph cache
+ - Align offscreen rendering with th pixel grid
+ - Check for half-float support before using it
 
 * Wayland:
- - Prefer xdg-activation over gtk-shell
- - text protocol: Fix text caret location
- - text protocol: Use serials to control outbound messages
+ - Use xdg-activation protocol
+ - Fix text caret coordinates
+ - Fix on-screen keyboard activation
 
-* Inspector:
- - Show app ID and resource path
-
-* Demos:
- - widget-factory: Handle F11 to toggle fullscreen
-
-* Tools:
- - gtk-builder-tool: Allow use without display
+* MacOS:
+ - Fix sluggish and reversed scrolling
+ - Improve monitor detection
+ - Event handling fixes
+ - Fix keyboard input on popovers
+ - Support OpenGL-based video playback
+ - Suport fullscreen
+ - Improve native filechoooser size allocation
+ - Use CALayer and IOSurface for rendering
+ - Use a per-monitor CVDisplayLink
+ - Fix kinetic scrolling
+ - Improve window placement
+ - Improve multi-monitor handling
+ - Start applications in the foreground
+ - Fix cursor blink time
 
 * Windows:
  - Fix preedit window placement on HiDPI
- - Build improvements
- - Fix fullscreen handling
 
-* MacOS:
- - Fix scrolling with an external mouse
- - Fix kinetic scrolling with overshoot
- - Improve monitor detection
- - Many input handling fixes
- - Support OpenGL accelerated video playback
- - Support fullscreen
- - Improve interactive window resizing and moving
- - Fix backdrop state handling
- - Fix GtkFileChooserNative filtering
- - Use CALayer and IOSurface for rendering
- - Use per monitor CVDisplayLink to support mixed-rate monitors
- - Start applications in foreground
- - Fix cursor blink time
+* Tools:
+ - gtk4-builder-tool: Don't require a display for all commands
+ - gtk4-builder-tool: Add a screenshot command
+ - gtk4-node-editor: Install this utility
+
+* Debugging:
+ - inspector: Show more application data
+ - inspector: Allow viewing PangoAttrList properties
+
+* Documentation:
+ - Use the gtk-builder-tool to generate screenshots
+
+* Build:
+ - Fix cross-compilation
+ - Fix build on aarch64
+ - Fix build with gcc 12
 
 * Translation updates
  Basque
  Brazilian Portuguese
+ British English
  Catalan
  Chinese (China)
+ Chinese (Taiwan)
  Croatian
  Czech
  Danish
  Finnish
  Galician
+ Georgian
  German
  Hebrew
  Hungarian
+ Indonesian
  Italian
  Kazakh
  Korean
+ Latvian
  Lithuanian
  Norwegian Bokmål
  Persian
- Poliah
+ Polish
  Portuguese
  Russian
+ Serbian
  Slovak
  Slovenian
  Spanish

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/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/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