wip: Port extensions app/portal to GTK4

js/dbusServices/extensions/css/application.css

@@ -1,2 +1,6 @@
 .expander-frame > * { border-top-width: 0; }
-.expander-toolbar { border: 0 solid @borders; border-top-width: 1px; }
+.expander-toolbar {
+  border: 0 solid @borders;
+  border-top-width: 1px;
+  padding: 3px;
+}

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();
@@ -156,7 +156,6 @@ var ExtensionPrefsDialog = GObject.registerClass({
     GTypeName: 'ExtensionPrefsDialog',
     Template: 'resource:///org/gnome/Shell/Extensions/ui/extension-prefs-dialog.ui',
     InternalChildren: [
-        'headerBar',
         'stack',
         'expander',
         'expanderArrow',
@@ -165,24 +164,24 @@ var ExtensionPrefsDialog = GObject.registerClass({
     ],
 }, class ExtensionPrefsDialog extends Gtk.Window {
     _init(extension) {
-        super._init();
+        super._init({
+            title: extension.metadata.name,
+        });
 
         this._uuid = extension.uuid;
         this._url = extension.metadata.url || '';
 
-        this._headerBar.title = extension.metadata.name;
-
         this._actionGroup = new Gio.SimpleActionGroup();
         this.insert_action_group('win', this._actionGroup);
 
         this._initActions();
         this._addCustomStylesheet();
 
-        this._gesture = new Gtk.GestureMultiPress({
+        this._gesture = new Gtk.GestureClick({
-            widget: this._expander,
             button: 0,
             exclusive: true,
         });
+        this._expander.add_controller(this._gesture);
 
         this._gesture.connect('released', (gesture, nPress) => {
             if (nPress === 1)
@@ -205,7 +204,7 @@ var ExtensionPrefsDialog = GObject.registerClass({
             prefsModule.init(extension.metadata);
 
             const widget = prefsModule.buildPrefsWidget();
-            this._stack.add(widget);
+            this._stack.add_named(widget, 'prefs');
             this._stack.visible_child = widget;
         } catch (e) {
             this._setError(e);
@@ -267,7 +266,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);
     }

js/dbusServices/extensions/main.js

@@ -1,7 +1,7 @@
 /* exported main */
 
-imports.gi.versions.Gdk = '3.0';
+imports.gi.versions.Gdk = '4.0';
-imports.gi.versions.Gtk = '3.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(

js/dbusServices/extensions/ui/extension-prefs-dialog.ui

@@ -1,38 +1,32 @@
 <?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">
+      <object class="GtkHeaderBar">
-        <property name="visible">True</property>
+        <property name="show-title-buttons">True</property>
-        <property name="show_close_button">True</property>
       </object>
     </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">100</property>
+                    <property name="margin-start">100</property>
-                    <property name="margin_bottom">60</property>
+                    <property name="margin-end">100</property>
+                    <property name="margin-top">100</property>
+                    <property name="margin-bottom">60</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"/> <!-- x-large -->
@@ -44,41 +38,32 @@
                     </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>
-                        <property name="xalign">0.5</property>
-                        <property name="yalign">0.5</property>
                       </object>
                     </child>
                     <child>
                       <object class="GtkBox">
-                        <property name="visible">True</property>
                         <property name="orientation">vertical</property>
-                        <property name="margin_top">12</property>
+                        <property name="margin-top">12</property>
                         <child>
                           <object class="GtkFrame" id="expander">
-                            <property name="visible">True</property>
                             <property name="hexpand">True</property>
-                            <property name="shadow_type">in</property>
-                            <child>
-                              <object class="GtkEventBox">
-                                <property name="visible">True</property>
                             <child>
                               <object class="GtkBox">
-                                    <property name="visible">True</property>
+                                <property name="margin-start">12</property>
-                                    <property name="margin">12</property>
+                                <property name="margin-end">12</property>
+                                <property name="margin-top">12</property>
+                                <property name="margin-bottom">12</property>
                                 <property name="spacing">6</property>
                                 <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>
@@ -86,26 +71,18 @@
                             </child>
                           </object>
                         </child>
-                          </object>
-                        </child>
                         <child>
                           <object class="GtkRevealer" id="revealer">
-                            <property name="visible">True</property>
                             <child>
                               <object class="GtkFrame">
-                                <property name="visible">True</property>
-                                <property name="shadow_type">in</property>
                                 <style>
                                   <class name="expander-frame"/>
                                 </style>
                                 <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>
@@ -116,46 +93,23 @@
                                       </object>
                                     </child>
                                     <child>
-                                      <object class="GtkToolbar">
+                                      <object class="GtkBox">
-                                        <property name="visible">True</property>
                                         <style>
                                           <class name="expander-toolbar"/>
                                         </style>
-                                        <child>
-                                          <object class="GtkToolItem">
-                                            <property name="visible">True</property>
                                         <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>
+                                            <property name="has-frame">False</property>
-                                                  <class name="flat"/>
+                                            <property name="icon-name">edit-copy-symbolic</property>
-                                                  <class name="image-button"/>
-                                                </style>
-                                                <child>
-                                                  <object class="GtkImage">
-                                                    <property name="visible">True</property>
-                                                    <property name="icon_name">edit-copy-symbolic</property>
-                                                  </object>
-                                                </child>
-                                              </object>
-                                            </child>
                                           </object>
                                         </child>
                                         <child>
-                                          <object class="GtkSeparatorToolItem">
+                                          <object class="GtkLabel">
-                                            <property name="visible">True</property>
+                                            <property name="hexpand">True</property>
-                                            <property name="draw">False</property>
                                           </object>
-                                          <packing>
-                                            <property name="expand">True</property>
-                                          </packing>
                                         </child>
-                                        <child>
-                                          <object class="GtkToolItem">
-                                            <property name="visible">True</property>
                                         <child>
                                           <object class="GtkButton" id="homeButton">
                                             <property name="visible"
@@ -164,15 +118,9 @@
                                                       bind-flags="sync-create"/>
                                             <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>
                                         </child>
                                       </object>

subprojects/extensions-app/data/ui/extension-row.ui

@@ -1,23 +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">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">
+          <object class="GtkLabel" id="nameLabel"/>
-            <property name="visible">True</property>
-          </object>
         </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"/>>
@@ -26,86 +24,61 @@
         </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"/>>
+              <class name="warning"/>
             </style>
           </object>
         </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"
-            <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="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">
+          <object class="GtkSeparator"/>
-            <property name="visible">True</property>
-          </object>
         </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>
@@ -115,7 +88,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>
@@ -128,27 +100,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>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">0</property>
                       <property name="top_attach">1</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </child>
                 <child>
                   <object class="GtkLabel" id="versionLabel">
-                    <property name="no_show_all">True</property>
+                    <property name="visible">False</property>
                     <property name="xalign">0</property>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">1</property>
                       <property name="top_attach">1</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </child>
                 <child>
                   <object class="GtkLabel">
@@ -156,27 +127,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>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">0</property>
                       <property name="top_attach">2</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </child>
                 <child>
                   <object class="GtkLabel" id="authorLabel">
-                    <property name="no_show_all">True</property>
+                    <property name="visible">False</property>
                     <property name="xalign">0</property>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">1</property>
                       <property name="top_attach">2</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </child>
                 <child>
                   <object class="GtkLabel">
@@ -184,44 +154,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>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">0</property>
                       <property name="top_attach">3</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </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>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">1</property>
                       <property name="top_attach">3</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </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>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">0</property>
                       <property name="top_attach">4</property>
-                  </packing>
+                    </layout>
+                  </object>
                 </child>
                 <child>
                   <object class="GtkButton" id="removeButton">
@@ -229,7 +197,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>
@@ -238,20 +205,20 @@
                     <style>
                       <class name="destructive-action"/>
                     </style>
-                  </object>
+                    <layout>
-                  <packing>
                       <property name="left_attach">1</property>
                       <property name="top_attach">4</property>
-                  </packing>
+                    </layout>
-                </child>
                   </object>
                 </child>
               </object>
-          <packing>
+            </child>
+            <layout>
               <property name="left_attach">0</property>
               <property name="top_attach">1</property>
-            <property name="width">8</property>
+              <property name="column-span">8</property>
-          </packing>
+            </layout>
+          </object>
         </child>
       </object>
     </child>

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,13 +16,14 @@
   <object class="GtkPopover" id="infoPopover">
     <child>
       <object class="GtkBox">
-        <property name="visible">True</property>
         <property name="orientation">vertical</property>
-        <property name="margin">12</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="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>
@@ -31,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>
@@ -42,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>
@@ -55,74 +53,55 @@
   <template class="ExtensionsWindow" parent="GtkApplicationWindow">
     <property name="default_width">800</property>
     <property name="default_height">500</property>
+    <property name="title" translatable="yes">Extensions</property>
     <child type="titlebar">
       <object class="GtkHeaderBar">
-        <property name="visible">True</property>
+        <property name="show-title-buttons">True</property>
-        <property name="title" translatable="yes">Extensions</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>
-          </object>
+        <child type="end">
-        </child>
-        <child>
           <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>
-          </object>
+        <child type="end">
-          <packing>
-            <property name="pack_type">end</property>
-          </packing>
-        </child>
-        <child>
           <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="GtkStack" id="mainStack">
-            <property name="visible">True</property>
             <property name="transition_type">crossfade</property>
             <property name="vexpand">True</property>
             <child>
+              <object class="GtkStackPage">
+                <property name="name">main</property>
+                <property name="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>
+                        <property name="scroll-to-focus">True</property>
                         <child>
-                      <object class="GtkBox" id="mainBox">
+                          <object class="GtkBox">
-                        <property name="visible">True</property>
                             <property name="orientation">vertical</property>
                             <property name="halign">center</property>
-                        <property name="margin">36</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">
@@ -140,8 +119,8 @@
                             </child>
                             <child>
                               <object class="GtkListBox" id="userList">
-                            <property name="visible">True</property>
                                 <property name="selection_mode">none</property>
+                                <property name="show_separators">True</property>
                                 <property name="margin_bottom">24</property>
                                 <style>
                                   <class name="frame"/>
@@ -164,8 +143,8 @@
                             </child>
                             <child>
                               <object class="GtkListBox" id="systemList">
-                            <property name="visible">True</property>
                                 <property name="selection_mode">none</property>
+                                <property name="show_separators">True</property>
                                 <style>
                                   <class name="frame"/>
                                 </style>
@@ -176,27 +155,29 @@
                       </object>
                     </child>
                   </object>
-              <packing>
+                </property>
-                <property name="name">main</property>
+              </object>
-              </packing>
             </child>
             <child>
+              <object class="GtkStackPage">
+                <property name="name">placeholder</property>
+                <property name="child">
                   <object class="GtkBox">
-                <property name="visible">True</property>
                     <property name="orientation">vertical</property>
-                <property name="margin">32</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"/>
@@ -205,22 +186,22 @@
                       </object>
                     </child>
                   </object>
-              <packing>
+                </property>
-                <property name="name">placeholder</property>
+              </object>
-              </packing>
             </child>
             <child>
+              <object class="GtkStackPage">
+                <property name="name">noshell</property>
+                <property name="child">
                   <object class="GtkBox">
-                <property name="visible">True</property>
+                    <property name="margin-start">100</property>
-                <property name="margin_left">100</property>
+                    <property name="margin-end">100</property>
-                <property name="margin_right">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"/>
@@ -232,7 +213,6 @@
                     </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>
@@ -242,20 +222,21 @@
                       </object>
                     </child>
                   </object>
-              <packing>
+                </property>
-                <property name="name">noshell</property>
+              </object>
-              </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">6</property>
+                <property name="margin-start">6</property>
+                <property name="margin-end">6</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
                 <property name="icon_name">software-update-available-symbolic</property>
                 <style>
                   <class name="warning"/>
@@ -264,11 +245,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>
@@ -278,16 +257,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>
@@ -295,9 +272,6 @@
                   <class name="suggested-action"/>
                 </style>
               </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
             </child>
           </object>
         </child>

subprojects/extensions-app/js/main.js

@@ -1,6 +1,6 @@
 /* exported main */
-imports.gi.versions.Gdk = '3.0';
+imports.gi.versions.Gdk = '4.0';
-imports.gi.versions.Gtk = '3.0';
+imports.gi.versions.Gtk = '4.0';
 
 const Gettext = imports.gettext;
 const Package = imports.package;
@@ -63,7 +63,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);
 
@@ -80,7 +80,6 @@ var ExtensionsWindow = GObject.registerClass({
     InternalChildren: [
         'userList',
         'systemList',
-        'mainBox',
         'mainStack',
         'scrolledWindow',
         'updatesBar',
@@ -95,8 +94,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));
@@ -117,10 +114,7 @@ var ExtensionsWindow = GObject.registerClass({
         this.add_action(action);
 
         this._userList.set_sort_func(this._sortList.bind(this));
-        this._userList.set_header_func(this._updateHeader.bind(this));
-
         this._systemList.set_sort_func(this._sortList.bind(this));
-        this._systemList.set_header_func(this._updateHeader.bind(this));
 
         this._shellProxy.connectSignal('ExtensionStateChanged',
             this._onExtensionStateChanged.bind(this));
@@ -209,18 +203,10 @@ var ExtensionsWindow = GObject.registerClass({
         return row1.name.localeCompare(row2.name);
     }
 
-    _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._userList,
-            ...this._systemList.get_children(),
+            ...this._systemList,
         ].find(c => c.uuid === uuid);
     }
 
@@ -240,13 +226,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);
         }
@@ -276,12 +262,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.insert(row, -1);
         else
-            this._systemList.add(row);
+            this._systemList.insert(row, -1);
     }
 
     _queueUpdatesCheck() {
@@ -298,8 +283,8 @@ var ExtensionsWindow = GObject.registerClass({
     }
 
     _syncListVisibility() {
-        this._userList.visible = this._userList.get_children().length > 0;
+        this._userList.visible = this._userList.get_first_child() !== null;
-        this._systemList.visible = this._systemList.get_children().length > 0;
+        this._systemList.visible = this._systemList.get_first_child() !== null;
 
         if (this._userList.visible || this._systemList.visible)
             this._mainStack.visible_child_name = 'main';
@@ -308,13 +293,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() {
@@ -354,7 +339,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({
@@ -371,7 +356,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({

subprojects/shew/meson.build

@@ -22,6 +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')

subprojects/shew/src/meson.build

@@ -12,7 +12,7 @@ shew_sources = [
 
 libshew = library(full_name,
   sources: shew_sources,
-  dependencies: [gtk_dep],
+  dependencies: [gtk_dep, x11_dep],
   install_dir: pkglibdir,
   install: true,
 )
@@ -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,

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_surface_set_transient_for_exported (GDK_WAYLAND_SURFACE (child_surface), handle_str))
     g_warning ("Failed to set portal window transient for external parent");
 #endif
 }

subprojects/shew/src/shew-external-window-x11.c

@@ -21,7 +21,8 @@
 #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>
 
@@ -33,7 +34,7 @@ struct _ShewExternalWindowX11
 {
   ShewExternalWindow parent;
 
-  GdkWindow *foreign_gdk_window;
+  int foreign_xid;
 };
 
 G_DEFINE_TYPE (ShewExternalWindowX11, shew_external_window_x11,
@@ -54,13 +55,29 @@ get_x11_display (void)
   return x11_display;
 }
 
+static gboolean
+check_foreign_xid (GdkDisplay *display,
+                   int         xid)
+{
+  gboolean result = FALSE;
+#ifdef GDK_WINDOWING_X11
+  XWindowAttributes attrs;
+
+  gdk_x11_display_error_trap_push (display);
+  result = XGetWindowAttributes (GDK_DISPLAY_XDISPLAY (display), xid, &attrs);
+  if (gdk_x11_display_error_trap_pop (display) || !result)
+    return FALSE;
+
+#endif
+  return result;
+}
+
 ShewExternalWindowX11 *
 shew_external_window_x11_new (const char *handle_str)
 {
   ShewExternalWindowX11 *external_window_x11;
   GdkDisplay *display;
   int xid;
-  GdkWindow *foreign_gdk_window = NULL;
 
   display = get_x11_display ();
   if (!display)
@@ -77,43 +94,32 @@ shew_external_window_x11_new (const char *handle_str)
       return NULL;
     }
 
-#ifdef GDK_WINDOWING_X11
+  if (!check_foreign_xid (display, xid))
-  foreign_gdk_window = gdk_x11_window_foreign_new_for_display (display, xid);
-#endif
-
-  if (!foreign_gdk_window)
     {
-      g_warning ("Failed to create foreign window for XID %d", xid);
+      g_warning ("Failed to find foreign window for XID %d", xid);
       return NULL;
     }
 
   external_window_x11 = g_object_new (SHEW_TYPE_EXTERNAL_WINDOW_X11,
                                       "display", display,
                                       NULL);
-  external_window_x11->foreign_gdk_window = foreign_gdk_window;
+  external_window_x11->foreign_xid = xid;
 
   return external_window_x11;
 }
 
 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);
 
-  gdk_window_set_transient_for (child_window,
+#ifdef GDK_WINDOWING_X11
-                                external_window_x11->foreign_gdk_window);
+  XSetTransientForHint (GDK_SURFACE_XDISPLAY (child_surface),
-}
+                        GDK_SURFACE_XID (child_surface),
-
+                        external_window_x11->foreign_xid);
-static void
+#endif
-shew_external_window_x11_dispose (GObject *object)
-{
-  ShewExternalWindowX11 *external_window_x11 = SHEW_EXTERNAL_WINDOW_X11 (object);
-
-  g_clear_object (&external_window_x11->foreign_gdk_window);
-
-  G_OBJECT_CLASS (shew_external_window_x11_parent_class)->dispose (object);
 }
 
 static void
@@ -124,10 +130,7 @@ shew_external_window_x11_init (ShewExternalWindowX11 *external_window_x11)
 static void
 shew_external_window_x11_class_init (ShewExternalWindowX11Class *klass)
 {
-  GObjectClass *object_class = G_OBJECT_CLASS (klass);
   ShewExternalWindowClass *external_window_class = SHEW_EXTERNAL_WINDOW_CLASS (klass);
 
-  object_class->dispose = shew_external_window_x11_dispose;
-
   external_window_class->set_parent_of = shew_external_window_x11_set_parent_of;
 }

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);
 }
 
 /**

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);

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,7 +53,7 @@ shew_window_exporter_new (GtkWindow *window)
 
 #ifdef GDK_WINDOWING_WAYLAND
 static void
-wayland_window_exported (GdkWindow  *window,
+wayland_window_exported (GdkSurface *surface,
                          const char *handle,
                          gpointer    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);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
-      guint32 xid = (guint32) gdk_x11_window_get_xid (w);
+      guint32 xid = (guint32) gdk_x11_surface_get_xid (s);
 
       g_task_return_pointer (task, g_strdup_printf ("x11:%x", xid), g_free);
     }
@@ -100,8 +100,8 @@ 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);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
-      gdk_wayland_window_export_handle (w, wayland_window_exported,
+      gdk_wayland_surface_export_handle (s, wayland_window_exported,
                                          g_steal_pointer (&task), NULL);
     }
 #endif
@@ -136,8 +136,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);
+      GdkSurface *s = gtk_native_get_surface (GTK_NATIVE (widget));
-      gdk_wayland_window_unexport_handle (w);
+      gdk_wayland_surface_unexport_handle (s);
     }
 #endif
 }