📝 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
+	schemas/gschemas.compiled \
-
+	locale \
-burn-my-windows@schneegans.github.com.zip: schemas/gschemas.compiled resources/burn-my-windows.gresource $(JS_FILES)
+	ui/*.ui~ \
-	@# Check if the VERSION variable was passed and set version to it
+	po/*.po~
-	@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?
 
+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,8 +1,13 @@
-# 🔥 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)!
@@ -12,6 +17,7 @@ For a list of things changed in previous releases, you can have a look at the [c
 
 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" />
@@ -24,7 +30,7 @@ Effect | Preview
 
 ## 💞 These People _love_ this Extension
 
-While coding new features is the most awesome way to contribute, providing financial support will help me stay motivated to invest my spare time to keep the project alive in the future.
+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">
@@ -44,6 +50,8 @@ While coding new features is the most awesome way to contribute, providing finan
 
 <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>
 
@@ -113,7 +121,7 @@ gnome-extensions enable burn-my-windows@schneegans.github.com
 ## :octocat: I want to contribute!
 
 That's great!
-Most likely, you want to [create a new effect](docs/how-to-create-new-effects.md)?
+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.

docs/changelog.md

@@ -1,5 +1,24 @@
 # 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

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

@@ -34,14 +34,14 @@ Of course, you can replace any occurrence of this name and its nick `simple-fade
 Three simple steps are required to create a new effect. 
 You will have to ...
 
-1. add a preferences key for enabling the effect,
+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 key `simple-fade-close-effect` is required.
+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 an integer valued settings key for storing the animation time of the new effect and a floating point value for storing another property of the effect - we will use them later in the tutorial.
+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!
 
@@ -56,6 +56,12 @@ Just remember to replace `simple-fade` with your custom name!
   <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>
@@ -121,7 +127,8 @@ var SimpleFade = class SimpleFade {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'simple-fade';
   }
@@ -137,35 +144,34 @@ var SimpleFade = class SimpleFade {
   // 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 initPreferences(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(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('simple-fade-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should neither be scaled nor faded.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 4},
-        transition.set_duration(animationTime);
+      'scale-x': {from: 1.0, to: 1.0, mode: 4},
-      }
+      'scale-y': {from: 1.0, to: 1.0, mode: 4}
     };
-
-    // We re-target these transitions so that the window is neither scaled nor faded.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
   }
 }
 
@@ -182,7 +188,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       this.set_shader_source(`
@@ -207,8 +213,10 @@ if (utils.isInShellProcess()) {
           // 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.
+          // This gradually dissolves from [1..0] from the outside to the center. We
-          float mask = (1.0 - uProgress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
+          // 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);
@@ -259,7 +267,7 @@ There should be two sliders in this example: The animation duration and the widt
 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 `initPreferences()` method of your new effect class.
+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!
@@ -287,10 +295,6 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
   <object class="GtkBox" id="simple-fade-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="GtkFrame">
@@ -338,7 +342,7 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -386,7 +390,7 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -432,10 +436,6 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
   <object class="GtkBox" id="simple-fade-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="GtkFrame">
@@ -475,7 +475,7 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
                     <child>
                       <object class="GtkButton" id="reset-simple-fade-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -514,7 +514,7 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
                     <child>
                       <object class="GtkButton" id="reset-simple-fade-width">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -539,10 +539,10 @@ Remember to replace any occurrence of `simple-fade` with your effect's nick-name
 
 ### Loading the Preferences Page
 
-In order to load the above `*.ui` files, add the following code to your effect's `initPreferences()` method.
+In order to load the above `*.ui` files, add the following code to your effect's `getPreferences()` method.
 
 ```javascript
-static initPreferences(dialog) {
+static getPreferences(dialog) {
 
   // Add the settings page to the builder.
   dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/SimpleFade.ui`);
@@ -552,11 +552,8 @@ static initPreferences(dialog) {
   dialog.bindAdjustment('simple-fade-animation-time');
   dialog.bindAdjustment('simple-fade-width');
 
-  // Finally, append the settings page to the main stack.
+  // Finally, return the new settings page.
-  const stack = dialog.getBuilder().get_object('main-stack');
+  return dialog.getBuilder().get_object('simple-fade-prefs');
-  stack.add_titled(
-      dialog.getBuilder().get_object(SimpleFade.getNick() + '-prefs'),
-      SimpleFade.getNick(), SimpleFade.getLabel());
 }
 ```
 

extension.js

@@ -15,6 +15,7 @@
 
 const {Clutter, Gio, Meta} = imports.gi;
 
+const Main          = imports.ui.main;
 const Workspace     = imports.ui.workspace.Workspace;
 const WindowManager = imports.ui.windowManager.WindowManager;
 
@@ -36,19 +37,19 @@ const ALL_EFFECTS = [
   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  //
+// This extensions modifies the window-close and window-open animations with all kinds  //
-// on fire. There are also a few other effects available. All of them are implemented   //
+// of effects. The effects are implemented using GLSL shaders which are applied to the  //
-// using GLSL shaders which are applied to the window's Clutter.Actor. The extension is //
+// window's Clutter.Actor. The extension is actually very simple, much of the           //
-// actually very simple, most of the complexity comes from the fact that GNOME Shell    //
+// complexity comes from the fact that GNOME Shell usually does not show an animation   //
-// usually does not show an animation when a window is closed in the overview. Several  //
+// when a window is closed in the overview. Several methods need to be monkey-patched   //
-// methods need to be monkey-patched to get this working. For more details, read the    //
+// to get this working. For more details, read the other comments in this file...       //
-// other comments in this file...                                                       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 class Extension {
@@ -66,53 +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 will store an item of ALL_EFFECTS array which was used the last time a window
+    // was opened / closed.
+    this._currentEffect = 0;
+
+    // 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._origAddWindowClone     = Workspace.prototype._addWindowClone;
     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;
 
-    // We will use extensionThis to refer to the extension inside the patched methods of
-    // the WorkspacesView.
-    const extensionThis = this;
 
-    // Do not attempt to close windows twice. Due to the animation in the overview, the
+    // ------------------------------------------------ patching the window-open animation
-    // close button can be clicked twice which normally would lead to a crash.
-    if (WindowPreview) {
-      this._origDeleteAll = WindowPreview.prototype._deleteAll;
 
-      WindowPreview.prototype._deleteAll = function() {
+    // Here we add an effect to the window-open animation. This is done whenever a new
-        if (!this._closeRequested) {
+    // window is created. Usually, there is no real window animation for opening windows
-          extensionThis._origDeleteAll.apply(this);
+    // 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
+      // but not _doRemoveWindow. The latter is required to trigger the repositioning of
-    // overview window layout. Therefore we call this method in addition.
+      // 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)) {
-      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
+      return result;
-    // 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
+    // Usually, windows are faded in after the overview is completely hidden. We enable
-    // is a transition ongoing (via extensionThis._shouldDestroy). If that's the case,
+    // window-open animations by not waiting for this.
-    // these methods do nothing. Are the actors removed in the end? I hope so. The
+    WindowManager.prototype._waitForOverviewToHide = async function() {
-    // _destroyWindow of the WindowManager sets the transitions up and should take care of
+      return Promise.resolve();
-    // removing the actors at the end of the transitions.
+    };
+
+    // 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);
+    };
+
+
+    // ----------------------------------------------- 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)) {
@@ -127,88 +234,54 @@ class Extension {
       }
     };
 
-    // Here comes the ULTRA-HACK: The method below is called (amongst others) by the
+    // With the code below, we hide the window-overlay (icon, label, close button) in the
-    // _destroyWindow method of the WindowManager. Usually, it returns false when we are
+    // overview once the close-animation is running. As the WindowPreview class is only
-    // in the overview. This prevents the window-close animation. As we cannot
+    // available on GNOME 3.38 and beyond, we cannot hide the overlay on GNOME 3.36.
-    // monkey-patch the _destroyWindow method itself, we check inside the method below
+    if (WindowPreview) {
-    // whether it was called by _destroyWindow. If so, we return true. Let's see if this
+
-    // breaks stuff left and right...
+      // We will monkey-patch these methods.
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1125
+      this._origDeleteAll = WindowPreview.prototype._deleteAll;
-    WindowManager.prototype._shouldAnimateActor = function(...params) {
+      this._origRestack   = WindowPreview.prototype._restack;
-      if ((new Error()).stack.split('\n')[1].includes('_destroyWindow@')) {
+      this._origInit      = WindowPreview.prototype._init;
-        return true;
+
+      // 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);
+
+        // 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;
           }
-      return extensionThis._origShouldAnimateActor.apply(this, params);
+        });
+
+        // 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 close animation is set up in WindowManager's _destroyWindow:
+      // The _deleteAll is called when the user clicks the X in the overview. We should
-    // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/windowManager.js#L1549
+      // not attempt to close windows twice. Due to the animation in the overview, the
-    // As we cannot monkey-patch the _destroyWindow itself, we connect to the 'destroy'
+      // close button can be clicked twice which normally would lead to a crash.
-    // signal of the window manager and tweak the animation to our needs.
+      WindowPreview.prototype._deleteAll = function() {
-    this._destroyConnection = global.window_manager.connect('destroy', (wm, actor) => {
+        if (!this._closeRequested) {
-      // The _destroyWindow method of WindowManager, which was called right before this
+          extensionThis._origDeleteAll.apply(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 do nothing if a dialog got closed and we should not burn them.
+      // This is required, else WindowPreview's _restack() which is called by the
-      const isDialogWindow =
+      // "this.overlayEnabled = false", sometimes tries to access an already delete
-          actor.meta_window.window_type == Meta.WindowType.MODAL_DIALOG ||
+      // WindowPreview.
-          actor.meta_window.window_type == Meta.WindowType.DIALOG;
+      WindowPreview.prototype._restack = function() {
-
+        if (!this._closeRequested) {
-      if (!this._settings.get_boolean('destroy-dialogs') && isDialogWindow) {
+          extensionThis._origRestack.apply(this);
-        return;
         }
-
+      };
-      // Create a list of all currently enabled effects.
-      const enabledEffects = ALL_EFFECTS.filter(Effect => {
-        return this._settings.get_boolean(`${Effect.getNick()}-close-effect`);
-      });
-
-      // Nothing is enabled...
-      if (enabledEffects.length == 0) {
-        return;
     }
-
-      // Choose a random effect.
-      const Effect = enabledEffects[Math.floor(Math.random() * enabledEffects.length)];
-
-      // The effect usually will choose to override the present transitions on the actor.
-      Effect.tweakTransitions(actor, this._settings);
-
-      // Add a cool shader to our window actor!
-      const shader = Effect.createShader(this._settings);
-
-      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);
-        });
-      }
-
-      // 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...
-      const duration = transition.get_duration();
-      if (isDialogWindow) {
-        imports.ui.windowManager.DIALOG_DESTROY_WINDOW_ANIMATION_TIME = duration;
-      } else {
-        imports.ui.windowManager.DESTROY_WINDOW_ANIMATION_TIME = duration;
-      }
-    });
   }
 
   // This function could be called after the extension is uninstalled, disabled in GNOME
@@ -218,19 +291,23 @@ 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._addWindowClone            = this._origAddWindowClone;
     Workspace.prototype._windowRemoved             = this._origWindowRemoved;
     Workspace.prototype._doRemoveWindow            = this._origDoRemoveWindow;
-    Workspace.prototype._addWindowClone         = this._origAddWindowClone;
     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;
@@ -238,6 +315,180 @@ class Extension {
 
   // ----------------------------------------------------------------------- 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) {

metadata.json

@@ -11,5 +11,5 @@
         "41"
     ],
     "url": "https://github.com/Schneegans/Burn-My-Windows",
-    "version": 9
+    "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,7 +13,9 @@
 
 '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();
@@ -25,11 +27,15 @@ const ALL_EFFECTS = [
   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;
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // 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  //
@@ -45,6 +51,19 @@ var PreferencesDialog = class PreferencesDialog {
     this._resources = Gio.Resource.load(Me.path + '/resources/burn-my-windows.gresource');
     Gio.resources_register(this._resources);
 
+    // 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);
+    }
+
     // Make sure custom icons are found.
     if (utils.isGTK4()) {
       Gtk.IconTheme.get_for_display(Gdk.Display.get_default()).add_resource_path('/img');
@@ -52,6 +71,9 @@ var PreferencesDialog = class PreferencesDialog {
       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();
 
@@ -64,10 +86,20 @@ var PreferencesDialog = class PreferencesDialog {
     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)) {
-        Effect.initPreferences(this);
+
+        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());
       }
     });
 
@@ -102,11 +134,35 @@ var PreferencesDialog = class PreferencesDialog {
         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
       }
 
+      // 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');
@@ -209,6 +265,17 @@ var PreferencesDialog = class PreferencesDialog {
     this._bindResetButton(settingsKey);
   }
 
+  // ----------------------------------------------------------------- GTK3 / GTK4 helpers
+
+  // 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);
+    }
+  }
+
   // ----------------------------------------------------------------------- private stuff
 
   // Searches for a reset button for the given settings key and make it reset the settings
@@ -233,10 +300,94 @@ var PreferencesDialog = class PreferencesDialog {
 
     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);
             }
 
-// Nothing to do for now...
+            const box = new Gtk.Box({
-function init() {}
+              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();
+            }
+          });
+        }
+      });
+      // clang-format on
+    }
+  }
+}
+
+// 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

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
   <menu id="main-menu">
     <section>
       <item>
@@ -10,12 +10,20 @@
         <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>
-    </section>
+      <item>
-    <section>
+        <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>

resources/ui/gtk3/EnergizeA.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkAdjustment" id="energize-a-animation-time">
     <property name="upper">10000</property>
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="energize-a-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="GtkFrame">
@@ -69,7 +65,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -118,7 +114,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -161,7 +157,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk3/EnergizeB.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkAdjustment" id="energize-b-animation-time">
     <property name="upper">10000</property>
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="energize-b-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="GtkFrame">
@@ -69,7 +65,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -118,7 +114,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -161,7 +157,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk3/Fire.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkAdjustment" id="fire-animation-time">
     <property name="upper">10000</property>
@@ -24,10 +24,6 @@
 
   <object class="GtkBox" id="fire-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="GtkFrame">
@@ -81,19 +77,6 @@
                 </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">
@@ -133,7 +116,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -181,7 +164,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -229,7 +212,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -291,7 +274,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -359,7 +342,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk3/TVEffect.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkAdjustment" id="tv-animation-time">
     <property name="upper">5000</property>
@@ -10,10 +10,6 @@
 
   <object class="GtkBox" id="tv-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="GtkFrame">
@@ -62,7 +58,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -105,7 +101,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk3/Wisps.ui

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkAdjustment" id="wisps-animation-time">
     <property name="upper">10000</property>
@@ -17,10 +17,6 @@
 
   <object class="GtkBox" id="wisps-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="GtkFrame">
@@ -69,7 +65,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -118,7 +114,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -161,7 +157,7 @@
                             <property name="icon-size">1</property>
                           </object>
                         </child>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

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

@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<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>
@@ -68,6 +69,70 @@
                   <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>
@@ -144,7 +209,7 @@
                             <property name="spacing">8</property>
                             <child>
                               <object class="GtkLabel">
-                                <property name="label" translatable="yes">Also Burn Dialogs</property>
+                                <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>
@@ -165,7 +230,7 @@
                                     <property name="icon-size">1</property>
                                   </object>
                                 </child>
-                                <property name="tooltip-text">Reset to Default Value</property>
+                                <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                                 <style>
                                   <class name="flat" />
                                 </style>

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

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="energize-a-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-a-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -99,7 +95,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-a-scale">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -133,7 +129,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-a-color">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/EnergizeB.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="energize-b-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-b-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -99,7 +95,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-b-scale">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -133,7 +129,7 @@
                     <child>
                       <object class="GtkButton" id="reset-energize-b-color">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/Fire.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="fire-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="GtkFrame">
@@ -42,20 +38,6 @@
                 </child>
               </object>
             </child>
-          </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">
@@ -92,7 +74,7 @@
                     <child>
                       <object class="GtkButton" id="reset-fire-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -138,7 +120,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -184,7 +166,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -237,7 +219,7 @@
                     <child>
                       <object class="GtkButton" id="reset-flame-3d-noise">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -295,7 +277,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/Matrix.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="matrix-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-matrix-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -99,7 +95,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -145,7 +141,53 @@
                     <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>
+                        <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>
@@ -179,7 +221,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -213,7 +255,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/TRexAttack.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="trex-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-trex-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -99,7 +95,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -145,7 +141,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -191,7 +187,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -225,7 +221,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/TVEffect.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="tv-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-tv-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -87,7 +83,7 @@
                     <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>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

resources/ui/gtk4/Wisps.ui

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<interface domain="burn-my-windows">
 
   <object class="GtkBox" id="wisps-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="GtkFrame">
@@ -53,7 +49,7 @@
                     <child>
                       <object class="GtkButton" id="reset-wisps-animation-time">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -99,7 +95,7 @@
                     <child>
                       <object class="GtkButton" id="reset-wisps-scale">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>
@@ -133,7 +129,7 @@
                     <child>
                       <object class="GtkButton" id="reset-wisps-color">
                         <property name="icon-name">edit-clear-symbolic</property>
-                        <property name="tooltip-text">Reset to Default Value</property>
+                        <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                         <style>
                           <class name="flat" />
                         </style>

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

@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<interface>
+<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>
@@ -70,6 +71,50 @@
                         </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>
@@ -105,7 +150,7 @@
                                 </child>
                                 <child>
                                   <object class="GtkMenuButton" id="close-effect-button">
-                                    <property name="label">Choose Effects</property>
+                                    <property name="label" translatable="yes">Choose Effects</property>
                                     <property name="menu-model">close-effect-menu</property>
                                   </object>
                                 </child>
@@ -121,7 +166,7 @@
                               <object class="GtkBox">
                                 <child>
                                   <object class="GtkLabel">
-                                    <property name="label" translatable="yes">Also Burn Dialogs</property>
+                                    <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>
@@ -137,7 +182,7 @@
                                 <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>
+                                    <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                                     <style>
                                       <class name="flat" />
                                     </style>

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

@@ -13,6 +13,18 @@
       <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                                                                  -->
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -23,6 +35,12 @@
       <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>
@@ -87,8 +105,14 @@
       <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>3000</default>
+      <default>1500</default>
       <summary>Matrix Animation Time</summary>
       <description>The time the matrix effect takes.</description>
     </key>
@@ -117,6 +141,12 @@
       <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                                                             -->
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -127,6 +157,12 @@
       <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>
@@ -149,8 +185,14 @@
       <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>1500</default>
+      <default>1000</default>
       <summary>T-Rex Animation Time</summary>
       <description>The time the trex effect takes.</description>
     </key>
@@ -189,6 +231,12 @@
       <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>
@@ -217,8 +265,14 @@
       <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>2000</default>
+      <default>1000</default>
       <summary>Energize B Animation Time</summary>
       <description>The time the Energize B effect takes.</description>
     </key>
@@ -245,8 +299,14 @@
       <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>2000</default>
+      <default>1500</default>
       <summary>Wisps Animation Time</summary>
       <description>The time the wisps effect takes.</description>
     </key>
@@ -263,6 +323,52 @@
       <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>
 
 </schemalist>

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

@@ -15,6 +15,8 @@
 
 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;
@@ -40,7 +42,8 @@ var EnergizeA = class EnergizeA {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'energize-a';
   }
@@ -48,7 +51,7 @@ var EnergizeA = class EnergizeA {
   // 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';
+    return _('Energize A');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -56,7 +59,7 @@ var EnergizeA = class EnergizeA {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeA.ui`);
@@ -66,38 +69,33 @@ var EnergizeA = class EnergizeA {
     dialog.bindAdjustment('energize-a-scale');
     dialog.bindColorButton('energize-a-color');
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('energize-a-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('energize-a-prefs'), EnergizeA.getNick(),
-        EnergizeA.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('energize-a-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should neither be scaled nor faded.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 3},
-        transition.set_duration(animationTime);
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      }
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
     };
-
-    // We re-target these transitions so that the window is neither scaled nor faded.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
   }
 }
 
@@ -114,7 +112,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       const color = Clutter.Color.from_string(settings.get_string('energize-a-color'))[1];
@@ -159,6 +157,10 @@ if (utils.isInShellProcess()) {
         // 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);
       }
 

src/EnergizeB.js

@@ -15,6 +15,8 @@
 
 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;
@@ -40,7 +42,8 @@ var EnergizeB = class EnergizeB {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'energize-b';
   }
@@ -48,7 +51,7 @@ var EnergizeB = class EnergizeB {
   // 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';
+    return _('Energize B');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -56,7 +59,7 @@ var EnergizeB = class EnergizeB {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/EnergizeB.ui`);
@@ -66,38 +69,33 @@ var EnergizeB = class EnergizeB {
     dialog.bindAdjustment('energize-b-scale');
     dialog.bindColorButton('energize-b-color');
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('energize-b-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('energize-b-prefs'), EnergizeB.getNick(),
-        EnergizeB.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('energize-b-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should neither be scaled nor faded.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 3},
-        transition.set_duration(animationTime);
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      }
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
     };
-
-    // We re-target these transitions so that the window is neither scaled nor faded.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
   }
 }
 
@@ -114,7 +112,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       const color = Clutter.Color.from_string(settings.get_string('energize-b-color'))[1];
@@ -127,7 +125,7 @@ if (utils.isInShellProcess()) {
       ${shaderSnippets.edgeMask()}
 
       const vec2  SEED         = vec2(${Math.random()}, ${Math.random()});
-      const float SHOWER_TIME  = 0.2;
+      const float SHOWER_TIME  = 0.3;
       const float SHOWER_WIDTH = 0.3;
       const float STREAK_TIME  = 0.6;
       const float EDGE_FADE    = 50;
@@ -156,7 +154,7 @@ if (utils.isInShellProcess()) {
         float atomMask = getRelativeEdgeMask(0.2);
         atomMask = max(0, atomMask - showerMask);
         atomMask *= streakMask;
-        atomMask *= (1.0 - fadeProgress);
+        atomMask *= sqrt(1-fadeProgress*fadeProgress);
 
         // Make some particles visible in the streaks.
         showerMask += 0.05 * streakMask;
@@ -177,6 +175,10 @@ if (utils.isInShellProcess()) {
         // 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);
       }
 

src/Fire.js

@@ -15,6 +15,8 @@
 
 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;
@@ -44,7 +46,8 @@ var Fire = class Fire {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'fire';
   }
@@ -52,7 +55,7 @@ var Fire = class 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';
+    return _('Fire');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -60,7 +63,7 @@ var Fire = class Fire {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Fire.ui`);
@@ -88,37 +91,33 @@ var Fire = class Fire {
     // Initialize the fire-preset dropdown.
     Fire._createFirePresets(dialog);
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('fire-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('fire-prefs'), Fire.getNick(), Fire.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('fire-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should neither be scaled nor faded.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 3},
-        transition.set_duration(animationTime);
+      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      }
+      'scale-y': {from: 1.0, to: 1.0, mode: 3}
     };
-
-    // We re-target these transitions so that the window is neither scaled nor faded.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
   }
 
   // ----------------------------------------------------------------------- private stuff
@@ -128,7 +127,7 @@ var Fire = class Fire {
     dialog.getBuilder().get_object('settings-widget').connect('realize', (widget) => {
       const presets = [
         {
-          name: 'Default Fire',
+          name: _('Default Fire'),
           scale: 1.0,
           speed: 0.5,
           color1: 'rgba(76, 51, 25, 0.0)',
@@ -138,7 +137,7 @@ var Fire = class Fire {
           color5: 'rgba(255, 255, 255, 1)'
         },
         {
-          name: 'Hell Fire',
+          name: _('Hell Fire'),
           scale: 1.5,
           speed: 0.2,
           color1: 'rgba(0,0,0,0)',
@@ -148,7 +147,7 @@ var Fire = class Fire {
           color5: 'rgba(255, 255, 255, 1)'
         },
         {
-          name: 'Dark and Smutty',
+          name: _('Dark and Smutty'),
           scale: 1.0,
           speed: 0.5,
           color1: 'rgba(0,0,0,0)',
@@ -158,7 +157,7 @@ var Fire = class Fire {
           color5: 'rgb(255,238,166)'
         },
         {
-          name: 'Cold Breeze',
+          name: _('Cold Breeze'),
           scale: 1.5,
           speed: -0.1,
           color1: 'rgba(0,110,255,0)',
@@ -168,7 +167,7 @@ var Fire = class Fire {
           color5: 'rgb(97,189,255)'
         },
         {
-          name: 'Santa is Coming',
+          name: _('Santa is Coming'),
           scale: 0.4,
           speed: -0.5,
           color1: 'rgba(0,110,255,0)',
@@ -224,7 +223,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _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
@@ -247,7 +246,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.edgeMask()}
 
         // These may be configurable in the future.
-        const float EDGE_FADE  = 90;
+        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')};
@@ -309,6 +308,10 @@ if (utils.isInShellProcess()) {
           // Fade at window borders.
           effectMask *= getAbsoluteEdgeMask(edgeFadeWidth);
 
+          #if ${forOpening ? '1' : '0'}
+            windowMask = 1.0 - windowMask;
+          #endif
+
           return vec2(windowMask, effectMask);
         }
 
@@ -336,7 +339,7 @@ if (utils.isInShellProcess()) {
           cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
 
           // Add the fire to the window.
-          cogl_color_out += fire;
+          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);

src/Matrix.js

@@ -15,6 +15,8 @@
 
 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;
@@ -44,7 +46,8 @@ var Matrix = class Matrix {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'matrix';
   }
@@ -52,7 +55,7 @@ var Matrix = class 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';
+    return _('Matrix');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -60,7 +63,7 @@ var Matrix = class Matrix {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/Matrix.ui');
@@ -69,41 +72,39 @@ var Matrix = class Matrix {
     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, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('matrix-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('matrix-prefs'), Matrix.getNick(),
-        Matrix.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('matrix-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should not be faded but scaled vertically to allow for some
-      const transition = actor.get_transition(property);
+  // overshooting.
-      if (transition) {
+  static tweakTransition(actor, settings, forOpening) {
-        transition.set_to(value);
+    const yScale = 1.0 + settings.get_double('matrix-overshoot');
-        transition.set_duration(animationTime);
+    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}
     };
-
-    // We re-target these transitions so that the window is neither scaled nor faded.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
   }
 }
 
@@ -120,7 +121,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets             = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _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,
@@ -158,6 +159,7 @@ if (utils.isInShellProcess()) {
         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) {
@@ -176,37 +178,49 @@ if (utils.isInShellProcess()) {
         // 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);
+          float column = cogl_tex_coord_in[0].x * uSizeX;
-          coords.x -= mod(coords.x, LETTER_SIZE);
+          column -= mod(column, LETTER_SIZE);
 
-          float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
+          float delay = fract(sin(column)*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 speed = fract(cos(column)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
           
-          float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
+          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(cogl_tex_coord_in[0].st);
+          vec2  rain = getRain(coords);
-          float text = getText(cogl_tex_coord_in[0].st);
+          float text = getText(coords);
 
           // 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;
+          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;
 
-          // Fade at window borders.
-          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
-
           // Add the matrix effect to the window.
           vec3 trailColor = vec3(${trailColor.red / 255}, 
                                  ${trailColor.green / 255}, 

src/TRexAttack.js

@@ -15,6 +15,8 @@
 
 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;
@@ -42,7 +44,8 @@ var TRexAttack = class TRexAttack {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'trex';
   }
@@ -50,7 +53,7 @@ var TRexAttack = class TRexAttack {
   // 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';
+    return _('T-Rex Attack');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -58,7 +61,7 @@ var TRexAttack = class TRexAttack {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/TRexAttack.ui');
@@ -70,40 +73,34 @@ var TRexAttack = class TRexAttack {
     dialog.bindAdjustment('claw-scratch-count');
     dialog.bindAdjustment('claw-scratch-warp');
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('trex-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('trex-prefs'), TRexAttack.getNick(),
-        TRexAttack.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('trex-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, we slightly increase the window's scale as part of the warp effect.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    const warp = 1.0 + 0.5 * settings.get_double('claw-scratch-warp');
-        transition.set_to(value);
+    return {
-        transition.set_duration(animationTime);
+      '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}
     };
-
-    // For this effect, we slightly increase the window's scale as part of the warp
-    // effect.
-    const warp = 0.5 * settings.get_double('claw-scratch-warp');
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1.0 + warp);
-    tweakTransition('scale-y', 1.0 + warp);
   }
 }
 
@@ -120,7 +117,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets             = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _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,
@@ -149,8 +146,8 @@ if (utils.isInShellProcess()) {
         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 MAX_SPAWN_TIME  = 0.6; // 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.
+        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
@@ -191,11 +188,13 @@ if (utils.isInShellProcess()) {
 
         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, uProgress);
+          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
@@ -209,11 +208,11 @@ if (utils.isInShellProcess()) {
 
           // 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;
+          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 - uProgress) + 1;
+          float flashIntensity = 1.0 / FLASH_INTENSITY * (scratchMap - progress) + 1;
           if (flashIntensity < 0 || flashIntensity >= 1) {
             flashIntensity = 0;
           }
@@ -222,17 +221,17 @@ if (utils.isInShellProcess()) {
           flashIntensity *= cogl_color_out.a;
 
           // Hide scratched out parts.
-          cogl_color_out *= (scratchMap > uProgress ? 1 : 0);
+          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), uProgress);
+          cogl_color_out.rgb += flashIntensity * mix(flashColor, vec3(0), progress);
 
           // Fade out the remaining shards.
-          float fade = smoothstep(0, 1, 1 - clamp((uProgress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
+          float fadeProgress = smoothstep(0, 1, (progress - 1.0 + FF_TIME)/FF_TIME);
-          cogl_color_out *= fade;
+          cogl_color_out *= sqrt(1-fadeProgress*fadeProgress);
 
           // These are pretty useful for understanding how this works.
           // cogl_color_out = vec4(vec3(flashIntensity), 1);

src/TVEffect.js

@@ -15,6 +15,8 @@
 
 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;
@@ -42,7 +44,8 @@ var TVEffect = class TVEffect {
 
   // 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').
+  // effect is enabled currently (e.g. '*-close-effect'), and its animation time
+  // (e.g. '*-animation-time').
   static getNick() {
     return 'tv';
   }
@@ -50,7 +53,7 @@ var TVEffect = class TVEffect {
   // 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';
+    return _('TV Effect');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -58,7 +61,7 @@ var TVEffect = class TVEffect {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/TVEffect.ui`);
@@ -67,38 +70,33 @@ var TVEffect = class TVEffect {
     dialog.bindAdjustment('tv-animation-time');
     dialog.bindColorButton('tv-effect-color');
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('tv-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('tv-prefs'), TVEffect.getNick(),
-        TVEffect.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('tv-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows are scaled down vertically.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 3},
-        transition.set_duration(animationTime);
+      '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}
     };
-
-    // For this effect, we scale the window only vertically.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 0.5);
   }
 }
 
@@ -115,7 +113,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       const color = Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
@@ -129,17 +127,19 @@ if (utils.isInShellProcess()) {
       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.
+      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(uProgress/TB_TIME, 0, 1));
+        float tbProgress = smoothstep(0, 1, clamp(progress/TB_TIME, 0, 1));
-        float lrProgress = smoothstep(0, 1, clamp((uProgress - LR_DELAY)/LR_TIME, 0, 1));
+        float lrProgress = smoothstep(0, 1, clamp((progress - LR_DELAY)/LR_TIME, 0, 1));
-        float ffProgress = smoothstep(0, 1, clamp((uProgress - 1.0 + FF_TIME)/FF_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;
@@ -162,7 +162,7 @@ if (utils.isInShellProcess()) {
                                 ${color.green / 255},
                                 ${color.blue / 255}, 1.0) * windowColor.a;
 
-        windowColor.rgb = mix(windowColor.rgb, effectColor.rgb, smoothstep(0, 1, uProgress));
+        windowColor.rgb = mix(windowColor.rgb, effectColor.rgb, smoothstep(0, 1, progress));
 
         cogl_color_out = windowColor * mask;
 

src/Wisps.js

@@ -15,6 +15,8 @@
 
 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;
@@ -27,9 +29,10 @@ const utils          = Me.imports.src.utils;
 // 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
+// This will be called in various places where a unique identifier for this effect is
-// effect's name or supported GNOME Shell versions), to initialize the respective page of
+// required. It should match the prefix of the settings keys which store whether the
-// the settings dialog, as well as to create the actual shader for the effect.
+// effect is enabled currently (e.g. '*-close-effect'), and its animation time
+// (e.g. '*-animation-time').
 var Wisps = class Wisps {
 
   // ---------------------------------------------------------------------------- metadata
@@ -49,7 +52,7 @@ var Wisps = class 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';
+    return _('Wisps');
   }
 
   // -------------------------------------------------------------------- API for prefs.js
@@ -57,7 +60,7 @@ var Wisps = class Wisps {
   // 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 initPreferences(dialog) {
+  static getPreferences(dialog) {
 
     // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Wisps.ui`);
@@ -67,38 +70,33 @@ var Wisps = class Wisps {
     dialog.bindAdjustment('wisps-scale');
     dialog.bindColorButton('wisps-color');
 
-    // Finally, append the settings page to the main stack.
+    // Finally, return the new settings page.
-    const stack = dialog.getBuilder().get_object('main-stack');
+    return dialog.getBuilder().get_object('wisps-prefs');
-    stack.add_titled(
-        dialog.getBuilder().get_object('wisps-prefs'), Wisps.getNick(), Wisps.getLabel());
   }
 
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(settings) {
+  static createShader(actor, settings, forOpening) {
-    return new Shader(settings);
+    return new Shader(settings, forOpening);
   }
 
-  // This is also called from extension.js. It is used to tweak the ongoing transitions of
+  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // the actor - usually windows are faded to transparency and scaled down slightly by
+  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // GNOME Shell. Here, we modify this behavior as well as the transition duration.
+  // The parameter 'forOpening' is set to true if this is called for a window-open
-  static tweakTransitions(actor, settings) {
+  // transition, for a window-close transition it is set to false. The modes can be set to
-    const animationTime = settings.get_int('wisps-animation-time');
+  // 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+.
 
-    const tweakTransition = (property, value) => {
+  // For this effect, windows should be scaled down slightly but not faded.
-      const transition = actor.get_transition(property);
+  static tweakTransition(actor, settings, forOpening) {
-      if (transition) {
+    return {
-        transition.set_to(value);
+      'opacity': {from: 255, to: 255, mode: 3},
-        transition.set_duration(animationTime);
+      '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}
     };
-
-    // We re-target these transitions so that the window is not faded but scaled down a
-    // tiny bit.
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 0.9);
-    tweakTransition('scale-y', 0.9);
   }
 }
 
@@ -115,7 +113,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       const color = Clutter.Color.from_string(settings.get_string('wisps-color'))[1];
@@ -175,6 +173,8 @@ if (utils.isInShellProcess()) {
 
       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},
@@ -182,7 +182,7 @@ if (utils.isInShellProcess()) {
           ${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, uProgress) + 0.5;
+        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) {
@@ -190,12 +190,12 @@ if (utils.isInShellProcess()) {
         }
 
         // Compute shrinking edge mask.
-        float mask = getRelativeEdgeMask(mix(0.01, 0.5, uProgress));
+        float mask = getRelativeEdgeMask(mix(0.01, 0.5, progress));
 
         // Compute three different progress values.
-        float wispsIn   = smoothstep(0, 1, clamp(uProgress/WISPS_IN_TIME, 0, 1));
+        float wispsIn   = smoothstep(0, 1, clamp(progress/WISPS_IN_TIME, 0, 1));
-        float wispsOut  = smoothstep(0, 1, clamp((uProgress - WISPS_IN_TIME)/(1.0 - 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(uProgress/WINDOW_OUT_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));

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."