Separate ProgressButton from AbstractAppContainer

data/styles/Index.scss

@@ -1,8 +1,8 @@
 // Class constants and common styles
 @import '_common.scss';
 
-@import 'AbstractAppContainer.scss';
 @import 'AppInfoView.scss';
 @import 'Banner.scss';
 @import 'Category.scss';
 @import 'MainWindow.scss';
+@import 'ProgressButton.scss';

data/styles/ProgressButton.scss

@@ -0,0 +1,35 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2024 elementary, Inc. (https://elementary.io)
+ */
+
+button.progress {
+    padding-bottom: rem(2px);
+    padding-left: rem(2px);
+    padding-right: rem(2px);
+
+    label {
+        padding-left: rem(7px);
+        padding-right: rem(7px);
+    }
+
+    progressbar {
+        progress,
+        trough {
+            border: none;
+            border-radius: 99px;
+            box-shadow: none;
+            min-height: rem(2px);
+        }
+
+        progress {
+            background: #{'@accent_color'};
+            margin: 0;
+            min-width: 0;
+        }
+
+        trough {
+            background: #{'alpha(@accent_color, 0.25)'};
+        }
+    }
+}

po/POTFILES

@@ -35,6 +35,7 @@ src/Widgets/Banner.vala
 src/Widgets/CardNumberEntry.vala
 src/Widgets/HumbleButton.vala
 src/Widgets/PackageRow.vala
+src/Widgets/ProgressButton.vala
 src/Widgets/ReleaseRow.vala
 src/Widgets/SharePopover.vala
 src/Widgets/SizeLabel.vala

src/Widgets/AppContainers/AbstractAppContainer.vala

@@ -67,9 +67,7 @@ public abstract class AppCenter.AbstractAppContainer : Gtk.Box {
         button_box.append (action_button_revealer);
         button_box.append (open_button_revealer);
 
-        cancel_button = new ProgressButton () {
-            label = _("Cancel")
-        };
+        cancel_button = new ProgressButton (package);
         cancel_button.clicked.connect (() => action_cancelled ());
 
         action_button_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.BOTH);
@@ -93,48 +91,8 @@ public abstract class AppCenter.AbstractAppContainer : Gtk.Box {
         });
     }
 
-    protected class ProgressButton : Gtk.Button {
-        public double fraction { get; set; }
-
-        // 2px spacing on each side; otherwise it looks weird with button borders
-        private const string CSS = """
-            .progress-button {
-                background-size: calc(%i%% - 4px) calc(100%% - 4px);
-            }
-        """;
-
-        public ProgressButton (double fraction = 0.0) {
-            Object (
-                fraction: fraction
-            );
-        }
-
-        construct {
-            add_css_class ("progress-button");
-
-            var provider = new Gtk.CssProvider ();
-
-            notify["fraction"].connect (() => {
-                var css = CSS.printf ((int) (fraction * 100));
-
-                try {
-                    provider.load_from_data (css.data);
-                    get_style_context ().add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-                } catch (Error e) {
-                    critical (e.message);
-                }
-            });
-        }
-    }
-
     protected virtual void set_up_package () {
         package.notify["state"].connect (on_package_state_changed);
-
-        package.change_information.progress_changed.connect (update_progress);
-        package.change_information.status_changed.connect (update_progress_status);
-
-        update_progress_status ();
-        update_progress ();
         update_state (true);
     }
 
@@ -217,26 +175,6 @@ public abstract class AppCenter.AbstractAppContainer : Gtk.Box {
         }
     }
 
-    protected void update_progress () {
-        Idle.add (() => {
-            cancel_button.fraction = package.progress;
-            return GLib.Source.REMOVE;
-        });
-    }
-
-    protected virtual void update_progress_status () {
-        Idle.add (() => {
-            cancel_button.tooltip_text = package.get_progress_description ();
-            cancel_button.sensitive = package.change_information.can_cancel && !package.changes_finished;
-            /* Ensure progress bar shows complete to match status (lp:1606902) */
-            if (package.changes_finished) {
-                cancel_button.fraction = 1.0f;
-            }
-
-            return GLib.Source.REMOVE;
-        });
-    }
-
     private void action_cancelled () {
         update_action ();
         package.action_cancellable.cancel ();

src/Widgets/ProgressButton.vala

@@ -0,0 +1,56 @@
+/*
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ * SPDX-FileCopyrightText: 2016-2021 elementary, Inc. (https://elementary.io)
+ */
+
+public class AppCenter.ProgressButton : Gtk.Button {
+    public AppCenterCore.Package package { get; construct; }
+
+    private Gtk.ProgressBar progressbar;
+
+    public ProgressButton (AppCenterCore.Package package) {
+        Object (package: package);
+    }
+
+    construct {
+        add_css_class ("progress");
+
+        package.change_information.progress_changed.connect (update_progress);
+        package.change_information.status_changed.connect (update_progress_status);
+
+        update_progress_status ();
+        update_progress ();
+
+        var cancel_label = new Gtk.Label (_("Cancel")) {
+            mnemonic_widget = this
+        };
+
+        progressbar = new Gtk.ProgressBar ();
+
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.append (cancel_label);
+        box.append (progressbar);
+
+        child = box;
+    }
+
+    private void update_progress () {
+        Idle.add (() => {
+            progressbar.fraction = package.progress;
+            return GLib.Source.REMOVE;
+        });
+    }
+
+    private void update_progress_status () {
+        Idle.add (() => {
+            tooltip_text = package.get_progress_description ();
+            sensitive = package.change_information.can_cancel && !package.changes_finished;
+            /* Ensure progress bar shows complete to match status (lp:1606902) */
+            if (package.changes_finished) {
+                progressbar.fraction = 1.0f;
+            }
+
+            return GLib.Source.REMOVE;
+        });
+    }
+}

src/meson.build

@@ -37,6 +37,7 @@ appcenter_files = files(
     'Widgets/CardNumberEntry.vala',
     'Widgets/HumbleButton.vala',
     'Widgets/PackageRow.vala',
+    'Widgets/ProgressButton.vala',
     'Widgets/ReleaseRow.vala',
     'Widgets/SharePopover.vala',
     'Widgets/SizeLabel.vala',