Port to Gtk 4 (#1896)

.github/workflows/main.yml

@@ -25,7 +25,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y gettext libappstream-dev libflatpak-dev libportal-dev libportal-gtk3-dev libgee-0.8-dev libgranite-dev libgtk-3-dev libhandy-1-dev libjson-glib-dev libpackagekit-glib2-dev libsoup-3.0-dev libxml2-dev libxml2-utils libpolkit-gobject-1-dev meson valac
+        apt install -y gettext libadwaita-1-dev libappstream-dev libflatpak-dev libgee-0.8-dev libgranite-7-dev libgtk-4-dev libjson-glib-dev libpackagekit-glib2-dev libportal-dev libportal-gtk4-dev libsoup-3.0-dev libxml2-dev libxml2-utils libpolkit-gobject-1-dev meson valac
     - name: Build and Test
       env:
         DESTDIR: out

README.md

@@ -9,12 +9,12 @@ An open, pay-what-you-want app store for indie developers.
 
 You'll need the following dependencies:
 * gettext
-* libappstream-dev (>= 0.10)
-* libflatpak-dev
+* libadwaita-1-dev
+* libappstream-dev (>= 0.15.2)
+* libflatpak-dev (>= 1.0.7)
 * libgee-0.8-dev
-* libgranite-dev (>=5.2.5)
-* libgtk-3-dev
-* libhandy-1-dev (>=1.3.0)
+* libgranite-7-dev (>=7.1.0)
+* libgtk-4-dev
 * libjson-glib-dev
 * libpackagekit-glib2-dev
 * libpolkit-gobject-1-dev

data/io.elementary.appcenter.gresource.xml

@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/appcenter">
-    <file alias="application.css" compressed="true">styles/application.css</file>
+    <file alias="Application.css" compressed="true">styles/application.css</file>
     <file alias="AppInfoView.css" compressed="true">styles/AppInfoView.css</file>
     <file alias="AppListUpdateView.css" compressed="true">styles/AppListUpdateView.css</file>
     <file alias="arrow.css" compressed="true">styles/arrow.css</file>
     <file alias="badge.css" compressed="true">styles/badge.css</file>
     <file alias="banner.css" compressed="true">styles/banner.css</file>
     <file alias="categories.css" compressed="true">styles/categories.css</file>
-    <file alias="fallback.css" compressed="true">styles/fallback.css</file>
     <file alias="loading.css" compressed="true">styles/loading.css</file>
     <file alias="ProgressButton.css" compressed="true">styles/ProgressButton.css</file>
   </gresource>

data/styles/arrow.css

@@ -29,6 +29,7 @@
     margin: 12px;
     padding: 6px;
     color: @text_color;
+    -gtk-icon-size: 24px;
 }
 
 .arrow:active,

data/styles/banner.css

