Port extensions app and portal to GTK4wip/fmuellner/gtk4

With the previous preparations in place, it is time to take the plunge.

As both the app and the portal use the same small library for handling
external windows, port everything at once to avoid the hassle of building
and installing two versions of the library.

With the portal using GTK4 now, all extensions must port their preference
widgets as well.

13 files changed, 247 insertions, 375 deletions

diff --git a/js/dbusServices/extensions/extensionsService.js b/js/dbusServices/extensions/extensionsService.js
index 34107cdb3..8217675b0 100644
--- a/js/dbusServices/extensions/extensionsService.js
+++ b/js/dbusServices/extensions/extensionsService.js
@@ -128,7 +128,7 @@ var ExtensionsService = class extends ServiceImplementation {
                 externalWindow = Shew.ExternalWindow.new_from_handle(parentWindow);
 
             if (externalWindow)
-                externalWindow.set_parent_of(window.window);
+                externalWindow.set_parent_of(window.get_surface());
 
             if (options.modal)
                 window.modal = options.modal.get_boolean();
@@ -177,11 +177,11 @@ var ExtensionPrefsDialog = GObject.registerClass({
         this._initActions();
         this._addCustomStylesheet();
 
-        this._gesture = new Gtk.GestureMultiPress({
-            widget: this._expander,
+        this._gesture = new Gtk.GestureClick({
             button: 0,
             exclusive: true,
         });
+        this._expander.add_controller(this._gesture);
 
         this._gesture.connect('released', (gesture, nPress) => {
             if (nPress === 1)
@@ -216,9 +216,9 @@ var ExtensionPrefsDialog = GObject.registerClass({
 
     _syncExpandedStyle() {
         if (this._revealer.reveal_child)
-            this._expander.get_style_context().add_class('expanded');
+            this._expander.add_css_class('expanded');
         else if (!this._revealer.child_revealed)
-            this._expander.get_style_context().remove_class('expanded');
+            this._expander.remove_css_class('expanded');
     }
 
     _setError(exc) {
@@ -276,7 +276,7 @@ var ExtensionPrefsDialog = GObject.registerClass({
         } catch (e) {
             logError(e, 'Failed to add application style');
         }
-        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
+        Gtk.StyleContext.add_provider_for_display(Gdk.Display.get_default(),
             provider,
             Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
     }
diff --git a/js/dbusServices/extensions/main.js b/js/dbusServices/extensions/main.js
index 9cc4bc5e3..0b6521e9e 100644
--- a/js/dbusServices/extensions/main.js
+++ b/js/dbusServices/extensions/main.js
@@ -1,7 +1,7 @@
 /* exported main */
 
-imports.gi.versions.Gdk = '3.0';
-imports.gi.versions.Gtk = '3.0';
+imports.gi.versions.Gdk = '4.0';
+imports.gi.versions.Gtk = '4.0';
 
 const { Gtk } = imports.gi;
 const pkg = imports.package;
@@ -10,7 +10,7 @@ const { DBusService } = imports.dbusService;
 const { ExtensionsService } = imports.extensionsService;
 
 function main() {
-    Gtk.init(null);
+    Gtk.init();
     pkg.initFormat();
 
     const service = new DBusService(
diff --git a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
index 851adbf76..c03dc24b9 100644
--- a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
+++ b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
@@ -1,31 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
   <template class="ExtensionPrefsDialog" parent="GtkWindow">
     <property name="default-width">600</property>
     <property name="default-height">400</property>
     <child type="titlebar">
-      <object class="GtkHeaderBar" id="headerBar">
-        <property name="visible">True</property>
-        <property name="show-close-button">True</property>
-      </object>
+      <object class="GtkHeaderBar"/>
     </child>
     <child>
       <object class="GtkStack" id="stack">
-        <property name="visible">True</property>
-        <property name="can-focus">False</property>
         <child>
           <object class="GtkScrolledWindow">
-            <property name="visible">True</property>
             <property name="hscrollbar-policy">never</property>
             <property name="propagate-natural-height">True</property>
             <child>
               <object class="GtkViewport">
-                <property name="visible">True</property>
                 <child>
                   <object class="GtkBox">
-                    <property name="visible">True</property>
                     <property name="orientation">vertical</property>
                     <property name="margin-start">100</property>
                     <property name="margin-end">100</property>
@@ -34,7 +25,6 @@
                     <property name="spacing">12</property>
                     <child>
                       <object class="GtkLabel">
-                        <property name="visible">True</property>
                         <property name="label" translatable="yes">Something’s gone wrong</property>
                         <attributes>
                           <attribute name="scale" value="1.44"/> <!-- x-large -->
@@ -46,7 +36,6 @@
                     </child>
                     <child>
                       <object class="GtkLabel">
-                        <property name="visible">True</property>
                         <property name="label" translatable="yes">We’re very sorry, but there’s been a problem: the settings for this extension can’t be displayed. We recommend that you report the issue to the extension authors.</property>
                         <property name="justify">center</property>
                         <property name="wrap">True</property>
@@ -54,29 +43,24 @@
                     </child>
                     <child>
                       <object class="GtkFrame">
-                        <property name="visible">True</property>
                         <property name="margin-top">12</property>
                         <child>
                           <object class="GtkBox">
-                            <property name="visible">True</property>
                             <property name="hexpand">True</property>
                             <property name="orientation">vertical</property>
                             <child>
                               <object class="GtkBox" id="expander">
-                                <property name="visible">True</property>
                                 <property name="spacing">6</property>
                                 <style>
                                   <class name="expander"/>
                                 </style>
                                 <child>
                                   <object class="GtkImage" id="expanderArrow">
-                                    <property name="visible">True</property>
                                     <property name="icon-name">pan-end-symbolic</property>
                                   </object>
                                 </child>
                                 <child>
                                   <object class="GtkLabel">
-                                    <property name="visible">True</property>
                                     <property name="label" translatable="yes">Technical Details</property>
                                   </object>
                                 </child>
@@ -84,15 +68,11 @@
                             </child>
                             <child>
                               <object class="GtkRevealer" id="revealer">
-                                <property name="visible">True</property>
                                 <child>
                                   <object class="GtkBox">
-                                    <property name="visible">True</property>
                                     <property name="orientation">vertical</property>
                                     <child>
                                       <object class="GtkTextView" id="errorView">
-                                        <property name="visible">True</property>
-                                        <property name="can-focus">True</property>
                                         <property name="monospace">True</property>
                                         <property name="editable">False</property>
                                         <property name="wrap-mode">word</property>
@@ -104,26 +84,15 @@
                                     </child>
                                     <child>
                                       <object class="GtkBox">
-                                        <property name="visible">True</property>
                                         <style>
                                           <class name="expander-toolbar"/>
                                         </style>
                                         <child>
                                           <object class="GtkButton">
-                                            <property name="visible">True</property>
-                                            <property name="can-focus">True</property>
                                             <property name="receives-default">True</property>
                                             <property name="action-name">win.copy-error</property>
-                                            <style>
-                                              <class name="flat"/>
-                                              <class name="image-button"/>
-                                            </style>
-                                            <child>
-                                              <object class="GtkImage">
-                                                <property name="visible">True</property>
-                                                <property name="icon-name">edit-copy-symbolic</property>
-                                              </object>
-                                            </child>
+                                            <property name="has-frame">False</property>
+                                            <property name="icon-name">edit-copy-symbolic</property>
                                           </object>
                                         </child>
                                         <child>
@@ -136,13 +105,9 @@
                                             <property name="halign">end</property>
                                             <property name="label" translatable="yes">Homepage</property>
                                             <property name="tooltip-text" translatable="yes">Visit extension homepage</property>
-                                            <property name="can-focus">True</property>
                                             <property name="receives-default">True</property>
-                                            <property name="no-show-all">True</property>
+                                            <property name="has-frame">False</property>
                                             <property name="action-name">win.show-url</property>
-                                            <style>
-                                              <class name="flat"/>
-                                            </style>
                                           </object>
                                         </child>
                                       </object>
diff --git a/subprojects/extensions-app/data/ui/extension-row.ui b/subprojects/extensions-app/data/ui/extension-row.ui
index ae24a75e1..ec56fedc9 100644
--- a/subprojects/extensions-app/data/ui/extension-row.ui
+++ b/subprojects/extensions-app/data/ui/extension-row.ui
@@ -1,26 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
   <template class="ExtensionRow" parent="GtkListBoxRow">
-    <property name="visible">True</property>
     <property name="activatable">False</property>
     <child>
       <object class="GtkGrid">
-        <property name="visible">True</property>
         <property name="margin-start">12</property>
         <property name="margin-end">12</property>
         <property name="margin-top">12</property>
         <property name="margin-bottom">12</property>
         <property name="column-spacing">12</property>
         <child>
-          <object class="GtkLabel" id="nameLabel">
-            <property name="visible">True</property>
-          </object>
+          <object class="GtkLabel" id="nameLabel"/>
         </child>
         <child>
           <object class="GtkImage" id="errorIcon">
-            <property name="no-show-all">True</property>
+            <property name="visible">False</property>
             <property name="icon-name">dialog-error-symbolic</property>
             <style>
               <class name="error"/>
@@ -29,7 +24,7 @@
         </child>
         <child>
           <object class="GtkImage" id="updatesIcon">
-            <property name="no-show-all">True</property>
+            <property name="visible">False</property>
             <property name="icon-name">software-update-available-symbolic</property>
             <style>
               <class name="warning"/>
@@ -38,77 +33,53 @@
         </child>
         <child>
           <object class="GtkLabel">
-            <property name="visible">True</property>
             <property name="hexpand">True</property>
           </object>
         </child>
         <child>
           <object class="GtkButton" id="prefsButton">
-            <property name="no-show-all">True</property>
             <property name="visible"
                       bind-source="prefsButton"
                       bind-property="sensitive"
                       bind-flags="sync-create"/>
-            <property name="can-focus">True</property>
+            <property name="icon-name">emblem-system-symbolic</property>
             <property name="receives-default">True</property>
             <property name="valign">center</property>
             <property name="action-name">row.show-prefs</property>
             <style>
               <class name="circular"/>
-              <class name="image-button"/>
             </style>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">emblem-system-symbolic</property>
-              </object>
-            </child>
           </object>
         </child>
         <child>
           <object class="GtkSwitch" id="switch">
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
             <property name="valign">center</property>
             <property name="action-name">row.enabled</property>
           </object>
         </child>
         <child>
-          <object class="GtkSeparator">
-            <property name="visible">True</property>
-          </object>
+          <object class="GtkSeparator"/>
         </child>
-         <child>
+        <child>
           <object class="GtkButton" id="revealButton">
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
             <property name="receives-default">True</property>
             <property name="valign">center</property>
+            <property name="has-frame">False</property>
+            <property name="icon-name">pan-end-symbolic</property>
             <style>
               <class name="details-button"/>
-              <class name="image-button"/>
-              <class name="flat"/>
             </style>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">pan-end-symbolic</property>
-              </object>
-            </child>
           </object>
         </child>
         <child>
           <object class="GtkRevealer" id="revealer">
-            <property name="visible">True</property>
             <child>
               <object class="GtkGrid">
-                <property name="visible">True</property>
                 <property name="margin-top">12</property>
                 <property name="row-spacing">6</property>
                 <property name="column-spacing">12</property>
                 <child>
                   <object class="GtkLabel">
-                    <property name="visible">True</property>
                     <property name="label" translatable="yes">Description</property>
                     <property name="xalign">0</property>
                     <style>
@@ -118,7 +89,6 @@
                 </child>
                 <child>
                   <object class="GtkLabel" id="descriptionLabel">
-                    <property name="visible">True</property>
                     <property name="ellipsize">end</property>
                     <property name="max-width-chars">60</property>
                     <property name="xalign">0</property>
@@ -131,27 +101,26 @@
                               bind-source="versionLabel"
                               bind-property="visible"
                               bind-flags="sync-create"/>
-                    <property name="no-show-all">True</property>
                     <property name="label" translatable="yes">Version</property>
                     <property name="xalign">0</property>
                     <style>
                       <class name="dim-label"/>
                     </style>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">1</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">1</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkLabel" id="versionLabel">
-                    <property name="no-show-all">True</property>
+                    <property name="visible">False</property>
                     <property name="xalign">0</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">1</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">1</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkLabel">
@@ -159,27 +128,26 @@
                               bind-source="authorLabel"
                               bind-property="visible"
                               bind-flags="sync-create"/>
-                    <property name="no-show-all">True</property>
                     <property name="label" translatable="yes">Author</property>
                     <property name="xalign">0</property>
                     <style>
                       <class name="dim-label"/>
                     </style>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">2</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">2</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkLabel" id="authorLabel">
-                    <property name="no-show-all">True</property>
+                    <property name="visible">False</property>
                     <property name="xalign">0</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">2</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">2</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkLabel">
@@ -187,44 +155,42 @@
                               bind-source="errorLabel"
                               bind-property="visible"
                               bind-flags="sync-create"/>
-                    <property name="no-show-all">True</property>
                     <property name="label" translatable="yes">Error</property>
                     <property name="xalign">0</property>
                     <property name="yalign">0</property>
                     <style>
                       <class name="dim-label"/>
                     </style>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">3</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">3</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkLabel" id="errorLabel">
-                    <property name="no-show-all">True</property>
+                    <property name="visible">False</property>
                     <property name="selectable">True</property>
                     <property name="wrap">True</property>
                     <property name="max-width-chars">60</property>
                     <property name="xalign">0</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">3</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">3</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkButton">
-                    <property name="visible">True</property>
                     <property name="label" translatable="yes">Website</property>
                     <property name="action-name">row.show-url</property>
                     <property name="valign">end</property>
                     <property name="margin-top">12</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">4</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">4</property>
-                  </packing>
                 </child>
                 <child>
                   <object class="GtkButton" id="removeButton">
@@ -232,7 +198,6 @@
                               bind-source="removeButton"
                               bind-property="sensitive"
                               bind-flags="sync-create"/>
-                    <property name="no-show-all">True</property>
                     <property name="label" translatable="yes">Remove…</property>
                     <property name="action-name">row.uninstall</property>
                     <property name="hexpand">True</property>
@@ -241,20 +206,20 @@
                     <style>
                       <class name="destructive-action"/>
                     </style>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">4</property>
+                    </layout>
                   </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">4</property>
-                  </packing>
                 </child>
               </object>
             </child>
+            <layout>
+              <property name="column">0</property>
+              <property name="row">1</property>
+              <property name="column-span">8</property>
+            </layout>
           </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">1</property>
-            <property name="width">8</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/subprojects/extensions-app/data/ui/extensions-window.ui b/subprojects/extensions-app/data/ui/extensions-window.ui
index dab66aa20..f049bd7e3 100644
--- a/subprojects/extensions-app/data/ui/extensions-window.ui
+++ b/subprojects/extensions-app/data/ui/extensions-window.ui
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
   <menu id="primary-menu">
@@ -17,7 +16,6 @@
   <object class="GtkPopover" id="infoPopover">
     <child>
       <object class="GtkBox">
-        <property name="visible">True</property>
         <property name="orientation">vertical</property>
         <property name="margin-start">12</property>
         <property name="margin-end">12</property>
@@ -26,7 +24,6 @@
         <property name="spacing">6</property>
         <child>
           <object class="GtkLabel">
-            <property name="visible">True</property>
             <property name="label" translatable="yes">To find and add extensions, visit &lt;a href="https://extensions.gnome.org"&gt;extensions.gnome.org&lt;/a&gt;.</property>
             <property name="use-markup">True</property>
             <property name="xalign">0</property>
@@ -34,7 +31,6 @@
         </child>
         <child>
           <object class="GtkLabel">
-            <property name="visible">True</property>
             <property name="label" translatable="yes">Warning</property>
             <property name="xalign">0</property>
             <property name="margin-top">6</property>
@@ -45,7 +41,6 @@
         </child>
         <child>
           <object class="GtkLabel">
-            <property name="visible">True</property>
             <property name="label" translatable="yes">Extensions can cause system issues, including performance problems. If you encounter problems with your system, it is recommended to disable all extensions.</property>
             <property name="wrap">True</property>
             <property name="max-width-chars">40</property>
@@ -61,79 +56,62 @@
     <property name="title" translatable="yes">Extensions</property>
     <child type="titlebar">
       <object class="GtkHeaderBar">
-        <property name="visible">True</property>
-        <property name="show-close-button">True</property>
         <child>
           <object class="GtkMenuButton">
-            <property name="visible">True</property>
             <property name="popover">infoPopover</property>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">dialog-information-symbolic</property>
-              </object>
-            </child>
+            <property name="icon-name">dialog-information-symbolic</property>
           </object>
         </child>
-        <child>
+        <child type="end">
           <object class="GtkMenuButton" id="menuButton">
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
             <property name="receives-default">True</property>
             <property name="menu-model">primary-menu</property>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">open-menu-symbolic</property>
-              </object>
-            </child>
+            <property name="icon-name">open-menu-symbolic</property>
           </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
         </child>
-        <child>
+        <child type="end">
           <object class="GtkToggleButton" id="searchButton">
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
             <property name="receives-default">True</property>
+            <property name="icon-name">edit-find-symbolic</property>
             <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">edit-find-symbolic</property>
+              <object class="GtkShortcutController">
+                <property name='scope'>global</property>
+                <child>
+                  <object class='GtkShortcut'>
+                    <property name='trigger'>&lt;Control&gt;f</property>
+                    <property name='action'>activate</property>
+                  </object>
+                </child>
+                <child>
+                  <object class='GtkShortcut'>
+                    <property name='trigger'>&lt;Control&gt;s</property>
+                    <property name='action'>activate</property>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
         </child>
-        <child>
+        <child type="end">
           <object class="GtkSwitch">
-            <property name="visible">True</property>
             <property name="action-name">win.user-extensions-enabled</property>
             <property name="valign">center</property>
           </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
         </child>
       </object>
     </child>
     <child>
       <object class="GtkBox">
-        <property name="visible">True</property>
         <property name="orientation">vertical</property>
         <child>
           <object class="GtkSearchBar" id="searchBar">
-            <property name="visible">True</property>
+            <property name="key-capture-widget">ExtensionsWindow</property>
             <property name="search-mode-enabled"
                       bind-source="searchButton"
                       bind-property="active"
                       bind-flags="bidirectional"/>
             <child>
               <object class="GtkSearchEntry" id="searchEntry">
-                <property name="visible">True</property>
                 <property name="max-width-chars">35</property>
               </object>
             </child>
@@ -141,159 +119,155 @@
         </child>
         <child>
           <object class="GtkStack" id="mainStack">
-            <property name="visible">True</property>
             <property name="transition-type">crossfade</property>
             <property name="vexpand">True</property>
             <child>
-              <object class="GtkScrolledWindow" id="scrolledWindow">
-                <property name="visible">True</property>
-                <property name="hscrollbar-policy">never</property>
-                <child>
-                  <object class="GtkViewport">
-                    <property name="visible">True</property>
+              <object class="GtkStackPage">
+                <property name="name">main</property>
+                <property name="child">
+                  <object class="GtkScrolledWindow" id="scrolledWindow">
+                    <property name="hscrollbar-policy">never</property>
                     <child>
-                      <object class="GtkBox" id="mainBox">
-                        <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
-                        <property name="halign">center</property>
-                        <property name="margin-start">36</property>
-                        <property name="margin-end">36</property>
-                        <property name="margin-top">36</property>
-                        <property name="margin-bottom">36</property>
-                        <property name="spacing">12</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible"
-                                      bind-source="userList"
-                                      bind-property="visible"
-                                      bind-flags="sync-create"/>
-                            <property name="halign">start</property>
-                            <property name="hexpand">True</property>
-                            <property name="label" translatable="yes">Manually Installed</property>
-                            <attributes>
-                              <attribute name="weight" value="bold"/>
-                            </attributes>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkListBox" id="userList">
-                            <property name="visible">True</property>
-                            <property name="selection-mode">none</property>
-                            <property name="margin-bottom">24</property>
-                            <style>
-                              <class name="frame"/>
-                            </style>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible"
-                                      bind-source="systemList"
-                                      bind-property="visible"
-                                      bind-flags="sync-create"/>
-                            <property name="halign">start</property>
-                            <property name="hexpand">True</property>
-                            <property name="label" translatable="yes">Built-In</property>
-                            <attributes>
-                              <attribute name="weight" value="bold"/>
-                            </attributes>
-                          </object>
-                        </child>
+                      <object class="GtkViewport">
+                        <property name="scroll-to-focus">True</property>
                         <child>
-                          <object class="GtkListBox" id="systemList">
-                            <property name="visible">True</property>
-                            <property name="selection-mode">none</property>
-                            <style>
-                              <class name="frame"/>
-                            </style>
+                          <object class="GtkBox">
+                            <property name="orientation">vertical</property>
+                            <property name="halign">center</property>
+                            <property name="margin-start">36</property>
+                            <property name="margin-end">36</property>
+                            <property name="margin-top">36</property>
+                            <property name="margin-bottom">36</property>
+                            <property name="spacing">12</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="visible"
+                                          bind-source="userList"
+                                          bind-property="visible"
+                                          bind-flags="sync-create"/>
+                                <property name="halign">start</property>
+                                <property name="hexpand">True</property>
+                                <property name="label" translatable="yes">Manually Installed</property>
+                                <attributes>
+                                  <attribute name="weight" value="bold"/>
+                                </attributes>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkListBox" id="userList">
+                                <property name="selection-mode">none</property>
+                                <property name="show-separators">True</property>
+                                <property name="margin-bottom">24</property>
+                                <style>
+                                  <class name="frame"/>
+                                </style>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="visible"
+                                          bind-source="systemList"
+                                          bind-property="visible"
+                                          bind-flags="sync-create"/>
+                                <property name="halign">start</property>
+                                <property name="hexpand">True</property>
+                                <property name="label" translatable="yes">Built-In</property>
+                                <attributes>
+                                  <attribute name="weight" value="bold"/>
+                                </attributes>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkListBox" id="systemList">
+                                <property name="selection-mode">none</property>
+                                <property name="show-separators">True</property>
+                                <style>
+                                  <class name="frame"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                     </child>
                   </object>
-                </child>
+                </property>
               </object>
-              <packing>
-                <property name="name">main</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkBox">
-                <property name="visible">True</property>
-                <property name="orientation">vertical</property>
-                <property name="margin-start">32</property>
-                <property name="margin-end">32</property>
-                <property name="margin-top">32</property>
-                <property name="margin-bottom">32</property>
-                <property name="spacing">6</property>
-                <property name="valign">center</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="pixel-size">96</property>
-                    <property name="icon-name">org.gnome.Extensions-symbolic</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="label" translatable="yes">No Installed Extensions</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                      <attribute name="scale" value="1.44"/>
-                    </attributes>
+              <object class="GtkStackPage">
+                <property name="name">placeholder</property>
+                <property name="child">
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
+                    <property name="margin-start">32</property>
+                    <property name="margin-end">32</property>
+                    <property name="margin-top">32</property>
+                    <property name="margin-bottom">32</property>
+                    <property name="spacing">6</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="pixel-size">96</property>
+                        <property name="icon-name">org.gnome.Extensions-symbolic</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">No Installed Extensions</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                          <attribute name="scale" value="1.44"/>
+                        </attributes>
+                      </object>
+                    </child>
                   </object>
-                </child>
+                </property>
               </object>
-              <packing>
-                <property name="name">placeholder</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkBox">
-                <property name="visible">True</property>
-                <property name="margin-start">100</property>
-                <property name="margin-end">100</property>
-                <property name="margin-top">100</property>
-                <property name="margin-bottom">60</property>
-                <property name="orientation">vertical</property>
-                <property name="spacing">12</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="label" translatable="yes">Something’s gone wrong</property>
-                    <attributes>
-                      <attribute name="scale" value="1.44"/>
-                    </attributes>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="label" translatable="yes">We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again.</property>
-                    <property name="justify">center</property>
-                    <property name="wrap">True</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
+              <object class="GtkStackPage">
+                <property name="name">noshell</property>
+                <property name="child">
+                  <object class="GtkBox">
+                    <property name="margin-start">100</property>
+                    <property name="margin-end">100</property>
+                    <property name="margin-top">100</property>
+                    <property name="margin-bottom">60</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">12</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Something’s gone wrong</property>
+                        <attributes>
+                          <attribute name="scale" value="1.44"/>
+                        </attributes>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again.</property>
+                        <property name="justify">center</property>
+                        <property name="wrap">True</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
-                </child>
+                </property>
               </object>
-              <packing>
-                <property name="name">noshell</property>
-              </packing>
             </child>
           </object>
         </child>
         <child>
           <object class="GtkActionBar" id="updatesBar">
-            <property name="no-show-all">True</property>
+            <property name="revealed">False</property>
             <child>
               <object class="GtkImage">
-                <property name="visible">True</property>
                 <property name="pixel-size">24</property>
                 <property name="margin-start">6</property>
                 <property name="margin-end">6</property>
@@ -307,11 +281,9 @@
             </child>
             <child>
               <object class="GtkBox">
-                <property name="visible">True</property>
                 <property name="orientation">vertical</property>
                 <child>
                   <object class="GtkLabel">
-                    <property name="visible">True</property>
                     <property name="halign">start</property>
                     <property name="label" translatable="yes">Extension Updates Ready</property>
                     <attributes>
@@ -321,16 +293,14 @@
                 </child>
                 <child>
                   <object class="GtkLabel" id="updatesLabel">
-                    <property name="visible">True</property>
                     <property name="halign">start</property>
                   </object>
                 </child>
               </object>
             </child>
-            <child>
+            <child type="end">
               <object class="GtkButton">
                 <property name="label" translatable="yes">Log Out…</property>
-                <property name="visible">True</property>
                 <property name="valign">center</property>
                 <property name="action-name">win.logout</property>
                 <property name="receives-default">True</property>
@@ -338,9 +308,6 @@
                   <class name="suggested-action"/>
                 </style>
               </object>
-              <packing>
-                <property name="pack-type">end</property>
-              </packing>
             </child>
           </object>
         </child>
diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 8ff753d56..624318197 100644
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -1,6 +1,6 @@
 /* exported main */
-imports.gi.versions.Gdk = '3.0';
-imports.gi.versions.Gtk = '3.0';
+imports.gi.versions.Gdk = '4.0';
+imports.gi.versions.Gtk = '4.0';
 
 const Gettext = imports.gettext;
 const Package = imports.package;
@@ -65,7 +65,7 @@ class Application extends Gtk.Application {
         } catch (e) {
             logError(e, 'Failed to add application style');
         }
-        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
+        Gtk.StyleContext.add_provider_for_display(Gdk.Display.get_default(),
             provider,
             Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
@@ -88,7 +88,6 @@ var ExtensionsWindow = GObject.registerClass({
     InternalChildren: [
         'userList',
         'systemList',
-        'mainBox',
         'mainStack',
         'scrolledWindow',
         'searchBar',
@@ -106,8 +105,6 @@ var ExtensionsWindow = GObject.registerClass({
         this._exporter = new Shew.WindowExporter({ window: this });
         this._exportedHandle = '';
 
-        this._mainBox.set_focus_vadjustment(this._scrolledWindow.vadjustment);
-
         let action;
         action = new Gio.SimpleAction({ name: 'show-about' });
         action.connect('activate', this._showAbout.bind(this));
@@ -127,16 +124,6 @@ var ExtensionsWindow = GObject.registerClass({
         });
         this.add_action(action);
 
-        const accelGroup = new Gtk.AccelGroup();
-        this._searchButton.add_accelerator('clicked',
-            accelGroup, Gdk.KEY_f, Gdk.ModifierType.CONTROL_MASK, 0);
-        this._searchButton.add_accelerator('clicked',
-            accelGroup, Gdk.KEY_s, Gdk.ModifierType.CONTROL_MASK, 0);
-        this.add_accel_group(accelGroup);
-
-        this.connect('key-press-event',
-            (w, event) => this._searchBar.handle_event(event));
-
         this._searchTerms = [];
         this._searchEntry.connect('search-changed', () => {
             const { text } = this._searchEntry;
@@ -150,7 +137,6 @@ var ExtensionsWindow = GObject.registerClass({
         });
 
         this._userList.set_sort_func(this._sortList.bind(this));
-        this._userList.set_header_func(this._updateHeader.bind(this));
         this._userList.set_filter_func(this._filterList.bind(this));
         this._userList.set_placeholder(new Gtk.Label({
             label: _('No Matches'),
@@ -158,11 +144,9 @@ var ExtensionsWindow = GObject.registerClass({
             margin_end: 12,
             margin_top: 12,
             margin_bottom: 12,
-            visible: true,
         }));
 
         this._systemList.set_sort_func(this._sortList.bind(this));
-        this._systemList.set_header_func(this._updateHeader.bind(this));
         this._systemList.set_filter_func(this._filterList.bind(this));
         this._systemList.set_placeholder(new Gtk.Label({
             label: _('No Matches'),
@@ -170,7 +154,6 @@ var ExtensionsWindow = GObject.registerClass({
             margin_end: 12,
             margin_top: 12,
             margin_bottom: 12,
-            visible: true,
         }));
 
         this._shellProxy.connectSignal('ExtensionStateChanged',
@@ -265,18 +248,10 @@ var ExtensionsWindow = GObject.registerClass({
             t => row.keywords.some(k => k.startsWith(t)));
     }
 
-    _updateHeader(row, before) {
-        if (!before || row.get_header())
-            return;
-
-        let sep = new Gtk.Separator({ orientation: Gtk.Orientation.HORIZONTAL });
-        row.set_header(sep);
-    }
-
     _findExtensionRow(uuid) {
         return [
-            ...this._userList.get_children(),
-            ...this._systemList.get_children(),
+            ...this._userList,
+            ...this._systemList,
         ].find(c => c.uuid === uuid);
     }
 
@@ -296,13 +271,13 @@ var ExtensionsWindow = GObject.registerClass({
         // and reset the variable to null so that we create a new row
         // below and add it to the appropriate list
         if (row && row.type !== extension.type) {
-            row.destroy();
+            row.get_parent().remove(row);
             row = null;
         }
 
         if (row) {
             if (extension.state === ExtensionState.UNINSTALLED)
-                row.destroy();
+                row.get_parent().remove(row);
         } else {
             this._addExtensionRow(extension);
         }
@@ -332,12 +307,11 @@ var ExtensionsWindow = GObject.registerClass({
 
     _addExtensionRow(extension) {
         let row = new ExtensionRow(extension);
-        row.show_all();
 
         if (row.type === ExtensionType.PER_USER)
-            this._userList.add(row);
+            this._userList.append(row);
         else
-            this._systemList.add(row);
+            this._systemList.append(row);
     }
 
     _queueUpdatesCheck() {
@@ -354,8 +328,8 @@ var ExtensionsWindow = GObject.registerClass({
     }
 
     _syncListVisibility() {
-        this._userList.visible = this._userList.get_children().length > 0;
-        this._systemList.visible = this._systemList.get_children().length > 0;
+        this._userList.visible = [...this._userList].length > 1;
+        this._systemList.visible = [...this._systemList].length > 1;
 
         if (this._userList.visible || this._systemList.visible)
             this._mainStack.visible_child_name = 'main';
@@ -364,13 +338,13 @@ var ExtensionsWindow = GObject.registerClass({
     }
 
     _checkUpdates() {
-        let nUpdates = this._userList.get_children().filter(c => c.hasUpdate).length;
+        let nUpdates = [...this._userList].filter(c => c.hasUpdate).length;
 
         this._updatesLabel.label = Gettext.ngettext(
             '%d extension will be updated on next login.',
             '%d extensions will be updated on next login.',
             nUpdates).format(nUpdates);
-        this._updatesBar.visible = nUpdates > 0;
+        this._updatesBar.revealed = nUpdates > 0;
     }
 
     _extensionsLoaded() {
@@ -412,7 +386,7 @@ var ExtensionRow = GObject.registerClass({
             name: 'show-prefs',
             enabled: this.hasPrefs,
         });
-        action.connect('activate', () => this.get_toplevel().openPrefs(this.uuid));
+        action.connect('activate', () => this.get_root().openPrefs(this.uuid));
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
@@ -429,7 +403,7 @@ var ExtensionRow = GObject.registerClass({
             name: 'uninstall',
             enabled: this.type === ExtensionType.PER_USER,
         });
-        action.connect('activate', () => this.get_toplevel().uninstall(this.uuid));
+        action.connect('activate', () => this.get_root().uninstall(this.uuid));
         this._actionGroup.add_action(action);
 
         action = new Gio.SimpleAction({
diff --git a/subprojects/shew/meson.build b/subprojects/shew/meson.build
index c19653421..bfb419f62 100644
--- a/subprojects/shew/meson.build
+++ b/subprojects/shew/meson.build
@@ -22,7 +22,7 @@ pkglibdir = join_paths(get_option('libdir'), package_name)
 girdir = join_paths(pkgdatadir, 'gir-1.0')
 typelibdir = join_paths(pkglibdir, 'girepository-1.0')
 
-gtk_dep = dependency('gtk+-3.0')
+gtk_dep = dependency('gtk4')
 x11_dep = dependency('x11', required: false)
 
 subdir('src')
diff --git a/subprojects/shew/src/meson.build b/subprojects/shew/src/meson.build
index f3bff5827..e590a4612 100644
--- a/subprojects/shew/src/meson.build
+++ b/subprojects/shew/src/meson.build
@@ -21,7 +21,7 @@ libshew_gir = gnome.generate_gir(libshew,
   sources: shew_sources + shew_public_headers,
   nsversion: api_version,
   namespace: 'Shew',
-  includes: ['Gdk-3.0', 'Gtk-3.0'],
+  includes: ['Gdk-4.0', 'Gtk-4.0'],
   extra_args: ['--quiet'],
   install_dir_gir: girdir,
   install_dir_typelib: typelibdir,
diff --git a/subprojects/shew/src/shew-external-window-wayland.c b/subprojects/shew/src/shew-external-window-wayland.c
index 82989761f..3d51aa801 100644
--- a/subprojects/shew/src/shew-external-window-wayland.c
+++ b/subprojects/shew/src/shew-external-window-wayland.c
@@ -21,7 +21,7 @@
 #include <gdk/gdk.h>
 
 #ifdef GDK_WINDOWING_WAYLAND
-#include <gdk/gdkwayland.h>
+#include <gdk/wayland/gdkwayland.h>
 #endif
 
 #include "shew-external-window-wayland.h"
@@ -77,14 +77,14 @@ shew_external_window_wayland_new (const char *handle_str)
 
 static void
 shew_external_window_wayland_set_parent_of (ShewExternalWindow *external_window,
-                                            GdkWindow      *child_window)
+                                            GdkSurface         *child_surface)
 {
   ShewExternalWindowWayland *external_window_wayland =
     SHEW_EXTERNAL_WINDOW_WAYLAND (external_window);
   char *handle_str = external_window_wayland->handle_str;
 
 #ifdef GDK_WINDOWING_WAYLAND
-  if (!gdk_wayland_window_set_transient_for_exported (child_window, handle_str))
+  if (!gdk_wayland_toplevel_set_transient_for_exported (GDK_WAYLAND_TOPLEVEL (child_surface), handle_str))
     g_warning ("Failed to set portal window transient for external parent");
 #endif
 }
diff --git a/subprojects/shew/src/shew-external-window-x11.c b/subprojects/shew/src/shew-external-window-x11.c
index 0504a30f7..7f08665b1 100644
--- a/subprojects/shew/src/shew-external-window-x11.c
+++ b/subprojects/shew/src/shew-external-window-x11.c
@@ -21,7 +21,7 @@
 #include <errno.h>
 #include <gdk/gdk.h>
 #ifdef GDK_WINDOWING_X11
-#include <gdk/gdkx.h>
+#include <gdk/x11/gdkx.h>
 #include <X11/Xlib.h>
 #endif
 #include <stdlib.h>
@@ -110,14 +110,14 @@ shew_external_window_x11_new (const char *handle_str)
 
 static void
 shew_external_window_x11_set_parent_of (ShewExternalWindow *external_window,
-                                        GdkWindow      *child_window)
+                                        GdkSurface         *child_surface)
 {
   ShewExternalWindowX11 *external_window_x11 =
     SHEW_EXTERNAL_WINDOW_X11 (external_window);
 
 #ifdef GDK_WINDOWING_X11
-  XSetTransientForHint (GDK_WINDOW_XDISPLAY (child_window),
-                        GDK_WINDOW_XID (child_window),
+  XSetTransientForHint (GDK_SURFACE_XDISPLAY (child_surface),
+                        GDK_SURFACE_XID (child_surface),
                         external_window_x11->foreign_xid);
 #endif
 }
diff --git a/subprojects/shew/src/shew-external-window.c b/subprojects/shew/src/shew-external-window.c
index f46834645..118d93fa4 100644
--- a/subprojects/shew/src/shew-external-window.c
+++ b/subprojects/shew/src/shew-external-window.c
@@ -75,10 +75,10 @@ shew_external_window_new_from_handle (const char *handle_str)
 
 void
 shew_external_window_set_parent_of (ShewExternalWindow *external_window,
-                                    GdkWindow          *child_window)
+                                    GdkSurface         *child_surface)
 {
   SHEW_EXTERNAL_WINDOW_GET_CLASS (external_window)->set_parent_of (external_window,
-                                                                   child_window);
+                                                                   child_surface);
 }
 
 /**
diff --git a/subprojects/shew/src/shew-external-window.h b/subprojects/shew/src/shew-external-window.h
index 105a8493b..ca6671b58 100644
--- a/subprojects/shew/src/shew-external-window.h
+++ b/subprojects/shew/src/shew-external-window.h
@@ -32,12 +32,12 @@ struct _ShewExternalWindowClass
   GObjectClass parent_class;
 
   void (*set_parent_of) (ShewExternalWindow *external_window,
-                         GdkWindow          *child_window);
+                         GdkSurface         *child_surface);
 };
 
 ShewExternalWindow *shew_external_window_new_from_handle (const char *handle_str);
 
 void shew_external_window_set_parent_of (ShewExternalWindow *external_window,
-                                         GdkWindow          *child_window);
+                                         GdkSurface         *child_surface);
 
 GdkDisplay *shew_external_window_get_display (ShewExternalWindow *external_window);
diff --git a/subprojects/shew/src/shew-window-exporter.c b/subprojects/shew/src/shew-window-exporter.c
index f9506823f..ab84bf8a9 100644
--- a/subprojects/shew/src/shew-window-exporter.c
+++ b/subprojects/shew/src/shew-window-exporter.c
@@ -21,10 +21,10 @@
 #include "shew-window-exporter.h"
 
 #ifdef GDK_WINDOWING_X11
-#include <gdk/gdkx.h>
+#include <gdk/x11/gdkx.h>
 #endif
 #ifdef GDK_WINDOWING_WAYLAND
-#include <gdk/gdkwayland.h>
+#include <gdk/wayland/gdkwayland.h>
 #endif
 
 struct _ShewWindowExporter
@@ -53,9 +53,9 @@ shew_window_exporter_new (GtkWindow *window)
 
 #ifdef GDK_WINDOWING_WAYLAND
 static void
-wayland_window_exported (GdkWindow  *window,
-                         const char *handle,
-                         gpointer    user_data)
+wayland_window_exported (GdkToplevel *toplevel,
+                         const char  *handle,
+                         gpointer     user_data)
 {
   g_autoptr (GTask) task = user_data;
 
@@ -90,8 +90,8 @@ shew_window_exporter_export (ShewWindowExporter  *exporter,
 #ifdef GDK_WINDOWING_X11
   if (GDK_IS_X11_DISPLAY (gtk_widget_get_display (widget)))
     {
-      GdkWindow *w = gtk_widget_get_window (widget);
-      guint32 xid = (guint32) gdk_x11_window_get_xid (w);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
+      guint32 xid = (guint32) gdk_x11_surface_get_xid (s);
 
       g_task_return_pointer (task, g_strdup_printf ("x11:%x", xid), g_free);
     }
@@ -100,9 +100,10 @@ shew_window_exporter_export (ShewWindowExporter  *exporter,
 #ifdef GDK_WINDOWING_WAYLAND
   if (GDK_IS_WAYLAND_DISPLAY (gtk_widget_get_display (widget)))
     {
-      GdkWindow *w = gtk_widget_get_window (widget);
-      gdk_wayland_window_export_handle (w, wayland_window_exported,
-                                        g_steal_pointer (&task), NULL);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
+      gdk_wayland_toplevel_export_handle (GDK_WAYLAND_TOPLEVEL (s),
+                                          wayland_window_exported,
+                                          g_steal_pointer (&task), NULL);
     }
 #endif
 
@@ -136,8 +137,8 @@ shew_window_exporter_unexport (ShewWindowExporter *exporter)
 #ifdef GDK_WINDOWING_WAYLAND
   if (GDK_IS_WAYLAND_DISPLAY (gtk_widget_get_display (widget)))
     {
-      GdkWindow *w = gtk_widget_get_window (widget);
-      gdk_wayland_window_unexport_handle (w);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
+      gdk_wayland_toplevel_unexport_handle (GDK_WAYLAND_TOPLEVEL (s));
     }
 #endif
 }