📝 Tweak changelog

.github/workflows/badges.yml

@@ -0,0 +1,40 @@
+name: Badges
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  update-badges:
+    name: Update Badges
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Download cloc
+        run: sudo apt-get update -y && sudo apt-get install -y cloc
+      - name: Get the Numbers
+        run: |
+          echo "CODE_LINES=$(scripts/cloc.sh --loc)" >> $GITHUB_ENV
+          echo "COMMENT_LINES=$(scripts/cloc.sh --percentage)%" >> $GITHUB_ENV
+      - name: Create Lines-of-Code-Badge
+        uses: schneegans/dynamic-badges-action@v1.1.0
+        with:
+          auth: ${{ secrets.GIST_SECRET }}
+          gistID: 8cf45f23253ff09b21196e7271378762
+          filename: loc.json
+          label: Lines of Code
+          message: ${{ env.CODE_LINES }}
+          color: lightgrey
+          labelColor: 303030
+      - name: Create Comments-Badge
+        uses: schneegans/dynamic-badges-action@v1.1.0
+        with:
+          auth: ${{ secrets.GIST_SECRET }}
+          gistID: 8cf45f23253ff09b21196e7271378762
+          filename: comments.json
+          label: Comments
+          message: ${{ env.COMMENT_LINES }}
+          color: green
+          labelColor: 303030

.github/workflows/checks.yml

@@ -76,7 +76,34 @@ jobs:
       ( contains(github.ref, 'main') && !contains(github.event.head_commit.message, '[no-ci]') ) ||
       ( contains(github.ref, 'develop') && !contains(github.event.head_commit.message, '[no-ci]') ) ||
       contains(github.event.head_commit.message, '[run-ci]')
+    strategy:
+      fail-fast: false
+      matrix:
+        version:
+          - '32'
+          - '33'
+          - '34'
+          - '35'
+        session:
+          - 'gnome-xsession'
+          - 'gnome-wayland-nested'
     steps:
     - uses: actions/checkout@v2
+    - name: Download Dependencies
+      run: |
+        sudo apt update -qq
+        sudo apt install gettext -qq
     - name: Build Burn-My-Windows
       run: make
+    - name: Test Burn-My-Windows
+      run: sudo $GITHUB_WORKSPACE/tests/run-test.sh -v ${{ matrix.version }} -s ${{ matrix.session }}
+    - uses: actions/upload-artifact@v2
+      if: failure()
+      with:
+        name: log_${{ matrix.version }}_${{ matrix.session }}
+        path: fail.log
+    - uses: actions/upload-artifact@v2
+      if: failure()
+      with:
+        name: screen_${{ matrix.version }}_${{ matrix.session }}
+        path: fail.png

.gitignore

@@ -1,5 +1,9 @@
 *~
 *.zip
+*.blend1
+*.blend2
+*.blend3
+/locale
 /schemas/gschemas.compiled
 /resources/burn-my-windows.gresource
 /resources/burn-my-windows.gresource.xml

Makefile

@@ -1,9 +1,13 @@
 SHELL := /bin/bash
 
 JS_FILES = $(shell find -type f -and \( -name "*.js" \))
+UI_FILES = $(shell find -type f -and \( -name "*.ui" \))
 RESOURCE_FILES = $(shell find resources -mindepth 2 -type f)
 
