Monitor GTK4 port

.github/workflows/ci.yml

@@ -24,10 +24,10 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y libgala-dev libgee-0.8-dev libglib2.0-dev libgranite-dev libgtk-3-dev libhandy-1-dev \
+        apt install -y libgala-dev libgee-0.8-dev libglib2.0-dev libgranite-dev libgtk-4-dev libadwaita-1-dev \
         libdbus-glib-1-dev libgtop2-dev libwingpanel-3.0-dev libudisks2-dev \
         libxnvctrl0 libxnvctrl-dev libcurl4-gnutls-dev libflatpak-dev libjson-glib-dev \
-        liblivechart-1-dev libpci-dev \
+        liblivechart-2-dev libpci-dev \
         meson valac sassc git
     - name: Build
       run: |

data/stylesheet/_index.scss

@@ -12,10 +12,6 @@ roundy-label:selected:focus,
 roundy-label:hover:selected {
     margin: 0 3px;
 
-    .small-label {
-        padding: 0;
-    }
-
     .value {
         color: #{'alpha(@text_color, 0.7)'};
         font-feature-settings: "tnum";
@@ -51,6 +47,27 @@ roundy-label:hover:selected {
     }
 }
 
+.small-label {
+    padding: 0;
+    font-weight: bold;
+    font-size: 9px;
+
+    @if $color-scheme == "light" {
+        color: grey;
+    } @else if $color-scheme == "dark" {
+        color: $SILVER_500;
+    }
+}
+
+.label-vertical {
+    &-val {
+        color: $text_color;
+        font-size: 30px;
+        font-weight: 200;
+        border-width: 0;
+    }
+}
+
 .grape_500 {
     background-color: rgba($GRAPE_500, 0.6);
 }
@@ -91,24 +108,23 @@ roundy-label:hover:selected {
 .core_badge {
     border-radius: 8px;
     padding-right: 4px;
-    padding-left:2px;
+    padding-left: 2px;
     font-size: 10px;
 
     @if $color-scheme == "light" {
         border: 1px solid $SILVER_300;
         background-color: $SILVER_100;
-
     } @else if $color-scheme == "dark" {
         border: 1px solid $SILVER_700;
         background-color: $SILVER_900;
     }
-    
+
 
     &-mild-warning {
         @if $color-scheme == "light" {
             background-color: rgba($BANANA_100, 0.7);
             color: $BANANA_900;
-            border: 1px solid rgba($BANANA_300, 0.7);    
+            border: 1px solid rgba($BANANA_300, 0.7);
         } @else if $color-scheme == "dark" {
             background-color: rgba($BANANA_900, 0.7);
             color: $BANANA_300;
@@ -192,7 +208,7 @@ roundy-label:hover:selected {
         } @else if $color-scheme == "dark" {
             border-bottom: 1px $SILVER_900 solid;
         }
-        
+
         label {
             font-family: monospace;
             /* background-color: $SILVER_300; */
@@ -213,4 +229,4 @@ roundy-label:hover:selected {
 
 .text-secondary {
     color: $SILVER_700;
-}
+}

meson.build

@@ -21,24 +21,22 @@ add_project_arguments(['--vapidir', vapidir], language: 'vala')
 # elementary_stylesheet = subproject('stylesheet')
 
 app_dependencies = [
-    dependency('granite', version: '>= 5.2.0'),
+    dependency('granite-7', version: '>=7.7.0'),
     dependency('glib-2.0'),
-    dependency('gtk+-3.0'),
+    dependency('gtk4'),
     dependency('gee-0.8'),
     dependency('gio-2.0'),
     dependency('gobject-2.0'),
     dependency('libgtop-2.0'),
-    dependency('libhandy-1', version: '>=0.90.0'),
-    dependency('gdk-x11-3.0'),
-    dependency('x11'),
+    dependency('libadwaita-1', version: '>=1.0.0'),
+    dependency('gtk4-x11'),
     dependency('udisks2'),
     dependency('json-glib-1.0'),
     dependency('flatpak'),
 
-    # FIXME Bump required version to >= 1.10.0 when GTK 4 porting
     dependency(
-        'livechart',
-        version: '< 1.10.0',
+        'livechart-2',
+        version: '>= 1.10.0',
         fallback: ['live-chart', 'livechart_dep'],
     ),
 

src/MainWindow.vala

@@ -3,16 +3,14 @@
  * SPDX-FileCopyrightText: 2025 elementary, Inc. (https://elementary.io)
  */
 
-public class Monitor.MainWindow : Hdy.ApplicationWindow {
+public class Monitor.MainWindow : Gtk.ApplicationWindow {
     public ProcessView process_view { get; private set; }
 
     public MainWindow (MonitorApp app) {
         Object (application: app);
     }
 
     construct {
-        setup_window_state ();
-
         title = _("Monitor");
 
         var resources = new Resources ();
@@ -31,48 +29,49 @@ public class Monitor.MainWindow : Hdy.ApplicationWindow {
             valign = CENTER
         };
 
-        var sv = new PreferencesView ();
-        sv.show_all ();
+        var preferences_view = new PreferencesView ();
 
-        var preferences_popover = new Gtk.Popover (null) {
-            child = sv
+        var preferences_popover = new Gtk.Popover () {
+            child = preferences_view
         };
 
         var preferences_button = new Gtk.MenuButton () {
-            image = new Gtk.Image.from_icon_name ("open-menu", Gtk.IconSize.LARGE_TOOLBAR),
+            icon_name = "open-menu",
+            primary = true,
             popover = preferences_popover,
-            tooltip_text = (_("Settings"))
+            tooltip_markup = ("%s\n" + Granite.TOOLTIP_SECONDARY_TEXT_MARKUP).printf (
+                _("Settings"),
+                "F10"
+            )
         };
+        preferences_button.add_css_class (Granite.STYLE_CLASS_LARGE_ICONS);
 
         var search_entry = new Gtk.SearchEntry () {
             placeholder_text = _("Search process name or PID"),
             valign = CENTER
         };
+        search_entry.set_key_capture_widget (this);
 
         var search_revealer = new Gtk.Revealer () {
             child = search_entry,
-            transition_type = SLIDE_LEFT
+            transition_type = SLIDE_LEFT,
+            overflow = VISIBLE
         };
 
-        var headerbar = new Hdy.HeaderBar () {
-            has_subtitle = false,
-            show_close_button = true,
-            title = _("Monitor")
-        };
+        var headerbar = new Adw.HeaderBar ();
         headerbar.pack_start (search_revealer);
-        headerbar.set_custom_title (stack_switcher);
+        headerbar.set_title_widget (stack_switcher);
         headerbar.pack_end (preferences_button);
 
         var statusbar = new Statusbar ();
 
-        var box = new Gtk.Box (VERTICAL, 0);
-        box.add (headerbar);
-        box.add (stack);
-        box.add (statusbar);
+        var main_container = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
 
-        child = box;
+        set_titlebar (headerbar);
+        main_container.append (stack);
+        main_container.append (statusbar);
 
-        show_all ();
+        child = main_container;
 
         var dbusserver = DBusServer.get_default ();
 
@@ -97,29 +96,13 @@ public class Monitor.MainWindow : Hdy.ApplicationWindow {
             });
         });
 
-        key_press_event.connect (search_entry.handle_event);
-
-        this.delete_event.connect (() => {
-            int window_width, window_height;
-            get_size (out window_width, out window_height);
-            MonitorApp.settings.set_int ("window-width", window_width);
-            MonitorApp.settings.set_int ("window-height", window_height);
-            MonitorApp.settings.set_boolean ("is-maximized", this.is_maximized);
-
-            if (!MonitorApp.settings.get_boolean ("indicator-state")) {
-                dbusserver.indicator_state (false);
-            }
-
-            return Gdk.EVENT_PROPAGATE;
-        });
-
         dbusserver.indicator_state (MonitorApp.settings.get_boolean ("indicator-state"));
 
         MonitorApp.settings.bind ("opened-view", stack, "visible-child-name", DEFAULT);
 
         search_entry.search_changed.connect (() => {
             // collapse tree only when search is focused and changed
-            if (search_entry.is_focus) {
+            if (search_entry.is_focus ()) {
                 process_view.process_tree_view.collapse_all ();
             }
 
@@ -128,10 +111,6 @@ public class Monitor.MainWindow : Hdy.ApplicationWindow {
             // focus on child row to avoid the app crashes by clicking "Kill/End Process" buttons in headerbar
             process_view.process_tree_view.focus_on_child_row ();
             search_entry.grab_focus ();
-
-            if (search_entry.text != "") {
-                search_entry.insert_at_cursor ("");
-            }
         });
 
         search_entry.activate.connect (() => {
@@ -146,14 +125,4 @@ public class Monitor.MainWindow : Hdy.ApplicationWindow {
 
         add_action (search_action);
     }
-
-    private void setup_window_state () {
-        int window_width = MonitorApp.settings.get_int ("window-width");
-        int window_height = MonitorApp.settings.get_int ("window-height");
-        this.set_default_size (window_width, window_height);
-
-        if (MonitorApp.settings.get_boolean ("is-maximized")) {
-            this.maximize ();
-        }
-    }
 }

src/Models/OpenFilesTreeViewModel.vala

@@ -4,7 +4,7 @@
  */
 
 public class Monitor.OpenFilesTreeViewModel : Gtk.TreeStore {
-    private Gee.Map<string, Gtk.TreeIter ? > open_files_paths = new Gee.HashMap<string, Gtk.TreeIter ? > ();
+    private Gee.Map<string, Gtk.TreeIter ?> open_files_paths = new Gee.HashMap<string, Gtk.TreeIter ?> ();
 
     private Process _process;
 
@@ -41,11 +41,9 @@ public class Monitor.OpenFilesTreeViewModel : Gtk.TreeStore {
             Gtk.TreeIter iter;
             append (out iter, null);
 
-            set (iter,
-                 Column.NAME, path,
-                 -1);
+            set (iter, Column.NAME, path, -1);
 
-            // open_files_paths.set (path, iter);
+            //  open_files_paths.set (path, iter);
             return true;
         }
         return false;

src/Monitor.vala

@@ -35,7 +35,8 @@ namespace Monitor {
         public override void startup () {
             base.startup ();
 
-            Hdy.init ();
+            Granite.init ();
+            Adw.init ();
 
             Appearance.set_prefered_style ();
 
@@ -72,12 +73,17 @@ namespace Monitor {
             var dbusserver = DBusServer.get_default ();
             dbusserver.show.connect (() => activate ());
             dbusserver.quit.connect (quit);
+
+            window_removed.connect (() => {
+                if (!settings.get_boolean ("indicator-state")) {
+                    dbusserver.indicator_state (false);
+                }
+            });
         }
 
         public override void activate () {
             // only have one window
             if (get_windows () != null) {
-                window.show_all ();
                 window.present ();
                 return;
             }
@@ -108,9 +114,23 @@ namespace Monitor {
                 window.hide ();
                 MonitorApp.settings.set_boolean ("background-state", true);
             } else {
-                window.show_all ();
+                window.present ();
+            }
+
+            /*
+            * 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", window, "default-height", SettingsBindFlags.DEFAULT);
+            settings.bind ("window-width", window, "default-width", SettingsBindFlags.DEFAULT);
+
+            if (settings.get_boolean ("is-maximized")) {
+                window.maximize ();
             }
 
+            settings.bind ("is-maximized", window, "maximized", SettingsBindFlags.SET);
+
             window.process_view.process_tree_view.focus_on_first_row ();
         }
 
@@ -127,6 +147,13 @@ namespace Monitor {
                 PCIUtils.LIBPCI_PATCH_VER
                 );
 
+            print (
+                "Gtk %d.%d.%d\n",
+                Gtk.MAJOR_VERSION,
+                Gtk.MINOR_VERSION,
+                Gtk.MICRO_VERSION
+            );
+
             // add command line options
             try {
                 var opt_context = new OptionContext ("");

src/Services/Appearance.vala

@@ -20,7 +20,7 @@ public class Monitor.Appearance : Object {
             provider.load_from_resource ("/io/elementary/monitor/monitor-light.css");
         }
 
-        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        Gtk.StyleContext.add_provider_for_display (Gdk.Display.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         // We listen to changes in Granite.Settings and update our app if the user changes their preference
         granite_settings.notify["prefers-color-scheme"].connect (() => {