Port to GTK 4

.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y desktop-file-utils libaccountsservice-dev libgdk-pixbuf2.0-dev libgnome-desktop-3-dev libgranite-dev libgtk-3-dev libhandy-1-dev liblightdm-gobject-1-dev ${{ matrix.mutter_pkg }} libx11-dev meson valac
+        apt install -y desktop-file-utils libaccountsservice-dev libgdk-pixbuf2.0-dev libgnome-desktop-3-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev liblightdm-gobject-1-dev ${{ matrix.mutter_pkg }} libx11-dev meson valac
     - name: Build
       env:
         DESTDIR: out

data/Application.css

@@ -4,6 +4,8 @@
  */
 
 window.background {
+    background: transparent;
+    box-shadow: none;
     opacity: 0;
     transition: opacity 1s ease;
 }
@@ -74,50 +76,50 @@ check.banana {
 
 check.blueberry {
     background-color: mix(@BLUEBERRY_300, @BLUEBERRY_500, 0.25);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@BLUEBERRY_300, @BLUEBERRY_500, 0.25), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@BLUEBERRY_300, @BLUEBERRY_500, 0.3), 0.7);
 }
 
 check.bubblegum {
     background-color: mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.25);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.25), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.3), 0.7);
 }
 
 check.cocoa {
     background-color: @COCOA_300;
-    -gtk-icon-shadow: 0 1px 1px shade(@COCOA_300, 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(@COCOA_300, 0.7);
 }
 
 check.grape {
     background-color: mix(@GRAPE_300, @GRAPE_500, 0.5);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@GRAPE_300, @GRAPE_500, 0.5), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@GRAPE_300, @GRAPE_500, 0.3), 0.7);
 }
 
 check.latte {
     background-color: mix(@LATTE_300, @LATTE_500, 0.25);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@LATTE_300, @LATTE_500, 0.25), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@LATTE_300, @LATTE_500, 0.3), 0.7);
 }
 
 check.lime {
     background-color: mix(@LIME_300, @LIME_500, 0.25);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@LIME_300, @LIME_500, 0.25), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@LIME_300, @LIME_500, 0.3), 0.7);
 }
 
 check.mint {
     background-color: mix(@MINT_300, @MINT_500, 0.75);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@MINT_300, @MINT_500, 0.75), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@MINT_300, @MINT_500, 0.3), 0.7);
 }
 
 check.orange {
     background-color: mix(@ORANGE_300, @ORANGE_500, 0.5);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@ORANGE_300, @ORANGE_500, 0.5), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@ORANGE_300, @ORANGE_500, 0.3), 0.7);
 }
 
 check.slate {
     background-color: @SLATE_100;
-    -gtk-icon-shadow: 0 1px 1px shade(@SLATE_100, 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(@SLATE_100, 0.7);
 }
 
 check.strawberry {
     background-color: mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.25);
-    -gtk-icon-shadow: 0 1px 1px shade(mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.25), 0.3), 0.7);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.3), 0.7);
 }

po/POTFILES

@@ -27,7 +27,6 @@ src/Settings.vala
 src/Cards/BaseCard.vala
 src/Cards/ManualCard.vala
 src/Cards/UserCard.vala
-src/Widgets/BackgroundImage.vala
 src/Widgets/CapsLockRevealer.vala
 src/Widgets/DateTimeWidget.vala
 src/Widgets/PasswordEntry.vala

src/Application.vala