-.PHONY: zip install uninstall clean
+LOCALES_PO = $(wildcard po/*.po)
+LOCALES_MO = $(patsubst po/%.po,locale/%/LC_MESSAGES/burn-my-windows.mo,$(LOCALES_PO))
+
+.PHONY: zip install uninstall all-po pot clean
 
 zip: burn-my-windows@schneegans.github.com.zip
 
@@ -14,23 +18,31 @@ install: burn-my-windows@schneegans.github.com.zip
 uninstall:
 	gnome-extensions uninstall "burn-my-windows@schneegans.github.com"
 
+all-po: $(LOCALES_PO)
+
+pot: $(JS_FILES) $(UI_FILES)
+	@echo "Generating 'burn-my-windows.pot'..."
+	@xgettext --from-code=UTF-8 \
+			  --add-comments=Translators \
+			  --copyright-holder="Simon Schneegans" \
+			  --package-name="Burn-My-Windows" \
+			  --output=po/burn-my-windows.pot \
+			  $(JS_FILES) $(UI_FILES)
+
 clean:
 	rm -rf \
 	burn-my-windows@schneegans.github.com.zip \
 	resources/burn-my-windows.gresource \
 	resources/burn-my-windows.gresource.xml \
-	schemas/gschemas.compiled
-
-burn-my-windows@schneegans.github.com.zip: schemas/gschemas.compiled resources/burn-my-windows.gresource $(JS_FILES)
-	@# Check if the VERSION variable was passed and set version to it
-	@if [[ "$(VERSION)" != "" ]]; then \
-	  sed -i "s|  \"version\":.*|  \"version\": $(VERSION)|g" metadata.json; \
-	fi
-	@# TODO Maybe echo version number of the release that was built, in order to facilitate double-checking before publishing it?
+	schemas/gschemas.compiled \
+	locale \
+	ui/*.ui~ \
+	po/*.po~
 
+burn-my-windows@schneegans.github.com.zip: schemas/gschemas.compiled resources/burn-my-windows.gresource $(JS_FILES) $(LOCALES_MO)
 	@echo "Packing zip file..."
 	@rm --force burn-my-windows@schneegans.github.com.zip
-	@zip -r burn-my-windows@schneegans.github.com.zip -- *.js src/*/*.js resources/burn-my-windows.gresource schemas/gschemas.compiled metadata.json LICENSE
+	@zip -r burn-my-windows@schneegans.github.com.zip -- *.js src/*.js resources/burn-my-windows.gresource schemas/gschemas.compiled $(LOCALES_MO) metadata.json LICENSE
 	
 	@#Check if the zip size is too big to be uploaded
 	@if [[ "$$(stat -c %s burn-my-windows@schneegans.github.com.zip)" -gt 4096000 ]]; then \
@@ -49,3 +61,14 @@ resources/burn-my-windows.gresource.xml: $(RESOURCE_FILES)
 schemas/gschemas.compiled: schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml
 	@echo "Compiling schemas..."
 	@glib-compile-schemas schemas
+
+locale/%/LC_MESSAGES/burn-my-windows.mo: po/%.po
+	@echo "Compiling $@"
+	@mkdir -p locale/$*/LC_MESSAGES
+	@msgfmt -c -o $@ $<
+
+po/%.po:
+	@echo "Updating $@"
+	msgmerge --previous --update $@ po/burn-my-windows.pot
+	@# Output translation progress
+	@msgfmt --check --verbose --output-file=/dev/null $@

README.md

@@ -1,22 +1,65 @@
-# Set GNOME Shell on Fire!
+<h1 align="center">🔥 Set GNOME Shell on Fire!</h1>
 
+<p align="center">
+<a href="https://extensions.gnome.org/extension/4679/burn-my-windows/"><img src="https://img.shields.io/badge/Download-extensions.gnome.org-e67f4d.svg?logo=gnome&logoColor=lightgrey&labelColor=303030" /></a><br/>
 <a href="https://github.com/Schneegans/Burn-My-Windows/actions"><img src="https://github.com/Schneegans/Burn-My-Windows/workflows/Checks/badge.svg?branch=main" /></a>
 <a href="LICENSE"><img src="https://img.shields.io/badge/License-GPLv3-blue.svg?labelColor=303030" /></a>
-<a href="https://extensions.gnome.org/extension/4679/burn-my-windows/"><img src="https://img.shields.io/badge/Download-extensions.gnome.org-e67f4d.svg?logo=gnome&logoColor=lightgrey&labelColor=303030" /></a>
+<a href="https://hosted.weblate.org/engage/burn-my-windows/"><img src="https://img.shields.io/weblate/progress/burn-my-windows?label=Translated&logo=weblate&logoColor=lightgray&labelColor=303030" /></a>
+<a href="scripts/cloc.sh"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/Schneegans/8cf45f23253ff09b21196e7271378762/raw/loc.json" /></a>
+<a href="scripts/cloc.sh"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/Schneegans/8cf45f23253ff09b21196e7271378762/raw/comments.json" /></a>
+</p>
 
 When I released the [Desktop Cube Extension](https://github.com/Schneegans/Desktop-Cube/), many people requested to revive one of the most useless features of Linux desktop history: Setting windows on fire!
 This extension is not only more useless than the cube, but it is also much more hacky. So I expect some bug! [Let's incinerate them all](https://github.com/Schneegans/Burn-My-Windows/issues)!
 
-## Included Effects
+For a list of things changed in previous releases, you can have a look at the [changelog](docs/changelog.md)!
 
-Name | Preview
+
+Effect | Preview
 -----|--------
+**Broken Glass** <br> Shatter your windows into a shower sharp shards! This effect can be configured so that the shards fly away from your mouse pointer position! <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/glass.gif" />
+**Energize A** <br> Beam your windows away! | <img src ="docs/pics/energizeA.gif" />
+**Energize B** <br> Using different transporter technology results in an alternative visual effect. | <img src ="docs/pics/energizeB.gif" />
 **Fire** <br> The classic effect inspired by Compiz. However, this is implemented using a GLSL shader and not with a particle system like in the old days. | <img src ="docs/pics/fire.gif" />
 **Matrix** <br> Turn your windows into a shower of green letters! The color is actually configurable. <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/matrix.gif" />
 **T-Rex Attack** <br> Destroy your windows with a series of violent slashes! <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/trex.gif" />
 **TV-Effect** <br> This is a very simple effect to demonstrate that this extension could also be used in a more professional environment. | <img src ="docs/pics/tv.gif" />
+**Wisps** <br> Let your windows be carried away to the realm of dreams by these little fairies! | <img src ="docs/pics/wisps.gif" />
+**Your Effect!** <br> The extension is very modular and with a bit of creativity and GLSL knowledge, [you can easily create your own effects](docs/how-to-create-new-effects.md). | [![Create your own effects](docs/pics/custom.jpg)](docs/how-to-create-new-effects.md)
 
-## Installation
+
+## 💞 These People _love_ this Extension
+
+While [coding new features](docs/how-to-create-new-effects.md) or [translating the extension](https://hosted.weblate.org/engage/burn-my-windows/) are the most awesome ways to contribute, providing financial support will help me stay motivated to invest my spare time to keep the project alive in the future.
+
+<h3 align="center">🥇 Current Gold Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/dennis1248">Dennis ten Hoove</a><br>
+</p>
+
+<h3 align="center">🥈 Current Silver Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/MRR-dev">@MRR-dev</a><br>
+  <a href="https://github.com/castrojo">Jorge Castro</a><br>
+</p>
+
+<h3 align="center">🥉 Current Bronze Sponsors</h3>
+<p align="center">
+  <a href="https://github.com/sponsors/Schneegans">Be the first!</a>
+</p>
+
+<h3 align="center">🏅 Previous Sponsors and One-Time Donators</h3>
+<p align="center">
+  DAPREMONT Christophe<br>
+  <a href="https://github.com/manero6">@manero6</a><br>
+  <a href="https://github.com/RickStanley">@RickStanley</a><br>
+</p>
+
+
+Do you want to show that you love it too? You may <a href="https://github.com/sponsors/Schneegans">become a sponsor for as little as 1$ / month</a>!
+If you like this extension, you may also want to try one of my other extensions: [🧊 Desktop-Cube](https://github.com/Schneegans/Desktop-Cube) or [🍰 Fly-Pie](https://github.com/Schneegans/Fly-Pie/)!
+
+## ⬇️ Installation
 
 You can either install the Burn-My-Windows extension from extensions.gnome.org (a), download a stable release
 from GitHub (b) or clone the latest version directly with `git` (c).
@@ -78,7 +121,8 @@ gnome-extensions enable burn-my-windows@schneegans.github.com
 ## :octocat: I want to contribute!
 
 That's great!
-Here are some basic rulles to get you started:
+Most likely, you want to [create a new effect](docs/how-to-create-new-effects.md) or to  [translate the extension](https://hosted.weblate.org/engage/burn-my-windows/)?
+Here are some basic rules to get you started:
 Commits should start with a Capital letter and should be written in present tense (e.g. __:tada: Add cool new feature__ instead of __:tada: Added cool new feature__).
 You should also start your commit message with **one** applicable emoji.
 This does not only look great but also makes you rethink what to add to a commit. Make many but small commits!

docs/changelog.md

@@ -1,8 +1,84 @@
 # Changelog of the Burn-My-Windows Extension
 
+## [Burn My Window 10](https://github.com/schneegans/Burn-My-Windows/releases/tag/v10)
+
+**Release Date:** 2022-01-31
+
+#### New Features
+
+* **Effects for Window Opening.** You can now select effects which are applied on newly opened windows! I expect that there are some bugs left, so please [report any issue you find](https://github.com/Schneegans/Burn-My-Windows/issues)!
+* **New Effect: Broken Glass.** Shatter your windows into a shower sharp shards! This effect can be configured so that the shards fly away from your mouse pointer position!
+* **Preview Buttons** have been added to the effect-configuration pages of the preferences dialog. These can be used to, well, preview the current settings (without having to enable the effect first).
+* **Translations!** It is now possible to [translate the preferences dialog](https://hosted.weblate.org/engage/burn-my-windows/). There is already a finished German translation, and in-progress translations to Italian and Norwegian Bokmål.
+* **A "Vertical Overshooting" option** was added to the Matrix Effect: This can add some vertical variation to the start and end position of the letter drops.
+
+#### Other Enhancements
+
+* Added a menu entry with a link to the guide for creating new effect types.
+* Thanks to improved timing, the default animation time of several effects could be reduced.
+* The README now shows the current lines of code and the current comment percentage using my [dynamic-badges-action](https://github.com/Schneegans/dynamic-badges-action).
+* **Add advanced CI tests:** For each commit to `main`, it is now tested whether the extension can be installed and if the preferences dialog can be shown on GNOME Shell 3.36, 3.38, 40, and 41. Both, X11 and Wayland are checked. 
+
+## [Burn My Window 9](https://github.com/schneegans/Burn-My-Windows/releases/tag/v9)
+
+**Release Date:** 2022-01-18
+
+#### Fixes
+
+* Improved compatibility with [Show Application View When Workspace Empty ](https://extensions.gnome.org/extension/2036/show-application-view-when-workspace-empty/) (#54).
+* Fixed a crash which happened when the window-close icon in the overview was clicked twice (#49).
+
+## [Burn My Window 8](https://github.com/schneegans/Burn-My-Windows/releases/tag/v8)
+
+**Release Date:** 2022-01-17
+
+#### New Features
+
+* **Random effects!** You can now select a set of effects of which one will be chosen randomly whenever you close a window. **This changes how effects are selected, so you will have to re-select your desired effect(s)**.
+* **New Effect: Energize A.** Beam your windows away!
+* **New Effect: Energize B.** Using different transporter technology results in an alternative visual effect.
+* **New Effect: Wisps.** These little fairies carry your windows to the realm of dreams!
+* Each effect has its own "Animation Time" setting now. The global animation time has been replaced by those, so **you may have to adjust the sliders to match your previous settings**. 
+
+#### Other Enhancements
+
+* A [guide for creating new effects](how-to-create-new-effects.md) has been added.
+* The source code has received a **major refactoring**. This will make the addition of new effects much easier in the future.
+* The **layout of the settings dialog** has been reworked to make it easier to expand it in the future.
+* The lower limit of the **animation time of the TV Effect** has been reduced.
+* The T-Rex-Attack effect is not shown in fully transparent regions of a window any more.
+* The shaders now use a different noise implementation which produces better 3D noise.
+
+#### Fixes
+
+* The extension now works even if GNOME Shell's animations are disabled globally.
+
+
+## [Burn My Window 7](https://github.com/schneegans/Burn-My-Windows/releases/tag/v7)
+
+**Release Date:** 2022-01-03
+
+#### New Features
+
+* An option to use a 3D noise for the fire shader has been added. This will add some more temporal variation to the flames at the cost of slightly decreased rendering performance.
+* A changelog entry has been added to the menu of the preferences dialog.
+
+#### Fixes
+
+* Resolve copyright issues by using a MIT-licensed noise implementation.
+
+
+## [Burn My Window 6](https://github.com/schneegans/Burn-My-Windows/releases/tag/v6)
+
+**Release Date:** 2022-01-02
+
+#### Fixes
+
+* Removed a debug log message.
+
 ## [Burn My Window 5](https://github.com/schneegans/Burn-My-Windows/releases/tag/v5)
 
-**Release Date:** TBD
+**Release Date:** 2022-01-02
 
 #### New Features
 

docs/how-to-create-new-effects.md

@@ -0,0 +1,572 @@
+# 🔥 Creating a new Effect for Burn-My-Windows
+
+The extension is very modular and with a bit of creativity and GLSL knowledge, you can easily create your own effects.
+If you are happy with your results, please open a pull request so that we can include your effect in the next version of Burn-My-Windows!
+
+### Before you Start
+
+First you should [fork the repository](https://github.com/Schneegans/Burn-My-Windows/fork) and clone it to your PC.
+Afterwards, use a terminal in the directory of the cloned repository to install the extension.
+
+```bash
+make install
+```
+
+_:information_source: Whenever you changed something in the source code, you will have to call this command and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland to see the changes._
+
+### Debugging
+
+Debugging GNOME Shell extensions is a bit difficult.
+Most of the time, you will print messages to a log in order to understand what is going on.
+To make this a bit more convenient, Burn-My-Windows includes the method `utils.debug("Hello World")`.
+With this, each line will be prefixed with the extension's name, which will make spotting log messages more easy. You can use the following command to watch the log output; it will highlight all messages from Burn-My-Windows:
+
+```bash
+journalctl -f -o cat | grep -E 'burn-my-windows|'
+```
+
+## Adding a new Effect
+
+For the sake of this tutorial, we will create a **"Simple Fade"** effect.
+Of course, you can replace any occurrence of this name and its nick `simple-fade` with your custom effect name.
+
+Three simple steps are required to create a new effect. 
+You will have to ...
+
+1. add preferences keys for enabling the effect,
+2. create an additional effects class, and finally
+3. register the new effect in two places.
+
+### 1. Expanding the Schema
+
+For enabling the new effect, the boolean settings keys `simple-fade-open-effect`, `simple-fade-close-effect`, and `simple-fade-animation-time` are required.
+In this example, we also add a floating point value for storing another property of the effect - we will use them later in the tutorial.
+Just copy the XML code below to the file [`schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml`](../schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml).
+Just remember to replace `simple-fade` with your custom name!
+
+```xml
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- Simple Fade Effect Options                                                    -->
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<key name="simple-fade-close-effect" type="b">
+  <default>false</default>
+  <summary>Simple Fade Close Effect</summary>
+  <description>Use the Simple Fade effect for window closing.</description>
+</key>
+
+<key name="simple-fade-open-effect" type="b">
+  <default>false</default>
+  <summary>Simple Fade Open Effect</summary>
+  <description>Use the Simple Fade effect for window opening.</description>
+</key>
+
+<key name="simple-fade-animation-time" type="i">
+  <default>1500</default>
+  <summary>Simple Fade Animation Time</summary>
+  <description>The time the Simple Fade effect takes.</description>
+</key>
+
+<key name="simple-fade-width" type="d">
+  <default>0.1</default>
+  <summary>Simple Fade Width</summary>
+  <description>Width of the fading effect.</description>
+</key>
+```
+
+### 2. Creating the Effect Class
+
+You will have to create a new file called `src/SimpleFade.js` and paste the following code to it.
+Please study this code carefully, all of it is explained with inline comments.
+
+<details>
+  <summary>Expand this to show the code.</summary>
+
+```javascript
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect ...                                                                      //
+// <- Please add a description of your effect here ->                                   //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var SimpleFade = class SimpleFade {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'simple-fade';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return 'Simple Fade Effect';
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+    // Empty for now... Code is added here later in the tutorial!
+    return null;
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should neither be scaled nor faded.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 4},
+      'scale-x': {from: 1.0, to: 1.0, mode: 4},
+      'scale-y': {from: 1.0, to: 1.0, mode: 4}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      this.set_shader_source(`
+
+        // The code below injects some standard uniforms which will be updated during the
+        // animation. This includes:
+        // uTexture:    Contains the texture of the window.
+        // uProgress:   A value which transitions from 0 to 1 during the entire animation.
+        // uTime:       A steadily increasing value in seconds.
+        // uSizeX:      The horizontal size of uTexture in pixels.
+        // uSizeY:      The vertical size of uTexture in pixels.
+        ${shaderSnippets.standardUniforms()}
+
+        // The width of the fading effect is directly loaded from the settings.
+        const float FADE_WIDTH = ${settings.get_double('simple-fade-width')};
+
+        void main() {
+
+          // Get the color from the window texture.
+          vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+
+          // Radial distance from window edge to the window's center.
+          float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
+
+          // This gradually dissolves from [1..0] from the outside to the center. We
+          // switch the direction for opening and closing.
+          float progress = ${forOpening ? '1.0 - uProgress' : 'uProgress'};
+          float mask = (1.0 - progress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
+
+          // Make the mask smoother.
+          mask = smoothstep(0, 1, mask);
+
+          // Set the final output color. This uses premultiplied alpha.
+          cogl_color_out = windowColor * mask;
+        }
+      `);
+    };
+  });
+}
+```
+
+</details>
+
+### 3. Registering the new Effect
+
+You will have to register the new effect in two files.
+Both, [`extension.js`](../extension.js) and [`prefs.js`](../prefs.js) define an array in the beginning where you have to add an import to your new effect.
+Like this:
+
+```javascript
+const ALL_EFFECTS = [
+  ...
+  Me.imports.src.SimpleFade.SimpleFade,
+  ...
+];
+```
+
+
+
+### Testing your Effect
+
+Now you can call `make install` and restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland.
+You can open the extension's preferences and choose the new effect!
+However, there are no configuration options yet.
+It is also not possible to adjust the animation time setting.
+
+```bash
+gnome-extensions prefs burn-my-windows@schneegans.github.com
+```
+
+## Adding a Preferences Page
+
+There should be two sliders in this example: The animation duration and the width of the fading gradient.
+
+If your effect supports GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide two `*.ui` files for this.
+This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3.
+Usually, there are only a few minor differences between the two files.
+We will load the respective file in the `getPreferences()` method of your new effect class.
+
+Just save the code below to `resources/ui/gtk3/SimpleFade.ui` and `resources/ui/gtk4/SimpleFade.ui` respectively.
+Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
+
+<details>
+  <summary>Expand this to show the GTK3 code.</summary>
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="simple-fade-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="simple-fade-width">
+    <property name="upper">1</property>
+    <property name="lower">0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="simple-fade-prefs">
+    <property name="orientation">vertical</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Fade Width</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-width</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-width">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>
+```
+
+</details>
+
+<details>
+  <summary>Expand this to show the GTK4 code.</summary>
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+
+  <object class="GtkAdjustment" id="simple-fade-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="simple-fade-width">
+    <property name="upper">1</property>
+    <property name="lower">0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="simple-fade-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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Fade Width</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">simple-fade-width</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-simple-fade-width">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>
+```
+
+</details>
+
+### Loading the Preferences Page
+
+In order to load the above `*.ui` files, add the following code to your effect's `getPreferences()` method.
+
+```javascript
+static getPreferences(dialog) {
+
+  // Add the settings page to the builder.
+  dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/SimpleFade.ui`);
+
+  // These connect the settings to the UI elements. Have a look at prefs.js
+  // on how to bind other types of UI elements.
+  dialog.bindAdjustment('simple-fade-animation-time');
+  dialog.bindAdjustment('simple-fade-width');
+
+  // Finally, return the new settings page.
+  return dialog.getBuilder().get_object('simple-fade-prefs');
+}
+```
+
+Once this is in place, you can kill the extension-preferences process and re-open the settings.
+It is not required to reload GNOME Shell for developing the preferences dialog!
+Here's a handy one-liner to do this:
+
+```bash
+make install && pkill -f '.Extensions' && sleep 2 ; gnome-extensions prefs burn-my-windows@schneegans.github.com
+```
+
+## Summing Up
+
+That's it!
+If you have any questions, feel free to [ask them on the discussions board](https://github.com/Schneegans/Burn-My-Windows/discussions).
+If you are happy with your effect, submit a pull request, and it may get included in the next version!

docs/pics/README.md

@@ -0,0 +1,7 @@
+# Preview GIFs
+
+The preview GIFs are recorded with OBS Studio and converted to a GIF with the following command:
+
+```bash
+gifski --fps 30 -W 400 -H 225 -o effect.gif effect.mp4
+```

extension.js

@@ -15,26 +15,41 @@
 
 const {Clutter, Gio, Meta} = imports.gi;
 
-const Config               = imports.misc.config;
-const [GS_MAJOR, GS_MINOR] = Config.PACKAGE_VERSION.split('.');
+const Main          = imports.ui.main;
+const Workspace     = imports.ui.workspace.Workspace;
+const WindowManager = imports.ui.windowManager.WindowManager;
 
-const Workspace                  = imports.ui.workspace.Workspace;
-const WindowManager              = imports.ui.windowManager.WindowManager;
-const WINDOW_REPOSITIONING_DELAY = imports.ui.workspace.WINDOW_REPOSITIONING_DELAY;
+// The WindowPreview class is only available on GNOME Shell 3.38+;
+let WindowPreview = null;
+try {
+  WindowPreview = imports.ui.windowPreview.WindowPreview;
+} catch (error) {
+  // Nothing to be done, we are on GNOME Shell 3.36.
+}
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.common.utils;
-const FireShader     = Me.imports.src.extension.FireShader.FireShader;
-const MatrixShader   = Me.imports.src.extension.MatrixShader.MatrixShader;
-const TVEffectShader = Me.imports.src.extension.TVEffectShader.TVEffectShader;
-const TRexShader     = Me.imports.src.extension.TRexShader.TRexShader;
+const utils          = Me.imports.src.utils;
+
+// New effects must be registered here and in prefs.js.
+const ALL_EFFECTS = [
+  Me.imports.src.EnergizeA.EnergizeA,
+  Me.imports.src.EnergizeB.EnergizeB,
+  Me.imports.src.Fire.Fire,
+  Me.imports.src.Matrix.Matrix,
+  Me.imports.src.BrokenGlass.BrokenGlass,
+  Me.imports.src.TRexAttack.TRexAttack,
+  Me.imports.src.TVEffect.TVEffect,
+  Me.imports.src.Wisps.Wisps,
+];
 
 //////////////////////////////////////////////////////////////////////////////////////////
-// This extensions modifies the window-close animation to look like the window was set  //
-// on fire. While this is definitely a homage to the good old Compiz plugin, it is      //
-// implemented differently. While Compiz used a particle system, this extension uses a  //
-// perlin noise shader.                                                                 //
+// This extensions modifies the window-close and window-open animations with all kinds  //
+// of effects. The effects are implemented using GLSL shaders which are applied to the  //
+// window's Clutter.Actor. The extension is actually very simple, much of the           //
+// complexity comes from the fact that GNOME Shell usually does not show an animation   //
+// when a window is closed in the overview. Several methods need to be monkey-patched   //
+// to get this working. For more details, read the other comments in this file...       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 class Extension {
@@ -52,56 +67,159 @@ class Extension {
     // Store a reference to the settings object.
     this._settings = ExtensionUtils.getSettings();
 
-    // We will monkey-patch these three methods. Let's store the original ones.
-    this._origWindowRemoved      = Workspace.prototype._windowRemoved;
-    this._origDoRemoveWindow     = Workspace.prototype._doRemoveWindow;
-    this._origAddWindowClone     = Workspace.prototype._addWindowClone;
-    this._origShouldAnimateActor = WindowManager.prototype._shouldAnimateActor;
+    // This will store an item of ALL_EFFECTS array which was used the last time a window
+    // was opened / closed.
+    this._currentEffect = 0;
 
-    // We may also override these animation times.
+    // We will use extensionThis to refer to the extension inside the patched methods.
+    const extensionThis = this;
+
+    // We will monkey-patch these methods. Let's store the original ones.
+    this._origAddWindowClone        = Workspace.prototype._addWindowClone;
+    this._origWindowRemoved         = Workspace.prototype._windowRemoved;
+    this._origDoRemoveWindow        = Workspace.prototype._doRemoveWindow;
+    this._origShouldAnimateActor    = WindowManager.prototype._shouldAnimateActor;
+    this._origWaitForOverviewToHide = WindowManager.prototype._waitForOverviewToHide;
+
+    // We will also override these animation times.
     this._origWindowTime = imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME;
     this._origDialogTime = imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME;
 
-    // Update animation times if the respective settings are changed.
-    const loadAnimationTimes = () => {
-      imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME =
-          this._settings.get_int('destroy-animation-time');
 
-      imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME =
-          this._settings.get_boolean('destroy-dialogs') ?
-          this._settings.get_int('destroy-animation-time') :
-          this._origDialogTime;
+    // ------------------------------------------------ patching the window-open animation
+
+    // Here we add an effect to the window-open animation. This is done whenever a new
+    // window is created. Usually, there is no real window animation for opening windows
+    // in the overview - only the window's clone is animated - but thanks to the hacks
+    // below, we can show the real animations in the overview.
+
+    // If a window is created the transitions are set up in the async _mapWindow of the
+    // WindowManager:
+    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1449
+    // AFAIK, overriding this method is not possible as it's called by a signal to
+    // which it is bound via the bind() method. To tweak the async transition
+    // anyways, we override the actors ease() method once - the next time it will be
+    // called by the _mapWindow(), we will intercept it!
+    this._windowCreatedConnection =
+        global.display.connect('window-created', (d, metaWin) => {
+          let actor = metaWin.get_compositor_private();
+
+          const orig = actor.ease;
+          actor.ease = function(...params) {
+            orig.apply(actor, params);
+            actor.ease = orig;
+
+            // There are cases where the ease() is called prior to mapping the actor. If
+            // the actor is not yet mapped, we defer the effect creation.
+            if (actor.mapped) {
+              extensionThis._setupEffect(actor, true);
+            } else {
+              const connectionID = actor.connect('notify::mapped', () => {
+                extensionThis._setupEffect(actor, true);
+                actor.disconnect(connectionID);
+              });
+            }
+          };
+        });
+
+    // Some of the effects require that the window's actor is enlarged to provide a bigger
+    // canvas to draw the effects. Outside the overview we can simply increase the scale
+    // of the actor. However, if we are in the overview, we have to enlarge the clone of
+    // the window as well.
+    Workspace.prototype._addWindowClone = function(...params) {
+      const result = extensionThis._origAddWindowClone.apply(this, params);
+
+      // The parameters of this method changed a bit through the versions...
+      let realWindow, clone;
+
+      if (utils.shellVersionIs(3, 36)) {
+        clone      = result[0];
+        realWindow = clone.realWindow;
+      } else if (utils.shellVersionIs(3, 38)) {
+        clone      = result._windowContainer;
+        realWindow = params[0].get_compositor_private();
+      } else {
+        clone      = result.window_container;
+        realWindow = params[0].get_compositor_private();
+      }
+
+      // Syncing the real window's scale with the scale of its clone only works on GNOME
+      // Shell 3.38+. So effects cannot scale windows in the overview of GNOME 3.36...
+      if (utils.shellVersionIsAtLeast(3, 38)) {
+        const xID = realWindow.connect('notify::scale-x', () => {
+          if (realWindow.scale_x > 0 && clone.allocation.get_size()[0] > 0) {
+            clone.scale_x = realWindow.scale_x;
+          }
+        });
+
+        const yID = realWindow.connect('notify::scale-y', () => {
+          if (realWindow.scale_y > 0 && clone.allocation.get_size()[1] > 0) {
+            clone.scale_y = realWindow.scale_y;
+          }
+        });
+
+        clone.connect('destroy', () => {
+          realWindow.disconnect(xID);
+          realWindow.disconnect(yID);
+        });
+      }
+
+      // This is actually needed for the window-close animation on GNOME Shell 3.36.
+      // On GNOME 3.36, the window clone's 'destroy' handler only calls _removeWindowClone
+      // but not _doRemoveWindow. The latter is required to trigger the repositioning of
+      // the overview window layout. Therefore we call this method in addition.
+      // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/workspace.js#L1877
+      // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1415
+      if (utils.shellVersionIs(3, 36)) {
+        clone.connect('destroy', () => this._doRemoveWindow(clone.metaWindow));
+      }
+
+      return result;
     };
 
-    this._settings.connect('changed::destroy-animation-time', loadAnimationTimes);
-    this._settings.connect('changed::destroy-dialogs', loadAnimationTimes);
-    loadAnimationTimes();
+    // Usually, windows are faded in after the overview is completely hidden. We enable
+    // window-open animations by not waiting for this.
+    WindowManager.prototype._waitForOverviewToHide = async function() {
+      return Promise.resolve();
+    };
 
-    // We will use extensionThis to refer to the extension inside the patched methods of
-    // the WorkspacesView.
-    const extensionThis = this;
+    // Here comes the ULTRA-HACK: The method below is called (amongst others) by the
+    // _destroyWindow and _mapWindow methods of the WindowManager. Usually, it returns
+    // false when we are in the overview. This prevents the window animations. As we
+    // cannot monkey-patch the _destroyWindow or _mapWindow methods themselves, we check
+    // inside the method below whether it was called by either of those. If so, we return
+    // true. Let's see if this breaks stuff left and right...
+    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1125
+    WindowManager.prototype._shouldAnimateActor = function(...params) {
+      const caller = (new Error()).stack.split('\n')[1];
+      if (caller.includes('_destroyWindow@') || caller.includes('_mapWindow@')) {
+        return true;
+      }
+      return extensionThis._origShouldAnimateActor.apply(this, params);
+    };
 
-    // On GNOME 3.36, the window clone's 'destroy' handler only calls _removeWindowClone
-    // but not _doRemoveWindow. The latter is required to trigger the repositioning of the
-    // overview window layout. Therefore we call this method in addition.
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/workspace.js#L1877
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1415
-    if (GS_MAJOR == 3 && GS_MINOR == 36) {
-      Workspace.prototype._addWindowClone = function(...params) {
-        const [clone, overlay] = extensionThis._origAddWindowClone.apply(this, params);
-        clone.connect('destroy', () => this._doRemoveWindow(clone.metaWindow));
-        return [clone, overlay];
-      };
-    }
 
-    // These three method overrides are mega-hacky! They are only required to make the
-    // fire animation work in the overview. Usually, windows are not faded when closed
-    // from the overview (why?). With these overrides we make sure that they are actually
-    // faded out. To do this, _windowRemoved and _doRemoveWindow now check whether there
-    // is a transition ongoing (via extensionThis._shouldDestroy). If that's the case,
-    // these methods do nothing. Are the actors removed in the end? I hope so. The
-    // _destroyWindow of the WindowManager sets the transitions up and should take care of
-    // removing the actors at the end of the transitions.
+    // ----------------------------------------------- patching the window-close animation
+
+    // The signal handler below is all which is required outside of the overview. All
+    // other hacks further below are just required to defer the window-hiding in the
+    // overview until the effect is finished.
+
+    // The close animation is set up in WindowManager's _destroyWindow:
+    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1549
+    // As we cannot monkey-patch the _destroyWindow itself, we connect to the 'destroy'
+    // signal of the window manager and tweak the animation to our needs.
+    this._destroyConnection = global.window_manager.connect('destroy', (wm, actor) => {
+      this._setupEffect(actor, false);
+    });
+
+    // These three method overrides are mega-hacky! Usually, windows are not faded when
+    // closed from the overview (why?). With these overrides we make sure that they are
+    // actually faded out. To do this, _windowRemoved and _doRemoveWindow now check
+    // whether there is a transition ongoing (via extensionThis._shouldDestroy). If that's
+    // the case, these methods do nothing. Are the actors removed in the end? I hope so.
+    // The _destroyWindow of the WindowManager sets the transitions up and should take
+    // care of removing the actors at the end of the transitions.
     // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1299
     Workspace.prototype._windowRemoved = function(ws, metaWin) {
       if (extensionThis._shouldDestroy(this, metaWin)) {
@@ -112,91 +230,58 @@ class Extension {
     // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1178
     Workspace.prototype._doRemoveWindow = function(metaWin) {
       if (extensionThis._shouldDestroy(this, metaWin)) {
-        utils.debug((new Error()).stack);
         extensionThis._origDoRemoveWindow.apply(this, [metaWin]);
       }
     };
 
-    // Here comes the ULTRA-HACK: The method below is called (amongst others) by the
-    // _destroyWindow method of the WindowManager. Usually, it returns false when we are
-    // in the overview. This prevents the window-close animation. As we cannot
-    // monkey-patch the _destroyWindow method itself, we check inside the method below
-    // whether it was called by _destroyWindow. If so, we return true. Let's see if this
-    // breaks stuff left and right...
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1125
-    WindowManager.prototype._shouldAnimateActor = function(...params) {
-      if ((new Error()).stack.split('\n')[1].includes('_destroyWindow@')) {
-        return true;
-      }
-      return extensionThis._origShouldAnimateActor.apply(this, params);
-    };
+    // With the code below, we hide the window-overlay (icon, label, close button) in the
+    // overview once the close-animation is running. As the WindowPreview class is only
+    // available on GNOME 3.38 and beyond, we cannot hide the overlay on GNOME 3.36.
+    if (WindowPreview) {
 
-    // The close animation is set up in WindowManager's _destroyWindow:
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1549
-    // As we cannot monkey-patch the _destroyWindow itself, we connect to the 'destroy'
-    // signal of the window manager and tweak the animation to our needs.
-    this._destroyConnection = global.window_manager.connect('destroy', (wm, actor) => {
-      // The _destroyWindow method of WindowManager, which was called right before this
-      // one, set up the window close animation. This usually fades-out the window and
-      // scales it a bit down. If no transition is in progress, something unexpected
-      // happened. We rather try not to burn the window!
-      const transition = actor.get_transition('scale-y');
-      if (!transition) {
-        return;
-      }
+      // We will monkey-patch these methods.
+      this._origDeleteAll = WindowPreview.prototype._deleteAll;
+      this._origRestack   = WindowPreview.prototype._restack;
+      this._origInit      = WindowPreview.prototype._init;
 
-      // We do nothing if a dialog got closed and we should not burn them.
-      if (!this._settings.get_boolean('destroy-dialogs') &&
-          (actor.meta_window.window_type == Meta.WindowType.MODAL_DIALOG ||
-           actor.meta_window.window_type == Meta.WindowType.DIALOG)) {
-        return;
-      }
+      // Whenever a WindowPreview is created, we connect to the referenced Meta.Window's
+      // 'unmanaged' signal to hide the overlay.
+      WindowPreview.prototype._init = function(...params) {
+        extensionThis._origInit.apply(this, params);
 
-      // If there's a transition in progress, we re-target these transitions so that the
-      // window is neither scaled nor faded.
-      const tweakTransition = (property, value) => {
-        const transition = actor.get_transition(property);
-        if (transition) {
-          transition.set_to(value);
-          transition.set_progress_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
+        // Hide the window's icon, name, and close button.
+        const connectionID = this.metaWindow.connect('unmanaged', () => {
+          if (this.window_container) {
+            this.overlayEnabled = false;
+            this._icon.visible  = false;
+          }
+        });
+
+        // Make sure to not call the callback above if the Meta.Window was not unmanaged
+        // before leaving the overview.
+        this.connect('destroy', () => {
+          this.metaWindow.disconnect(connectionID);
+        });
+      };
+
+      // The _deleteAll is called when the user clicks the X in the overview. We should
+      // not attempt to close windows twice. Due to the animation in the overview, the
+      // close button can be clicked twice which normally would lead to a crash.
+      WindowPreview.prototype._deleteAll = function() {
+        if (!this._closeRequested) {
+          extensionThis._origDeleteAll.apply(this);
         }
       };
 
-      tweakTransition('opacity', 255);
-      tweakTransition('scale-x', 1);
-      tweakTransition('scale-y', 1);
-
-      let shader = null;
-
-      // Add a cool shader to our window actor!
-      const mode = this._settings.get_enum('close-animation');
-      if (mode == 1) {
-        shader = new FireShader(this._settings);
-      } else if (mode == 2) {
-        shader = new MatrixShader(this._settings);
-      } else if (mode == 3) {
-        shader = new TVEffectShader(this._settings);
-        tweakTransition('scale-y', 0.5);
-      } else if (mode == 4) {
-        shader = new TRexShader(this._settings);
-
-        const warp = 0.5 * this._settings.get_double('claw-scratch-warp');
-        tweakTransition('scale-x', 1.0 + warp);
-        tweakTransition('scale-y', 1.0 + warp);
-      }
-
-      if (shader) {
-        actor.add_effect(shader);
-
-        // Update uniforms at each frame.
-        transition.connect('new-frame', (t) => {
-          shader.set_uniform_value('uProgress', t.get_progress());
-          shader.set_uniform_value('uTime', 0.001 * t.get_elapsed_time());
-          shader.set_uniform_value('uSizeX', actor.width);
-          shader.set_uniform_value('uSizeY', actor.height);
-        });
-      }
-    });
+      // This is required, else WindowPreview's _restack() which is called by the
+      // "this.overlayEnabled = false", sometimes tries to access an already delete
+      // WindowPreview.
+      WindowPreview.prototype._restack = function() {
+        if (!this._closeRequested) {
+          extensionThis._origRestack.apply(this);
+        }
+      };
+    }
   }
 
   // This function could be called after the extension is uninstalled, disabled in GNOME
@@ -206,22 +291,204 @@ class Extension {
     // Unregister our resources.
     Gio.resources_unregister(this._resources);
 
-    // Restore the original behavior.
+    // Restore the original window-open and window-close animations.
     global.window_manager.disconnect(this._destroyConnection);
+    global.display.disconnect(this._windowCreatedConnection);
 
-    Workspace.prototype._windowRemoved          = this._origWindowRemoved;
-    Workspace.prototype._doRemoveWindow         = this._origDoRemoveWindow;
-    Workspace.prototype._addWindowClone         = this._origAddWindowClone;
-    WindowManager.prototype._shouldAnimateActor = this._origShouldAnimateActor;
+    Workspace.prototype._addWindowClone            = this._origAddWindowClone;
+    Workspace.prototype._windowRemoved             = this._origWindowRemoved;
+    Workspace.prototype._doRemoveWindow            = this._origDoRemoveWindow;
+    WindowManager.prototype._shouldAnimateActor    = this._origShouldAnimateActor;
+    WindowManager.prototype._waitForOverviewToHide = this._origWaitForOverviewToHide;
 
     imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME        = this._origWindowTime;
     imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME = this._origDialogTime;
 
+    if (WindowPreview) {
+      WindowPreview.prototype._deleteAll = this._origDeleteAll;
+      WindowPreview.prototype._restack   = this._origRestack;
+      WindowPreview.prototype._init      = this._origInit;
+    }
+
     this._settings = null;
   }
 
   // ----------------------------------------------------------------------- private stuff
 
+  // This method adds one of the configured effects to the given actor. If forOpening is
+  // set to true, a effect from the enabled window-open animations is chosen, else an
+  // enabled window-close animation is used. This will also tweak the transitions of the
+  // given actor (e.g. scale it up if required).
+  _setupEffect(actor, forOpening) {
+
+    // Only add effects to normal windows and dialog windows.
+    const isNormalWindow = actor.meta_window.window_type == Meta.WindowType.NORMAL;
+    const isDialogWindow =
+        actor.meta_window.window_type == Meta.WindowType.MODAL_DIALOG ||
+        actor.meta_window.window_type == Meta.WindowType.DIALOG;
+
+    if (!isNormalWindow && !isDialogWindow) {
+      return;
+    }
+
+    // We do nothing if a dialog got closed and we should not burn them.
+    const shouldDestroyDialogs = this._settings.get_boolean('destroy-dialogs');
+
+    // If an effect is to be previewed however, we have to affect dialogs es well. This is
+    // because the preview window is a dialog window...
+    const action      = forOpening ? 'open' : 'close';
+    const previewNick = this._settings.get_string(action + '-preview-effect');
+
+    if (isDialogWindow && !shouldDestroyDialogs && previewNick == '') {
+      this._fixAnimationTimes(isDialogWindow, forOpening, null);
+      return;
+    }
+
+    // ------------------------------------------------------------------ choose an effect
+
+    // Now we chose a random effect from all enabled effects.
+    this._currentEffect = null;
+
+    // First we check if an effect is to be previewed.
+    if (previewNick != '') {
+      this._currentEffect = ALL_EFFECTS.find(Effect => {
+        return Effect.getNick() == previewNick;
+      });
+
+      // Only preview the effect once.
+      this._settings.set_string(action + '-preview-effect', '');
+
+    }
+    // Else we choose a random effect from all enabled effects.
+    else {
+
+      // Therefore, we first create a list of all currently enabled effects.
+      const enabled = ALL_EFFECTS.filter(Effect => {
+        return this._settings.get_boolean(`${Effect.getNick()}-${action}-effect`);
+      });
+
+      // And then choose a random effect.
+      if (enabled.length > 0) {
+        this._currentEffect = enabled[Math.floor(Math.random() * enabled.length)];
+      }
+    }
+
+    // If nothing was enabled, we have to do nothing :)
+    if (this._currentEffect == null) {
+      this._fixAnimationTimes(isDialogWindow, forOpening, null);
+      return;
+    }
+
+    // ----------------------------------------------------------- tweak actor transitions
+
+    // The following is used to tweak the ongoing transitions of a window actor. Usually
+    // windows are faded in / out scaled up / down slightly by GNOME Shell. Here, we allow
+    // modifications to this behavior by the effects.
+    const config = this._currentEffect.tweakTransition(actor, this._settings, forOpening);
+    const duration =
+        this._settings.get_int(this._currentEffect.getNick() + '-animation-time');
+
+    // All animations are relative to the window's center.
+    actor.set_pivot_point(0.5, 0.5);
+
+    // This goes through all properties given in the config object and tweaks any ongoing
+    // transitions accordingly. If there is no ongoing transition for a given property, a
+    // new one is set up.
+    for (const property in config) {
+      let transition = actor.get_transition(property);
+
+      // If there is currently no ongoing transition, we create a new one. Clutter does
+      // not like to create transitions with the same start and end value - however, we
+      // need at least one transition for our progress value in the shader. So we trick
+      // Clutter by creating an arbitrary transition first and then modifying the start
+      // and end values according to our config object.
+      if (!transition) {
+        actor.set_property(property, 0);
+        actor.save_easing_state();
+        actor.set_easing_duration(1000);
+        actor.set_property(property, 1);
+        actor.restore_easing_state();
+
+        // Now there should be a transition!
+        transition = actor.get_transition(property);
+      }
+
+      // Tweak the transition according to the config object. For some reason, there are
+      // rare cases, where no transition is set up. This happens from time to time...
+      if (transition) {
+        transition.set_duration(duration);
+        transition.set_to(config[property].to);
+        transition.set_from(config[property].from);
+        transition.set_progress_mode(config[property].mode);
+      }
+    }
+
+    // Once the transitions are finished, we restore the original actor size.
+    if (forOpening) {
+      const connectionID = actor.connect('transitions-completed', () => {
+        actor.scale_x = 1.0;
+        actor.scale_y = 1.0;
+        actor.disconnect(connectionID);
+      });
+    }
+
+
+    // -------------------------------------------------------------------- add the shader
+
+    // Now add a cool shader to our window actor!
+    const shader = this._currentEffect.createShader(actor, this._settings, forOpening);
+
+    if (shader) {
+      // There should always be an opacity transition going on...
+      const transition = actor.get_transition('opacity');
+
+      if (!transition) {
+        this._fixAnimationTimes(isDialogWindow, forOpening, null);
+        utils.debug('Cannot setup shader without opacity transition.')
+        return;
+      }
+
+      // First remove any old effect.
+      actor.remove_effect_by_name(`burn-my-windows-effect`);
+      actor.add_effect_with_name(`burn-my-windows-effect`, shader);
+
+      // Update uniforms at each frame.
+      transition.connect('new-frame', (t) => {
+        shader.set_uniform_value('uProgress', t.get_progress());
+        shader.set_uniform_value('uTime', 0.001 * t.get_elapsed_time());
+        shader.set_uniform_value('uSizeX', actor.width);
+        shader.set_uniform_value('uSizeY', actor.height);
+      });
+
+      transition.connect('completed', () => {
+        actor.remove_effect_by_name(`burn-my-windows-effect`);
+      });
+    }
+
+    // Finally, ensure that all animation times are set properly so that other extensions
+    // may guess how long it will take until windows are gone :)
+    this._fixAnimationTimes(isDialogWindow, forOpening, duration);
+  }
+
+  // The code below is not necessary for Burn-My-Windows to function. However, there
+  // are some extensions such as "Show Application View When Workspace Empty"
+  // https://extensions.gnome.org/extension/2036/show-application-view-when-workspace-empty/
+  // which do something *after* a window was closed. As the window-close animation
+  // duration depends on the used effect, this may vary each time a window is
+  // closed. We set the currently used time here, so that others can get an idea how
+  // long this will take...
+  _fixAnimationTimes(isDialogWindow, forOpening, duration) {
+    if (!forOpening) {
+      if (isDialogWindow) {
+        imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME =
+            duration != null ? duration : this._origDialogTime;
+      } else {
+        imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME =
+            duration != null ? duration : this._origWindowTime;
+      }
+    }
+  }
+
   // This is required to enable window-close animations in the overview. See the comment
   // for Workspace.prototype._windowRemoved above for an explanation.
   _shouldDestroy(workspace, metaWindow) {
@@ -231,8 +498,8 @@ class Extension {
     }
 
     // This was called "realWindow" in GNOME 3.36.
-    const GS_336 = GS_MAJOR == 3 && GS_MINOR == 36;
-    const actor  = workspace._windows[index][GS_336 ? 'realWindow' : '_windowActor'];
+    const propertyName = utils.shellVersionIs(3, 36) ? 'realWindow' : '_windowActor';
+    const actor        = workspace._windows[index][propertyName];
     if (!actor.get_transition('scale-y')) {
       return true;
     }

metadata.json

@@ -11,5 +11,5 @@
         "41"
     ],
     "url": "https://github.com/Schneegans/Burn-My-Windows",
-    "version": 5
+    "version": 10
 }

po/burn-my-windows.pot

@@ -0,0 +1,277 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Simon Schneegans
+# This file is distributed under the same license as the Burn-My-Windows package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Burn-My-Windows\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-29 05:40+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=CHARSET\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#. Translators: %s will be replaced by the effect's name.
+#: prefs.js:337
+#, javascript-format
+msgid "Preview for %s"
+msgstr ""
+
+#: prefs.js:359
+msgid "Close this Window to Preview the Effect!"
+msgstr ""
+
+#: src/BrokenGlass.js:57
+msgid "Broken Glass"
+msgstr ""
+
+#: src/TVEffect.js:56
+msgid "TV Effect"
+msgstr ""
+
+#: src/TRexAttack.js:56
+msgid "T-Rex Attack"
+msgstr ""
+
+#: src/Wisps.js:55
+msgid "Wisps"
+msgstr ""
+
+#: src/Fire.js:58
+msgid "Fire"
+msgstr ""
+
+#: src/Fire.js:130
+msgid "Default Fire"
+msgstr ""
+
+#: src/Fire.js:140
+msgid "Hell Fire"
+msgstr ""
+
+#: src/Fire.js:150
+msgid "Dark and Smutty"
+msgstr ""
+
+#: src/Fire.js:160
+msgid "Cold Breeze"
+msgstr ""
+
+#: src/Fire.js:170
+msgid "Santa is Coming"
+msgstr ""
+
+#: src/EnergizeA.js:54
+msgid "Energize A"
+msgstr ""
+
+#: src/EnergizeB.js:54
+msgid "Energize B"
+msgstr ""
+
+#: src/Matrix.js:58
+msgid "Matrix"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:6
+msgid "Visit Homepage"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:10
+msgid "View Changelog"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:16
+msgid "Report a Bug"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:20
+msgid "Create an Effect"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:24
+msgid "Translate"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:28
+msgid "Donate"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:30
+msgid "Via PayPal"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:34
+msgid "Via GitHub"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:24 resources/ui/gtk4/BrokenGlass.ui:24
+#: resources/ui/gtk4/Wisps.ui:24 resources/ui/gtk4/Fire.ui:49
+#: resources/ui/gtk4/TRexAttack.ui:24 resources/ui/gtk4/TVEffect.ui:24
+#: resources/ui/gtk4/EnergizeA.ui:24 resources/ui/gtk4/EnergizeB.ui:24
+#: resources/ui/gtk3/Wisps.ui:42 resources/ui/gtk3/Fire.ui:93
+#: resources/ui/gtk3/TVEffect.ui:35 resources/ui/gtk3/EnergizeA.ui:42
+#: resources/ui/gtk3/EnergizeB.ui:42
+msgid "Animation Time [ms]"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:52 resources/ui/gtk4/Matrix.ui:98
+#: resources/ui/gtk4/Matrix.ui:144 resources/ui/gtk4/Matrix.ui:190
+#: resources/ui/gtk4/Matrix.ui:224 resources/ui/gtk4/Matrix.ui:258
+#: resources/ui/gtk4/BrokenGlass.ui:52 resources/ui/gtk4/BrokenGlass.ui:98
+#: resources/ui/gtk4/BrokenGlass.ui:144 resources/ui/gtk4/BrokenGlass.ui:190
+#: resources/ui/gtk4/BrokenGlass.ui:244 resources/ui/gtk4/Wisps.ui:52
+#: resources/ui/gtk4/Wisps.ui:98 resources/ui/gtk4/Wisps.ui:132
+#: resources/ui/gtk4/Fire.ui:77 resources/ui/gtk4/Fire.ui:123
+#: resources/ui/gtk4/Fire.ui:169 resources/ui/gtk4/Fire.ui:222
+#: resources/ui/gtk4/Fire.ui:280 resources/ui/gtk4/TRexAttack.ui:52
+#: resources/ui/gtk4/TRexAttack.ui:98 resources/ui/gtk4/TRexAttack.ui:144
+#: resources/ui/gtk4/TRexAttack.ui:190 resources/ui/gtk4/TRexAttack.ui:224
+#: resources/ui/gtk4/TVEffect.ui:52 resources/ui/gtk4/TVEffect.ui:86
+#: resources/ui/gtk4/EnergizeA.ui:52 resources/ui/gtk4/EnergizeA.ui:98
+#: resources/ui/gtk4/EnergizeA.ui:132 resources/ui/gtk4/EnergizeB.ui:52
+#: resources/ui/gtk4/EnergizeB.ui:98 resources/ui/gtk4/EnergizeB.ui:132
+#: resources/ui/gtk4/prefs.ui:185 resources/ui/gtk3/Wisps.ui:68
+#: resources/ui/gtk3/Wisps.ui:117 resources/ui/gtk3/Wisps.ui:160
+#: resources/ui/gtk3/Fire.ui:119 resources/ui/gtk3/Fire.ui:167
+#: resources/ui/gtk3/Fire.ui:215 resources/ui/gtk3/Fire.ui:277
+#: resources/ui/gtk3/Fire.ui:345 resources/ui/gtk3/TVEffect.ui:61
+#: resources/ui/gtk3/TVEffect.ui:104 resources/ui/gtk3/EnergizeA.ui:68
+#: resources/ui/gtk3/EnergizeA.ui:117 resources/ui/gtk3/EnergizeA.ui:160
+#: resources/ui/gtk3/EnergizeB.ui:68 resources/ui/gtk3/EnergizeB.ui:117
+#: resources/ui/gtk3/EnergizeB.ui:160 resources/ui/gtk3/prefs.ui:233
+msgid "Reset to Default Value"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:70 resources/ui/gtk4/BrokenGlass.ui:70
+#: resources/ui/gtk4/Wisps.ui:70 resources/ui/gtk4/Fire.ui:95
+#: resources/ui/gtk4/EnergizeA.ui:70 resources/ui/gtk4/EnergizeB.ui:70
+#: resources/ui/gtk3/Wisps.ui:91 resources/ui/gtk3/Fire.ui:141
+#: resources/ui/gtk3/EnergizeA.ui:91 resources/ui/gtk3/EnergizeB.ui:91
+msgid "Scale"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:116
+msgid "Randomness"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:162
+msgid "Vertical Overshooting"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:208
+msgid "Trail Color"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:242
+msgid "Tip Color"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:116
+msgid "Gravity"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:162
+msgid "Blow Force"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:212
+msgid "Shatter From Pointer Location"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:221
+msgid ""
+"The shards will fly away from where your mouse pointer was when closing the "
+"window."
+msgstr ""
+
+#: resources/ui/gtk4/Wisps.ui:116 resources/ui/gtk4/TVEffect.ui:70
+#: resources/ui/gtk4/EnergizeA.ui:116 resources/ui/gtk4/EnergizeB.ui:116
+#: resources/ui/gtk3/Wisps.ui:139 resources/ui/gtk3/TVEffect.ui:83
+#: resources/ui/gtk3/EnergizeA.ui:139 resources/ui/gtk3/EnergizeB.ui:139
+msgid "Color"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:25 resources/ui/gtk3/Fire.ui:49
+msgid "Presets"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:141 resources/ui/gtk3/Fire.ui:189
+msgid "Speed"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:191 resources/ui/gtk3/Fire.ui:241
+msgid "3D Noise"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:200 resources/ui/gtk3/Fire.ui:250
+msgid "Creates a more dynamic fire but requires more GPU power."
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:240 resources/ui/gtk3/Fire.ui:300
+msgid "Gradient"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:70
+msgid "Claw Scratch Scale"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:116
+msgid "Claw Scratch Count"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:162
+msgid "Warp Effect"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:208
+msgid "Flash Color"
+msgstr ""
+
+#: resources/ui/gtk4/effectPage.ui:41 resources/ui/gtk3/effectPage.ui:41
+msgid "Preview this Effect"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:27 resources/ui/gtk3/prefs.ui:251
+msgid "General Options"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:47 resources/ui/gtk3/prefs.ui:49
+msgid "Welcome to Burn-My-Windows!"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:58 resources/ui/gtk3/prefs.ui:60
+msgid "If you like this extension, recommend it to your friends :)"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:85 resources/ui/gtk3/prefs.ui:88
+msgid "Open Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:94 resources/ui/gtk4/prefs.ui:138
+#: resources/ui/gtk3/prefs.ui:97 resources/ui/gtk3/prefs.ui:161
+msgid "If multiple are selected, one is chosen randomly."
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:109 resources/ui/gtk4/prefs.ui:153
+#: resources/ui/gtk3/prefs.ui:118 resources/ui/gtk3/prefs.ui:182
+msgid "Choose Effects"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:129 resources/ui/gtk3/prefs.ui:152
+msgid "Close Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:169 resources/ui/gtk3/prefs.ui:212
+msgid "Also Add Effects to Dialogs"
+msgstr ""
+
+#: resources/ui/gtk3/Fire.ui:63
+msgid "Choose a Preset"
+msgstr ""

po/de.po

@@ -0,0 +1,284 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Simon Schneegans
+# This file is distributed under the same license as the Burn-My-Windows package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Burn-My-Windows\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-29 05:40+0100\n"
+"PO-Revision-Date: 2022-01-29 04:43+0000\n"
+"Last-Translator: Simon Schneegans <code@simonschneegans.de>\n"
+"Language-Team: German <https://hosted.weblate.org/projects/burn-my-windows/"
+"core/de/>\n"
+"Language: de\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.11-dev\n"
+
+#. Translators: %s will be replaced by the effect's name.
+#: prefs.js:337
+#, javascript-format
+msgid "Preview for %s"
+msgstr "Vorschau für %s"
+
+#: prefs.js:359
+msgid "Close this Window to Preview the Effect!"
+msgstr "Schließen Sie dieses Fenster, um eine Vorschau des Effekts anzuzeigen!"
+
+#: src/BrokenGlass.js:57
+msgid "Broken Glass"
+msgstr "Glassplitter"
+
+#: src/TVEffect.js:56
+msgid "TV Effect"
+msgstr "TV-Effekt"
+
+#: src/TRexAttack.js:56
+msgid "T-Rex Attack"
+msgstr "T-Rex-Angriff"
+
+#: src/Wisps.js:55
+msgid "Wisps"
+msgstr "Irrlichter"
+
+#: src/Fire.js:58
+msgid "Fire"
+msgstr "Feuer"
+
+#: src/Fire.js:130
+msgid "Default Fire"
+msgstr "Standardfeuer"
+
+#: src/Fire.js:140
+msgid "Hell Fire"
+msgstr "Höllenfeuer"
+
+#: src/Fire.js:150
+msgid "Dark and Smutty"
+msgstr "Dunkel und schmutzig"
+
+#: src/Fire.js:160
+msgid "Cold Breeze"
+msgstr "Kalte Brise"
+
+#: src/Fire.js:170
+msgid "Santa is Coming"
+msgstr "Weihnachtsgrüße"
+
+#: src/EnergizeA.js:54
+msgid "Energize A"
+msgstr "Energie A"
+
+#: src/EnergizeB.js:54
+msgid "Energize B"
+msgstr "Energie B"
+
+#: src/Matrix.js:58
+msgid "Matrix"
+msgstr "Matrix"
+
+#: resources/ui/common/main-menu.ui:6
+msgid "Visit Homepage"
+msgstr "Homepage besuchen"
+
+#: resources/ui/common/main-menu.ui:10
+msgid "View Changelog"
+msgstr "Changelog anzeigen"
+
+#: resources/ui/common/main-menu.ui:16
+msgid "Report a Bug"
+msgstr "Fehler melden"
+
+#: resources/ui/common/main-menu.ui:20
+msgid "Create an Effect"
+msgstr "Einen Effekt hinzufügen"
+
+#: resources/ui/common/main-menu.ui:24
+msgid "Translate"
+msgstr "Übersetzen"
+
+#: resources/ui/common/main-menu.ui:28
+msgid "Donate"
+msgstr "Spenden"
+
+#: resources/ui/common/main-menu.ui:30
+msgid "Via PayPal"
+msgstr "Mit PayPal"
+
+#: resources/ui/common/main-menu.ui:34
+msgid "Via GitHub"
+msgstr "Mit GitHub"
+
+#: resources/ui/gtk4/Matrix.ui:24 resources/ui/gtk4/BrokenGlass.ui:24
+#: resources/ui/gtk4/Wisps.ui:24 resources/ui/gtk4/Fire.ui:49
+#: resources/ui/gtk4/TRexAttack.ui:24 resources/ui/gtk4/TVEffect.ui:24
+#: resources/ui/gtk4/EnergizeA.ui:24 resources/ui/gtk4/EnergizeB.ui:24
+#: resources/ui/gtk3/Wisps.ui:42 resources/ui/gtk3/Fire.ui:93
+#: resources/ui/gtk3/TVEffect.ui:35 resources/ui/gtk3/EnergizeA.ui:42
+#: resources/ui/gtk3/EnergizeB.ui:42
+msgid "Animation Time [ms]"
+msgstr "Animationszeit [ms]"
+
+#: resources/ui/gtk4/Matrix.ui:52 resources/ui/gtk4/Matrix.ui:98
+#: resources/ui/gtk4/Matrix.ui:144 resources/ui/gtk4/Matrix.ui:190
+#: resources/ui/gtk4/Matrix.ui:224 resources/ui/gtk4/Matrix.ui:258
+#: resources/ui/gtk4/BrokenGlass.ui:52 resources/ui/gtk4/BrokenGlass.ui:98
+#: resources/ui/gtk4/BrokenGlass.ui:144 resources/ui/gtk4/BrokenGlass.ui:190
+#: resources/ui/gtk4/BrokenGlass.ui:244 resources/ui/gtk4/Wisps.ui:52
+#: resources/ui/gtk4/Wisps.ui:98 resources/ui/gtk4/Wisps.ui:132
+#: resources/ui/gtk4/Fire.ui:77 resources/ui/gtk4/Fire.ui:123
+#: resources/ui/gtk4/Fire.ui:169 resources/ui/gtk4/Fire.ui:222
+#: resources/ui/gtk4/Fire.ui:280 resources/ui/gtk4/TRexAttack.ui:52
+#: resources/ui/gtk4/TRexAttack.ui:98 resources/ui/gtk4/TRexAttack.ui:144
+#: resources/ui/gtk4/TRexAttack.ui:190 resources/ui/gtk4/TRexAttack.ui:224
+#: resources/ui/gtk4/TVEffect.ui:52 resources/ui/gtk4/TVEffect.ui:86
+#: resources/ui/gtk4/EnergizeA.ui:52 resources/ui/gtk4/EnergizeA.ui:98
+#: resources/ui/gtk4/EnergizeA.ui:132 resources/ui/gtk4/EnergizeB.ui:52
+#: resources/ui/gtk4/EnergizeB.ui:98 resources/ui/gtk4/EnergizeB.ui:132
+#: resources/ui/gtk4/prefs.ui:185 resources/ui/gtk3/Wisps.ui:68
+#: resources/ui/gtk3/Wisps.ui:117 resources/ui/gtk3/Wisps.ui:160
+#: resources/ui/gtk3/Fire.ui:119 resources/ui/gtk3/Fire.ui:167
+#: resources/ui/gtk3/Fire.ui:215 resources/ui/gtk3/Fire.ui:277
+#: resources/ui/gtk3/Fire.ui:345 resources/ui/gtk3/TVEffect.ui:61
+#: resources/ui/gtk3/TVEffect.ui:104 resources/ui/gtk3/EnergizeA.ui:68
+#: resources/ui/gtk3/EnergizeA.ui:117 resources/ui/gtk3/EnergizeA.ui:160
+#: resources/ui/gtk3/EnergizeB.ui:68 resources/ui/gtk3/EnergizeB.ui:117
+#: resources/ui/gtk3/EnergizeB.ui:160 resources/ui/gtk3/prefs.ui:233
+msgid "Reset to Default Value"
+msgstr "Auf Standardwert zurücksetzen"
+
+#: resources/ui/gtk4/Matrix.ui:70 resources/ui/gtk4/BrokenGlass.ui:70
+#: resources/ui/gtk4/Wisps.ui:70 resources/ui/gtk4/Fire.ui:95
+#: resources/ui/gtk4/EnergizeA.ui:70 resources/ui/gtk4/EnergizeB.ui:70
+#: resources/ui/gtk3/Wisps.ui:91 resources/ui/gtk3/Fire.ui:141
+#: resources/ui/gtk3/EnergizeA.ui:91 resources/ui/gtk3/EnergizeB.ui:91
+msgid "Scale"
+msgstr "Größe"
+
+#: resources/ui/gtk4/Matrix.ui:116
+msgid "Randomness"
+msgstr "Zufälligkeit"
+
+#: resources/ui/gtk4/Matrix.ui:162
+msgid "Vertical Overshooting"
+msgstr "Vertikales Überschießen"
+
+#: resources/ui/gtk4/Matrix.ui:208
+msgid "Trail Color"
+msgstr "Farbe der Spur"
+
+#: resources/ui/gtk4/Matrix.ui:242
+msgid "Tip Color"
+msgstr "Farbe der Spitze"
+
+#: resources/ui/gtk4/BrokenGlass.ui:116
+msgid "Gravity"
+msgstr "Schwerkraft"
+
+#: resources/ui/gtk4/BrokenGlass.ui:162
+msgid "Blow Force"
+msgstr "Schlagkraft"
+
+#: resources/ui/gtk4/BrokenGlass.ui:212
+msgid "Shatter From Pointer Location"
+msgstr "Von Mauszeigerposition zerbrechen"
+
+#: resources/ui/gtk4/BrokenGlass.ui:221
+msgid ""
+"The shards will fly away from where your mouse pointer was when closing the "
+"window."
+msgstr ""
+"Die Scherben fliegen von der Stelle weg, an der sich Ihr Mauszeiger beim "
+"Schließen des Fensters befand."
+
+#: resources/ui/gtk4/Wisps.ui:116 resources/ui/gtk4/TVEffect.ui:70
+#: resources/ui/gtk4/EnergizeA.ui:116 resources/ui/gtk4/EnergizeB.ui:116
+#: resources/ui/gtk3/Wisps.ui:139 resources/ui/gtk3/TVEffect.ui:83
+#: resources/ui/gtk3/EnergizeA.ui:139 resources/ui/gtk3/EnergizeB.ui:139
+msgid "Color"
+msgstr "Farbe"
+
+#: resources/ui/gtk4/Fire.ui:25 resources/ui/gtk3/Fire.ui:49
+msgid "Presets"
+msgstr "Voreinstellungen"
+
+#: resources/ui/gtk4/Fire.ui:141 resources/ui/gtk3/Fire.ui:189
+msgid "Speed"
+msgstr "Geschwindigkeit"
+
+#: resources/ui/gtk4/Fire.ui:191 resources/ui/gtk3/Fire.ui:241
+msgid "3D Noise"
+msgstr "3D-Rauschen"
+
+#: resources/ui/gtk4/Fire.ui:200 resources/ui/gtk3/Fire.ui:250
+msgid "Creates a more dynamic fire but requires more GPU power."
+msgstr "Erzeugt ein dynamischeres Feuer, erfordert jedoch mehr GPU-Leistung."
+
+#: resources/ui/gtk4/Fire.ui:240 resources/ui/gtk3/Fire.ui:300
+msgid "Gradient"
+msgstr "Farbverlauf"
+
+#: resources/ui/gtk4/TRexAttack.ui:70
+msgid "Claw Scratch Scale"
+msgstr "Kratzergröße"
+
+#: resources/ui/gtk4/TRexAttack.ui:116
+msgid "Claw Scratch Count"
+msgstr "Kratzeranzahl"
+
+#: resources/ui/gtk4/TRexAttack.ui:162
+msgid "Warp Effect"
+msgstr "Warp-Effekt"
+
+#: resources/ui/gtk4/TRexAttack.ui:208
+msgid "Flash Color"
+msgstr "Blitzfarbe"
+
+#: resources/ui/gtk4/effectPage.ui:41 resources/ui/gtk3/effectPage.ui:41
+msgid "Preview this Effect"
+msgstr "Vorschau dieses Effekts"
+
+#: resources/ui/gtk4/prefs.ui:27 resources/ui/gtk3/prefs.ui:251
+msgid "General Options"
+msgstr "Allgemeine Optionen"
+
+#: resources/ui/gtk4/prefs.ui:47 resources/ui/gtk3/prefs.ui:49
+msgid "Welcome to Burn-My-Windows!"
+msgstr "Willkommen bei Burn-My-Windows!"
+
+#: resources/ui/gtk4/prefs.ui:58 resources/ui/gtk3/prefs.ui:60
+msgid "If you like this extension, recommend it to your friends :)"
+msgstr "Wenn Sie diese Erweiterung mögen, empfehlen Sie sie Ihren Freunden :)"
+
+#: resources/ui/gtk4/prefs.ui:85 resources/ui/gtk3/prefs.ui:88
+msgid "Open Window Animation"
+msgstr "Fenster-Öffnen-Animation"
+
+#: resources/ui/gtk4/prefs.ui:94 resources/ui/gtk4/prefs.ui:138
+#: resources/ui/gtk3/prefs.ui:97 resources/ui/gtk3/prefs.ui:161
+msgid "If multiple are selected, one is chosen randomly."
+msgstr "Wenn mehrere ausgewählt sind, wird eine zufällig ausgewählt."
+
+#: resources/ui/gtk4/prefs.ui:109 resources/ui/gtk4/prefs.ui:153
+#: resources/ui/gtk3/prefs.ui:118 resources/ui/gtk3/prefs.ui:182
+msgid "Choose Effects"
+msgstr "Effekte auswählen"
+
+#: resources/ui/gtk4/prefs.ui:129 resources/ui/gtk3/prefs.ui:152
+msgid "Close Window Animation"
+msgstr "Fenster-Schließen-Animation"
+
+#: resources/ui/gtk4/prefs.ui:169 resources/ui/gtk3/prefs.ui:212
+msgid "Also Add Effects to Dialogs"
+msgstr "Effekte auch zu Dialogen hinzufügen"
+
+#: resources/ui/gtk3/Fire.ui:63
+msgid "Choose a Preset"
+msgstr "Wählen Sie eine Voreinstellung"
+
+#~ msgid "Create a Custom Effect"
+#~ msgstr "Einen neuen Effekt erstellen"

po/fr.po

@@ -0,0 +1,276 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Simon Schneegans
+# This file is distributed under the same license as the Burn-My-Windows package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Burn-My-Windows\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-29 05:40+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: Automatically generated\n"
+"Language-Team: none\n"
+"Language: fr\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#. Translators: %s will be replaced by the effect's name.
+#: prefs.js:337
+#, javascript-format
+msgid "Preview for %s"
+msgstr ""
+
+#: prefs.js:359
+msgid "Close this Window to Preview the Effect!"
+msgstr ""
+
+#: src/BrokenGlass.js:57
+msgid "Broken Glass"
+msgstr ""
+
+#: src/TVEffect.js:56
+msgid "TV Effect"
+msgstr ""
+
+#: src/TRexAttack.js:56
+msgid "T-Rex Attack"
+msgstr ""
+
+#: src/Wisps.js:55
+msgid "Wisps"
+msgstr ""
+
+#: src/Fire.js:58
+msgid "Fire"
+msgstr ""
+
+#: src/Fire.js:130
+msgid "Default Fire"
+msgstr ""
+
+#: src/Fire.js:140
+msgid "Hell Fire"
+msgstr ""
+
+#: src/Fire.js:150
+msgid "Dark and Smutty"
+msgstr ""
+
+#: src/Fire.js:160
+msgid "Cold Breeze"
+msgstr ""
+
+#: src/Fire.js:170
+msgid "Santa is Coming"
+msgstr ""
+
+#: src/EnergizeA.js:54
+msgid "Energize A"
+msgstr ""
+
+#: src/EnergizeB.js:54
+msgid "Energize B"
+msgstr ""
+
+#: src/Matrix.js:58
+msgid "Matrix"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:6
+msgid "Visit Homepage"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:10
+msgid "View Changelog"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:16
+msgid "Report a Bug"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:20
+msgid "Create an Effect"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:24
+msgid "Translate"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:28
+msgid "Donate"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:30
+msgid "Via PayPal"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:34
+msgid "Via GitHub"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:24 resources/ui/gtk4/BrokenGlass.ui:24
+#: resources/ui/gtk4/Wisps.ui:24 resources/ui/gtk4/Fire.ui:49
+#: resources/ui/gtk4/TRexAttack.ui:24 resources/ui/gtk4/TVEffect.ui:24
+#: resources/ui/gtk4/EnergizeA.ui:24 resources/ui/gtk4/EnergizeB.ui:24
+#: resources/ui/gtk3/Wisps.ui:42 resources/ui/gtk3/Fire.ui:93
+#: resources/ui/gtk3/TVEffect.ui:35 resources/ui/gtk3/EnergizeA.ui:42
+#: resources/ui/gtk3/EnergizeB.ui:42
+msgid "Animation Time [ms]"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:52 resources/ui/gtk4/Matrix.ui:98
+#: resources/ui/gtk4/Matrix.ui:144 resources/ui/gtk4/Matrix.ui:190
+#: resources/ui/gtk4/Matrix.ui:224 resources/ui/gtk4/Matrix.ui:258
+#: resources/ui/gtk4/BrokenGlass.ui:52 resources/ui/gtk4/BrokenGlass.ui:98
+#: resources/ui/gtk4/BrokenGlass.ui:144 resources/ui/gtk4/BrokenGlass.ui:190
+#: resources/ui/gtk4/BrokenGlass.ui:244 resources/ui/gtk4/Wisps.ui:52
+#: resources/ui/gtk4/Wisps.ui:98 resources/ui/gtk4/Wisps.ui:132
+#: resources/ui/gtk4/Fire.ui:77 resources/ui/gtk4/Fire.ui:123
+#: resources/ui/gtk4/Fire.ui:169 resources/ui/gtk4/Fire.ui:222
+#: resources/ui/gtk4/Fire.ui:280 resources/ui/gtk4/TRexAttack.ui:52
+#: resources/ui/gtk4/TRexAttack.ui:98 resources/ui/gtk4/TRexAttack.ui:144
+#: resources/ui/gtk4/TRexAttack.ui:190 resources/ui/gtk4/TRexAttack.ui:224
+#: resources/ui/gtk4/TVEffect.ui:52 resources/ui/gtk4/TVEffect.ui:86
+#: resources/ui/gtk4/EnergizeA.ui:52 resources/ui/gtk4/EnergizeA.ui:98
+#: resources/ui/gtk4/EnergizeA.ui:132 resources/ui/gtk4/EnergizeB.ui:52
+#: resources/ui/gtk4/EnergizeB.ui:98 resources/ui/gtk4/EnergizeB.ui:132
+#: resources/ui/gtk4/prefs.ui:185 resources/ui/gtk3/Wisps.ui:68
+#: resources/ui/gtk3/Wisps.ui:117 resources/ui/gtk3/Wisps.ui:160
+#: resources/ui/gtk3/Fire.ui:119 resources/ui/gtk3/Fire.ui:167
+#: resources/ui/gtk3/Fire.ui:215 resources/ui/gtk3/Fire.ui:277
+#: resources/ui/gtk3/Fire.ui:345 resources/ui/gtk3/TVEffect.ui:61
+#: resources/ui/gtk3/TVEffect.ui:104 resources/ui/gtk3/EnergizeA.ui:68
+#: resources/ui/gtk3/EnergizeA.ui:117 resources/ui/gtk3/EnergizeA.ui:160
+#: resources/ui/gtk3/EnergizeB.ui:68 resources/ui/gtk3/EnergizeB.ui:117
+#: resources/ui/gtk3/EnergizeB.ui:160 resources/ui/gtk3/prefs.ui:233
+msgid "Reset to Default Value"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:70 resources/ui/gtk4/BrokenGlass.ui:70
+#: resources/ui/gtk4/Wisps.ui:70 resources/ui/gtk4/Fire.ui:95
+#: resources/ui/gtk4/EnergizeA.ui:70 resources/ui/gtk4/EnergizeB.ui:70
+#: resources/ui/gtk3/Wisps.ui:91 resources/ui/gtk3/Fire.ui:141
+#: resources/ui/gtk3/EnergizeA.ui:91 resources/ui/gtk3/EnergizeB.ui:91
+msgid "Scale"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:116
+msgid "Randomness"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:162
+msgid "Vertical Overshooting"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:208
+msgid "Trail Color"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:242
+msgid "Tip Color"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:116
+msgid "Gravity"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:162
+msgid "Blow Force"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:212
+msgid "Shatter From Pointer Location"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:221
+msgid ""
+"The shards will fly away from where your mouse pointer was when closing the "
+"window."
+msgstr ""
+
+#: resources/ui/gtk4/Wisps.ui:116 resources/ui/gtk4/TVEffect.ui:70
+#: resources/ui/gtk4/EnergizeA.ui:116 resources/ui/gtk4/EnergizeB.ui:116
+#: resources/ui/gtk3/Wisps.ui:139 resources/ui/gtk3/TVEffect.ui:83
+#: resources/ui/gtk3/EnergizeA.ui:139 resources/ui/gtk3/EnergizeB.ui:139
+msgid "Color"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:25 resources/ui/gtk3/Fire.ui:49
+msgid "Presets"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:141 resources/ui/gtk3/Fire.ui:189
+msgid "Speed"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:191 resources/ui/gtk3/Fire.ui:241
+msgid "3D Noise"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:200 resources/ui/gtk3/Fire.ui:250
+msgid "Creates a more dynamic fire but requires more GPU power."
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:240 resources/ui/gtk3/Fire.ui:300
+msgid "Gradient"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:70
+msgid "Claw Scratch Scale"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:116
+msgid "Claw Scratch Count"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:162
+msgid "Warp Effect"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:208
+msgid "Flash Color"
+msgstr ""
+
+#: resources/ui/gtk4/effectPage.ui:41 resources/ui/gtk3/effectPage.ui:41
+msgid "Preview this Effect"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:27 resources/ui/gtk3/prefs.ui:251
+msgid "General Options"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:47 resources/ui/gtk3/prefs.ui:49
+msgid "Welcome to Burn-My-Windows!"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:58 resources/ui/gtk3/prefs.ui:60
+msgid "If you like this extension, recommend it to your friends :)"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:85 resources/ui/gtk3/prefs.ui:88
+msgid "Open Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:94 resources/ui/gtk4/prefs.ui:138
+#: resources/ui/gtk3/prefs.ui:97 resources/ui/gtk3/prefs.ui:161
+msgid "If multiple are selected, one is chosen randomly."
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:109 resources/ui/gtk4/prefs.ui:153
+#: resources/ui/gtk3/prefs.ui:118 resources/ui/gtk3/prefs.ui:182
+msgid "Choose Effects"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:129 resources/ui/gtk3/prefs.ui:152
+msgid "Close Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:169 resources/ui/gtk3/prefs.ui:212
+msgid "Also Add Effects to Dialogs"
+msgstr ""
+
+#: resources/ui/gtk3/Fire.ui:63
+msgid "Choose a Preset"
+msgstr ""

po/it.po

@@ -0,0 +1,279 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Simon Schneegans
+# This file is distributed under the same license as the Burn-My-Windows package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Burn-My-Windows\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-29 05:40+0100\n"
+"PO-Revision-Date: 2022-01-31 04:48+0000\n"
+"Last-Translator: albanobattistella <albano_battistella@hotmail.com>\n"
+"Language-Team: Italian <https://hosted.weblate.org/projects/burn-my-windows/"
+"core/it/>\n"
+"Language: it\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.11-dev\n"
+
+#. Translators: %s will be replaced by the effect's name.
+#: prefs.js:337
+#, javascript-format
+msgid "Preview for %s"
+msgstr "Anteprima per %s"
+
+#: prefs.js:359
+msgid "Close this Window to Preview the Effect!"
+msgstr "Chiudi questa finestra per visualizzare in anteprima l'effetto!"
+
+#: src/BrokenGlass.js:57
+msgid "Broken Glass"
+msgstr "Vetro rotto"
+
+#: src/TVEffect.js:56
+msgid "TV Effect"
+msgstr "Effetto TV"
+
+#: src/TRexAttack.js:56
+msgid "T-Rex Attack"
+msgstr ""
+
+#: src/Wisps.js:55
+msgid "Wisps"
+msgstr ""
+
+#: src/Fire.js:58
+msgid "Fire"
+msgstr "Fuoco"
+
+#: src/Fire.js:130
+msgid "Default Fire"
+msgstr "Fuoco predefinito"
+
+#: src/Fire.js:140
+msgid "Hell Fire"
+msgstr "Fuoco Infernale"
+
+#: src/Fire.js:150
+msgid "Dark and Smutty"
+msgstr ""
+
+#: src/Fire.js:160
+msgid "Cold Breeze"
+msgstr ""
+
+#: src/Fire.js:170
+msgid "Santa is Coming"
+msgstr "Babbo Natale sta arrivando"
+
+#: src/EnergizeA.js:54
+msgid "Energize A"
+msgstr ""
+
+#: src/EnergizeB.js:54
+msgid "Energize B"
+msgstr ""
+
+#: src/Matrix.js:58
+msgid "Matrix"
+msgstr "Matrix"
+
+#: resources/ui/common/main-menu.ui:6
+msgid "Visit Homepage"
+msgstr "Visita la home page"
+
+#: resources/ui/common/main-menu.ui:10
+msgid "View Changelog"
+msgstr "Visualizza Changelog"
+
+#: resources/ui/common/main-menu.ui:16
+msgid "Report a Bug"
+msgstr "Segnala un bug"
+
+#: resources/ui/common/main-menu.ui:20
+msgid "Create an Effect"
+msgstr "Crea un effetto"
+
+#: resources/ui/common/main-menu.ui:24
+msgid "Translate"
+msgstr "Traduci"
+
+#: resources/ui/common/main-menu.ui:28
+msgid "Donate"
+msgstr "Donare"
+
+#: resources/ui/common/main-menu.ui:30
+msgid "Via PayPal"
+msgstr "Via PayPal"
+
+#: resources/ui/common/main-menu.ui:34
+msgid "Via GitHub"
+msgstr "Via GitHub"
+
+#: resources/ui/gtk4/Matrix.ui:24 resources/ui/gtk4/BrokenGlass.ui:24
+#: resources/ui/gtk4/Wisps.ui:24 resources/ui/gtk4/Fire.ui:49
+#: resources/ui/gtk4/TRexAttack.ui:24 resources/ui/gtk4/TVEffect.ui:24
+#: resources/ui/gtk4/EnergizeA.ui:24 resources/ui/gtk4/EnergizeB.ui:24
+#: resources/ui/gtk3/Wisps.ui:42 resources/ui/gtk3/Fire.ui:93
+#: resources/ui/gtk3/TVEffect.ui:35 resources/ui/gtk3/EnergizeA.ui:42
+#: resources/ui/gtk3/EnergizeB.ui:42
+msgid "Animation Time [ms]"
+msgstr "Tempo animazione [ms]"
+
+#: resources/ui/gtk4/Matrix.ui:52 resources/ui/gtk4/Matrix.ui:98
+#: resources/ui/gtk4/Matrix.ui:144 resources/ui/gtk4/Matrix.ui:190
+#: resources/ui/gtk4/Matrix.ui:224 resources/ui/gtk4/Matrix.ui:258
+#: resources/ui/gtk4/BrokenGlass.ui:52 resources/ui/gtk4/BrokenGlass.ui:98
+#: resources/ui/gtk4/BrokenGlass.ui:144 resources/ui/gtk4/BrokenGlass.ui:190
+#: resources/ui/gtk4/BrokenGlass.ui:244 resources/ui/gtk4/Wisps.ui:52
+#: resources/ui/gtk4/Wisps.ui:98 resources/ui/gtk4/Wisps.ui:132
+#: resources/ui/gtk4/Fire.ui:77 resources/ui/gtk4/Fire.ui:123
+#: resources/ui/gtk4/Fire.ui:169 resources/ui/gtk4/Fire.ui:222
+#: resources/ui/gtk4/Fire.ui:280 resources/ui/gtk4/TRexAttack.ui:52
+#: resources/ui/gtk4/TRexAttack.ui:98 resources/ui/gtk4/TRexAttack.ui:144
+#: resources/ui/gtk4/TRexAttack.ui:190 resources/ui/gtk4/TRexAttack.ui:224
+#: resources/ui/gtk4/TVEffect.ui:52 resources/ui/gtk4/TVEffect.ui:86
+#: resources/ui/gtk4/EnergizeA.ui:52 resources/ui/gtk4/EnergizeA.ui:98
+#: resources/ui/gtk4/EnergizeA.ui:132 resources/ui/gtk4/EnergizeB.ui:52
+#: resources/ui/gtk4/EnergizeB.ui:98 resources/ui/gtk4/EnergizeB.ui:132
+#: resources/ui/gtk4/prefs.ui:185 resources/ui/gtk3/Wisps.ui:68
+#: resources/ui/gtk3/Wisps.ui:117 resources/ui/gtk3/Wisps.ui:160
+#: resources/ui/gtk3/Fire.ui:119 resources/ui/gtk3/Fire.ui:167
+#: resources/ui/gtk3/Fire.ui:215 resources/ui/gtk3/Fire.ui:277
+#: resources/ui/gtk3/Fire.ui:345 resources/ui/gtk3/TVEffect.ui:61
+#: resources/ui/gtk3/TVEffect.ui:104 resources/ui/gtk3/EnergizeA.ui:68
+#: resources/ui/gtk3/EnergizeA.ui:117 resources/ui/gtk3/EnergizeA.ui:160
+#: resources/ui/gtk3/EnergizeB.ui:68 resources/ui/gtk3/EnergizeB.ui:117
+#: resources/ui/gtk3/EnergizeB.ui:160 resources/ui/gtk3/prefs.ui:233
+msgid "Reset to Default Value"
+msgstr "Ripristina valore predefinito"
+
+#: resources/ui/gtk4/Matrix.ui:70 resources/ui/gtk4/BrokenGlass.ui:70
+#: resources/ui/gtk4/Wisps.ui:70 resources/ui/gtk4/Fire.ui:95
+#: resources/ui/gtk4/EnergizeA.ui:70 resources/ui/gtk4/EnergizeB.ui:70
+#: resources/ui/gtk3/Wisps.ui:91 resources/ui/gtk3/Fire.ui:141
+#: resources/ui/gtk3/EnergizeA.ui:91 resources/ui/gtk3/EnergizeB.ui:91
+msgid "Scale"
+msgstr "Scala"
+
+#: resources/ui/gtk4/Matrix.ui:116
+msgid "Randomness"
+msgstr "Casuale"
+
+#: resources/ui/gtk4/Matrix.ui:162
+msgid "Vertical Overshooting"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:208
+msgid "Trail Color"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:242
+msgid "Tip Color"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:116
+msgid "Gravity"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:162
+msgid "Blow Force"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:212
+msgid "Shatter From Pointer Location"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:221
+msgid ""
+"The shards will fly away from where your mouse pointer was when closing the "
+"window."
+msgstr ""
+
+#: resources/ui/gtk4/Wisps.ui:116 resources/ui/gtk4/TVEffect.ui:70
+#: resources/ui/gtk4/EnergizeA.ui:116 resources/ui/gtk4/EnergizeB.ui:116
+#: resources/ui/gtk3/Wisps.ui:139 resources/ui/gtk3/TVEffect.ui:83
+#: resources/ui/gtk3/EnergizeA.ui:139 resources/ui/gtk3/EnergizeB.ui:139
+msgid "Color"
+msgstr "Colore"
+
+#: resources/ui/gtk4/Fire.ui:25 resources/ui/gtk3/Fire.ui:49
+msgid "Presets"
+msgstr "Preimpostazioni"
+
+#: resources/ui/gtk4/Fire.ui:141 resources/ui/gtk3/Fire.ui:189
+msgid "Speed"
+msgstr "Velocità"
+
+#: resources/ui/gtk4/Fire.ui:191 resources/ui/gtk3/Fire.ui:241
+msgid "3D Noise"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:200 resources/ui/gtk3/Fire.ui:250
+msgid "Creates a more dynamic fire but requires more GPU power."
+msgstr "Crea un fuoco più dinamico ma richiede più potenza della GPU."
+
+#: resources/ui/gtk4/Fire.ui:240 resources/ui/gtk3/Fire.ui:300
+msgid "Gradient"
+msgstr "Gradiente"
+
+#: resources/ui/gtk4/TRexAttack.ui:70
+msgid "Claw Scratch Scale"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:116
+msgid "Claw Scratch Count"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:162
+msgid "Warp Effect"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:208
+msgid "Flash Color"
+msgstr ""
+
+#: resources/ui/gtk4/effectPage.ui:41 resources/ui/gtk3/effectPage.ui:41
+msgid "Preview this Effect"
+msgstr "Anteprima di questo effetto"
+
+#: resources/ui/gtk4/prefs.ui:27 resources/ui/gtk3/prefs.ui:251
+msgid "General Options"
+msgstr "Opzioni generali"
+
+#: resources/ui/gtk4/prefs.ui:47 resources/ui/gtk3/prefs.ui:49
+msgid "Welcome to Burn-My-Windows!"
+msgstr "Benvenuto in Burn-My-Windows!"
+
+#: resources/ui/gtk4/prefs.ui:58 resources/ui/gtk3/prefs.ui:60
+msgid "If you like this extension, recommend it to your friends :)"
+msgstr "Se ti piace questa estensione, consigliala ai tuoi amici :)"
+
+#: resources/ui/gtk4/prefs.ui:85 resources/ui/gtk3/prefs.ui:88
+msgid "Open Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:94 resources/ui/gtk4/prefs.ui:138
+#: resources/ui/gtk3/prefs.ui:97 resources/ui/gtk3/prefs.ui:161
+msgid "If multiple are selected, one is chosen randomly."
+msgstr "Se ne vengono selezionati multipli, uno viene scelto a caso."
+
+#: resources/ui/gtk4/prefs.ui:109 resources/ui/gtk4/prefs.ui:153
+#: resources/ui/gtk3/prefs.ui:118 resources/ui/gtk3/prefs.ui:182
+msgid "Choose Effects"
+msgstr "Scegli Effetti"
+
+#: resources/ui/gtk4/prefs.ui:129 resources/ui/gtk3/prefs.ui:152
+msgid "Close Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:169 resources/ui/gtk3/prefs.ui:212
+msgid "Also Add Effects to Dialogs"
+msgstr "Aggiungi anche effetti ai dialoghi"
+
+#: resources/ui/gtk3/Fire.ui:63
+msgid "Choose a Preset"
+msgstr "Scegli un predefinito"

po/nb_NO.po

@@ -0,0 +1,279 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Simon Schneegans
+# This file is distributed under the same license as the Burn-My-Windows package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Burn-My-Windows\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-29 05:40+0100\n"
+"PO-Revision-Date: 2022-01-29 12:30+0000\n"
+"Last-Translator: Allan Nordhøy <epost@anotheragency.no>\n"
+"Language-Team: Norwegian Bokmål <https://hosted.weblate.org/projects/"
+"burn-my-windows/core/nb_NO/>\n"
+"Language: nb_NO\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 4.11-dev\n"
+
+#. Translators: %s will be replaced by the effect's name.
+#: prefs.js:337
+#, javascript-format
+msgid "Preview for %s"
+msgstr ""
+
+#: prefs.js:359
+msgid "Close this Window to Preview the Effect!"
+msgstr ""
+
+#: src/BrokenGlass.js:57
+msgid "Broken Glass"
+msgstr ""
+
+#: src/TVEffect.js:56
+msgid "TV Effect"
+msgstr ""
+
+#: src/TRexAttack.js:56
+msgid "T-Rex Attack"
+msgstr ""
+
+#: src/Wisps.js:55
+msgid "Wisps"
+msgstr ""
+
+#: src/Fire.js:58
+msgid "Fire"
+msgstr ""
+
+#: src/Fire.js:130
+msgid "Default Fire"
+msgstr ""
+
+#: src/Fire.js:140
+msgid "Hell Fire"
+msgstr ""
+
+#: src/Fire.js:150
+msgid "Dark and Smutty"
+msgstr ""
+
+#: src/Fire.js:160
+msgid "Cold Breeze"
+msgstr ""
+
+#: src/Fire.js:170
+msgid "Santa is Coming"
+msgstr ""
+
+#: src/EnergizeA.js:54
+msgid "Energize A"
+msgstr ""
+
+#: src/EnergizeB.js:54
+msgid "Energize B"
+msgstr ""
+
+#: src/Matrix.js:58
+msgid "Matrix"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:6
+msgid "Visit Homepage"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:10
+msgid "View Changelog"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:16
+msgid "Report a Bug"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:20
+msgid "Create an Effect"
+msgstr ""
+
+#: resources/ui/common/main-menu.ui:24
+msgid "Translate"
+msgstr "Oversett"
+
+#: resources/ui/common/main-menu.ui:28
+msgid "Donate"
+msgstr "Doner"
+
+#: resources/ui/common/main-menu.ui:30
+msgid "Via PayPal"
+msgstr "med PayPal"
+
+#: resources/ui/common/main-menu.ui:34
+msgid "Via GitHub"
+msgstr "på GitHub"
+
+#: resources/ui/gtk4/Matrix.ui:24 resources/ui/gtk4/BrokenGlass.ui:24
+#: resources/ui/gtk4/Wisps.ui:24 resources/ui/gtk4/Fire.ui:49
+#: resources/ui/gtk4/TRexAttack.ui:24 resources/ui/gtk4/TVEffect.ui:24
+#: resources/ui/gtk4/EnergizeA.ui:24 resources/ui/gtk4/EnergizeB.ui:24
+#: resources/ui/gtk3/Wisps.ui:42 resources/ui/gtk3/Fire.ui:93
+#: resources/ui/gtk3/TVEffect.ui:35 resources/ui/gtk3/EnergizeA.ui:42
+#: resources/ui/gtk3/EnergizeB.ui:42
+msgid "Animation Time [ms]"
+msgstr "Animasjonstid [ms]"
+
+#: resources/ui/gtk4/Matrix.ui:52 resources/ui/gtk4/Matrix.ui:98
+#: resources/ui/gtk4/Matrix.ui:144 resources/ui/gtk4/Matrix.ui:190
+#: resources/ui/gtk4/Matrix.ui:224 resources/ui/gtk4/Matrix.ui:258
+#: resources/ui/gtk4/BrokenGlass.ui:52 resources/ui/gtk4/BrokenGlass.ui:98
+#: resources/ui/gtk4/BrokenGlass.ui:144 resources/ui/gtk4/BrokenGlass.ui:190
+#: resources/ui/gtk4/BrokenGlass.ui:244 resources/ui/gtk4/Wisps.ui:52
+#: resources/ui/gtk4/Wisps.ui:98 resources/ui/gtk4/Wisps.ui:132
+#: resources/ui/gtk4/Fire.ui:77 resources/ui/gtk4/Fire.ui:123
+#: resources/ui/gtk4/Fire.ui:169 resources/ui/gtk4/Fire.ui:222
+#: resources/ui/gtk4/Fire.ui:280 resources/ui/gtk4/TRexAttack.ui:52
+#: resources/ui/gtk4/TRexAttack.ui:98 resources/ui/gtk4/TRexAttack.ui:144
+#: resources/ui/gtk4/TRexAttack.ui:190 resources/ui/gtk4/TRexAttack.ui:224
+#: resources/ui/gtk4/TVEffect.ui:52 resources/ui/gtk4/TVEffect.ui:86
+#: resources/ui/gtk4/EnergizeA.ui:52 resources/ui/gtk4/EnergizeA.ui:98
+#: resources/ui/gtk4/EnergizeA.ui:132 resources/ui/gtk4/EnergizeB.ui:52
+#: resources/ui/gtk4/EnergizeB.ui:98 resources/ui/gtk4/EnergizeB.ui:132
+#: resources/ui/gtk4/prefs.ui:185 resources/ui/gtk3/Wisps.ui:68
+#: resources/ui/gtk3/Wisps.ui:117 resources/ui/gtk3/Wisps.ui:160
+#: resources/ui/gtk3/Fire.ui:119 resources/ui/gtk3/Fire.ui:167
+#: resources/ui/gtk3/Fire.ui:215 resources/ui/gtk3/Fire.ui:277
+#: resources/ui/gtk3/Fire.ui:345 resources/ui/gtk3/TVEffect.ui:61
+#: resources/ui/gtk3/TVEffect.ui:104 resources/ui/gtk3/EnergizeA.ui:68
+#: resources/ui/gtk3/EnergizeA.ui:117 resources/ui/gtk3/EnergizeA.ui:160
+#: resources/ui/gtk3/EnergizeB.ui:68 resources/ui/gtk3/EnergizeB.ui:117
+#: resources/ui/gtk3/EnergizeB.ui:160 resources/ui/gtk3/prefs.ui:233
+msgid "Reset to Default Value"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:70 resources/ui/gtk4/BrokenGlass.ui:70
+#: resources/ui/gtk4/Wisps.ui:70 resources/ui/gtk4/Fire.ui:95
+#: resources/ui/gtk4/EnergizeA.ui:70 resources/ui/gtk4/EnergizeB.ui:70
+#: resources/ui/gtk3/Wisps.ui:91 resources/ui/gtk3/Fire.ui:141
+#: resources/ui/gtk3/EnergizeA.ui:91 resources/ui/gtk3/EnergizeB.ui:91
+msgid "Scale"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:116
+msgid "Randomness"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:162
+msgid "Vertical Overshooting"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:208
+msgid "Trail Color"
+msgstr ""
+
+#: resources/ui/gtk4/Matrix.ui:242
+msgid "Tip Color"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:116
+msgid "Gravity"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:162
+msgid "Blow Force"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:212
+msgid "Shatter From Pointer Location"
+msgstr ""
+
+#: resources/ui/gtk4/BrokenGlass.ui:221
+msgid ""
+"The shards will fly away from where your mouse pointer was when closing the "
+"window."
+msgstr ""
+
+#: resources/ui/gtk4/Wisps.ui:116 resources/ui/gtk4/TVEffect.ui:70
+#: resources/ui/gtk4/EnergizeA.ui:116 resources/ui/gtk4/EnergizeB.ui:116
+#: resources/ui/gtk3/Wisps.ui:139 resources/ui/gtk3/TVEffect.ui:83
+#: resources/ui/gtk3/EnergizeA.ui:139 resources/ui/gtk3/EnergizeB.ui:139
+msgid "Color"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:25 resources/ui/gtk3/Fire.ui:49
+msgid "Presets"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:141 resources/ui/gtk3/Fire.ui:189
+msgid "Speed"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:191 resources/ui/gtk3/Fire.ui:241
+msgid "3D Noise"
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:200 resources/ui/gtk3/Fire.ui:250
+msgid "Creates a more dynamic fire but requires more GPU power."
+msgstr ""
+
+#: resources/ui/gtk4/Fire.ui:240 resources/ui/gtk3/Fire.ui:300
+msgid "Gradient"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:70
+msgid "Claw Scratch Scale"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:116
+msgid "Claw Scratch Count"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:162
+msgid "Warp Effect"
+msgstr ""
+
+#: resources/ui/gtk4/TRexAttack.ui:208
+msgid "Flash Color"
+msgstr ""
+
+#: resources/ui/gtk4/effectPage.ui:41 resources/ui/gtk3/effectPage.ui:41
+msgid "Preview this Effect"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:27 resources/ui/gtk3/prefs.ui:251
+msgid "General Options"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:47 resources/ui/gtk3/prefs.ui:49
+msgid "Welcome to Burn-My-Windows!"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:58 resources/ui/gtk3/prefs.ui:60
+msgid "If you like this extension, recommend it to your friends :)"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:85 resources/ui/gtk3/prefs.ui:88
+msgid "Open Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:94 resources/ui/gtk4/prefs.ui:138
+#: resources/ui/gtk3/prefs.ui:97 resources/ui/gtk3/prefs.ui:161
+msgid "If multiple are selected, one is chosen randomly."
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:109 resources/ui/gtk4/prefs.ui:153
+#: resources/ui/gtk3/prefs.ui:118 resources/ui/gtk3/prefs.ui:182
+msgid "Choose Effects"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:129 resources/ui/gtk3/prefs.ui:152
+msgid "Close Window Animation"
+msgstr ""
+
+#: resources/ui/gtk4/prefs.ui:169 resources/ui/gtk3/prefs.ui:212
+msgid "Also Add Effects to Dialogs"
+msgstr ""
+
+#: resources/ui/gtk3/Fire.ui:63
+msgid "Choose a Preset"
+msgstr ""

prefs.js

@@ -13,18 +13,37 @@
 
 'use strict';
 
-const {Gio, Gtk, Gdk} = imports.gi;
+const {Gio, Gtk, Gdk, GLib, GObject} = imports.gi;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.common.utils;
+const utils          = Me.imports.src.utils;
+
+// New effects must be registered here and in extension.js.
+const ALL_EFFECTS = [
+  Me.imports.src.EnergizeA.EnergizeA,
+  Me.imports.src.EnergizeB.EnergizeB,
+  Me.imports.src.Fire.Fire,
+  Me.imports.src.Matrix.Matrix,
+  Me.imports.src.BrokenGlass.BrokenGlass,
+  Me.imports.src.TRexAttack.TRexAttack,
+  Me.imports.src.TVEffect.TVEffect,
+  Me.imports.src.Wisps.Wisps,
+];
+
+// This template widget class is defined at the bottom of this file.
+var BurnMyWindowsEffectPage = null;
 
 //////////////////////////////////////////////////////////////////////////////////////////
-// For now, the preferences dialog of this extension is very simple. In the future, if  //
-// we might consider to improve its layout...                                           //
+// The preferences dialog is organized in pages, each of which is loaded from a         //
+// separate ui file. There's one page with general options, all other paged are loaded  //
+// from the respective effects.                                                         //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 var PreferencesDialog = class PreferencesDialog {
+
   // ------------------------------------------------------------ constructor / destructor
 
   constructor() {
@@ -32,77 +51,139 @@ var PreferencesDialog = class PreferencesDialog {
     this._resources = Gio.Resource.load(Me.path + '/resources/burn-my-windows.gresource');
     Gio.resources_register(this._resources);
 
-    // Load the user interface file.
-    this._builder = new Gtk.Builder();
-    this._builder.add_from_resource(`/ui/${utils.isGTK4() ? 'gtk4' : 'gtk3'}.ui`);
+    // Load the CSS file for the settings dialog.
+    const styleProvider = Gtk.CssProvider.new();
+    styleProvider.load_from_resource('/css/gtk.css');
+    if (utils.isGTK4()) {
+      Gtk.StyleContext.add_provider_for_display(
+          Gdk.Display.get_default(), styleProvider,
+          Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    } else {
+      Gtk.StyleContext.add_provider_for_screen(
+          Gdk.Screen.get_default(), styleProvider,
+          Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    }
 
-    // This is our top-level widget which we will return later.
-    this._widget = this._builder.get_object('settings-widget');
+    // Make sure custom icons are found.
+    if (utils.isGTK4()) {
+      Gtk.IconTheme.get_for_display(Gdk.Display.get_default()).add_resource_path('/img');
+    } else {
+      Gtk.IconTheme.get_default().add_resource_path('/img');
+    }
+
+    // Register the template widgets used in the settings dialog.
+    this._registerCustomClasses();
 
     // Store a reference to the settings object.
     this._settings = ExtensionUtils.getSettings();
 
-    // Bind all properties.
-    this._bindCombobox('close-animation');
-    this._bindAdjustment('destroy-animation-time');
-    this._bindSwitch('destroy-dialogs');
-    this._bindAdjustment('flame-movement-speed');
-    this._bindAdjustment('flame-scale');
-    this._bindColorButton('fire-color-1');
-    this._bindColorButton('fire-color-2');
-    this._bindColorButton('fire-color-3');
-    this._bindColorButton('fire-color-4');
-    this._bindColorButton('fire-color-5');
-    this._bindAdjustment('matrix-scale');
-    this._bindAdjustment('matrix-randomness');
-    this._bindColorButton('matrix-trail-color');
-    this._bindColorButton('matrix-tip-color');
-    this._bindColorButton('tv-effect-color');
-    this._bindColorButton('claw-scratch-color');
-    this._bindAdjustment('claw-scratch-scale');
-    this._bindAdjustment('claw-scratch-count');
-    this._bindAdjustment('claw-scratch-warp');
+    // Load the general user interface files.
+    this._builder = new Gtk.Builder();
+    this._builder.add_from_resource(`/ui/common/main-menu.ui`);
+    this._builder.add_from_resource(`/ui/${utils.getGTKString()}/prefs.ui`);
 
-    // The fire-gradient-reset button needs to be bound explicitly.
-    this._builder.get_object('reset-fire-colors').connect('clicked', () => {
-      this._settings.reset('fire-color-1');
-      this._settings.reset('fire-color-2');
-      this._settings.reset('fire-color-3');
-      this._settings.reset('fire-color-4');
-      this._settings.reset('fire-color-5');
+    // Bind general options properties.
+    this.bindSwitch('destroy-dialogs');
+
+    // Add all other effect pages.
+    const stack = this._builder.get_object('main-stack');
+    ALL_EFFECTS.forEach(Effect => {
+      const [minMajor, minMinor] = Effect.getMinShellVersion();
+      if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+
+        const page = new BurnMyWindowsEffectPage(Effect, this);
+
+        // Add the Effect's preferences (if any).
+        const preferences = Effect.getPreferences(this);
+        if (preferences) {
+          this.gtkBoxAppend(page, preferences);
+        }
+
+        stack.add_titled(page, Effect.getNick(), Effect.getLabel());
+      }
     });
 
-    // Initialize the fire-preset dropdown.
-    this._createFirePresets();
+    // This is our top-level widget which we will return later.
+    this._widget = this._builder.get_object('settings-widget');
 
-    // Add a menu to the title bar of the preferences dialog.
+    // Some things can only be done once the widget is shown as we do not have access to
+    // the toplevel widget before.
     this._widget.connect('realize', (widget) => {
       const window = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
 
       // Show the version number in the title bar.
       window.set_title(`Burn-My-Windows ${Me.metadata.version}`);
 
-      // Add the menu.
-      const menu = this._builder.get_object('menu-button');
-      window.get_titlebar().pack_end(menu);
+      // Add the main menu to the title bar.
+      {
+        // Add the menu button to the title bar.
+        const menu = this._builder.get_object('menu-button');
+        window.get_titlebar().pack_end(menu);
 
-      // Populate the actions.
-      const group = Gio.SimpleActionGroup.new();
+        // Populate the menu with actions.
+        const group = Gio.SimpleActionGroup.new();
+        window.insert_action_group('prefs', group);
 
-      const addAction = (name, uri) => {
-        const action = Gio.SimpleAction.new(name, null);
-        action.connect('activate', () => Gtk.show_uri(null, uri, Gdk.CURRENT_TIME));
-        group.add_action(action);
-      };
+        const addAction = (name, uri) => {
+          const action = Gio.SimpleAction.new(name, null);
+          action.connect('activate', () => Gtk.show_uri(null, uri, Gdk.CURRENT_TIME));
+          group.add_action(action);
+        };
 
-      addAction('homepage', 'https://github.com/Schneegans/Burn-My-Windows');
-      addAction('bugs', 'https://github.com/Schneegans/Burn-My-Windows/issues');
-      addAction(
-          'donate-paypal',
-          'https://www.paypal.com/donate/?hosted_button_id=3F7UFL8KLVPXE');
-      addAction('donate-github', 'https://github.com/sponsors/Schneegans');
+        // clang-format off
+        addAction('homepage',      'https://github.com/Schneegans/Burn-My-Windows');
+        addAction('changelog',     'https://github.com/Schneegans/Burn-My-Windows/blob/main/docs/changelog.md');
+        addAction('bugs',          'https://github.com/Schneegans/Burn-My-Windows/issues');
+        addAction('new-effect',    'https://github.com/Schneegans/Burn-My-Windows/blob/main/docs/how-to-create-new-effects.md');
+        addAction('translate',     'https://hosted.weblate.org/engage/burn-my-windows/');
+        addAction('donate-paypal', 'https://www.paypal.com/donate/?hosted_button_id=3F7UFL8KLVPXE');
+        addAction('donate-github', 'https://github.com/sponsors/Schneegans');
+        // clang-format on
+      }
 
-      window.insert_action_group('prefs', group);
+      // Populate the open-effects drop-down menu.
+      {
+        const menu  = this._builder.get_object('open-effect-menu');
+        const group = Gio.SimpleActionGroup.new();
+        window.insert_action_group('open-effects', group);
+
+        ALL_EFFECTS.forEach(Effect => {
+          const [minMajor, minMinor] = Effect.getMinShellVersion();
+          if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+            const nick       = Effect.getNick();
+            const label      = Effect.getLabel();
+            const actionName = nick + '-open-effect';
+            const fullName   = 'open-effects.' + actionName;
+
+            const action = this._settings.create_action(actionName);
+            group.add_action(action);
+
+            menu.append_item(Gio.MenuItem.new(label, fullName));
+          }
+        });
+      }
+
+      // Populate the close-effects drop-down menu.
+      {
+        const menu  = this._builder.get_object('close-effect-menu');
+        const group = Gio.SimpleActionGroup.new();
+        window.insert_action_group('close-effects', group);
+
+        ALL_EFFECTS.forEach(Effect => {
+          const [minMajor, minMinor] = Effect.getMinShellVersion();
+          if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+            const nick       = Effect.getNick();
+            const label      = Effect.getLabel();
+            const actionName = nick + '-close-effect';
+            const fullName   = 'close-effects.' + actionName;
+
+            const action = this._settings.create_action(actionName);
+            group.add_action(action);
+
+            menu.append_item(Gio.MenuItem.new(label, fullName));
+          }
+        });
+      }
     });
 
     // As we do not have something like a destructor, we just listen for the destroy
@@ -120,35 +201,44 @@ var PreferencesDialog = class PreferencesDialog {
 
   // -------------------------------------------------------------------- public interface
 
+  // Returns the internally used Gtk.Builder. Effects can use this to modify the UI of the
+  // preferences dialog.
+  getBuilder() {
+    return this._builder;
+  }
+
+  // Returns a Gio.Settings object for this extension.
+  getSettings() {
+    return this._settings;
+  }
+
   // Returns the widget used for the settings of this extension.
   getWidget() {
     return this._widget;
   }
 
-  // ----------------------------------------------------------------------- private stuff
-
   // Connects a Gtk.ComboBox (or anything else which has an 'active-id' property) to a
   // settings key. It also binds the corresponding reset button.
-  _bindCombobox(settingsKey) {
+  bindCombobox(settingsKey) {
     this._bind(settingsKey, 'active-id');
   }
 
   // Connects a Gtk.Adjustment (or anything else which has a 'value' property) to a
   // settings key. It also binds the corresponding reset button.
-  _bindAdjustment(settingsKey) {
+  bindAdjustment(settingsKey) {
     this._bind(settingsKey, 'value');
   }
 
   // Connects a Gtk.Switch (or anything else which has an 'active' property) to a settings
   // key. It also binds the corresponding reset button.
-  _bindSwitch(settingsKey) {
+  bindSwitch(settingsKey) {
     this._bind(settingsKey, 'active');
   }
 
   // Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
   // is not available yet, we need to do the color conversion manually. It also binds the
   // corresponding reset button.
-  _bindColorButton(settingsKey) {
+  bindColorButton(settingsKey) {
 
     const button = this._builder.get_object(settingsKey);
 
@@ -175,18 +265,19 @@ var PreferencesDialog = class PreferencesDialog {
     this._bindResetButton(settingsKey);
   }
 
-  // Connects any widget's property to a settings key. The widget must have the same ID as
-  // the settings key. It also binds the corresponding reset button.
-  _bind(settingsKey, property) {
-    const object = this._builder.get_object(settingsKey);
+  // ----------------------------------------------------------------- GTK3 / GTK4 helpers
 
-    if (object) {
-      this._settings.bind(settingsKey, object, property, Gio.SettingsBindFlags.DEFAULT);
+  // Appends the given child widget to the given Gtk.Box.
+  gtkBoxAppend(box, child) {
+    if (utils.isGTK4()) {
+      box.append(child);
+    } else {
+      box.pack_start(child, false, false, 0);
     }
-
-    this._bindResetButton(settingsKey);
   }
 
+  // ----------------------------------------------------------------------- private stuff
+
   // Searches for a reset button for the given settings key and make it reset the settings
   // key when clicked.
   _bindResetButton(settingsKey) {
@@ -198,96 +289,105 @@ var PreferencesDialog = class PreferencesDialog {
     }
   }
 
-  // This populates the preset dropdown menu for the fire options.
-  _createFirePresets() {
-    this._widget.connect('realize', (widget) => {
-      const presets = [
-        {
-          name: 'Default Fire',
-          scale: 1.0,
-          speed: 0.5,
-          color1: 'rgba(76, 51, 25, 0.0)',
-          color2: 'rgba(180, 55, 30, 0.7)',
-          color3: 'rgba(255, 76, 38, 0.9)',
-          color4: 'rgba(255, 166, 25, 1)',
-          color5: 'rgba(255, 255, 255, 1)'
-        },
-        {
-          name: 'Hell Fire',
-          scale: 1.5,
-          speed: 0.2,
-          color1: 'rgba(0,0,0,0)',
-          color2: 'rgba(103,7,80,0.5)',
-          color3: 'rgba(150,0,24,0.9)',
-          color4: 'rgb(255,200,0)',
-          color5: 'rgba(255, 255, 255, 1)'
-        },
-        {
-          name: 'Dark and Smutty',
-          scale: 1.0,
-          speed: 0.5,
-          color1: 'rgba(0,0,0,0)',
-          color2: 'rgba(36,3,0,0.5)',
-          color3: 'rgba(150,0,24,0.9)',
-          color4: 'rgb(255,177,21)',
-          color5: 'rgb(255,238,166)'
-        },
-        {
-          name: 'Cold Breeze',
-          scale: 1.5,
-          speed: -0.1,
-          color1: 'rgba(0,110,255,0)',
-          color2: 'rgba(30,111,180,0.24)',
-          color3: 'rgba(38,181,255,0.54)',
-          color4: 'rgba(34,162,255,0.84)',
-          color5: 'rgb(97,189,255)'
-        },
-        {
-          name: 'Santa is Coming',
-          scale: 0.4,
-          speed: -0.5,
-          color1: 'rgba(0,110,255,0)',
-          color2: 'rgba(208,233,255,0.24)',
-          color3: 'rgba(207,235,255,0.84)',
-          color4: 'rgb(208,243,255)',
-          color5: 'rgb(255,255,255)'
+  // Connects any widget's property to a settings key. The widget must have the same ID as
+  // the settings key. It also binds the corresponding reset button.
+  _bind(settingsKey, property) {
+    const object = this._builder.get_object(settingsKey);
+
+    if (object) {
+      this._settings.bind(settingsKey, object, property, Gio.SettingsBindFlags.DEFAULT);
+    }
+
+    this._bindResetButton(settingsKey);
+  }
+
+  // Initializes template widgets used by the preferences dialog.
+  _registerCustomClasses() {
+
+    // Each effect page is based on a template widget. This template contains the title
+    // and the preview button.
+    // clang-format off
+    if (GObject.type_from_name('BurnMyWindowsEffectPage') == null) {
+    BurnMyWindowsEffectPage =
+      GObject.registerClass({
+        GTypeName: 'BurnMyWindowsEffectPage',
+        Template: `resource:///ui/${utils.getGTKString()}/effectPage.ui`,
+        InternalChildren: ['label', 'button'],
+      },
+      class BurnMyWindowsEffectPage extends Gtk.Box {
+        _init(Effect, dialog) {
+          super._init();
+
+          // Set the effect's name as label.
+          this._label.label = Effect.getLabel();
+
+          // Open the preview window once the preview button is clicked.
+          this._button.connect('clicked', () => {
+
+            // Set the to-be-previewed effect.
+            dialog.getSettings().set_string('open-preview-effect', Effect.getNick());
+            dialog.getSettings().set_string('close-preview-effect', Effect.getNick());
+
+            // Make sure that the window.show() firther below "sees" this change.
+            Gio.Settings.sync();
+
+            // Create the preview-window.
+            const window = new Gtk.Window({
+              // Translators: %s will be replaced by the effect's name.
+              title: _('Preview for %s').replace("%s", Effect.getLabel()),
+              default_width: 800,
+              default_height: 450,
+              modal: true,
+              transient_for: utils.isGTK4() ? this._button.get_root() :
+                                              this._button.get_toplevel()
+            });
+
+            // Add a header bar to the window.
+            if (utils.isGTK4()) {
+              const header = Gtk.HeaderBar.new();
+              window.set_titlebar(header);
+            }
+
+            const box = new Gtk.Box({
+              orientation: Gtk.Orientation.VERTICAL,
+              valign: Gtk.Align.CENTER,
+              spacing: 10,
+              margin_start:50,
+              margin_end:50
+            });
+
+            const label = Gtk.Label.new(_('Close this Window to Preview the Effect!'));
+            label.wrap = true;
+            label.justify = Gtk.Justification.CENTER;
+            label.get_style_context().add_class('large-title');
+
+            const image = new Gtk.Image({
+              icon_name: 'burn-my-windows-symbolic',
+              pixel_size: 128,
+            });
+
+            dialog.gtkBoxAppend(box, image);
+            dialog.gtkBoxAppend(box, label);
+
+            if (utils.isGTK4()) {
+              window.set_child(box);
+              window.show();
+            } else {
+              window.add(box);
+              window.show_all();
+            }
+          });
         }
-      ];
-
-      const menu      = Gio.Menu.new();
-      const group     = Gio.SimpleActionGroup.new();
-      const groupName = 'presets';
-
-      // Add all presets.
-      presets.forEach((preset, i) => {
-        const actionName = 'fire' + i;
-        menu.append(preset.name, groupName + '.' + actionName);
-        let action = Gio.SimpleAction.new(actionName, null);
-
-        // Load the preset on activation.
-        action.connect('activate', () => {
-          this._settings.set_double('flame-movement-speed', preset.speed);
-          this._settings.set_double('flame-scale', preset.scale);
-          this._settings.set_string('fire-color-1', preset.color1);
-          this._settings.set_string('fire-color-2', preset.color2);
-          this._settings.set_string('fire-color-3', preset.color3);
-          this._settings.set_string('fire-color-4', preset.color4);
-          this._settings.set_string('fire-color-5', preset.color5);
-        });
-
-        group.add_action(action);
       });
-
-      this._builder.get_object('fire-preset-button').set_menu_model(menu);
-
-      const root = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
-      root.insert_action_group(groupName, group);
-    });
+      // clang-format on
+    }
   }
 }
 
-// Nothing to do for now...
-function init() {}
+// This is used for setting up the translations.
+function init() {
+  ExtensionUtils.initTranslations();
+}
 
 // This function is called when the preferences window is created to build and return a
 // Gtk widget. We create a new instance of the PreferencesDialog class each time this

resources/css/gtk.css

@@ -0,0 +1,3 @@
+.pill-button {
+    border-radius: 9999px;
+}

resources/ui/common/main-menu.ui

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+  <menu id="main-menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">Visit Homepage</attribute>
+        <attribute name="action">prefs.homepage</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">View Changelog</attribute>
+        <attribute name="action">prefs.changelog</attribute>
+      </item>
+    </section>
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">Report a Bug</attribute>
+        <attribute name="action">prefs.bugs</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">Create an Effect</attribute>
+        <attribute name="action">prefs.new-effect</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">Translate</attribute>
+        <attribute name="action">prefs.translate</attribute>
+      </item>
+      <submenu>
+        <attribute name="label" translatable="yes">Donate</attribute>
+        <item>
+          <attribute name="label" translatable="yes">Via PayPal</attribute>
+          <attribute name="action">prefs.donate-paypal</attribute>
+        </item>
+        <item>
+          <attribute name="label" translatable="yes">Via GitHub</attribute>
+          <attribute name="action">prefs.donate-github</attribute>
+        </item>
+      </submenu>
+    </section>
+  </menu>
+</interface>

resources/ui/gtk3.ui

@@ -1,583 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface domain="desktop-cube">
-  <requires lib="gtk" version="3.0" />
-
-  <object class="GtkListStore" id="animation-mode-list">
-    <columns>
-      <column type="gchararray" />
-      <column type="gchararray" />
-    </columns>
-    <data>
-      <row>
-        <col id="0">Fire</col>
-        <col id="1">fire</col>
-      </row>
-      <row>
-        <col id="0">TV Effect</col>
-        <col id="1">tv</col>
-      </row>
-    </data>
-  </object>
-
-  <menu id="main-menu">
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">Visit Homepage</attribute>
-        <attribute name="action">prefs.homepage</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Report a Bug</attribute>
-        <attribute name="action">prefs.bugs</attribute>
-      </item>
-    </section>
-    <section>
-      <submenu>
-        <attribute name="label" translatable="yes">Donate</attribute>
-        <item>
-          <attribute name="label" translatable="yes">Via PayPal</attribute>
-          <attribute name="action">prefs.donate-paypal</attribute>
-        </item>
-        <item>
-          <attribute name="label" translatable="yes">Via GitHub</attribute>
-          <attribute name="action">prefs.donate-github</attribute>
-        </item>
-      </submenu>
-    </section>
-  </menu>
-
-  <object class="GtkMenuButton" id="menu-button">
-    <property name="menu-model">main-menu</property>
-    <property name="visible">1</property>
-    <child>
-      <object class="GtkImage">
-        <property name="icon-name">open-menu-symbolic</property>
-        <property name="visible">1</property>
-        <property name="icon-size">1</property>
-      </object>
-    </child>
-  </object>
-
-  <object class="GtkAdjustment" id="destroy-animation-time">
-    <property name="upper">10000</property>
-    <property name="lower">500</property>
-    <property name="step-increment">10</property>
-    <property name="page-increment">100</property>
-  </object>
-
-  <object class="GtkAdjustment" id="flame-scale">
-    <property name="upper">3</property>
-    <property name="lower">0.1</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkAdjustment" id="flame-movement-speed">
-    <property name="upper">2.0</property>
-    <property name="lower">-2.0</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkAdjustment" id="matrix-scale">
-    <property name="upper">50</property>
-    <property name="lower">5</property>
-    <property name="step-increment">1</property>
-    <property name="page-increment">5</property>
-  </object>
-
-  <object class="GtkAdjustment" id="matrix-randomness">
-    <property name="upper">1</property>
-    <property name="lower">0</property>
-    <property name="step-increment">0.01</property>
-    <property name="page-increment">0.1</property>
-  </object>
-
-  <object class="GtkScrolledWindow" id="settings-widget">
-    <property name="hscrollbar-policy">never</property>
-    <property name="min-content-height">200</property>
-    <property name="hexpand">0</property>
-    <property name="vexpand">1</property>
-    <child>
-      <object class="GtkViewport">
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="margin-start">60</property>
-            <property name="margin-end">60</property>
-            <property name="margin-top">30</property>
-            <property name="margin-bottom">30</property>
-
-            <child>
-              <object class="GtkLabel">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <property name="label">General Options</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="title-4" />
-                </style>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Close Window Animation</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="GtkComboBox" id="close-animation">
-                                <property name="valign">center</property>
-                                <property name="model">animation-mode-list</property>
-                                <property name="id_column">1</property>
-                                <property name="active_id">fire</property>
-                                <child>
-                                  <object class="GtkCellRendererText" />
-                                  <attributes>
-                                    <attribute name="text">0</attribute>
-                                  </attributes>
-                                </child>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-close-animation">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">destroy-animation-time</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-animation-time">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Also Burn Dialogs</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="GtkSwitch" id="destroy-dialogs">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-dialogs">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Fire Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkMenuButton" id="fire-preset-button">
-                    <property name="relief">none</property>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="spacing">8</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="label" translatable="yes">Choose a Preset</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">pan-down-symbolic</property>
-                            <property name="icon-size">1</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">flame-scale</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-scale">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Speed</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">flame-movement-speed</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-movement-speed">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Gradient</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="GtkColorButton" id="fire-color-1">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-2">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-3">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-4">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-5">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-fire-colors">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">TV Effect Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkFrame">
-                <child>
-                  <object class="GtkListBox">
-                    <property name="selection-mode">none</property>
-                    <style>
-                      <class name="rich-list" />
-                    </style>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="margin-start">10</property>
-                        <property name="margin-end">10</property>
-                        <property name="margin-top">10</property>
-                        <property name="margin-bottom">10</property>
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="spacing">8</property>
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Color</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="GtkColorButton" id="tv-effect-color">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-tv-effect-color">
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="icon-name">edit-clear-symbolic</property>
-                                    <property name="icon-size">1</property>
-                                  </object>
-                                </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-
-
-</interface>

resources/ui/gtk3/EnergizeA.ui

@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkAdjustment" id="energize-a-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="energize-a-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="energize-a-prefs">
+    <property name="orientation">vertical</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-a-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-a-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="energize-a-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/EnergizeB.ui

@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkAdjustment" id="energize-b-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="energize-b-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="energize-b-prefs">
+    <property name="orientation">vertical</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-b-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">energize-b-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="energize-b-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/Fire.ui

@@ -0,0 +1,362 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkAdjustment" id="fire-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="flame-scale">
+    <property name="upper">3</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkAdjustment" id="flame-movement-speed">
+    <property name="upper">2.0</property>
+    <property name="lower">-2.0</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" 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>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Presets</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="GtkMenuButton" id="fire-preset-button">
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Choose a Preset</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">pan-down-symbolic</property>
+                                <property name="icon-size">1</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">fire-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">flame-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Speed</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">flame-movement-speed</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-movement-speed">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">3D Noise</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">Creates a more dynamic fire but requires more GPU power.</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>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="flame-3d-noise">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-3d-noise">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Gradient</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="GtkColorButton" id="fire-color-1">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-2">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-3">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-4">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-5">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-colors">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+
+</interface>

resources/ui/gtk3/TVEffect.ui

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkAdjustment" id="tv-animation-time">
+    <property name="upper">5000</property>
+    <property name="lower">100</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkBox" id="tv-prefs">
+    <property name="orientation">vertical</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">tv-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="tv-effect-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-effect-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/Wisps.ui

@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkAdjustment" id="wisps-animation-time">
+    <property name="upper">10000</property>
+    <property name="lower">500</property>
+    <property name="step-increment">10</property>
+    <property name="page-increment">100</property>
+  </object>
+
+  <object class="GtkAdjustment" id="wisps-scale">
+    <property name="upper">10</property>
+    <property name="lower">0.1</property>
+    <property name="step-increment">0.01</property>
+    <property name="page-increment">0.1</property>
+  </object>
+
+  <object class="GtkBox" id="wisps-prefs">
+    <property name="orientation">vertical</property>
+
+    <child>
+      <object class="GtkFrame">
+        <child>
+          <object class="GtkListBox">
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="rich-list" />
+            </style>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">wisps-animation-time</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-animation-time">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">8</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">wisps-scale</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-scale">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <property name="margin-top">10</property>
+                <property name="margin-bottom">10</property>
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="wisps-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-color">
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">edit-clear-symbolic</property>
+                            <property name="icon-size">1</property>
+                          </object>
+                        </child>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk3/effectPage.ui

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+  <requires lib="gtk" version="3.0" />
+
+  <template class="BurnMyWindowsEffectPage" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="hexpand">1</property>
+    <property name="spacing">10</property>
+
+    <child>
+      <object class="GtkBox">
+        <child>
+          <object class="GtkLabel" id="label">
+            <property name="xalign">0</property>
+            <property name="hexpand">1</property>
+            <style>
+              <class name="large-title" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button">
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkBox">
+                <property name="margin_start">8</property>
+                <property name="margin_end">8</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon_name">media-playback-start-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="halign">start</property>
+                    <property name="label" translatable="yes">Preview this Effect</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <style>
+              <class name="suggested-action" />
+              <class name="pill-button" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </template>
+
+</interface>

resources/ui/gtk3/prefs.ui

@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+  <requires lib="gtk" version="3.0" />
+
+  <menu id="close-effect-menu"></menu>
+  <menu id="open-effect-menu"></menu>
+
+  <object class="GtkMenuButton" id="menu-button">
+    <property name="menu-model">main-menu</property>
+    <property name="visible">1</property>
+    <child>
+      <object class="GtkImage">
+        <property name="icon-name">open-menu-symbolic</property>
+        <property name="visible">1</property>
+        <property name="icon-size">1</property>
+      </object>
+    </child>
+  </object>
+
+  <object class="GtkBox" id="settings-widget">
+    <child>
+      <object class="GtkStackSidebar">
+        <property name="stack">main-stack</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="main-stack">
+        <property name="transition-type">slide-up-down</property>
+        <property name="hexpand">1</property>
+
+        <child>
+          <object class="GtkBox" id="general-prefs">
+            <property name="orientation">vertical</property>
+            <property name="margin-start">60</property>
+            <property name="margin-end">60</property>
+            <property name="margin-top">30</property>
+            <property name="margin-bottom">30</property>
+
+            <child>
+              <object class="GtkImage">
+                <property name="valign">center</property>
+                <property name="icon-name">burn-my-windows-symbolic</property>
+                <property name="pixel_size">128</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
+                <property name="margin-top">8</property>
+                <property name="margin-bottom">6</property>
+                <style>
+                  <class name="large-title" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">If you like this extension, recommend it to your friends :)</property>
+                <property name="margin-bottom">36</property>
+              </object>
+            </child>
+
+
+            <child>
+              <object class="GtkFrame">
+                <child>
+                  <object class="GtkListBox">
+                    <property name="selection-mode">none</property>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="margin-start">10</property>
+                        <property name="margin-end">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <property name="spacing">3</property>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Open Window Animation</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>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkMenuButton" id="open-effect-button">
+                                <property name="menu-model">open-effect-menu</property>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="spacing">8</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Choose Effects</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="icon-name">pan-down-symbolic</property>
+                                        <property name="icon-size">1</property>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="margin-start">10</property>
+                        <property name="margin-end">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">vertical</property>
+                                <property name="spacing">3</property>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Close Window Animation</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>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkMenuButton" id="close-effect-button">
+                                <property name="menu-model">close-effect-menu</property>
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="spacing">8</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Choose Effects</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="icon-name">pan-down-symbolic</property>
+                                        <property name="icon-size">1</property>
+                                      </object>
+                                    </child>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="margin-start">10</property>
+                        <property name="margin-end">10</property>
+                        <property name="margin-top">10</property>
+                        <property name="margin-bottom">10</property>
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="spacing">8</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Also Add Effects to Dialogs</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="GtkSwitch" id="destroy-dialogs">
+                                <property name="halign">end</property>
+                                <property name="valign">center</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="reset-destroy-dialogs">
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="icon-name">edit-clear-symbolic</property>
+                                    <property name="icon-size">1</property>
+                                  </object>
+                                </child>
+                                <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                                <style>
+                                  <class name="flat" />
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">general</property>
+            <property name="title" translatable="yes">General Options</property>
+          </packing>
+
+        </child>
+
+        <!-- Stack pages are inserted here -->
+
+      </object>
+    </child>
+  </object>
+
+
+</interface>

resources/ui/gtk4.ui

@@ -1,891 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface domain="desktop-cube">
-  <requires lib="gtk" version="4.0" />
-
-  <object class="GtkListStore" id="animation-mode-list">
-    <columns>
-      <column type="gchararray" />
-      <column type="gchararray" />
-    </columns>
-    <data>
-      <row>
-        <col id="0">Fire</col>
-        <col id="1">fire</col>
-      </row>
-      <row>
-        <col id="0">Matrix</col>
-        <col id="1">matrix</col>
-      </row>
-      <row>
-        <col id="0">TV Effect</col>
-        <col id="1">tv</col>
-      </row>
-      <row>
-        <col id="0">T-Rex Attack</col>
-        <col id="1">trex</col>
-      </row>
-    </data>
-  </object>
-
-  <menu id="main-menu">
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">Visit Homepage</attribute>
-        <attribute name="action">prefs.homepage</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Report a Bug</attribute>
-        <attribute name="action">prefs.bugs</attribute>
-      </item>
-    </section>
-    <section>
-      <submenu>
-        <attribute name="label" translatable="yes">Donate</attribute>
-        <item>
-          <attribute name="label" translatable="yes">Via PayPal</attribute>
-          <attribute name="action">prefs.donate-paypal</attribute>
-        </item>
-        <item>
-          <attribute name="label" translatable="yes">Via GitHub</attribute>
-          <attribute name="action">prefs.donate-github</attribute>
-        </item>
-      </submenu>
-    </section>
-  </menu>
-
-  <object class="GtkMenuButton" id="menu-button">
-    <property name="menu-model">main-menu</property>
-    <property name="icon-name">open-menu-symbolic</property>
-  </object>
-
-  <object class="GtkScrolledWindow" id="settings-widget">
-    <property name="hscrollbar-policy">never</property>
-    <property name="min-content-height">200</property>
-    <property name="hexpand">0</property>
-    <property name="vexpand">1</property>
-    <child>
-      <object class="GtkViewport">
-        <property name="scroll-to-focus">1</property>
-        <child>
-          <object class="GtkBox">
-            <property name="orientation">vertical</property>
-            <property name="margin-start">60</property>
-            <property name="margin-end">60</property>
-            <property name="margin-top">30</property>
-            <property name="margin-bottom">30</property>
-
-            <child>
-              <object class="GtkLabel">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <property name="label">General Options</property>
-                <property name="xalign">0</property>
-                <style>
-                  <class name="title-4" />
-                </style>
-              </object>
-            </child>
-
-
-            <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">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Close Window Animation</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="GtkComboBox" id="close-animation">
-                                <property name="valign">center</property>
-                                <property name="model">animation-mode-list</property>
-                                <property name="id_column">1</property>
-                                <property name="active_id">fire</property>
-                                <child>
-                                  <object class="GtkCellRendererText" />
-                                  <attributes>
-                                    <attribute name="text">0</attribute>
-                                  </attributes>
-                                </child>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-close-animation">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="destroy-animation-time">
-                                    <property name="upper">10000</property>
-                                    <property name="lower">500</property>
-                                    <property name="step-increment">10</property>
-                                    <property name="page-increment">100</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-animation-time">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Also Burn Dialogs</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="GtkSwitch" id="destroy-dialogs">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-destroy-dialogs">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Fire Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkMenuButton" id="fire-preset-button">
-                    <property name="label">Choose a Preset</property>
-                    <property name="has-frame">0</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <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">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="flame-scale">
-                                    <property name="upper">3</property>
-                                    <property name="lower">0.1</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-scale">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Speed</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="flame-movement-speed">
-                                    <property name="upper">2.0</property>
-                                    <property name="lower">-2.0</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-flame-movement-speed">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Gradient</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="GtkColorButton" id="fire-color-1">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-2">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-3">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-4">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkColorButton" id="fire-color-5">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-fire-colors">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">Matrix Animation Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <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">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Scale</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="matrix-scale">
-                                    <property name="upper">50</property>
-                                    <property name="lower">5</property>
-                                    <property name="step-increment">1</property>
-                                    <property name="page-increment">5</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-scale">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Randomness</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="matrix-randomness">
-                                    <property name="upper">1.0</property>
-                                    <property name="lower">0.0</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-randomness">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Trail Color</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="GtkColorButton" id="matrix-trail-color">
-                                <property name="use_alpha">0</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-trail-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Tip Color</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="GtkColorButton" id="matrix-tip-color">
-                                <property name="use_alpha">0</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-matrix-tip-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">T-Rex Attack Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <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">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Claw Scratch Scale</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">1</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="claw-scratch-scale">
-                                    <property name="upper">10</property>
-                                    <property name="lower">0.1</property>
-                                    <property name="step-increment">0.1</property>
-                                    <property name="page-increment">1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-claw-scratch-scale">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Claw Scratch Count</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">0</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="claw-scratch-count">
-                                    <property name="upper">50</property>
-                                    <property name="lower">1</property>
-                                    <property name="step-increment">1</property>
-                                    <property name="page-increment">10</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-claw-scratch-count">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Warp Effect</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="GtkScale">
-                                <property name="halign">end</property>
-                                <property name="valign">center</property>
-                                <property name="draw-value">1</property>
-                                <property name="digits">2</property>
-                                <property name="value-pos">left</property>
-                                <property name="width-request">300</property>
-                                <property name="adjustment">
-                                  <object class="GtkAdjustment" id="claw-scratch-warp">
-                                    <property name="upper">1</property>
-                                    <property name="lower">0</property>
-                                    <property name="step-increment">0.01</property>
-                                    <property name="page-increment">0.1</property>
-                                  </object>
-                                </property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-claw-scratch-warp">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GtkListBoxRow">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Flash Color</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="GtkColorButton" id="claw-scratch-color">
-                                <property name="use_alpha">1</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-claw-scratch-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkBox">
-                <property name="margin-top">30</property>
-                <property name="margin-bottom">10</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label">TV Effect Options</property>
-                    <property name="xalign">0</property>
-                    <property name="hexpand">1</property>
-                    <style>
-                      <class name="title-4" />
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-
-            <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">
-                        <property name="activatable">0</property>
-                        <child>
-                          <object class="GtkBox">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="label" translatable="yes">Color</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="GtkColorButton" id="tv-effect-color">
-                                <property name="use_alpha">0</property>
-                                <property name="show_editor">1</property>
-                              </object>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="reset-tv-effect-color">
-                                <property name="icon-name">edit-clear-symbolic</property>
-                                <property name="tooltip-text">Reset to Default Value</property>
-                                <style>
-                                  <class name="flat" />
-                                </style>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                  </object>
-                </child>
-              </object>
-            </child>
-
-
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-
-
-</interface>

resources/ui/gtk4/BrokenGlass.ui

@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="broken-glass-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-broken-glass-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="broken-glass-scale">
+                            <property name="upper">5</property>
+                            <property name="lower">0.2</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-broken-glass-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Gravity</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="broken-glass-gravity">
+                            <property name="upper">2.0</property>
+                            <property name="lower">-2.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-broken-glass-gravity">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Blow Force</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="broken-glass-blow-force">
+                            <property name="upper">2.0</property>
+                            <property name="lower">-2.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-broken-glass-blow-force">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">Shatter From Pointer Location</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">The shards will fly away from where your mouse pointer was when closing the window.</property>
+                            <property name="xalign">0</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">1</property>
+                            <property name="wrap">1</property>
+                            <style>
+                              <class name="dim-label" />
+                              <class name="caption" />
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="broken-glass-use-pointer">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-broken-glass-use-pointer">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/EnergizeA.ui

@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-a-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-a-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="energize-a-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-a-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/EnergizeB.ui

@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-b-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="energize-b-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="energize-b-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-energize-b-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/Fire.ui

@@ -0,0 +1,297 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Presets</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="GtkMenuButton" id="fire-preset-button">
+                        <property name="label">Choose a Preset</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="fire-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="flame-scale">
+                            <property name="upper">3</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Speed</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="flame-movement-speed">
+                            <property name="upper">2.0</property>
+                            <property name="lower">-2.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-movement-speed">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">3D Noise</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">Creates a more dynamic fire but requires more GPU power.</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>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSwitch" id="flame-3d-noise">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-flame-3d-noise">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Gradient</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="GtkColorButton" id="fire-color-1">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-2">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-3">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-4">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkColorButton" id="fire-color-5">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-fire-colors">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+
+</interface>

resources/ui/gtk4/Matrix.ui

@@ -0,0 +1,276 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-scale">
+                            <property name="upper">50</property>
+                            <property name="lower">5</property>
+                            <property name="step-increment">1</property>
+                            <property name="page-increment">5</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Randomness</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-randomness">
+                            <property name="upper">1.0</property>
+                            <property name="lower">0.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-randomness">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Vertical Overshooting</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="matrix-overshoot">
+                            <property name="upper">1.0</property>
+                            <property name="lower">0.0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-overshoot">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Trail Color</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="GtkColorButton" id="matrix-trail-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-trail-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Tip Color</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="GtkColorButton" id="matrix-tip-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-matrix-tip-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+</interface>

resources/ui/gtk4/TRexAttack.ui

@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="trex-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-trex-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Claw Scratch Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">1</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.1</property>
+                            <property name="page-increment">1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Claw Scratch Count</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-count">
+                            <property name="upper">50</property>
+                            <property name="lower">1</property>
+                            <property name="step-increment">1</property>
+                            <property name="page-increment">10</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-count">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Warp Effect</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="claw-scratch-warp">
+                            <property name="upper">1</property>
+                            <property name="lower">0</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-warp">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Flash Color</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="GtkColorButton" id="claw-scratch-color">
+                        <property name="use_alpha">1</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-claw-scratch-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </object>
+
+</interface>

resources/ui/gtk4/TVEffect.ui

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="tv-animation-time">
+                            <property name="upper">5000</property>
+                            <property name="lower">100</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="tv-effect-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-tv-effect-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/Wisps.ui

@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+
+  <object class="GtkBox" 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">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Animation Time [ms]</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">0</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="wisps-animation-time">
+                            <property name="upper">10000</property>
+                            <property name="lower">500</property>
+                            <property name="step-increment">10</property>
+                            <property name="page-increment">100</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-animation-time">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Scale</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="GtkScale">
+                        <property name="halign">end</property>
+                        <property name="valign">center</property>
+                        <property name="draw-value">1</property>
+                        <property name="digits">2</property>
+                        <property name="value-pos">left</property>
+                        <property name="width-request">300</property>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment" id="wisps-scale">
+                            <property name="upper">10</property>
+                            <property name="lower">0.1</property>
+                            <property name="step-increment">0.01</property>
+                            <property name="page-increment">0.1</property>
+                          </object>
+                        </property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-scale">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkListBoxRow">
+                <property name="activatable">0</property>
+                <child>
+                  <object class="GtkBox">
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label" translatable="yes">Color</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="GtkColorButton" id="wisps-color">
+                        <property name="use_alpha">0</property>
+                        <property name="show_editor">1</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="reset-wisps-color">
+                        <property name="icon-name">edit-clear-symbolic</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                        <style>
+                          <class name="flat" />
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+          </object>
+        </child>
+      </object>
+    </child>
+
+
+  </object>
+
+</interface>

resources/ui/gtk4/effectPage.ui

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+  <requires lib="gtk" version="4.0" />
+
+  <template class="BurnMyWindowsEffectPage" parent="GtkBox">
+    <property name="orientation">vertical</property>
+    <property name="margin-top">60</property>
+    <property name="margin-bottom">60</property>
+    <property name="margin-start">60</property>
+    <property name="margin-end">60</property>
+    <property name="hexpand">1</property>
+    <property name="spacing">10</property>
+
+    <child>
+      <object class="GtkBox">
+        <child>
+          <object class="GtkLabel" id="label">
+            <property name="xalign">0</property>
+            <property name="hexpand">1</property>
+            <style>
+              <class name="large-title" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button">
+            <property name="valign">center</property>
+            <property name="child">
+              <object class="GtkBox">
+                <property name="margin_start">8</property>
+                <property name="margin_end">8</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon_name">media-playback-start-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="halign">start</property>
+                    <property name="label" translatable="yes">Preview this Effect</property>
+                  </object>
+                </child>
+              </object>
+            </property>
+            <style>
+              <class name="suggested-action" />
+              <class name="pill-button" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </template>
+
+</interface>

resources/ui/gtk4/prefs.ui

@@ -0,0 +1,212 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface domain="burn-my-windows">
+  <requires lib="gtk" version="4.0" />
+
+  <menu id="close-effect-menu"></menu>
+  <menu id="open-effect-menu"></menu>
+
+  <object class="GtkMenuButton" id="menu-button">
+    <property name="menu-model">main-menu</property>
+    <property name="icon-name">open-menu-symbolic</property>
+  </object>
+
+  <object class="GtkBox" id="settings-widget">
+    <child>
+      <object class="GtkStackSidebar">
+        <property name="stack">main-stack</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="main-stack">
+        <property name="transition-type">slide-up-down</property>
+        <property name="hexpand">1</property>
+
+        <child>
+          <object class="GtkStackPage">
+            <property name="name">general</property>
+            <property name="title" translatable="yes">General Options</property>
+
+            <property name="child">
+              <object class="GtkBox" id="general-prefs">
+                <property name="orientation">vertical</property>
+                <property name="margin-start">60</property>
+                <property name="margin-end">60</property>
+                <property name="margin-top">60</property>
+                <property name="margin-bottom">60</property>
+
+                <child>
+                  <object class="GtkImage">
+                    <property name="valign">center</property>
+                    <property name="icon-name">burn-my-windows-symbolic</property>
+                    <property name="pixel_size">128</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
+                    <property name="margin-top">8</property>
+                    <property name="margin-bottom">6</property>
+                    <style>
+                      <class name="large-title" />
+                    </style>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">If you like this extension, recommend it to your friends :)</property>
+                    <property name="margin-bottom">36</property>
+                  </object>
+                </child>
+
+                <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">
+                            <property name="activatable">0</property>
+                            <child>
+                              <object class="GtkBox">
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="orientation">vertical</property>
+                                    <property name="spacing">3</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Open Window Animation</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>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkMenuButton" id="open-effect-button">
+                                    <property name="label" translatable="yes">Choose Effects</property>
+                                    <property name="menu-model">open-effect-menu</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                        <child>
+                          <object class="GtkListBoxRow">
+                            <property name="activatable">0</property>
+                            <child>
+                              <object class="GtkBox">
+                                <child>
+                                  <object class="GtkBox">
+                                    <property name="orientation">vertical</property>
+                                    <property name="spacing">3</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Close Window Animation</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>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkMenuButton" id="close-effect-button">
+                                    <property name="label" translatable="yes">Choose Effects</property>
+                                    <property name="menu-model">close-effect-menu</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                        <child>
+                          <object class="GtkListBoxRow">
+                            <property name="activatable">0</property>
+                            <child>
+                              <object class="GtkBox">
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="label" translatable="yes">Also Add Effects to Dialogs</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="GtkSwitch" id="destroy-dialogs">
+                                    <property name="halign">end</property>
+                                    <property name="valign">center</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkButton" id="reset-destroy-dialogs">
+                                    <property name="icon-name">edit-clear-symbolic</property>
+                                    <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+                                    <style>
+                                      <class name="flat" />
+                                    </style>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+              </object>
+            </property>
+          </object>
+        </child>
+
+        <!-- Stack pages are inserted here -->
+
+      </object>
+    </child>
+  </object>
+
+</interface>

schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml

@@ -1,27 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <schemalist>
 
-  <enum id='org.gnome.shell.extensions.burn-my-windows.AnimationType'>
-    <value value='1' nick='fire' />
-    <value value='2' nick='matrix' />
-    <value value='3' nick='tv' />
-    <value value='4' nick='trex' />
-  </enum>
-
   <schema path="/org/gnome/shell/extensions/burn-my-windows/" id="org.gnome.shell.extensions.burn-my-windows">
 
-    <key name="close-animation" enum="org.gnome.shell.extensions.burn-my-windows.AnimationType">
-      <default>"fire"</default>
-      <summary>Close Animation</summary>
-      <description>The animation used for window closing.</description>
-    </key>
-
-
-    <key name="destroy-animation-time" type="i">
-      <default>1500</default>
-      <summary>Destroy Animation Time</summary>
-      <description>The time it takes to burn the windows.</description>
-    </key>
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- General Options                                                               -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
     <key name="destroy-dialogs" type="b">
       <default>false</default>
@@ -29,16 +13,56 @@
       <description>Set to true to burn dialogs as well.</description>
     </key>
 
+    <key name="close-preview-effect" type="s">
+      <default>""</default>
+      <summary>Close Preview Effect</summary>
+      <description>The effect with this nick will be used for the next window-close animation.</description>
+    </key>
+
+    <key name="open-preview-effect" type="s">
+      <default>""</default>
+      <summary>Open Preview Effect</summary>
+      <description>The effect with this nick will be used for the next window-open animation.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Fire Options                                                                  -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="fire-close-effect" type="b">
+      <default>true</default>
+      <summary>Fire Close Effect</summary>
+      <description>Use the fire effect for window closing.</description>
+    </key>
+
+    <key name="fire-open-effect" type="b">
+      <default>false</default>
+      <summary>Fire Open Effect</summary>
+      <description>Use the fire effect for window opening.</description>
+    </key>
+
+    <key name="fire-animation-time" type="i">
+      <default>1500</default>
+      <summary>Fire Animation Time</summary>
+      <description>The time the fire effect takes.</description>
+    </key>
+
     <key name="flame-movement-speed" type="d">
       <default>0.5</default>
-      <summary>Flame Movement Speed</summary>
-      <description>The speed at which the flames move.</description>
+      <summary>Fire Movement Speed</summary>
+      <description>The speed at which the fire moves.</description>
     </key>
 
     <key name="flame-scale" type="d">
       <default>1.0</default>
-      <summary>Flame Scale</summary>
-      <description>The size of the flames.</description>
+      <summary>Fire Scale</summary>
+      <description>The size of the fire.</description>
+    </key>
+
+    <key name="flame-3d-noise" type="b">
+      <default>false</default>
+      <summary>Fire 3D Noise</summary>
+      <description>Use a 3D noise for the fire.</description>
     </key>
 
     <key name="fire-color-1" type="s">
@@ -71,6 +95,27 @@
       <description>The fifth color of the fire gradient.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Matrix Options                                                                -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="matrix-close-effect" type="b">
+      <default>false</default>
+      <summary>Matrix Close Effect</summary>
+      <description>Use the matrix effect for window closing.</description>
+    </key>
+
+    <key name="matrix-open-effect" type="b">
+      <default>false</default>
+      <summary>Matrix Open Effect</summary>
+      <description>Use the matrix effect for window opening.</description>
+    </key>
+
+    <key name="matrix-animation-time" type="i">
+      <default>1500</default>
+      <summary>Matrix Animation Time</summary>
+      <description>The time the matrix effect takes.</description>
+    </key>
 
     <key name="matrix-scale" type="i">
       <default>20</default>
@@ -96,6 +141,33 @@
       <description>The color matrix trails.</description>
     </key>
 
+    <key name="matrix-overshoot" type="d">
+      <default>0.25</default>
+      <summary>Matrix Overshoot</summary>
+      <description>The vertical overshooting of the matrix effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- TV Effect Options                                                             -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="tv-close-effect" type="b">
+      <default>false</default>
+      <summary>TV Close Effect</summary>
+      <description>Use the tv effect for window closing.</description>
+    </key>
+
+    <key name="tv-open-effect" type="b">
+      <default>false</default>
+      <summary>TV Open Effect</summary>
+      <description>Use the tv effect for window opening.</description>
+    </key>
+
+    <key name="tv-animation-time" type="i">
+      <default>400</default>
+      <summary>TV Animation Time</summary>
+      <description>The time the tv effect takes.</description>
+    </key>
 
     <key name="tv-effect-color" type="s">
       <default>"rgb(255, 255, 255)"</default>
@@ -103,6 +175,27 @@
       <description>The color of the TV effect.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- T-Rex Attack Options                                                          -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="trex-close-effect" type="b">
+      <default>false</default>
+      <summary>T-Rex Close Effect</summary>
+      <description>Use the trex effect for window closing.</description>
+    </key>
+
+    <key name="trex-open-effect" type="b">
+      <default>false</default>
+      <summary>T-Rex Open Effect</summary>
+      <description>Use the trex effect for window opening.</description>
+    </key>
+
+    <key name="trex-animation-time" type="i">
+      <default>1000</default>
+      <summary>T-Rex Animation Time</summary>
+      <description>The time the trex effect takes.</description>
+    </key>
 
     <key name="claw-scratch-color" type="s">
       <default>"rgb(170, 0, 0)"</default>
@@ -128,6 +221,153 @@
       <description>Number of claw scratches drawn on top of each other.</description>
     </key>
 
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Energize A Options                                                            -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="energize-a-close-effect" type="b">
+      <default>false</default>
+      <summary>Energize A Close Effect</summary>
+      <description>Use the Energize A effect for window closing.</description>
+    </key>
+
+    <key name="energize-a-open-effect" type="b">
+      <default>false</default>
+      <summary>Energize A Open Effect</summary>
+      <description>Use the Energize A effect for window opening.</description>
+    </key>
+
+    <key name="energize-a-animation-time" type="i">
+      <default>2000</default>
+      <summary>Energize A Animation Time</summary>
+      <description>The time the Energize A effect takes.</description>
+    </key>
+
+    <key name="energize-a-scale" type="d">
+      <default>1.0</default>
+      <summary>Energize A Scale</summary>
+      <description>The size of the effect.</description>
+    </key>
+
+    <key name="energize-a-color" type="s">
+      <default>"rgb(255, 200, 50)"</default>
+      <summary>Energize A Color</summary>
+      <description>The color of the effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Energize B Options                                                            -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="energize-b-close-effect" type="b">
+      <default>false</default>
+      <summary>Energize B Close Effect</summary>
+      <description>Use the Energize B effect for window closing.</description>
+    </key>
+
+    <key name="energize-b-open-effect" type="b">
+      <default>false</default>
+      <summary>Energize B Open Effect</summary>
+      <description>Use the Energize B effect for window opening.</description>
+    </key>
+
+    <key name="energize-b-animation-time" type="i">
+      <default>1000</default>
+      <summary>Energize B Animation Time</summary>
+      <description>The time the Energize B effect takes.</description>
+    </key>
+
+    <key name="energize-b-scale" type="d">
+      <default>1.0</default>
+      <summary>Energize B Scale</summary>
+      <description>The size of the effect.</description>
+    </key>
+
+    <key name="energize-b-color" type="s">
+      <default>"rgb(160, 180, 255)"</default>
+      <summary>Energize B Color</summary>
+      <description>The color of the effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Wisps Effect Options                                                          -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="wisps-close-effect" type="b">
+      <default>false</default>
+      <summary>Wisps Close Effect</summary>
+      <description>Use the wisps effect for window closing.</description>
+    </key>
+
+    <key name="wisps-open-effect" type="b">
+      <default>false</default>
+      <summary>Wisps Open Effect</summary>
+      <description>Use the wisps effect for window opening.</description>
+    </key>
+
+    <key name="wisps-animation-time" type="i">
+      <default>1500</default>
+      <summary>Wisps Animation Time</summary>
+      <description>The time the wisps effect takes.</description>
+    </key>
+
+    <key name="wisps-scale" type="d">
+      <default>1.0</default>
+      <summary>Wisps Scale</summary>
+      <description>The size of the wisps.</description>
+    </key>
+
+    <key name="wisps-color" type="s">
+      <default>"rgb(255, 100, 200)"</default>
+      <summary>Wisps Effect Color</summary>
+      <description>The color of the wisps effect.</description>
+    </key>
+
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+    <!-- Broken Glass Effect Options                                                   -->
+    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+    <key name="broken-glass-close-effect" type="b">
+      <default>false</default>
+      <summary>Broken Glass Close Effect</summary>
+      <description>Use the broken glass effect for window closing.</description>
+    </key>
+
+    <key name="broken-glass-open-effect" type="b">
+      <default>false</default>
+      <summary>Broken Glass Open Effect</summary>
+      <description>Use the broken glass effect for window opening.</description>
+    </key>
+
+    <key name="broken-glass-animation-time" type="i">
+      <default>1000</default>
+      <summary>Broken Glass Animation Time</summary>
+      <description>The time the broken glass effect takes.</description>
+    </key>
+
+    <key name="broken-glass-scale" type="d">
+      <default>1.0</default>
+      <summary>Broken Glass Scale</summary>
+      <description>The size of the broken glass effect.</description>
+    </key>
+
+    <key name="broken-glass-gravity" type="d">
+      <default>-1.0</default>
+      <summary>Broken Glass Gravity</summary>
+      <description>The gravity of the broken glass effect.</description>
+    </key>
+
+    <key name="broken-glass-blow-force" type="d">
+      <default>0.5</default>
+      <summary>Broken Glass Blow Force</summary>
+      <description>The blow force of the broken glass effect.</description>
+    </key>
+
+    <key name="broken-glass-use-pointer" type="b">
+      <default>false</default>
+      <summary>Broken Glass Use Pointer</summary>
+      <description>Use the pointer location for the broken glass effect.</description>
+    </key>
 
   </schema>
 

src/BrokenGlass.js

@@ -0,0 +1,242 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect shatters the window into pieces. For an explanation how this works, look //
+// further down in this file into the documentation of the Shader class. This effect is //
+// not available on GNOME 3.3x, due to the limitation described in the documentation    //
+// of vfunc_paint_target further down in this file.                                     //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var BrokenGlass = class BrokenGlass {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // This effect is only available on GNOME Shell 40+.
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'broken-glass';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Broken Glass');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource('/ui/gtk4/BrokenGlass.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('broken-glass-animation-time');
+    dialog.bindAdjustment('broken-glass-scale');
+    dialog.bindAdjustment('broken-glass-gravity');
+    dialog.bindAdjustment('broken-glass-blow-force');
+    dialog.bindSwitch('broken-glass-use-pointer');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('broken-glass-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(actor, settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows are set to twice their original size, so that
+  // we have some space to draw the shards. We also set the animation mode to "Linear".
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 1},
+      'scale-x': {from: 2.0, to: 2.0, mode: 1},
+      'scale-y': {from: 2.0, to: 2.0, mode: 1}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const {Clutter, GdkPixbuf, Cogl} = imports.gi;
+  const shaderSnippets             = Me.imports.src.shaderSnippets;
+
+  // This shader creates a complex-looking effect with rather simple means. Here is how it
+  // works: The window is drawn five times on top of each other (see the SHARD_LAYERS
+  // constant in the GLSL code). Each layer only draws some of the shards, all layers
+  // combined make up the entire window. The layers are then scaled, rotated, and moved
+  // independently from each other - this creates the impression that all shards are
+  // moving independently. In reality, there are only five groups of shards! Which shard
+  // belongs to which layer is defined by the green channel of the texture
+  // resources/img/shards.png. The red channel of the texture contains the distance to the
+  // shard edges. This information is used to fade out the shards.
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(actor, settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the shards texture. As the shader is re-created for each window animation,
+      // this texture is also re-created each time. This could be improved in the future!
+      const shardData    = GdkPixbuf.Pixbuf.new_from_resource('/img/shards.png');
+      this._shardTexture = new Clutter.Image();
+      this._shardTexture.set_data(
+          shardData.get_pixels(), Cogl.PixelFormat.RGB_888, shardData.width,
+          shardData.height, shardData.rowstride);
+
+      // Usually, the shards fly away from the center of the window.
+      let epicenterX = 0.5;
+      let epicenterY = 0.5;
+
+      // However, if this option is set, we use the mouse pointer position.
+      if (settings.get_boolean('broken-glass-use-pointer')) {
+        const [x, y]               = global.get_pointer();
+        const [ok, localX, localY] = actor.transform_stage_point(x, y);
+        epicenterX                 = localX / actor.width;
+        epicenterY                 = localY / actor.height;
+      }
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+
+        uniform sampler2D uShardTexture;
+
+        const vec2  SEED         = vec2(${Math.random()}, ${Math.random()});
+        const float SHARD_SCALE  = ${settings.get_double('broken-glass-scale')};
+        const float SHARD_LAYERS = 5;
+        const float BLOW_FORCE   = ${settings.get_double('broken-glass-blow-force')};
+        const float ACTOR_SCALE  = 2.0;
+        const float PADDING      = ACTOR_SCALE / 2.0 - 0.5;
+        const vec2  EPICENTER    = vec2(${epicenterX}, ${epicenterY});
+        const float GRAVITY      = ${forOpening ? '-1.0' : '1.0'} * 
+                                   ${settings.get_double('broken-glass-gravity')};
+
+        void main() {
+
+          cogl_color_out = vec4(0, 0, 0, 0);
+
+          float progress = ${forOpening ? '1.0-uProgress' : 'uProgress'};
+
+          // Draw the individual shard layers.
+          for (float i=0; i<SHARD_LAYERS; ++i) {
+
+            // To enable drawing shards outside of the window bounds, the actor was scaled
+            // by ACTOR_SCALE. Here we scale and move the texture coordinates so that the
+            // window gets drawn at the correct position again.
+            vec2 coords = cogl_tex_coord_in[0].st * ACTOR_SCALE - PADDING;
+
+            // Scale and rotate around our epicenter.
+            coords -= EPICENTER;
+
+            // Scale each layer a bit differently.
+            coords /= mix(1.0, 1.0 + BLOW_FORCE*(i+2)/SHARD_LAYERS, progress);
+            
+            // Rotate each layer a bit differently.
+            float rotation = (mod(i, 2.0)-0.5)*0.2*progress;
+            coords = vec2(coords.x * cos(rotation) - coords.y * sin(rotation),
+            coords.x * sin(rotation) + coords.y * cos(rotation));
+            
+            // Move down each layer a bit.
+            float gravity = GRAVITY*0.1*(i+1)*progress*progress;
+            coords += vec2(0, gravity);
+
+            // Restore correct position.
+            coords += EPICENTER;
+            
+            // Retrieve information from the shard texture for our layer.
+            vec2 shardCoords = (coords + SEED) * vec2(uSizeX, uSizeY) / SHARD_SCALE / 500.0;
+            vec2 shardMap = texture2D(uShardTexture, shardCoords).rg;
+
+            // The green channel contains a random value in [0..1] for each shard. We
+            // discretize this into SHARD_LAYERS bins and check if our layer falls into
+            // the bin of the current shard.
+            float shardGroup = floor(shardMap.g * SHARD_LAYERS * 0.999);
+
+            if (shardGroup == i) {
+              vec4 windowColor = texture2D(uTexture, coords);
+
+              // Dissolve the shard by using distance information from the red channel.
+              float dissolve = (shardMap.x - pow(progress+0.1, 2)) > 0 ? 1: 0;
+              cogl_color_out = mix(cogl_color_out, windowColor, dissolve);
+            }
+          }
+        }
+      `);
+    };
+
+    // This is overridden to bind the shard texture for drawing. Sadly, this seems to be
+    // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
+    // get_target() back then but this is not wrapped in GJS.
+    // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
+    vfunc_paint_target(node, paint_context) {
+      const pipeline = this.get_pipeline();
+
+      // Use linear filtering for the window texture.
+      pipeline.set_layer_filters(
+          0, Cogl.PipelineFilter.LINEAR, Cogl.PipelineFilter.LINEAR);
+
+      // Bind the shard texture.
+      pipeline.set_layer_texture(1, this._shardTexture.get_texture());
+      pipeline.set_layer_wrap_mode(1, Cogl.PipelineWrapMode.REPEAT);
+      this.set_uniform_value('uShardTexture', 1);
+
+      super.vfunc_paint_target(node, paint_context);
+    }
+  });
+}

src/EnergizeA.js

@@ -0,0 +1,204 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect looks a bit like the transporter effect from TOS.                        //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var EnergizeA = class EnergizeA {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'energize-a';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Energize A');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeA.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('energize-a-animation-time');
+    dialog.bindAdjustment('energize-a-scale');
+    dialog.bindColorButton('energize-a-color');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('energize-a-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should neither be scaled nor faded.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('energize-a-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+      const float FADE_IN_TIME    = 0.3;
+      const float FADE_OUT_TIME   = 0.6;
+      const float HEART_FADE_TIME = 0.3;
+      const float EDGE_FADE_WIDTH = 50;
+
+      // This method returns two values:
+      //  result.x: A mask for the particles.
+      //  result.y: The opacity of the fading window.
+      vec2 getMasks() {
+        float fadeInProgress  = clamp(uProgress/FADE_IN_TIME, 0, 1);
+        float fadeOutProgress = clamp((uProgress-FADE_IN_TIME)/FADE_OUT_TIME, 0, 1);
+        float heartProgress   = clamp((uProgress-(1.0-HEART_FADE_TIME))/HEART_FADE_TIME, 0, 1);
+
+        // Compute mask for the "atom" particles.
+        float dist = length(cogl_tex_coord_in[0].st - 0.5) * 4.0;
+        float atomMask = smoothstep(0.0, 1.0, (fadeInProgress * 2.0 - dist + 1.0));
+        atomMask *= fadeInProgress;
+        atomMask *= smoothstep(1.0, 0.0, fadeOutProgress);
+
+        // Fade-out the masks at the window edges.
+        float edgeFade = getAbsoluteEdgeMask(EDGE_FADE_WIDTH);
+        atomMask *= edgeFade;
+
+        float heartMask = getRelativeEdgeMask(0.5);
+        heartMask = 3.0 * pow(heartMask, 5);
+        heartMask *= fadeOutProgress;
+        heartMask *= 1.0 - heartProgress;
+        atomMask = clamp(heartMask+atomMask, 0, 1);
+
+        // Compute fading window opacity.
+        float windowMask = pow(1.0 - fadeOutProgress, 2.0);
+
+        #if ${forOpening ? '1' : '0'}
+          windowMask = 1.0 - windowMask;
+        #endif
+
+        return vec2(atomMask, windowMask);
+      }
+
+      void main() {
+        
+        vec2 masks       = getMasks();
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec3 effectColor = vec3(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255});
+
+        // Dissolve window to effect color / transparency.
+        cogl_color_out = mix(vec4(effectColor, 1.0) * windowColor.a, windowColor, 0.2 * masks.y + 0.8) * masks.y;
+
+        vec2 scaledUV = (cogl_tex_coord_in[0].st-0.5) * (1.0 + 0.1*uProgress);
+        scaledUV /= ${settings.get_double('energize-a-scale')};
+
+        // Add molecule particles.
+        vec2 uv = scaledUV + vec2(0, 0.1*uTime);
+        uv *= 0.010598 * vec2(0.5*uSizeX, uSizeY);
+        float particles = 0.2 * pow((simplex3D(vec3(uv, 0.0*uTime))), 3.0);
+
+        // Add more molecule particles.
+        for (int i=1; i<=3;++i) {
+          vec2 uv = scaledUV * 0.12154 / pow(1.5, i) * vec2(uSizeX, uSizeY);
+          float atoms = simplex3D(vec3(uv, 2.0*uTime/i));
+          particles += 0.5 * pow(0.2 * (1.0 / (1.0 - atoms)-1.0), 2);
+        }
+
+        cogl_color_out.rgb += effectColor * particles * masks.x;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(masks, 0.0, 1.0);
+        // cogl_color_out = vec4(vec3(masks.x), 1.0);
+        // cogl_color_out = vec4(vec3(masks.y), 1.0);
+        // cogl_color_out = vec4(vec3(particles), 1.0);
+      }
+      `);
+    };
+  });
+}

src/EnergizeB.js

@@ -0,0 +1,227 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect looks a bit like the transporter effect from TNG.                        //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var EnergizeB = class EnergizeB {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'energize-b';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Energize B');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeB.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('energize-b-animation-time');
+    dialog.bindAdjustment('energize-b-scale');
+    dialog.bindColorButton('energize-b-color');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('energize-b-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should neither be scaled nor faded.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('energize-b-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED         = vec2(${Math.random()}, ${Math.random()});
+      const float SHOWER_TIME  = 0.3;
+      const float SHOWER_WIDTH = 0.3;
+      const float STREAK_TIME  = 0.6;
+      const float EDGE_FADE    = 50;
+      const float SCALE        = ${settings.get_double('energize-b-scale')};
+
+      // This method returns four values:
+      //  result.x: A mask for the particles which lead the shower.
+      //  result.y: A mask for the streaks which follow the shower particles.
+      //  result.z: A mask for the final "atom" particles.
+      //  result.w: The opacity of the fading window.
+      vec4 getMasks() {
+        float showerProgress = uProgress/SHOWER_TIME;
+        float streakProgress = clamp((uProgress-SHOWER_TIME)/STREAK_TIME, 0, 1);
+        float fadeProgress  = clamp((uProgress-SHOWER_TIME)/(1.0 - SHOWER_TIME), 0, 1);
+
+        // Gradient from top to bottom.
+        float t = cogl_tex_coord_in[0].t;
+
+        // A smooth gradient which moves to the bottom within the showerProgress.
+        float showerMask = smoothstep(1, 0, abs(showerProgress - t - SHOWER_WIDTH) / SHOWER_WIDTH);
+
+        // This is 1 above the streak mask.
+        float streakMask = (showerProgress - t - SHOWER_WIDTH) > 0 ? 1 : 0;
+
+        // Compute mask for the "atom" particles.
+        float atomMask = getRelativeEdgeMask(0.2);
+        atomMask = max(0, atomMask - showerMask);
+        atomMask *= streakMask;
+        atomMask *= sqrt(1-fadeProgress*fadeProgress);
+
+        // Make some particles visible in the streaks.
+        showerMask += 0.05 * streakMask;
+
+        // Add shower mask to streak mask.
+        streakMask = max(streakMask, showerMask);
+
+        // Fade-out the masks at the window edges.
+        float edgeFade = getAbsoluteEdgeMask(EDGE_FADE);
+        streakMask *= edgeFade;
+        showerMask *= edgeFade;
+        
+        // Fade-out the masks from top to bottom.
+        float fade = smoothstep(0.0, 1.0, 1.0 + t - 2.0 * streakProgress);
+        streakMask *= fade;
+        showerMask *= fade;
+
+        // Compute fading window opacity.
+        float windowMask = pow(1.0 - fadeProgress, 2.0);
+
+        #if ${forOpening ? '1' : '0'}
+          windowMask = 1.0 - windowMask;
+        #endif
+
+        return vec4(showerMask, streakMask, atomMask, windowMask);
+      }
+
+      void main() {
+        
+        vec4 masks       = getMasks();
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec3 effectColor = vec3(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255});
+
+        // Dissolve window to effect color / transparency.
+        cogl_color_out = mix(vec4(effectColor, 1.0) * windowColor.a, windowColor, 0.5 * masks.w + 0.5) * masks.w;
+
+        // Add leading shower particles.
+        vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*uProgress/SHOWER_TIME);
+        showerUV *= 0.02 * vec2(uSizeX, uSizeY) / SCALE;
+        float shower = pow(simplex2D(showerUV), 10.0);
+        cogl_color_out.rgb += effectColor * shower * masks.x;
+
+        // Add trailing streak lines.
+        vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -uProgress/SHOWER_TIME);
+        streakUV *= vec2(0.05 * uSizeX, 0.001 * uSizeY) / SCALE;
+        float streaks = simplex2DFractal(streakUV) * 0.5;
+        cogl_color_out.rgb += effectColor * streaks * masks.y;
+
+        // Add glimmering atoms.
+        vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025*uProgress/SHOWER_TIME);
+        atomUV *= 0.2 * vec2(uSizeX, uSizeY) / SCALE;
+        float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0);
+        cogl_color_out.rgb += effectColor * atoms * masks.z;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(masks.rgb, 1.0);
+        // cogl_color_out = vec4(vec3(masks.x), 1.0);
+        // cogl_color_out = vec4(vec3(masks.y), 1.0);
+        // cogl_color_out = vec4(vec3(masks.z), 1.0);
+        // cogl_color_out = vec4(vec3(masks.w), 1.0);
+        // cogl_color_out = vec4(vec3(shower), 1.0);
+        // cogl_color_out = vec4(vec3(streaks), 1.0);
+        // cogl_color_out = vec4(vec3(atoms), 1.0);
+      }
+      `);
+    };
+  });
+}

src/Fire.js

@@ -0,0 +1,352 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const {Gio, GObject} = imports.gi;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect is a homage to the good old Compiz days. However, it is implemented      //
+// quite differently. While Compiz used a particle system, this effect uses a noise     //
+// shader. The noise is moved  vertically over time and mapped to a configurable color  //
+// gradient. It is faded to transparency towards the edges of the window. In addition,  //
+// there are a couple of moving gradients which fade-in or fade-out the fire effect.    //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var Fire = class Fire {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'fire';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Fire');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Fire.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('fire-animation-time');
+    dialog.bindAdjustment('flame-movement-speed');
+    dialog.bindAdjustment('flame-scale');
+    dialog.bindSwitch('flame-3d-noise');
+    dialog.bindColorButton('fire-color-1');
+    dialog.bindColorButton('fire-color-2');
+    dialog.bindColorButton('fire-color-3');
+    dialog.bindColorButton('fire-color-4');
+    dialog.bindColorButton('fire-color-5');
+
+    // The fire-gradient-reset button needs to be bound explicitly.
+    dialog.getBuilder().get_object('reset-fire-colors').connect('clicked', () => {
+      dialog.getSettings().reset('fire-color-1');
+      dialog.getSettings().reset('fire-color-2');
+      dialog.getSettings().reset('fire-color-3');
+      dialog.getSettings().reset('fire-color-4');
+      dialog.getSettings().reset('fire-color-5');
+    });
+
+    // Initialize the fire-preset dropdown.
+    Fire._createFirePresets(dialog);
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('fire-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should neither be scaled nor faded.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
+    };
+  }
+
+  // ----------------------------------------------------------------------- private stuff
+
+  // This populates the preset dropdown menu for the fire options.
+  static _createFirePresets(dialog) {
+    dialog.getBuilder().get_object('settings-widget').connect('realize', (widget) => {
+      const presets = [
+        {
+          name: _('Default Fire'),
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(76, 51, 25, 0.0)',
+          color2: 'rgba(180, 55, 30, 0.7)',
+          color3: 'rgba(255, 76, 38, 0.9)',
+          color4: 'rgba(255, 166, 25, 1)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: _('Hell Fire'),
+          scale: 1.5,
+          speed: 0.2,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(103,7,80,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,200,0)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: _('Dark and Smutty'),
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(36,3,0,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,177,21)',
+          color5: 'rgb(255,238,166)'
+        },
+        {
+          name: _('Cold Breeze'),
+          scale: 1.5,
+          speed: -0.1,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(30,111,180,0.24)',
+          color3: 'rgba(38,181,255,0.54)',
+          color4: 'rgba(34,162,255,0.84)',
+          color5: 'rgb(97,189,255)'
+        },
+        {
+          name: _('Santa is Coming'),
+          scale: 0.4,
+          speed: -0.5,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(208,233,255,0.24)',
+          color3: 'rgba(207,235,255,0.84)',
+          color4: 'rgb(208,243,255)',
+          color5: 'rgb(255,255,255)'
+        }
+      ];
+
+      const menu      = Gio.Menu.new();
+      const group     = Gio.SimpleActionGroup.new();
+      const groupName = 'presets';
+
+      // Add all presets.
+      presets.forEach((preset, i) => {
+        const actionName = 'fire' + i;
+        menu.append(preset.name, groupName + '.' + actionName);
+        let action = Gio.SimpleAction.new(actionName, null);
+
+        // Load the preset on activation.
+        action.connect('activate', () => {
+          dialog.getSettings().set_double('flame-movement-speed', preset.speed);
+          dialog.getSettings().set_double('flame-scale', preset.scale);
+          dialog.getSettings().set_string('fire-color-1', preset.color1);
+          dialog.getSettings().set_string('fire-color-2', preset.color2);
+          dialog.getSettings().set_string('fire-color-3', preset.color3);
+          dialog.getSettings().set_string('fire-color-4', preset.color4);
+          dialog.getSettings().set_string('fire-color-5', preset.color5);
+        });
+
+        group.add_action(action);
+      });
+
+      dialog.getBuilder().get_object('fire-preset-button').set_menu_model(menu);
+
+      const root = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
+      root.insert_action_group(groupName, group);
+    });
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the gradient values from the settings. We directly inject the values in the
+      // GLSL code below. The shader is compiled once for each window-closing anyways. In
+      // the future, we may want to prevent this frequent recompilations of shaders,
+      // though.
+      const gradient = [];
+      for (let i = 1; i <= 5; i++) {
+        const color =
+            Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
+        gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
+            color.blue / 255}, ${color.alpha / 255})`);
+      }
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
+
+        // These may be configurable in the future.
+        const float EDGE_FADE  = 70;
+        const float FADE_WIDTH = 0.1;
+        const float HIDE_TIME  = 0.4;
+        const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
+        const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
+
+        // This maps the input value from [0..1] to a color from the gradient.
+        vec4 getFireColor(float v) {
+          const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
+          const vec4 colors[5] = vec4[](
+            ${gradient[0]},
+            ${gradient[1]},
+            ${gradient[2]},
+            ${gradient[3]},
+            ${gradient[4]}
+          );
+
+          if (v < steps[0]) {
+            return colors[0];
+          }
+
+          for (int i=0; i<4; ++i) {
+            if (v <= steps[i+1]) {
+              return mix(colors[i], colors[i+1], vec4(v - steps[i])/(steps[i+1]-steps[i]));
+            }
+          }
+
+          return colors[4];
+        }
+
+        // This method requires the uniforms from standardUniforms() to be available.
+        // It returns two values: The first is an alpha value which can be used for the window
+        // texture. This gradually dissolves the window from top to bottom. The second can be used
+        // to mask any effect, it will be most opaque where the window is currently fading and
+        // gradually dissolve to zero over time.
+        // hideTime:      A value in [0..1]. It determines the percentage of the animation which
+        //                is spent for hiding the window. 1-hideTime will be spent thereafter for
+        //                dissolving the effect mask.
+        // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
+        // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
+        vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
+          float burnProgress      = clamp(uProgress/hideTime, 0, 1);
+          float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
+
+          // Gradient from top to bottom.
+          float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
+
+          // Visible part of the window. Gradually dissolves towards the bottom.
+          float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
+
+          // Gradient from top burning window.
+          float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
+
+          // Fade-out when the window burned down.
+          if (uProgress > hideTime) {
+            float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
+            effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
+          }
+
+          // Fade at window borders.
+          effectMask *= getAbsoluteEdgeMask(edgeFadeWidth);
+
+          #if ${forOpening ? '1' : '0'}
+            windowMask = 1.0 - windowMask;
+          #endif
+
+          return vec2(windowMask, effectMask);
+        }
+
+        void main() {
+
+          // Get a noise value which moves vertically in time.
+          vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
+          uv.y += uTime * FIRE_SPEED;
+
+          #if ${settings.get_boolean('flame-3d-noise') ? 1 : 0}
+            float noise = simplex3DFractal(vec3(uv*4.0, uTime*FIRE_SPEED*1.5));
+          #else
+            float noise = simplex2DFractal(uv * 4.0);
+          #endif
+
+          // Modulate noise by effect mask.
+          vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
+          noise *= effectMask.y;
+
+          // Map noise value to color.
+          vec4 fire = getFireColor(noise);
+          fire.rgb *= fire.a;
+
+          // Get the window texture and fade it according to the effect mask.
+          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
+
+          // Add the fire to the window.
+          cogl_color_out = cogl_color_out * (1.0 - fire.a) + fire;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(noise), 1);
+          // cogl_color_out = vec4(vec3(effectMask.x), 1);
+          // cogl_color_out = vec4(vec3(effectMask.y), 1);
+        }
+      `);
+    };
+  });
+}

src/Matrix.js

@@ -0,0 +1,252 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The Matrix shader multiplies a grid of random letters with some gradients which are  //
+// moving from top to bottom. The speed of the moving gradients is chosen randomly.     //
+// Also, there is a random delay making the gradients not drop all at the same time.    //
+// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
+// documentation of vfunc_paint_target further down in this file.                       //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var Matrix = class Matrix {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // This effect is only available on GNOME Shell 40+.
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'matrix';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Matrix');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource('/ui/gtk4/Matrix.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('matrix-animation-time');
+    dialog.bindAdjustment('matrix-scale');
+    dialog.bindAdjustment('matrix-randomness');
+    dialog.bindAdjustment('matrix-overshoot');
+    dialog.bindColorButton('matrix-trail-color');
+    dialog.bindColorButton('matrix-tip-color');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('matrix-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should not be faded but scaled vertically to allow for some
+  // overshooting.
+  static tweakTransition(actor, settings, forOpening) {
+    const yScale = 1.0 + settings.get_double('matrix-overshoot');
+    return {
+      'opacity': {from: 255, to: 255, mode: 1},
+      'scale-x': {from: 1.0, to: 1.0, mode: 1},
+      'scale-y': {from: yScale, to: yScale, mode: 1}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const {Clutter, GdkPixbuf, Cogl} = imports.gi;
+  const shaderSnippets             = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the font texture. As the shader is re-created for each window animation,
+      // this texture is also re-created each time. This could be improved in the future!
+      const fontData    = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
+      this._fontTexture = new Clutter.Image();
+      this._fontTexture.set_data(
+          fontData.get_pixels(),
+          fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
+          fontData.width, fontData.height, fontData.rowstride);
+
+      const trailColor =
+          Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
+      const tipColor =
+          Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
+
+      // The technique for this effect was inspired by
+      // https://www.shadertoy.com/view/ldccW4, however the implementation is quite
+      // different as the letters drop only once and there is no need for a noise texture.
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
+
+        uniform sampler2D uFontTexture;
+
+        // These may be configurable in the future.
+        const float EDGE_FADE             = 30;
+        const float FADE_WIDTH            = 150;
+        const float TRAIL_LENGTH          = 0.2;
+        const float FINAL_FADE_START_TIME = 0.8;
+        const float LETTER_TILES          = 16.0;
+        const float LETTER_SIZE           = ${settings.get_int('matrix-scale')};
+        const float LETTER_FLICKER_SPEED  = 2.0;
+        const float RANDOMNESS            = ${settings.get_double('matrix-randomness')};
+        const float OVERSHOOT             = ${settings.get_double('matrix-overshoot')};
+
+        // This returns a flickering grid of random letters.
+        float getText(vec2 fragCoord) {
+          vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
+          vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
+          vec2 block = pixelCoords/LETTER_SIZE - uv;
+
+          // Choose random letter.
+          uv += floor(hash22(floor(hash22(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
+
+          return texture2D(uFontTexture, uv/LETTER_TILES).r;
+        }
+
+        // This returns two values: The first are gradients for the "raindrops" which move
+        // from top to bottom. This is used for fading the letters. The second value is set
+        // to one below each drop and to zero above it. This second value is used for fading
+        // the window texture. 
+        vec2 getRain(vec2 fragCoord) {
+          float column = cogl_tex_coord_in[0].x * uSizeX;
+          column -= mod(column, LETTER_SIZE);
+
+          float delay = fract(sin(column)*78.233) * mix(0.0, 1.0, RANDOMNESS);
+          float speed = fract(cos(column)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
+          
+          float distToDrop  = (uProgress*2-delay)*speed - cogl_tex_coord_in[0].y;
+          
+          float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
+          float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
+          
+          // Fade at window borders.
+          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
+          
+          // Add some variation to the drop start and end position.
+          float shorten = fract(sin(column+42.0)*33.423) * mix(0.0, OVERSHOOT*0.25, RANDOMNESS);
+          rainAlpha *= smoothstep(0, 1, clamp(cogl_tex_coord_in[0].y / shorten, 0, 1));
+          rainAlpha *= smoothstep(0, 1, clamp((1.0 - cogl_tex_coord_in[0].y) / shorten, 0, 1));
+
+          #if ${forOpening ? '1' : '0'}
+            windowAlpha = 1.0 - windowAlpha;
+          #endif
+
+          return vec2(rainAlpha, windowAlpha);
+        }
+
+        void main() {
+
+          vec2 coords = cogl_tex_coord_in[0].st;
+          coords.y = coords.y * (OVERSHOOT + 1.0) - OVERSHOOT * 0.5;
+
+          // Get a cool matrix effect. See comments for those methods above.
+          vec2  rain = getRain(coords);
+          float text = getText(coords);
+
+          // Get the window texture and fade it according to the effect mask.
+          cogl_color_out = texture2D(uTexture, coords) * rain.y;
+
+          // This is used to fade out the remaining trails in the end.
+          float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
+                                    (1-FINAL_FADE_START_TIME), 0, 1);
+          float rainAlpha = finalFade * rain.x;
+
+          // Add the matrix effect to the window.
+          vec3 trailColor = vec3(${trailColor.red / 255}, 
+                                 ${trailColor.green / 255}, 
+                                 ${trailColor.blue / 255});
+          vec3 tipColor =   vec3(${tipColor.red / 255}, 
+                                 ${tipColor.green / 255}, 
+                                 ${tipColor.blue / 255});
+          cogl_color_out.rgb += mix(trailColor, tipColor, min(1, pow(rainAlpha+0.1, 4))) * rainAlpha * text;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(text), 1);
+          // cogl_color_out = vec4(vec3(rain.x), 1);
+          // cogl_color_out = vec4(vec3(rain.y), 1);
+        }
+      `);
+    };
+
+    // This is overridden to bind the font texture for drawing. Sadly, this seems to be
+    // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
+    // get_target() back then but this is not wrapped in GJS.
+    // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
+    vfunc_paint_target(node, paint_context) {
+      const pipeline = this.get_pipeline();
+      pipeline.set_layer_texture(1, this._fontTexture.get_texture());
+      this.set_uniform_value('uFontTexture', 1);
+      super.vfunc_paint_target(node, paint_context);
+    }
+  });
+}