@@ -77,7 +77,7 @@
 
 /*Hack to make the button square-ish*/
 .banner button.image-button.raised {
-    padding: 0.333rem 0.444rem;
+    padding: 0 0.333em;
 }
 
 .banner button:not(.suggested-action) {

data/styles/categories.css

@@ -599,7 +599,7 @@
         radial-gradient(
             circle,
             alpha(@STRAWBERRY_900, 0) 65%,
-            alpha(shade(@STRAWBERRY_900, 0.6), 0.35) 4%
+            alpha(shade(@STRAWBERRY_900, 0.6), 0.35) 66%
         ),
         linear-gradient(
             to bottom,
@@ -651,19 +651,19 @@
     background-image:
         linear-gradient(
             to right,
-            transparent 42px,
-            alpha(@STRAWBERRY_100, 0.25) 42px,
-            alpha(@STRAWBERRY_100, 0.25) 44px,
-            transparent 44px
+            transparent 1.3em,
+            alpha(@STRAWBERRY_100, 0.25) 1.3em,
+            alpha(@STRAWBERRY_100, 0.25) calc(1.3em + 2px),
+            transparent calc(1.3em + 2px)
         ),
         linear-gradient(
             to bottom,
-            white 90%,
-            alpha(@BLUEBERRY_100, 0.2) 90%
+            transparent 0.9em,
+            alpha(@BLUEBERRY_100, 0.2) 0.9em
         );
-    background-position: center center;
-    background-repeat: repeat-y;
-    background-size: 100% 1em;
+    background-position: center center, center 0.7em;
+    background-repeat: no-repeat, repeat-y;
+    background-size: auto auto, 110% 1em; /* Gtk.CSS bug requiring over 100% width maybe? */
     color: @BLACK_300;
     font-size: 24px;
 }

meson.build

@@ -11,7 +11,6 @@ i18n = import('i18n')
 
 add_project_arguments(
     '-DGETTEXT_PACKAGE="@0@"'.format(gettext_name),
-    '-DHANDY_USE_UNSTABLE_API',
     '-DI_KNOW_THE_PACKAGEKIT_GLIB2_API_IS_SUBJECT_TO_CHANGE',
     language:'c'
 )
@@ -23,17 +22,17 @@ glib = dependency ('glib-2.0')
 gobject = dependency ('gobject-2.0')
 gio = dependency ('gio-2.0')
 gee = dependency ('gee-0.8')
-gtk = dependency ('gtk+-3.0', version: '>=3.10')
-granite = dependency ('granite', version: '>=6.0.0')
-handy = dependency('libhandy-1', version: '>=1.4.0')
+gtk = dependency ('gtk4')
+granite = dependency ('granite-7', version: '>=7.3.0')
+adwaita = dependency('libadwaita-1')
 appstream = dependency ('appstream', version: '>=0.15.2')
 libsoup = dependency ('libsoup-3.0')
 json = dependency ('json-glib-1.0')
 flatpak = dependency ('flatpak')
 xml = dependency ('libxml-2.0')
 polkit = dependency ('polkit-gobject-1')
 portal = dependency('libportal')
-portal_gtk3 = dependency('libportal-gtk3')
+portal_gtk4 = dependency('libportal-gtk4')
 posix = meson.get_compiler('vala').find_library('posix')
 
 dbus = dependency ('dbus-1')
@@ -49,13 +48,13 @@ core_deps = [
 dependencies = core_deps + [
     gtk,
     granite,
-    handy,
+    adwaita,
     appstream,
     flatpak,
     xml,
     polkit,
     portal,
-    portal_gtk3,
+    portal_gtk4,
     posix
 ]
 

src/Application.vala

@@ -116,7 +116,7 @@ public class AppCenter.App : Gtk.Application {
     protected override void startup () {
         base.startup ();
 
-        Hdy.init ();
+        Granite.init ();
 
         var granite_settings = Granite.Settings.get_default ();
         var gtk_settings = Gtk.Settings.get_default ();
@@ -127,22 +127,6 @@ public class AppCenter.App : Gtk.Application {
             gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK;
         });
 
-        var provider = new Gtk.CssProvider ();
-        provider.load_from_resource ("io/elementary/appcenter/application.css");
-        Gtk.StyleContext.add_provider_for_screen (
-            Gdk.Screen.get_default (),
-            provider,
-            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
-        );
-
-        var fallback_provider = new Gtk.CssProvider ();
-        fallback_provider.load_from_resource ("io/elementary/appcenter/fallback.css");
-        Gtk.StyleContext.add_provider_for_screen (
-            Gdk.Screen.get_default (),
-            fallback_provider,
-            Gtk.STYLE_PROVIDER_PRIORITY_FALLBACK
-        );
-
         var quit_action = new SimpleAction ("quit", null);
         quit_action.activate.connect (() => {
             if (active_window != null) {
@@ -250,13 +234,19 @@ public class AppCenter.App : Gtk.Application {
             var main_window = new MainWindow (this);
             add_window (main_window);
 
-            var window_height = App.settings.get_int ("window-height");
-            var window_width = App.settings.get_int ("window-width");
-            main_window.resize (window_width, window_height);
+            /*
+            * This is very finicky. Bind size after present else set_titlebar gives us bad sizes
+            * Set maximize after height/width else window is min size on unmaximize
+            * Bind maximize as SET else get get bad sizes
+            */
+            settings.bind ("window-height", main_window, "default-height", SettingsBindFlags.DEFAULT);
+            settings.bind ("window-width", main_window, "default-width", SettingsBindFlags.DEFAULT);
 
             if (settings.get_boolean ("window-maximized")) {
                 main_window.maximize ();
             }
+
+            settings.bind ("window-maximized", main_window, "maximized", SettingsBindFlags.SET);
         }
 
         if (show_updates) {
@@ -356,14 +346,9 @@ public class AppCenter.App : Gtk.Application {
                 if (error == null) {
                     if (package.get_can_launch ()) {
                         // Check if window is focused
-                        if (active_window != null) {
-                            var main_window = (MainWindow) active_window;
-                            var win = main_window.get_window ();
-                            if (win != null && (win.get_state () & Gdk.WindowState.FOCUSED) != 0) {
-                                main_window.send_installed_toast (package);
-
-                                break;
-                            }
+                        if (active_window != null && active_window.is_active) {
+                            ((MainWindow) active_window).send_installed_toast (package);
+                            break;
                         }
 
                         var notification = new Notification (_("The app has been installed"));
@@ -406,8 +391,9 @@ public class AppCenter.App : Gtk.Application {
                 transient_for = active_window
             };
 
-            update_fail_dialog.destroy.connect (() => {
+            update_fail_dialog.close_request.connect (() => {
                 update_fail_dialog = null;
+                return Gdk.EVENT_PROPAGATE;
             });
         }
 

src/Core/Package.vala

@@ -718,13 +718,12 @@ public class AppCenterCore.Package : Object {
         uint current_scale = 0;
         uint pixel_size = size * scale_factor;
 
-        weak GenericArray<AppStream.Icon> icons = component.get_icons ();
-        for (int i = 0; i < icons.length; i++) {
-            weak AppStream.Icon _icon = icons[i];
+        unowned var icons = component.get_icons ();
+        foreach (unowned var _icon in icons) {
             switch (_icon.get_kind ()) {
                 case AppStream.IconKind.STOCK:
                     unowned string icon_name = _icon.get_name ();
-                    if (Gtk.IconTheme.get_default ().has_icon (icon_name)) {
+                    if (Gtk.IconTheme.get_for_display (Gdk.Display.get_default ()).has_icon (icon_name)) {
                         return new ThemedIcon (icon_name);
                     }
 
@@ -742,19 +741,6 @@ public class AppCenterCore.Package : Object {
                         current_scale = icon_scale;
                     }
 
-                    break;
-                case AppStream.IconKind.REMOTE:
-                    var icon_scale = _icon.get_scale ();
-                    var icon_width = _icon.get_width () * icon_scale;
-                    bool is_bigger = (icon_width > current_size && current_size < pixel_size);
-                    bool has_better_dpi = (icon_width == current_size && current_scale < icon_scale && scale_factor <= icon_scale);
-                    if (is_bigger || has_better_dpi) {
-                        var file = File.new_for_uri (_icon.get_url ());
-                        icon = new FileIcon (file);
-                        current_size = icon_width;
-                        current_scale = icon_scale;
-                    }
-
                     break;
 
                 case AppStream.IconKind.UNKNOWN:

src/Dialogs/InstallFailDialog.vala

@@ -43,7 +43,7 @@ public class InstallFailDialog : Granite.MessageDialog {
 
         if (package.is_flatpak) {
             var repair_button = add_button (_("Repair"), REPAIR_RESPONSE_ID);
-            repair_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+            repair_button.get_style_context ().add_class (Granite.STYLE_CLASS_SUGGESTED_ACTION);
         }
 
         response.connect ((response) => {