@@ -39,10 +39,7 @@ public class Greeter.Application : Gtk.Application {
     protected override void startup () {
         base.startup ();
 
-        var css_provider = new Gtk.CssProvider ();
-        css_provider.load_from_resource ("/io/elementary/greeter/Application.css");
-
-        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        Granite.init ();
 
         GLib.Bus.own_name (
             SESSION,
@@ -135,7 +132,6 @@ public class Greeter.Application : Gtk.Application {
 
     public override void activate () {
         add_window (new Greeter.MainWindow (lightdm_greeter));
-        active_window.show_all ();
         active_window.present ();
     }
 

src/Cards/BaseCard.vala

@@ -5,7 +5,7 @@
  * Authors: Corentin Noël <corentin@elementary.io>
  */
 
-public abstract class Greeter.BaseCard : Gtk.Bin {
+public abstract class Greeter.BaseCard : Granite.Bin {
     public signal void do_connect (string? credential = null);
 
     protected const int ERROR_SHAKE_DURATION = 450;

src/Cards/ManualCard.vala

@@ -22,7 +22,7 @@ public class Greeter.ManualCard : Greeter.BaseCard {
             hexpand = true,
             margin_bottom = 16
         };
-        label.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL);
+        label.add_css_class (Granite.STYLE_CLASS_H2_LABEL);
 
         username_entry = new Gtk.Entry () {
             hexpand = true,
@@ -58,23 +58,28 @@ public class Greeter.ManualCard : Greeter.BaseCard {
             margin_start = 12,
             margin_end = 12
         };
-        main_box.add (form_grid);
+        main_box.append (form_grid);
 
-        main_box.get_style_context ().add_class (Granite.STYLE_CLASS_CARD);
-        main_box.get_style_context ().add_class (Granite.STYLE_CLASS_ROUNDED);
+        main_box.add_css_class (Granite.STYLE_CLASS_CARD);
+        main_box.add_css_class (Granite.STYLE_CLASS_ROUNDED);
 
         child = main_box;
 
         bind_property ("connecting", username_entry, "sensitive", INVERT_BOOLEAN);
         bind_property ("connecting", password_entry, "sensitive", INVERT_BOOLEAN);
 
-        username_entry.focus_out_event.connect (() => {
+
+        var focus_controller = new Gtk.EventControllerFocus ();
+        focus_controller.leave.connect (() => {
             if (username_entry.text != "") {
                 do_connect_username (username_entry.text);
             }
         });
 
+        username_entry.add_controller (focus_controller);
+
         password_entry.activate.connect (on_login);
+
     }
 
     private void on_login () {
@@ -89,14 +94,14 @@ public class Greeter.ManualCard : Greeter.BaseCard {
     public override void wrong_credentials () {
         password_entry.text = "";
 
-        username_entry.get_style_context ().add_class (Gtk.STYLE_CLASS_ERROR);
-        password_entry.get_style_context ().add_class (Gtk.STYLE_CLASS_ERROR);
-        main_box.get_style_context ().add_class ("shake");
+        username_entry.add_css_class (Granite.STYLE_CLASS_ERROR);
+        password_entry.add_css_class (Granite.STYLE_CLASS_ERROR);
+        main_box.add_css_class ("shake");
 
         Timeout.add (ERROR_SHAKE_DURATION, () => {
-            username_entry.get_style_context ().remove_class (Gtk.STYLE_CLASS_ERROR);
-            password_entry.get_style_context ().remove_class (Gtk.STYLE_CLASS_ERROR);
-            main_box.get_style_context ().remove_class ("shake");
+            username_entry.remove_css_class (Granite.STYLE_CLASS_ERROR);
+            password_entry.remove_css_class (Granite.STYLE_CLASS_ERROR);
+            main_box.remove_css_class ("shake");
 
             connecting = false;
             username_entry.grab_focus_without_selecting ();
@@ -112,12 +117,12 @@ public class Greeter.ManualCard : Greeter.BaseCard {
         username_entry.grab_focus_without_selecting ();
         username_entry.text = "";
 
-        username_entry.get_style_context ().add_class (Gtk.STYLE_CLASS_ERROR);
-        main_box.get_style_context ().add_class ("shake");
+        username_entry.add_css_class (Granite.STYLE_CLASS_ERROR);
+        main_box.add_css_class ("shake");
 
         Timeout.add (ERROR_SHAKE_DURATION, () => {
-            username_entry.get_style_context ().remove_class (Gtk.STYLE_CLASS_ERROR);
-            main_box.get_style_context ().remove_class ("shake");
+            username_entry.remove_css_class (Granite.STYLE_CLASS_ERROR);
+            main_box.remove_css_class ("shake");
 
             return Source.REMOVE;
         });