src/TRexAttack.js

@@ -0,0 +1,254 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect tears your windows apart with a series of violent scratches!             //
+// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
+// documentation of vfunc_paint_target further down in this file.                       //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var TRexAttack = class TRexAttack {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // This effect is only available on GNOME Shell 40+.
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'trex';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('T-Rex Attack');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource('/ui/gtk4/TRexAttack.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('trex-animation-time');
+    dialog.bindColorButton('claw-scratch-color');
+    dialog.bindAdjustment('claw-scratch-scale');
+    dialog.bindAdjustment('claw-scratch-count');
+    dialog.bindAdjustment('claw-scratch-warp');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('trex-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, we slightly increase the window's scale as part of the warp effect.
+  static tweakTransition(actor, settings, forOpening) {
+    const warp = 1.0 + 0.5 * settings.get_double('claw-scratch-warp');
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: forOpening ? warp : 1.0, to: forOpening ? 1.0 : warp, mode: 3},
+      'scale-y': {from: forOpening ? warp : 1.0, to: forOpening ? 1.0 : warp, mode: 3}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const {Clutter, GdkPixbuf, Cogl} = imports.gi;
+  const shaderSnippets             = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the claw texture. As the shader is re-created for each window animation,
+      // this texture is also re-created each time. This could be improved in the future!
+      // See assets/README.md for how this texture was created.
+      const clawData    = GdkPixbuf.Pixbuf.new_from_resource('/img/claws.png');
+      this._clawTexture = new Clutter.Image();
+      this._clawTexture.set_data(
+          clawData.get_pixels(), Cogl.PixelFormat.RGB_888, clawData.width,
+          clawData.height, clawData.rowstride);
+
+      const color =
+          Clutter.Color.from_string(settings.get_string('claw-scratch-color'))[1];
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+
+        // See assets/README.md for how this texture was created.
+        uniform sampler2D uClawTexture;
+
+        const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+        const float CLAW_SIZE       = ${settings.get_double('claw-scratch-scale')};
+        const float NUM_CLAWS       = ${settings.get_int('claw-scratch-count')};
+        const float WARP_INTENSITY  = 1.0 + ${settings.get_double('claw-scratch-warp')};
+        const float FLASH_INTENSITY = 0.1;
+        const float MAX_SPAWN_TIME  = 0.6; // Scratches will only start in the first half of the animation.
+        const float FF_TIME         = 0.6; // Relative time for the final fade to transparency.
+
+        // This method generates a grid of randomly rotated, slightly shifted and scaled 
+        // UV squares. It returns the texture coords of the UV square at the given actor
+        // coordinates. If these do not fall into one of the UV grids, the coordinates of
+        // the closest UV grid will be clamped and returned.
+        vec2 getClawUV(vec2 texCoords, float gridScale, vec2 seed) {
+
+          // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
+          vec2 coords = texCoords + hash22(seed);
+          coords *= uSizeX < uSizeY ? vec2(1.0, 1.0 * uSizeY / uSizeX) : vec2(1.0 * uSizeX / uSizeY, 1.0);
+
+          // Apply global scale.
+          coords *= gridScale;
+
+          // Get grid cell coordinates in [0..1].
+          vec2 cellUV = mod(coords, vec2(1));
+
+          // This is unique for each cell.
+          vec2 cellID = coords-cellUV + vec2(362.456);
+
+          // Add random rotation, scale and offset to each grid cell.
+          float scale    = mix(0.8, 1.0,         hash12(cellID*seed*134.451));
+          float offsetX  = mix(0.0, 1.0 - scale, hash12(cellID*seed*54.4129));
+          float offsetY  = mix(0.0, 1.0 - scale, hash12(cellID*seed*25.3089));
+          float rotation = mix(0.0, 2.0 * 3.141, hash12(cellID*seed*2.99837));
+
+          cellUV -= vec2(offsetX, offsetY);
+          cellUV /= scale;
+
+          cellUV -= 0.5;
+          cellUV = vec2(cellUV.x * cos(rotation) - cellUV.y * sin(rotation),
+                        cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
+          cellUV += 0.5;
+
+          // Clamp resulting coordinates.
+          return clamp(cellUV, vec2(0), vec2(1));
+        }
+
+        void main() {
+
+          float progress = ${forOpening ? '1.0-uProgress' : 'uProgress'};
+
+          // Warp the texture coordinates to create a blow-up effect.
+          vec2  coords = cogl_tex_coord_in[0].st * 2.0 - 1.0;
+          float dist   = length(coords);
+          coords = (coords/dist * pow(dist, WARP_INTENSITY)) * 0.5 + 0.5;
+          coords = mix(cogl_tex_coord_in[0].st, coords, progress);
+
+          // Accumulate several random scratches. The color in the scratch map refers to the
+          // relative time when the respective part will become invisible. Therefore we can
+          // add a value to make the scratch appear later.
+          float scratchMap = 1.0;
+          for (int i=0; i<NUM_CLAWS; ++i) {
+            vec2  uv    = getClawUV(coords, 1.0/CLAW_SIZE, SEED*(i+1));
+            float delay = i/NUM_CLAWS * MAX_SPAWN_TIME;
+            scratchMap  = min(scratchMap, clamp(texture2D(uClawTexture, uv).r + delay, 0, 1));
+          }
+
+          // Get the window texture. We shift the texture lookup by the local derivative of
+          // the claw texture in order to mimic some folding distortion.
+          vec2 offset = vec2(dFdx(scratchMap), dFdy(scratchMap)) * progress * 0.5;
+          cogl_color_out = texture2D(uTexture, coords + offset);
+
+          // Add colorful flashes.
+          float flashIntensity = 1.0 / FLASH_INTENSITY * (scratchMap - progress) + 1;
+          if (flashIntensity < 0 || flashIntensity >= 1) {
+            flashIntensity = 0;
+          }
+
+          // Hide flashes where there is now window.
+          flashIntensity *= cogl_color_out.a;
+
+          // Hide scratched out parts.
+          cogl_color_out *= (scratchMap > progress ? 1 : 0);
+
+          vec3 flashColor = vec3(${color.red / 255},
+          ${color.green / 255},
+          ${color.blue / 255}) * ${color.alpha / 255};
+
+          cogl_color_out.rgb += flashIntensity * mix(flashColor, vec3(0), progress);
+
+          // Fade out the remaining shards.
+          float fadeProgress = smoothstep(0, 1, (progress - 1.0 + FF_TIME)/FF_TIME);
+          cogl_color_out *= sqrt(1-fadeProgress*fadeProgress);
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(flashIntensity), 1);
+          // cogl_color_out = vec4(vec3(scratchMap), 1);
+        }
+      `);
+    };
+
+    // This is overridden to bind the claw texture for drawing. Sadly, this seems to be
+    // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
+    // get_target() back then but this is not wrapped in GJS.
+    // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
+    vfunc_paint_target(node, paint_context) {
+      const pipeline = this.get_pipeline();
+      pipeline.set_layer_texture(1, this._clawTexture.get_texture());
+      this.set_uniform_value('uClawTexture', 1);
+      super.vfunc_paint_target(node, paint_context);
+    }
+  });
+}

src/TVEffect.js

@@ -0,0 +1,178 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect hides the actor by making it first transparent from top and bottom       //
+// towards the middle and then hiding the resulting line from left and right towards    //
+// the center.                                                                          //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// The effect class is completely static. It can be used to get some metadata (like the
+// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// the settings dialog, as well as to create the actual shader for the effect.
+var TVEffect = class TVEffect {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
+  static getNick() {
+    return 'tv';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('TV Effect');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/TVEffect.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('tv-animation-time');
+    dialog.bindColorButton('tv-effect-color');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('tv-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows are scaled down vertically.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
+      'scale-y': {from: forOpening ? 0.5 : 1.0, to: forOpening ? 1.0 : 0.5, mode: 3}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+
+      const float BLUR_WIDTH = 0.01; // Width of the gradients.
+      const float TB_TIME    = 0.7;  // Relative time for the top/bottom animation.
+      const float LR_TIME    = 0.4;  // Relative time for the left/right animation.
+      const float LR_DELAY   = 0.6;  // Delay after which the left/right animation starts.
+      const float FF_TIME    = 0.1;  // Relative time for the final fade to transparency.
+
+      void main() {
+
+        float progress = ${forOpening ? '1.0-uProgress' : 'uProgress'};
+
+        // All of these are in [0..1] during the different stages of the animation.
+        // tb refers to the top-bottom animation.
+        // lr refers to the left-right animation.
+        // ff refers to the final fade animation.
+        float tbProgress = smoothstep(0, 1, clamp(progress/TB_TIME, 0, 1));
+        float lrProgress = smoothstep(0, 1, clamp((progress - LR_DELAY)/LR_TIME, 0, 1));
+        float ffProgress = smoothstep(0, 1, clamp((progress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
+
+        // This is a top-center-bottom gradient in [0..1..0]
+        float tb = cogl_tex_coord_in[0].t * 2;
+        tb = tb < 1 ? tb : 2 - tb;
+        
+        // This is a left-center-right gradient in [0..1..0]
+        float lr = cogl_tex_coord_in[0].s * 2;
+        lr = lr < 1 ? lr : 2 - lr;
+        
+        // Combine the progress values with the gradients to create the alpha masks.
+        float tbMask = 1 - smoothstep(0, 1, clamp((tbProgress - tb) / BLUR_WIDTH, 0, 1));
+        float lrMask = 1 - smoothstep(0, 1, clamp((lrProgress - lr) / BLUR_WIDTH, 0, 1));
+        float ffMask = 1 - smoothstep(0, 1, ffProgress);
+
+        // Assemble the final alpha value.
+        float mask = tbMask * lrMask * ffMask;
+
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec4 effectColor = vec4(${color.red / 255},
+                                ${color.green / 255},
+                                ${color.blue / 255}, 1.0) * windowColor.a;
+
+        windowColor.rgb = mix(windowColor.rgb, effectColor.rgb, smoothstep(0, 1, progress));
+
+        cogl_color_out = windowColor * mask;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(vec3(tbMask), 1);
+        // cogl_color_out = vec4(vec3(lrMask), 1);
+        // cogl_color_out = vec4(vec3(ffMask), 1);
+        // cogl_color_out = vec4(vec3(mask), 1);
+      }
+      `);
+    };
+  });
+}

