🔧 Port effect profiles to GTK4

prefs.js

@@ -45,26 +45,26 @@ var PreferencesDialog = class PreferencesDialog {
 
     // New effects must be registered here and in extension.js.
     this._ALL_EFFECTS = [
-      // new Me.imports.src.effects.Apparition.Apparition(),
+      new Me.imports.src.effects.Apparition.Apparition(),
-      // new Me.imports.src.effects.BrokenGlass.BrokenGlass(),
+      new Me.imports.src.effects.BrokenGlass.BrokenGlass(),
-      // new Me.imports.src.effects.Doom.Doom(),
+      new Me.imports.src.effects.Doom.Doom(),
-      // new Me.imports.src.effects.EnergizeA.EnergizeA(),
+      new Me.imports.src.effects.EnergizeA.EnergizeA(),
-      // new Me.imports.src.effects.EnergizeB.EnergizeB(),
+      new Me.imports.src.effects.EnergizeB.EnergizeB(),
-      // new Me.imports.src.effects.Fire.Fire(),
+      new Me.imports.src.effects.Fire.Fire(),
-      // new Me.imports.src.effects.Glide.Glide(),
+      new Me.imports.src.effects.Glide.Glide(),
-      // new Me.imports.src.effects.Glitch.Glitch(),
+      new Me.imports.src.effects.Glitch.Glitch(),
-      // new Me.imports.src.effects.Hexagon.Hexagon(),
+      new Me.imports.src.effects.Hexagon.Hexagon(),
-      // new Me.imports.src.effects.Incinerate.Incinerate(),
+      new Me.imports.src.effects.Incinerate.Incinerate(),
-      // new Me.imports.src.effects.Matrix.Matrix(),
+      new Me.imports.src.effects.Matrix.Matrix(),
-      // new Me.imports.src.effects.Pixelate.Pixelate(),
+      new Me.imports.src.effects.Pixelate.Pixelate(),
-      // new Me.imports.src.effects.PixelWheel.PixelWheel(),
+      new Me.imports.src.effects.PixelWheel.PixelWheel(),
-      // new Me.imports.src.effects.PixelWipe.PixelWipe(),
+      new Me.imports.src.effects.PixelWipe.PixelWipe(),
-      // new Me.imports.src.effects.Portal.Portal(),
+      new Me.imports.src.effects.Portal.Portal(),
-      // new Me.imports.src.effects.SnapOfDisintegration.SnapOfDisintegration(),
+      new Me.imports.src.effects.SnapOfDisintegration.SnapOfDisintegration(),
-      // new Me.imports.src.effects.TRexAttack.TRexAttack(),
+      new Me.imports.src.effects.TRexAttack.TRexAttack(),
-      // new Me.imports.src.effects.TVEffect.TVEffect(),
+      new Me.imports.src.effects.TVEffect.TVEffect(),
-      // new Me.imports.src.effects.TVGlitch.TVGlitch(),
+      new Me.imports.src.effects.TVGlitch.TVGlitch(),
-      // new Me.imports.src.effects.Wisps.Wisps(),
+      new Me.imports.src.effects.Wisps.Wisps(),
     ];
 
     // Load all of our resources.
@@ -137,6 +137,7 @@ var PreferencesDialog = class PreferencesDialog {
     }
     colorSchemeRow.set_visible(utils.shellVersionIsAtLeast(42, 0));
 
+    // Wire up the window picker of the profile editor.
     this._builder.get_object('profile-choose-app-button').connect('clicked', () => {
       Gio.DBus.session.call('org.gnome.Shell',
                             '/org/gnome/shell/extensions/BurnMyWindows',
@@ -155,6 +156,17 @@ var PreferencesDialog = class PreferencesDialog {
         }
       });
 
+    if (!utils.isADW()) {
+      const profileEditorButton = this._builder.get_object("edit-profile-button");
+      profileEditorButton.connect("toggled", b => {
+        if (b.active) {
+          this._builder.get_object("general-prefs").set_visible_child(this._builder.get_object("profile-editor"));
+        } else {
+          this._builder.get_object("general-prefs").set_visible_child(this._builder.get_object("effect-editor"));
+        }
+      });
+    }
+
     // This is our top-level widget which we will return later.
     this._widget = this._builder.get_object('general-prefs');
 
@@ -165,6 +177,26 @@ var PreferencesDialog = class PreferencesDialog {
     // accordion-like behavior of the effect settings.
     this._effectRows = [];
 
+    if (!utils.isADW()) {
+      group.connect("row-activated", (g, row) => {
+        this._effectRows.forEach(r => {
+          if (r == row) {
+            if (r._revealer.get_reveal_child()) {
+              r._revealer.set_reveal_child(false);
+              r._arrow.remove_css_class("revealed");
+            } else {
+              r._revealer.set_reveal_child(true);
+              r._arrow.add_css_class("revealed");
+            }
+          } else {
+            r._revealer.set_reveal_child(false);
+            r._arrow.remove_css_class("revealed");
+          }
+        }
+        );
+      });
+    }
+
     // Now add all the rows.
     this._ALL_EFFECTS.forEach(effect => {
       const [minMajor, minMinor] = effect.getMinShellVersion();
@@ -173,14 +205,35 @@ var PreferencesDialog = class PreferencesDialog {
         const uiFile     = `/ui/${utils.getUIDir()}/${effect.getNick()}.ui`;
         const [hasPrefs] = Gio.resources_get_info(uiFile, 0);
 
+        // Add the settings page to the builder.
+        if (hasPrefs) {
+          this._builder.add_from_resource(uiFile);
+        }
+
+        // The preview button.
+        const previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic');
+        previewButton.add_css_class('circular');
+        previewButton.add_css_class('flat');
+        previewButton.set_tooltip_text(_('Preview this effect'));
+        previewButton.set_valign(Gtk.Align.CENTER);
+        previewButton.connect('clicked', () => {
+          this._previewEffect(effect);
+        });
+        
+        // The toggle button for enabling and disabling the effect.
+        const button = Gtk.Switch.new();
+        button.set_tooltip_text(_('Use this effect'));
+        button.set_valign(Gtk.Align.CENTER);
+        this._builder.expose_object(`${effect.getNick()}-enable-effect`, button);
+        
+        if (utils.isADW()) {
+
           let row;
           if (hasPrefs) {
-          // Add the settings page to the builder.
-          this._builder.add_from_resource(uiFile);
 
             // Add the effect's preferences (if any).
             row = this._builder.get_object(`${effect.getNick()}-prefs`);
-        } else {
+          } else if(utils.isADW()) {
             row = Adw.ActionRow.new();
           }
 
@@ -199,36 +252,53 @@ var PreferencesDialog = class PreferencesDialog {
             row.connect('notify::expanded', currentRow => {
               if (currentRow.get_expanded()) {
                 this._effectRows.forEach(row => {
-                if (row != currentRow && row.set_expanded) {
+                  if (row != currentRow) {
                     row.set_expanded(false);
                   }
                 });
               }
             });
+            this._effectRows.push(row);
           }
 
-        // The preview button.
-        const previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic');
-        previewButton.add_css_class('circular');
-        previewButton.add_css_class('flat');
-        previewButton.set_tooltip_text(_('Preview this effect'));
-        previewButton.set_valign(Gtk.Align.CENTER);
           row.add_action(previewButton);
-
-        previewButton.connect('clicked', () => {
-          this._previewEffect(effect);
-        });
-
-        // Now add the toggle button for enabling and disabling the effect.
-        const button = Gtk.Switch.new();
-        button.set_tooltip_text(_('Use this effect'));
-        button.set_valign(Gtk.Align.CENTER);
-        this._builder.expose_object(`${effect.getNick()}-enable-effect`, button);
-
           row.add_prefix(button);
+
           group.add(row);
           
+
+        } else {
+
+          const row = new Gtk.ListBoxRow({css_classes:["effect-row"]});
+          const container = new Gtk.Box({orientation:Gtk.Orientation.VERTICAL});
+          const header =  new Gtk.Box({css_classes:["effect-row-header"], spacing:12});
+          const label = new Gtk.Label({label:effect.getLabel(), css_classes:["heading"], hexpand:true, halign: Gtk.Align.START});
+
+          this.gtkBoxAppend(header, button);
+          this.gtkBoxAppend(header, label);
+          this.gtkBoxAppend(header, previewButton);
+          this.gtkBoxAppend(container, header);
+          
+          if (hasPrefs) {
+            const revealer = this._builder.get_object(`${effect.getNick()}-prefs`);
+            const arrow = new Gtk.Image({css_classes:["revealer-arrow"], icon_name:"go-down-symbolic"});
+            this.gtkBoxAppend(header, arrow);
+            this.gtkBoxAppend(container, revealer);
+            row._revealer = revealer;
+            row._arrow = arrow;
+
+            row.set_activatable(true);
             this._effectRows.push(row);
+          } else {
+            row.set_activatable(false);
+          }
+
+          row.set_child(container);
+
+          group.append(row);
+
+        }
+
       }
     });
 

resources/css/gtk.css

@@ -6,3 +6,25 @@ SPDX-License-Identifier: CC0-1.0
 .pill-button {
     border-radius: 9999px;
 }
+
+/* These are only used if not using libadwaita */
+
+.effect-row {
+    padding: 0;
+}
+
+.effect-row-header,
+.effect-row list {
+    padding: 8px;
+    border: 0 solid @borders;
+    border-bottom-width: 1px;
+}
+
+.revealer-arrow {
+    margin-right: 6px;
+    transition: transform 250ms;
+}
+
+.revealer-arrow.revealed {
+    transform: rotate(180deg);
+}

resources/ui/gtk4/apparition.ui

@@ -7,18 +7,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="apparition-prefs">
+  <object class="GtkRevealer" id="apparition-prefs">
-    <property name="orientation">vertical</property>
-
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -253,9 +245,5 @@ SPDX-License-Identifier: GPL-3.0-or-later
       </object>
     </child>
   </object>
-    </child>
-
-
-  </object>
 
 </interface>

resources/ui/gtk4/broken-glass.ui

@@ -7,18 +7,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="broken-glass-prefs">
+  <object class="GtkRevealer" id="broken-glass-prefs">
-    <property name="orientation">vertical</property>
-
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -242,6 +234,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkSwitch" id="broken-glass-use-pointer">
                     <property name="halign">end</property>
                     <property name="valign">center</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
                   </object>
                 </child>
                 <child>
@@ -261,9 +255,5 @@ SPDX-License-Identifier: GPL-3.0-or-later
       </object>
     </child>
   </object>
-    </child>
-
-
-  </object>
 
 </interface>

resources/ui/gtk4/doom.ui

@@ -7,18 +7,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="doom-prefs">
+  <object class="GtkRevealer" id="doom-prefs">
-    <property name="orientation">vertical</property>
-
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -207,9 +199,5 @@ SPDX-License-Identifier: GPL-3.0-or-later
       </object>
     </child>
   </object>
-    </child>
-
-
-  </object>
 
 </interface>

resources/ui/gtk4/energize-a.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="energize-a-prefs">
+  <object class="GtkRevealer" id="energize-a-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -130,6 +123,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="energize-a-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -148,9 +144,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/energize-b.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="energize-b-prefs">
+  <object class="GtkRevealer" id="energize-b-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -130,6 +123,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="energize-b-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -148,9 +144,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/fire.ui

@@ -7,19 +7,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="fire-prefs">
+  <object class="GtkRevealer" id="fire-prefs">
-    <property name="orientation">vertical</property>
-
-    <child>
-      <object class="GtkFrame">
-        <property name="margin-bottom">20</property>
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -220,6 +211,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkSwitch" id="flame-3d-noise">
                     <property name="halign">end</property>
                     <property name="valign">center</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
                   </object>
                 </child>
                 <child>
@@ -278,6 +271,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="fire-color-5">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-end">8</property>
                   </object>
                 </child>
                 <child>
@@ -297,7 +291,5 @@ SPDX-License-Identifier: GPL-3.0-or-later
       </object>
     </child>
   </object>
-    </child>
-  </object>
 
 </interface>

resources/ui/gtk4/glide.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="glide-prefs">
+  <object class="GtkRevealer" id="glide-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -252,8 +245,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
 
 
   </object>

resources/ui/gtk4/glitch.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="glitch-prefs">
+  <object class="GtkRevealer" id="glitch-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -222,6 +215,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="glitch-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -240,9 +236,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/hexagon.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="hexagon-prefs">
+  <object class="GtkRevealer" id="hexagon-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -176,6 +169,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="hexagon-line-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -210,6 +206,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="hexagon-glow-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -263,6 +262,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkSwitch" id="hexagon-additive-blending">
                     <property name="halign">end</property>
                     <property name="valign">center</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
                   </object>
                 </child>
                 <child>
@@ -281,9 +282,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/incinerate.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="incinerate-prefs">
+  <object class="GtkRevealer" id="incinerate-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -195,6 +188,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkSwitch" id="incinerate-use-pointer">
                     <property name="halign">end</property>
                     <property name="valign">center</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
                   </object>
                 </child>
                 <child>
@@ -229,6 +224,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="incinerate-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -247,9 +245,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/matrix.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="matrix-prefs">
+  <object class="GtkRevealer" id="matrix-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -222,6 +215,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="matrix-trail-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -256,6 +252,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="matrix-tip-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -275,8 +274,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
 
   </object>
 </interface>

resources/ui/gtk4/pixel-wheel.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="pixel-wheel-prefs">
+  <object class="GtkRevealer" id="pixel-wheel-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -160,9 +153,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/pixel-wipe.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="pixel-wipe-prefs">
+  <object class="GtkRevealer" id="pixel-wipe-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -114,9 +107,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/pixelate.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="pixelate-prefs">
+  <object class="GtkRevealer" id="pixelate-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -160,9 +153,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/portal.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="portal-prefs">
+  <object class="GtkRevealer" id="portal-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -222,6 +215,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="portal-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -240,9 +236,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/prefs.ui

@@ -26,10 +26,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
       <object class="GtkToggleButton" id="edit-profile-button">
         <property name="icon-name">bmw-edit-profile-symbolic</property>
         <property name="valign">center</property>
-
-        <binding name="active">
-          <lookup name="reveal-child">profile-editor-revealer</lookup>
-        </binding>
       </object>
     </child>
     <style>
@@ -37,17 +33,14 @@ SPDX-License-Identifier: GPL-3.0-or-later
     </style>
   </object>
 
-  <object class="GtkBox" id="general-prefs">
+  <object class="GtkStack" id="general-prefs">
-    <property name="orientation">vertical</property>
+    <property name="transition-type">over-down-up</property>
 
     <child>
-      <object class="GtkRevealer" id="profile-editor-revealer">
+      <object class="GtkScrolledWindow" id="effect-editor">
-
+        <property name="hscrollbar-policy">never</property>
-        <binding name="reveal-child">
-          <lookup name="active">edit-profile-button</lookup>
-        </binding>
-
         <property name="child">
+
           <object class="GtkBox">
             <property name="orientation">vertical</property>
             <property name="margin-top">20</property>
@@ -56,6 +49,52 @@ SPDX-License-Identifier: GPL-3.0-or-later
             <property name="margin-end">20</property>
             <property name="spacing">5</property>
 
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">Effect Settings</property>
+                <property name="halign">start</property>
+                <style>
+                  <class name="heading" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">If multiple are selected, one is chosen randomly.</property>
+                <property name="halign">start</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkFrame">
+                <child>
+                  <object class="GtkListBox" id="effects-group">
+                    <property name="selection-mode">none</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+
+        </property>
+
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkBox" id="profile-editor">
+        <property name="orientation">vertical</property>
+        <property name="margin-top">20</property>
+        <property name="margin-bottom">20</property>
+        <property name="margin-start">20</property>
+        <property name="margin-end">20</property>
+        <property name="spacing">5</property>
+        <style>
+          <class name="background" />
+        </style>
+
         <child>
           <object class="GtkLabel">
             <property name="label" translatable="yes">Effect Profile Constraints</property>
@@ -358,49 +397,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
           </object>
         </child>
 
-          </object>
-        </property>
-
       </object>
     </child>
 
-    <child>
-      <object class="GtkLabel">
-        <property name="label" translatable="yes">Effect Settings</property>
-        <property name="xalign">0</property>
-        <property name="halign">start</property>
-        <property name="valign">center</property>
-        <property name="hexpand">1</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel">
-        <property name="label" translatable="yes">If multiple are selected, one is chosen randomly.</property>
-        <property name="xalign">0</property>
-        <property name="halign">start</property>
-        <property name="valign">center</property>
-        <property name="hexpand">1</property>
-        <style>
-          <class name="dim-label" />
-          <class name="caption" />
-        </style>
-      </object>
-    </child>
-
-    <child>
-      <object class="GtkFrame">
-        <child>
-          <object class="GtkListBox" id="effects-group">
-            <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
-
-          </object>
-        </child>
-      </object>
-    </child>
 
   </object>
 

resources/ui/gtk4/snap.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface>
 
-  <object class="GtkBox" id="snap-prefs">
+  <object class="GtkRevealer" id="snap-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -130,6 +123,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="snap-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -148,9 +144,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/trex.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="trex-prefs">
+  <object class="GtkRevealer" id="trex-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -222,6 +215,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="claw-scratch-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -240,8 +236,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
 
   </object>
 

resources/ui/gtk4/tv-glitch.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="tv-glitch-prefs">
+  <object class="GtkRevealer" id="tv-glitch-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -222,6 +215,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="tv-glitch-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -240,9 +236,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/tv.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="tv-prefs">
+  <object class="GtkRevealer" id="tv-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -84,6 +77,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="tv-effect-color">
                     <property name="use_alpha">1</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -102,9 +98,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>
 

resources/ui/gtk4/wisps.ui

@@ -7,18 +7,11 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 <interface domain="burn-my-windows">
 
-  <object class="GtkBox" id="wisps-prefs">
+  <object class="GtkRevealer" id="wisps-prefs">
-    <property name="orientation">vertical</property>
 
-    <child>
-      <object class="GtkFrame">
     <child>
       <object class="GtkListBox">
         <property name="selection-mode">none</property>
-            <property name="show-separators">1</property>
-            <style>
-              <class name="rich-list" />
-            </style>
 
         <child>
           <object class="GtkListBoxRow">
@@ -130,6 +123,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   <object class="GtkColorButton" id="wisps-color">
                     <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
+                    <property name="margin-start">8</property>
+                    <property name="margin-end">8</property>
+                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
@@ -148,9 +144,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
       </object>
     </child>
-      </object>
-    </child>
-
 
   </object>