src/Wisps.js

@@ -0,0 +1,217 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+const GObject = imports.gi.GObject;
+
+const _ = imports.gettext.domain('burn-my-windows').gettext;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me             = imports.misc.extensionUtils.getCurrentExtension();
+const utils          = Me.imports.src.utils;
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// This effect lets your windows be carried to the realm of dreams by some little       //
+// fairies. It's implemented with several overlaid grids of randomly moving points.     //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// The shader class for this effect is registered further down in this file.
+let Shader = null;
+
+// This will be called in various places where a unique identifier for this effect is
+// required. It should match the prefix of the settings keys which store whether the
+// effect is enabled currently (e.g. '*-close-effect'), and its animation time
+// (e.g. '*-animation-time').
+var Wisps = class Wisps {
+
+  // ---------------------------------------------------------------------------- metadata
+
+  // The effect is available on all GNOME Shell versions supported by this extension.
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  // This will be called in various places where a unique identifier for this effect is
+  // required. It should match the prefix of the settings keys which store whether the
+  // effect is enabled currently (e.g. the '*-close-effect').
+  static getNick() {
+    return 'wisps';
+  }
+
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
+  static getLabel() {
+    return _('Wisps');
+  }
+
+  // -------------------------------------------------------------------- API for prefs.js
+
+  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // binds all properties to the settings and appends the page to the main stack of the
+  // preferences dialog.
+  static getPreferences(dialog) {
+
+    // Add the settings page to the builder.
+    dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Wisps.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('wisps-animation-time');
+    dialog.bindAdjustment('wisps-scale');
+    dialog.bindColorButton('wisps-color');
+
+    // Finally, return the new settings page.
+    return dialog.getBuilder().get_object('wisps-prefs');
+  }
+
+  // ---------------------------------------------------------------- API for extension.js
+
+  // This is called from extension.js whenever a window is closed with this effect.
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
+  }
+
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // transition, for a window-close transition it is set to false. The modes can be set to
+  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
+  // current value of the opacity transition is passed as uProgress to the shader.
+  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
+
+  // For this effect, windows should be scaled down slightly but not faded.
+  static tweakTransition(actor, settings, forOpening) {
+    return {
+      'opacity': {from: 255, to: 255, mode: 3},
+      'scale-x': {from: forOpening ? 0.9 : 1.0, to: forOpening ? 1.0 : 0.9, mode: 3},
+      'scale-y': {from: forOpening ? 0.9 : 1.0, to: forOpening ? 1.0 : 0.9, mode: 3}
+    };
+  }
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
+    _init(settings, forOpening) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      const color = Clutter.Color.from_string(settings.get_string('wisps-color'))[1];
+
+      this.set_shader_source(`
+
+      // Inject some common shader snippets.
+      ${shaderSnippets.standardUniforms()}
+      ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
+
+      const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
+      const float WISPS_RADIUS    = 20.0;
+      const float WISPS_SPEED     = 10.0;
+      const float WISPS_SPACING   = 40 + WISPS_RADIUS;
+      const int   WISPS_LAYERS    = 8;
+      const float WISPS_IN_TIME   = 0.5;
+      const float WINDOW_OUT_TIME = 1.0;
+
+      // Returns a grid of randomly moving points. Each grid cell contains one point which
+      // moves on an ellipse. 
+      float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
+
+        // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
+        vec2 coords = (texCoords + hash22(seed)) * vec2(uSizeX, uSizeY);
+
+        // Apply global scale.
+        coords /= gridSize;
+
+        // Get grid cell coordinates in [0..1].
+        vec2 cellUV = mod(coords, vec2(1));
+
+        // This is unique for each cell.
+        vec2 cellID = coords-cellUV + vec2(362.456);
+
+        // Add random rotation, scale and offset to each grid cell.
+        float speed     = mix(10.0, 15.0,   hash12(cellID*seed*134.451)) / gridSize * WISPS_SPEED;
+        float rotation  = mix( 0.0,  6.283, hash12(cellID*seed*54.4129));
+        float radius    = mix( 0.5,  1.0,   hash12(cellID*seed*19.1249)) * WISPS_RADIUS;
+        float roundness = mix(-1.0,  1.0,   hash12(cellID*seed*7.51949));
+
+        vec2 offset = vec2(sin(speed * (uTime+1)) * roundness, cos(speed * (uTime+1)));
+        offset *= 0.5 - 0.5 * radius / gridSize;
+        offset = vec2(offset.x * cos(rotation) - offset.y * sin(rotation),
+                      offset.x * sin(rotation) + offset.y * cos(rotation));
+
+        cellUV += offset;
+
+        // Use distance to center of shifted / rotated UV coordinates to draw a glaring point.
+        float dist = length(cellUV - 0.5) * gridSize / radius;
+        if (dist < 1.0) {
+          return min(10, 0.01 / pow(dist, 2.0));
+        }
+
+        return 0.0;
+      }
+
+      void main() {
+
+        float progress = ${forOpening ? '1.0-uProgress' : 'uProgress'};
+        
+        // Get the color of the window.
+        vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        vec4 effectColor = vec4(${color.red / 255},
+          ${color.green / 255},
+          ${color.blue / 255}, 1.0) * windowColor.a;
+        
+        // Compute several layers of moving wisps.
+        vec2 uv = (cogl_tex_coord_in[0].st-0.5) / mix(1.0, 0.5, progress) + 0.5;
+        uv /= ${settings.get_double('wisps-scale')};
+        float wisps = 0;
+        for (int i=0; i<WISPS_LAYERS; ++i) {
+          wisps += getWisps(uv*0.3, WISPS_SPACING, SEED * (i+1));
+        }
+
+        // Compute shrinking edge mask.
+        float mask = getRelativeEdgeMask(mix(0.01, 0.5, progress));
+
+        // Compute three different progress values.
+        float wispsIn   = smoothstep(0, 1, clamp(progress/WISPS_IN_TIME, 0, 1));
+        float wispsOut  = smoothstep(0, 1, clamp((progress - WISPS_IN_TIME)/(1.0 - WISPS_IN_TIME), 0, 1));
+        float windowOut = smoothstep(0, 1, clamp(progress/WINDOW_OUT_TIME, 0, 1));
+
+        // Use a noise function to dissolve the window.
+        float noise = smoothstep(1.0, 0.0, abs(2.0 * simplex2DFractal(uv * vec2(uSizeX, uSizeY) / 250) - 1.0));
+        float windowMask = 1.0 - (windowOut < 0.5 ? mix(0.0, noise, windowOut * 2.0) : mix(noise, 1.0, windowOut * 2.0 - 1.0));
+        cogl_color_out = windowColor * windowMask * mask;
+
+        // Add the wisps.
+        cogl_color_out += min(wispsIn, 1.0 - wispsOut) * wisps * effectColor * mask;
+
+        // These are pretty useful for understanding how this works.
+        // cogl_color_out = vec4(vec3(windowMask), 1.0);
+        // cogl_color_out = vec4(vec3(wisps), 1.0);
+        // cogl_color_out = vec4(vec3(noise), 1.0);
+        // cogl_color_out = vec4(vec3(mask*min(wispsIn, 1.0 - wispsOut)), 1.0);
+      }
+      `);
+    };
+  });
+}

src/extension/FireShader.js

@@ -1,150 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// The FireShader uses a procedural gray-scale noise texture. This texture is moved     //
-// vertically over time and mapped to a configurable color gradient. It is faded to     //
-// transparency towards the edges of the window. In addition, there are a couple of     //
-// moving gradients which fade-in or fade-out the fire effect.                          //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var FireShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                       class FireShader extends Clutter.ShaderEffect {
-  _init(settings) {
-    super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-    // Load the gradient values from the settings. We directly inject the values in the
-    // GLSL code below. The shader is compiled once for each window-closing anyways. In
-    // the future, we may want to prevent this frequent recompilations of shaders,
-    // though.
-    const gradient = [];
-    for (let i = 1; i <= 5; i++) {
-      const color = Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
-      gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
-          color.blue / 255}, ${color.alpha / 255})`);
-    }
-
-    this.set_shader_source(`
-
-      // Inject some common shader snippets.
-      ${shaderSnippets.standardUniforms()}
-      ${shaderSnippets.noise()}
-
-      // These may be configurable in the future.
-      const float EDGE_FADE  = 70;
-      const float FADE_WIDTH = 0.1;
-      const float HIDE_TIME  = 0.4;
-      const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
-      const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
-
-      // This maps the input value from [0..1] to a color from the gradient.
-      vec4 getFireColor(float v) {
-        const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
-        const vec4 colors[5] = vec4[](
-          ${gradient[0]},
-          ${gradient[1]},
-          ${gradient[2]},
-          ${gradient[3]},
-          ${gradient[4]}
-        );
-
-        if (v < steps[0]) {
-          return colors[0];
-        }
-
-        for (int i=0; i<4; ++i) {
-          if (v <= steps[i+1]) {
-            return mix(colors[i], colors[i+1], vec4(v -
-            steps[i])/(steps[i+1]-steps[i]));
-          }
-        }
-
-        return colors[4];
-      }
-
-      // This method requires the uniforms from standardUniforms() to be available.
-      // It returns two values: The first is an alpha value which can be used for the window
-      // texture. This gradually dissolves the window from top to bottom. The second can be used
-      // to mask any effect, it will be most opaque where the window is currently fading and
-      // gradually dissolve to zero over time.
-      // hideTime:      A value in [0..1]. It determines the percentage of the animation which
-      //                is spent for hiding the window. 1-hideTime will be spent thereafter for
-      //                dissolving the effect mask.
-      // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
-      // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
-      vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
-        float burnProgress      = clamp(uProgress/hideTime, 0, 1);
-        float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
-
-        // Gradient from top to bottom.
-        float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
-
-        // Visible part of the window. Gradually dissolves towards the bottom.
-        float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
-
-        // Gradient from top burning window.
-        float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
-
-        // Fade-out when the window burned down.
-        if (uProgress > hideTime) {
-          float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
-          effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
-        }
-
-        // Fade at window borders.
-        vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-        effectMask *= smoothstep(0, 1, clamp(pos.x / edgeFadeWidth, 0, 1));
-        effectMask *= smoothstep(0, 1, clamp(pos.y / edgeFadeWidth, 0, 1));
-        effectMask *= smoothstep(0, 1, clamp((uSizeX - pos.x) / edgeFadeWidth, 0, 1));
-        effectMask *= smoothstep(0, 1, clamp((uSizeY - pos.y) / edgeFadeWidth, 0, 1));
-
-        return vec2(windowMask, effectMask);
-      }
-
-      void main() {
-
-        // Get a noise value which moves vertically in time.
-        vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
-        uv.y += uTime * FIRE_SPEED;
-        float noise = perlinNoise(uv, 10.0, 5, 0.5);
-
-        // Modulate noise by effect mask.
-        vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
-        noise *= effectMask.y;
-
-        // Map noise value to color.
-        vec4 fire = getFireColor(noise);
-        fire.rgb *= fire.a;
-
-        // Get the window texture and fade it according to the effect mask.
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
-
-        // Add the fire to the window.
-        cogl_color_out += fire;
-
-        // These are pretty useful for understanding how this works.
-        // cogl_color_out = vec4(vec3(noise), 1);
-        // cogl_color_out = vec4(vec3(effectMask.x), 1);
-        // cogl_color_out = vec4(vec3(effectMask.y), 1);
-      }
-    `);
-  };
-});

src/extension/MatrixShader.js

@@ -1,145 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject, GdkPixbuf, Cogl} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// The MatrixShader multiplies a grid of random letters with some gradients which are   //
-// moving from top to bottom. The speed of the moving gradients is chosen randomly.     //
-// Also, there is a random delay making the gradients not drop all at the same time.    //
-// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
-// documentation of vfunc_paint_target further down in this file.                       //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                         class MatrixShader extends Clutter.ShaderEffect {
-  _init(settings) {
-    super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-    // Load the font texture. As the shader is re-created for each window animation, this
-    // texture is also re-created each time. This could be improved in the future!
-    const fontData    = GdkPixbuf.Pixbuf.new_from_resource('/img/matrixFont.png');
-    this._fontTexture = new Clutter.Image();
-    this._fontTexture.set_data(
-        fontData.get_pixels(),
-        fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
-        fontData.width, fontData.height, fontData.rowstride);
-
-    const trailColor =
-        Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
-    const tipColor =
-        Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
-
-    // This is partially based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
-    this.set_shader_source(`
-
-      // Inject some common shader snippets.
-      ${shaderSnippets.standardUniforms()}
-      ${shaderSnippets.noise()}
-
-      uniform sampler2D uFontTexture;
-
-      // These may be configurable in the future.
-      const float EDGE_FADE             = 30;
-      const float FADE_WIDTH            = 150;
-      const float TRAIL_LENGTH          = 0.2;
-      const float FINAL_FADE_START_TIME = 0.8;
-      const float LETTER_TILES          = 16.0;
-      const float LETTER_SIZE           = ${settings.get_int('matrix-scale')};
-      const float LETTER_FLICKER_SPEED  = 2.0;
-      const float RANDOMNESS            = ${settings.get_double('matrix-randomness')};
-
-      // This returns a flickering grid of random letters.
-      float getText(vec2 fragCoord) {
-        vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
-        vec2 uv = mod(pixelCoords.xy, LETTER_SIZE)/LETTER_SIZE;
-        vec2 block = pixelCoords/LETTER_SIZE - uv;
-
-        // Choose random letter.
-        uv += floor(rand2(floor(rand(block)*vec2(12.9898,78.233) + LETTER_FLICKER_SPEED*uTime + 42.254))*LETTER_TILES);
-        
-        return texture2D(uFontTexture, uv/LETTER_TILES).r;
-      }
-
-      // This returns two values: The first are gradients for the "raindrops" which move
-      // from top to bottom. This is used for fading the letters. The second value is set
-      // to one below each drop and to zero above it. This second value is used for fading
-      // the window texture. 
-      vec2 getRain(vec2 fragCoord) {
-        vec2 coords = fragCoord * vec2(uSizeX, uSizeY);
-        coords.x -= mod(coords.x, LETTER_SIZE);
-
-        float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
-        float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
-
-        float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
-        float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
-        float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
-        return vec2(rainAlpha, windowAlpha);
-      }
-
-      void main() {
-
-        // Get a cool matrix effect. See comments for those methods above.
-        vec2  rain = getRain(cogl_tex_coord_in[0].st);
-        float text = getText(cogl_tex_coord_in[0].st);
-
-        // Get the window texture and fade it according to the effect mask.
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * rain.y;
-
-        // This is used to fade out the remaining trails in the end.
-        float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/
-                                  (1-FINAL_FADE_START_TIME), 0, 1);
-        float rainAlpha = finalFade * rain.x;
-
-        // Fade at window borders.
-        vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-        rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
-        rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
-
-        // Add the matrix effect to the window.
-        vec3 trailColor = vec3(${trailColor.red / 255}, 
-                               ${trailColor.green / 255}, 
-                               ${trailColor.blue / 255});
-        vec3 tipColor =   vec3(${tipColor.red / 255}, 
-                               ${tipColor.green / 255}, 
-                               ${tipColor.blue / 255});
-        cogl_color_out.rgb += mix(trailColor, tipColor, min(1, pow(rainAlpha+0.1, 4))) * rainAlpha * text;
-
-        // These are pretty useful for understanding how this works.
-        // cogl_color_out = vec4(vec3(text), 1);
-        // cogl_color_out = vec4(vec3(rain.x), 1);
-        // cogl_color_out = vec4(vec3(rain.y), 1);
-      }
-    `);
-  };
-
-  // This is overridden to bind the font texture for drawing. Sadly, this seems to be
-  // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
-  // get_target() back then but this is not wrapped in GJS.
-  // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
-  vfunc_paint_target(node, paint_context) {
-    const pipeline = this.get_pipeline();
-    pipeline.set_layer_texture(1, this._fontTexture.get_texture());
-    this.set_uniform_value('uFontTexture', 1);
-    super.vfunc_paint_target(node, paint_context);
-  }
-});

src/extension/TRexShader.js

@@ -1,157 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject, GdkPixbuf, Cogl} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// This effect tears your windows apart with a series of violent scratches!             //
-// This effect is not available on GNOME 3.3x, due to the limitation described in the   //
-// documentation of vfunc_paint_target further down in this file.                       //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var TRexShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                       class TRexShader extends Clutter.ShaderEffect {
-  _init(settings) {
-    super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-    // Load the claw texture. As the shader is re-created for each window animation, this
-    // texture is also re-created each time. This could be improved in the future!
-    // See assets/README.md for how this texture was created.
-    const clawData    = GdkPixbuf.Pixbuf.new_from_resource('/img/claws.png');
-    this._clawTexture = new Clutter.Image();
-    this._clawTexture.set_data(
-        clawData.get_pixels(), Cogl.PixelFormat.RGB_888, clawData.width, clawData.height,
-        clawData.rowstride);
-
-    const color = Clutter.Color.from_string(settings.get_string('claw-scratch-color'))[1];
-
-    this.set_shader_source(`
-
-      // Inject some common shader snippets.
-      ${shaderSnippets.standardUniforms()}
-      ${shaderSnippets.noise()}
-
-      // See assets/README.md for how this texture was created.
-      uniform sampler2D uClawTexture;
-
-      const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
-      const float CLAW_SIZE       = ${settings.get_double('claw-scratch-scale')};
-      const float NUM_CLAWS       = ${settings.get_int('claw-scratch-count')};
-      const float WARP_INTENSITY  = 1.0 + ${settings.get_double('claw-scratch-warp')};
-      const float FLASH_INTENSITY = 0.1;
-      const float MAX_SPAWN_TIME  = 0.5; // Scratches will only start in the first half of the animation.
-      const float FF_TIME         = 0.5; // Relative time for the final fade to transparency.
-
-      // This method generates a grid of randomly rotated, slightly shifted and scaled 
-      // UV squares. It returns the texture coords of the UV square at the given actor
-      // coordinates. If these do not fall into one of the UV grids, the coordinates of
-      // the closest UV grid will be clamped and returned.
-      vec2 getClawUV(vec2 texCoords, float gridScale, vec2 seed) {
-
-        // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
-        vec2 coords = texCoords + rand2(seed);
-        coords *= uSizeX < uSizeY ? vec2(1.0, 1.0 * uSizeY / uSizeX) : vec2(1.0 * uSizeX / uSizeY, 1.0);
-        
-        // Apply global scale.
-        coords *= gridScale;
-
-        // Get grid cell coordinates in [0..1].
-        vec2 cellUV = mod(coords, vec2(1));
-
-        // This is unique for each cell.
-        vec2 cellID = coords-cellUV + vec2(362.456);
-
-        // Add random rotation, scale and offset to each grid cell.
-        float scale    = mix(0.8, 1.0,         rand(cellID*seed*134.451));
-        float offsetX  = mix(0.0, 1.0 - scale, rand(cellID*seed*54.4129));
-        float offsetY  = mix(0.0, 1.0 - scale, rand(cellID*seed*25.3089));
-        float rotation = mix(0.0, 2.0 * 3.141, rand(cellID*seed*2.99837));
-        
-        cellUV -= vec2(offsetX, offsetY);
-        cellUV /= scale;
-
-        cellUV -= 0.5;
-        cellUV = vec2(cellUV.x * cos(rotation) - cellUV.y * sin(rotation),
-                  cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
-        cellUV += 0.5;
-
-        // Clamp resulting coordinates.
-        return clamp(cellUV, vec2(0), vec2(1));
-      }
-
-      void main() {
-
-        // Warp the texture coordinates to create a blow-up effect.
-        vec2 coords = cogl_tex_coord_in[0].st * 2.0 - 1.0;
-        float dist = length(coords);
-        coords = (coords/dist * pow(dist, WARP_INTENSITY)) * 0.5 + 0.5;
-        coords = mix(cogl_tex_coord_in[0].st, coords, uProgress);
-
-        // Accumulate several random scratches. The color in the scratch map refers to the
-        // relative time when the respective part will become invisible. Therefore we can
-        // add a value to make the scratch appear later.
-        float scratchMap = 1.0;
-        for (int i=0; i<NUM_CLAWS; ++i) {
-          vec2 uv = getClawUV(coords, 1.0/CLAW_SIZE, SEED*(i+1));
-          float delay = i/NUM_CLAWS * MAX_SPAWN_TIME;
-          scratchMap = min(scratchMap, clamp(texture2D(uClawTexture, uv).r + delay, 0, 1));
-        }
-
-        // Get the window texture. We shift the texture lookup by the local derivative of
-        // the claw texture in order to mimic some folding distortion.
-        vec2 offset = vec2(dFdx(scratchMap), dFdy(scratchMap)) * uProgress * 0.5;
-        cogl_color_out = texture2D(uTexture, coords + offset);
-
-        // Hide scratched out parts.
-        cogl_color_out *= (scratchMap > uProgress ? 1 : 0);
-
-        // Add colorful flashes.
-        float flashIntensity = 1.0 / FLASH_INTENSITY * (scratchMap - uProgress) + 1;
-        if (flashIntensity < 0 || flashIntensity >= 1) {
-          flashIntensity = 0;
-        }
-
-        vec3 flashColor = vec3(${color.red / 255},
-                               ${color.green / 255},
-                               ${color.blue / 255}) * ${color.alpha / 255};
-
-        cogl_color_out.rgb += flashIntensity * mix(flashColor, vec3(0), uProgress);
-
-        // Fade out the remaining shards.
-        float fade = smoothstep(0, 1, 1 - clamp((uProgress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
-        cogl_color_out *= fade;
-
-        // These are pretty useful for understanding how this works.
-        // cogl_color_out = vec4(vec3(flashIntensity), 1);
-        // cogl_color_out = vec4(vec3(scratchMap), 1);
-      }
-    `);
-  };
-
-  // This is overridden to bind the claw texture for drawing. Sadly, this seems to be
-  // impossible under GNOME 3.3x as this.get_pipeline() is not available. It was called
-  // get_target() back then but this is not wrapped in GJS.
-  // https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
-  vfunc_paint_target(node, paint_context) {
-    const pipeline = this.get_pipeline();
-    pipeline.set_layer_texture(1, this._clawTexture.get_texture());
-    this.set_uniform_value('uClawTexture', 1);
-    super.vfunc_paint_target(node, paint_context);
-  }
-});

src/extension/TVEffectShader.js

@@ -1,90 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-const {Clutter, GObject} = imports.gi;
-
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const shaderSnippets = Me.imports.src.extension.shaderSnippets;
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// The TVEffectShader hides the actor by making it first transparent from top and       //
-// bottom towards the middle and then hiding the resulting line from left and right     //
-// towards the center.                                                                  //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-var TVEffectShader = GObject.registerClass(
-    {Properties: {}, Signals: {}}, class TVEffectShader extends Clutter.ShaderEffect {
-      _init(settings) {
-        super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-        const color =
-            Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
-
-        this.set_shader_source(`
-
-        // Inject some common shader snippets.
-        ${shaderSnippets.standardUniforms()}
-
-        const float BLUR_WIDTH = 0.01; // Width of the gradients.
-        const float TB_TIME    = 0.7;  // Relative time for the top/bottom animation.
-        const float LR_TIME    = 0.4;  // Relative time for the left/right animation.
-        const float LR_DELAY   = 0.6;  // Delay after which the left/right animation starts.
-        const float FF_TIME    = 0.2;  // Relative time for the final fade to transparency.
-
-        void main() {
-
-          // All of these are in [0..1] during the different stages of the animation.
-          // tb refers to the top-bottom animation.
-          // lr refers to the left-right animation.
-          // ff refers to the final fade animation.
-          float tbProgress = smoothstep(0, 1, clamp(uProgress/TB_TIME, 0, 1));
-          float lrProgress = smoothstep(0, 1, clamp((uProgress - LR_DELAY)/LR_TIME, 0, 1));
-          float ffProgress = smoothstep(0, 1, clamp((uProgress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
-
-          // This is a top-center-bottom gradient in [0..1..0]
-          float tb = cogl_tex_coord_in[0].t * 2;
-          tb = tb < 1 ? tb : 2 - tb;
-          
-          // This is a left-center-right gradient in [0..1..0]
-          float lr = cogl_tex_coord_in[0].s * 2;
-          lr = lr < 1 ? lr : 2 - lr;
-          
-          // Combine the progress values with the gradients to create the alpha masks.
-          float tbMask = 1 - smoothstep(0, 1, clamp((tbProgress - tb) / BLUR_WIDTH, 0, 1));
-          float lrMask = 1 - smoothstep(0, 1, clamp((lrProgress - lr) / BLUR_WIDTH, 0, 1));
-          float ffMask = 1 - smoothstep(0, 1, ffProgress);
-
-          // Assemble the final alpha value.
-          float mask = tbMask * lrMask * ffMask;
-
-          vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
-          vec4 effectColor = vec4(${color.red / 255},
-                                  ${color.green / 255},
-                                  ${color.blue / 255}, 1.0) * windowColor.a;
-
-          windowColor.rgb = mix(windowColor.rgb, effectColor.rgb, smoothstep(0, 1, uProgress));
-
-          cogl_color_out = windowColor * mask;
-
-          // These are pretty useful for understanding how this works.
-          // cogl_color_out = vec4(vec3(tbMask), 1);
-          // cogl_color_out = vec4(vec3(lrMask), 1);
-          // cogl_color_out = vec4(vec3(ffMask), 1);
-          // cogl_color_out = vec4(vec3(mask), 1);
-        }
-        `);
-      };
-    });

src/extension/shaderSnippets.js

@@ -1,83 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////////////
-//          )                                                   (                       //
-//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
-//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
-//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
-//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
-//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
-//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
-//                                 |__/                                                 //
-//                       Copyright (c) 2021 Simon Schneegans                            //
-//          Released under the GPLv3 or later. See LICENSE file for details.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-'use strict';
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// These functions return strings which can be injected to GLSL shader code.            //
-//////////////////////////////////////////////////////////////////////////////////////////
-
-// These should be included in every shader.
-// uTexture:    Contains the texture of the window.
-// uProgress:   A value which transitions from 0 to 1 during the entire animation.
-// uTime:       A steadily increasing value in seconds.
-// uSizeX:      The horizontal size of uTexture in pixels.
-// uSizeY:      The vertical size of uTexture in pixels.
-function standardUniforms() {
-  return `
-  uniform sampler2D uTexture;
-  uniform float     uProgress;
-  uniform float     uTime;
-  uniform int       uSizeX;
-  uniform int       uSizeY;
-  `;
-}
-
-// The noise implementation is from https://www.shadertoy.com/view/3tcBzH (CC-BY-NC-SA).
-function noise() {
-  return `
-  float rand(vec2 co) {
-    return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
-  }
-
-  vec2 rand2(vec2 co) {
-    return vec2(rand(co), rand(co + vec2(12.9898,78.233)));
-  }
-
-  float hermite(float t) {
-    return t * t * (3.0 - 2.0 * t);
-  }
-
-  float noiseImpl(vec2 co, float frequency) {
-    vec2 v = vec2(co.x * frequency, co.y * frequency);
-
-    float ix1 = floor(v.x);
-    float iy1 = floor(v.y);
-    float ix2 = floor(v.x + 1.0);
-    float iy2 = floor(v.y + 1.0);
-
-    float fx = hermite(fract(v.x));
-    float fy = hermite(fract(v.y));
-
-    float fade1 = mix(rand(vec2(ix1, iy1)), rand(vec2(ix2, iy1)), fx);
-    float fade2 = mix(rand(vec2(ix1, iy2)), rand(vec2(ix2, iy2)), fx);
-
-    return mix(fade1, fade2, fy);
-  }
-
-  float perlinNoise(vec2 co, float freq, int steps, float persistence) {
-    float value = 0.0;
-    float ampl = 1.0;
-    float sum = 0.0;
-
-    for(int i=0 ; i<steps ; i++) {
-      sum += ampl;
-      value += noiseImpl(co, freq) * ampl;
-      freq *= 2.0;
-      ampl *= persistence;
-    }
-
-    return value / sum;
-  }
-  `;
-}

src/shaderSnippets.js

@@ -0,0 +1,275 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//          )                                                   (                       //
+//       ( /(   (  (               )    (       (  (  (         )\ )    (  (            //
+//       )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (        //
+//      ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\       //
+//      | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)      //
+//      | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<      //
+//      |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/      //
+//                                 |__/                                                 //
+//                       Copyright (c) 2021 Simon Schneegans                            //
+//          Released under the GPLv3 or later. See LICENSE file for details.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+'use strict';
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// These functions return strings which can be injected to GLSL shader code.            //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// These should be included in every shader.
+// uTexture:    Contains the texture of the window.
+// uProgress:   A value which transitions from 0 to 1 during the entire animation.
+// uTime:       A steadily increasing value in seconds.
+// uSizeX:      The horizontal size of uTexture in pixels.
+// uSizeY:      The vertical size of uTexture in pixels.
+function standardUniforms() {
+  return `
+  uniform sampler2D uTexture;
+  uniform float     uProgress;
+  uniform float     uTime;
+  uniform int       uSizeX;
+  uniform int       uSizeY;
+  `;
+}
+
+// This method returns a mask which smoothly transitions towards zero when approaching
+// the window's borders. There is a variant which takes the transition area width in
+// pixels and one which takes this as a percentage.
+function edgeMask() {
+  return `
+  float getEdgeMask(vec2 uv, vec2 maxUV, float fadeWidth) {
+    float mask = 1.0;
+    mask *= smoothstep(0, 1, clamp(uv.x / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp(uv.y / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.x - uv.x) / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.y - uv.y) / fadeWidth, 0, 1));
+
+    return mask;
+  }
+
+  float getAbsoluteEdgeMask(float fadePixels) {
+    vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+    return getEdgeMask(uv, vec2(uSizeX, uSizeY), fadePixels);
+  }
+  
+  float getRelativeEdgeMask(float fadeAmount) {
+    vec2 uv = cogl_tex_coord_in[0].st;
+    return getEdgeMask(uv, vec2(1.0), fadeAmount);
+  }
+  `;
+}
+
+// These noise algorithms are based on implementations by various authors from
+// shadertoy.com, which are all available under the MIT License. See the respective links
+// in the comments below.
+function noise() {
+  return `
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // Hash without Sine                                                                  //
+  // MIT License, https://www.shadertoy.com/view/4djSRW                                 //
+  // Copyright (c) 2014 David Hoskins.                                                  //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  // 1 out, 1 in...
+  float hash11(float p) {
+    p = fract(p * .1031);
+    p *= p + 33.33;
+    p *= p + p;
+    return fract(p);
+  }
+
+  // 1 out, 2 in...
+  float hash12(vec2 p) {
+    vec3 p3  = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+
+  // 1 out, 3 in...
+  float hash13(vec3 p3) {
+    p3  = fract(p3 * .1031);
+    p3 += dot(p3, p3.zyx + 31.32);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+
+  // 2 out, 1 in...
+  vec2 hash21(float p) {
+    vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 2 out, 2 in...
+  vec2 hash22(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 2 out, 3 in...
+  vec2 hash23(vec3 p3) {
+    p3 = fract(p3 * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xx+p3.yz)*p3.zy);
+  }
+
+  // 3 out, 1 in...
+  vec3 hash31(float p) {
+    vec3 p3 = fract(vec3(p) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yzx+33.33);
+    return fract((p3.xxy+p3.yzz)*p3.zyx); 
+  }
+
+  // 3 out, 2 in...
+  vec3 hash32(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yxz+33.33);
+    return fract((p3.xxy+p3.yzz)*p3.zyx);
+  }
+
+  // 3 out, 3 in...
+  vec3 hash33(vec3 p3) {
+    p3 = fract(p3 * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yxz+33.33);
+    return fract((p3.xxy + p3.yxx)*p3.zyx);
+  }
+
+  // 4 out, 1 in...
+  vec4 hash41(float p) {
+    vec4 p4 = fract(vec4(p) * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 2 in...
+  vec4 hash42(vec2 p) {
+    vec4 p4 = fract(vec4(p.xyxy) * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 3 in...
+  vec4 hash43(vec3 p) {
+    vec4 p4 = fract(vec4(p.xyzx)  * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+  // 4 out, 4 in...
+  vec4 hash44(vec4 p4) {
+    p4 = fract(p4  * vec4(.1031, .1030, .0973, .1099));
+    p4 += dot(p4, p4.wzxy+33.33);
+    return fract((p4.xxyz+p4.yzzw)*p4.zywx);
+  }
+
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // 2D Simplex Noise                                                                   //
+  // MIT License, https://www.shadertoy.com/view/Msf3WH                                 //
+  // Copyright © 2013 Inigo Quilez                                                      //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  float simplex2D(vec2 p) {
+    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
+    const float K2 = 0.211324865; // (3-sqrt(3))/6;
+
+    vec2  i = floor( p + (p.x+p.y)*K1 );
+    vec2  a = p - i + (i.x+i.y)*K2;
+    float m = step(a.y,a.x); 
+    vec2  o = vec2(m,1.0-m);
+    vec2  b = a - o + K2;
+    vec2  c = a - 1.0 + 2.0*K2;
+    vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
+    vec3  n = h*h*h*h*vec3( dot(a,-1.0 + 2.0 * hash22(i+0.0)),
+                            dot(b,-1.0 + 2.0 * hash22(i+o)),
+                            dot(c,-1.0 + 2.0 * hash22(i+1.0)));
+    return 0.5 + 0.5 * dot( n, vec3(70.0) );
+  }
+
+  float simplex2DFractal(vec2 p) {
+    mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
+    float f  = 0.5000*simplex2D( p ); p = m*p;
+    f += 0.2500*simplex2D( p ); p = m*p;
+    f += 0.1250*simplex2D( p ); p = m*p;
+    f += 0.0625*simplex2D( p ); p = m*p;
+
+    return f;
+  }
+
+
+  ////////////////////////////////////////////////////////////////////////////////////////
+  // 3D Simplex Noise                                                                   //
+  // MIT License, https://www.shadertoy.com/view/XsX3zB                                 //
+  // Copyright © 2013 Nikita Miropolskiy                                                //
+  ////////////////////////////////////////////////////////////////////////////////////////
+
+  float simplex3D(vec3 p) {
+
+    // skew constants for 3D simplex functions
+    const float F3 = 0.3333333;
+    const float G3 = 0.1666667;
+
+    // 1. find current tetrahedron T and it's four vertices
+    // s, s+i1, s+i2, s+1.0 - absolute skewed (integer) coordinates of T vertices
+    // x, x1, x2, x3 - unskewed coordinates of p relative to each of T vertice
+
+    // calculate s and x
+    vec3 s = floor(p + dot(p, vec3(F3)));
+    vec3 x = p - s + dot(s, vec3(G3));
+
+    // calculate i1 and i2
+    vec3 e = step(vec3(0.0), x - x.yzx);
+    vec3 i1 = e*(1.0 - e.zxy);
+    vec3 i2 = 1.0 - e.zxy*(1.0 - e);
+
+    // x1, x2, x3
+    vec3 x1 = x - i1 + G3;
+    vec3 x2 = x - i2 + 2.0*G3;
+    vec3 x3 = x - 1.0 + 3.0*G3;
+
+    // 2. find four surflets and store them in d
+    vec4 w, d;
+
+    // calculate surflet weights
+    w.x = dot(x, x);
+    w.y = dot(x1, x1);
+    w.z = dot(x2, x2);
+    w.w = dot(x3, x3);
+
+    // w fades from 0.6 at the center of the surflet to 0.0 at the margin
+    w = max(0.6 - w, 0.0);
+
+    // calculate surflet components
+    d.x = dot(-0.5 + hash33(s), x);
+    d.y = dot(-0.5 + hash33(s + i1), x1);
+    d.z = dot(-0.5 + hash33(s + i2), x2);
+    d.w = dot(-0.5 + hash33(s + 1.0), x3);
+
+    // multiply d by w^4
+    w *= w;
+    w *= w;
+    d *= w;
+
+    // 3. return the sum of the four surflets
+    return dot(d, vec4(52.0)) * 0.5 + 0.5;
+  }
+
+
+  // directional artifacts can be reduced by rotating each octave
+  float simplex3DFractal(vec3 m) {
+
+    // const matrices for 3D rotation
+    const mat3 rot1 = mat3(-0.37, 0.36, 0.85,-0.14,-0.93, 0.34,0.92, 0.01,0.4);
+    const mat3 rot2 = mat3(-0.55,-0.39, 0.74, 0.33,-0.91,-0.24,0.77, 0.12,0.63);
+    const mat3 rot3 = mat3(-0.71, 0.52,-0.47,-0.08,-0.72,-0.68,-0.7,-0.45,0.56);
+
+    return  0.5333333*simplex3D(m*rot1)
+           +0.2666667*simplex3D(2.0*m*rot2)
+           +0.1333333*simplex3D(4.0*m*rot3)
+           +0.0666667*simplex3D(8.0*m);
+  }
+
+  `;
+}

src/utils.js

@@ -15,6 +15,9 @@
 
 const {Gtk} = imports.gi;
 
+const Config               = imports.misc.config;
+const [GS_MAJOR, GS_MINOR] = Config.PACKAGE_VERSION.split('.');
+
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
 
@@ -42,3 +45,34 @@ function debug(message) {
 function isGTK4() {
   return Gtk.get_major_version() == 4;
 }
+
+// This method returns 'gtk3' or 'gtk4' depending on the currently used gtk version.
+function getGTKString() {
+  return isGTK4() ? 'gtk4' : 'gtk3';
+}
+
+// This method returns true if called in GNOME Shell's process, false if called in the
+// preferences process.
+function isInShellProcess() {
+  return window.global && global.stage;
+}
+
+// This method returns true if the current GNOME Shell version matches the given
+// arguments.
+function shellVersionIs(major, minor) {
+  return GS_MAJOR == major && GS_MINOR == minor;
+}
+
+// This method returns true if the current GNOME Shell version is at least as high as the
+// given arguments.
+function shellVersionIsAtLeast(major, minor) {
+  if (GS_MAJOR > major) {
+    return true;
+  }
+
+  if (GS_MAJOR == major) {
+    return GS_MINOR >= minor;
+  }
+
+  return false;
+}

tests/run-test.sh

@@ -0,0 +1,180 @@
+#!/bin/bash
+
+# -------------------------------------------------------------------------------------- #
+#           )                                                   (                        #
+#        ( /(   (  (               )    (       (  (  (         )\ )    (  (             #
+#        )\()) ))\ )(   (         (     )\ )    )\))( )\  (    (()/( (  )\))(  (         #
+#       ((_)\ /((_|()\  )\ )      )\  '(()/(   ((_)()((_) )\ )  ((_)))\((_)()\ )\        #
+#       | |(_|_))( ((_)_(_/(    _((_))  )(_))  _(()((_|_)_(_/(  _| |((_)(()((_|(_)       #
+#       | '_ \ || | '_| ' \))  | '  \()| || |  \ V  V / | ' \)) _` / _ \ V  V (_-<       #
+#       |_.__/\_,_|_| |_||_|   |_|_|_|  \_, |   \_/\_/|_|_||_|\__,_\___/\_/\_//__/       #
+#                                  |__/                                                  #
+#                        Copyright (c) 2021 Simon Schneegans                             #
+#           Released under the GPLv3 or later. See LICENSE file for details.             #
+# -------------------------------------------------------------------------------------- #
+
+# This script is based on a similar script from the Fly-Pie GNOME Shell extension which is
+# published under the MIT License (https://github.com/Schneegans/Fly-Pie).
+
+# This script executes several automated tests on Burn-My-Windows. To do this, it is
+# installed in a fedora-based container running GNOME Shell on xvfb. The used container is
+# hosted on Github: https://github.com/Schneegans/gnome-shell-pod. This scripts installs
+# Burn-My-Windows from the burn-my-windows@schneegans.github.com.zip file which is
+# expected to be present in the repository root. Therefore you have to call "make" before
+# this script.
+#
+# The scripts supports two arguments:
+#
+# -v fedora_version: This determines the version of GNOME Shell to test agains.
+#                    -v 32: GNOME Shell 3.36
+#                    -v 33: GNOME Shell 3.38
+#                    -v 34: GNOME Shell 40
+#                    -v 35: GNOME Shell 41
+# -s session:        This can either be "gnome-xsession" or "gnome-wayland-nested".
+
+# Exit on error.
+set -e
+
+usage() {
+  echo "Usage: $0 -v fedora_version -s session" >&2
+}
+
+FEDORA_VERSION=33
+SESSION="gnome-xsession"
+
+while getopts "v:s:h" opt; do
+  case $opt in
+    v) FEDORA_VERSION="${OPTARG}";;
+    s) SESSION="${OPTARG}";;
+    h) usage; exit 0;;
+    *) usage; exit 1;;
+  esac
+done
+
+# Go to the repo root.
+cd "$( cd "$( dirname "$0" )" && pwd )/.." || \
+  { echo "ERROR: Could not find the repo root."; exit 1; }
+
+IMAGE="ghcr.io/schneegans/gnome-shell-pod-${FEDORA_VERSION}"
+EXTENSION="burn-my-windows@schneegans.github.com"
+
+# Run the container. For more info, visit https://github.com/Schneegans/gnome-shell-pod.
+POD=$(podman run --rm --cap-add=SYS_NICE --cap-add=IPC_LOCK -td "${IMAGE}")
+
+# Properly shutdown podman when this script is exited.
+quit() {
+  podman kill "${POD}"
+  wait
+}
+
+trap quit INT TERM EXIT
+
+# -------------------------------------------------------------------------------- methods
+
+# This function is used below to execute any shell command inside the running container.
+do_in_pod() {
+  podman exec --user gnomeshell --workdir /home/gnomeshell "${POD}" set-env.sh "$@"
+}
+
+# This is called whenever a test fails. It prints an error message (given as first
+# parameter), captures a screenshot to "fail.png" and stores a log in "fail.log".
+fail() {
+  echo "${1}"
+  podman cp "${POD}:/opt/Xvfb_screen0" - | tar xf - --to-command 'convert xwd:- fail.png'
+  LOG=$(do_in_pod sudo journalctl | grep -C 5 "error\|gjs")
+  echo "${LOG}" > fail.log
+  exit 1
+}
+
+# This searches the virtual screen of the container for a given target image (first
+# parameter). If it is not found, an error message (second paramter) is printed and the
+# script exits via the fail() method above.
+find_target() {
+  echo "Looking for ${1} on the screen."
+  POS=$(do_in_pod find-target.sh "${1}") || true
+  if [[ -z "${POS}" ]]; then
+    fail "${2}"
+  fi
+}
+
+# This searches the virtual screen of the container for a given target image (first
+# parameter) and moves the mouse to the upper left corner of the best match. If the target
+# image is not found, an error message (second paramter) is printed and the script exits
+# via the fail() method above.
+move_mouse_to_target() {
+  echo "Trying to move mouse to ${1}."
+  POS=$(do_in_pod find-target.sh "${1}") || true
+  if [[ -z "${POS}" ]]; then
+    fail "${2}"
+  fi
+
+  # shellcheck disable=SC2086
+  do_in_pod xdotool mousemove $POS
+}
+
+# This simulates the given keystroke in the container. Simply calling "xdotool key $1"
+# sometimes fails to be recognized. Maybe the default 12ms between key-down and key-up
+# are too short for xvfb...
+send_keystroke() {
+  do_in_pod xdotool keydown "${1}"
+  sleep 0.5
+  do_in_pod xdotool keyup "${1}"
+}
+
+# This simulates a mouse click in the container. Simply calling "xdotool click $1"
+# sometimes fails to be recognized. Maybe the default 12ms between button-down and
+# button-up are too short for xvfb...
+send_click() {
+  do_in_pod xdotool mousedown "${1}"
+  sleep 0.5
+  do_in_pod xdotool mouseup "${1}"
+}
+
+
+# ----------------------------------------------------- wait for the container to start up
+
+echo "Waiting for D-Bus."
+do_in_pod wait-user-bus.sh > /dev/null 2>&1
+
+
+# ----------------------------------------------------- install the to-be-tested extension
+
+echo "Installing extension."
+podman cp "tests/references" "${POD}:/home/gnomeshell/references"
+podman cp "${EXTENSION}.zip" "${POD}:/home/gnomeshell"
+do_in_pod gnome-extensions install "${EXTENSION}.zip"
+do_in_pod gnome-extensions enable "${EXTENSION}"
+
+
+# ---------------------------------------------------------------------- start GNOME Shell
+
+# Starting with GNOME 40, there is a "Welcome Tour" dialog popping up at first launch.
+# We disable this beforehand.
+if [[ "${FEDORA_VERSION}" -gt 33 ]]; then
+  echo "Disabling welcome tour."
+  do_in_pod gsettings set org.gnome.shell welcome-dialog-last-shown-version "999" || true
+fi
+
+echo "Starting $(do_in_pod gnome-shell --version)."
+do_in_pod systemctl --user start "${SESSION}@:99"
+sleep 10
+
+# Starting with GNOME 40, the overview is the default mode. We close this here by hitting
+# the super key.
+if [[ "${FEDORA_VERSION}" -gt 33 ]]; then
+  echo "Closing Overview."
+  send_keystroke "super"
+  sleep 3
+fi
+
+
+# ---------------------------------------------------------------------- perform the tests
+
+# First we open the preferences and check whether the window is shown on screen by
+# searching for a small snippet of the preferences dialog.
+echo "Opening Preferences."
+do_in_pod gnome-extensions prefs "${EXTENSION}"
+sleep 3
+find_target "references/preferences.png" "Failed to open preferences!"
+
+echo "All tests executed successfully."