Merge branch 'main' into feature/transporter

README.md

@@ -16,6 +16,7 @@ Effect | Preview
 **Matrix** <br> Turn your windows into a shower of green letters! The color is actually configurable. <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/matrix.gif" />
 **T-Rex Attack** <br> Destroy your windows with a series of violent slashes! <br><br> _Only available in GNOME Shell 40+_ | <img src ="docs/pics/trex.gif" />
 **TV-Effect** <br> This is a very simple effect to demonstrate that this extension could also be used in a more professional environment. | <img src ="docs/pics/tv.gif" />
+**Your Effect!** <br> The extension is very modular and with a bit of creativity and GLSL knowledge, you can easily create your own effects. | [A tutorial for creating custom effects is available here.](docs/how-to-create-new-effects.md)
 
 
 ## 💞 These People _love_ this Extension
@@ -109,7 +110,8 @@ gnome-extensions enable burn-my-windows@schneegans.github.com
 ## :octocat: I want to contribute!
 
 That's great!
-Here are some basic rulles to get you started:
+Most likely, you want to [create a new effect](docs/how-to-create-new-effects.md)?
+Here are some basic rules to get you started:
 Commits should start with a Capital letter and should be written in present tense (e.g. __:tada: Add cool new feature__ instead of __:tada: Added cool new feature__).
 You should also start your commit message with **one** applicable emoji.
 This does not only look great but also makes you rethink what to add to a commit. Make many but small commits!

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

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

resources/img/scalable/actions/burn-my-windows-symbolic.svg

@@ -25,9 +25,9 @@
      inkscape:document-units="mm"
      showgrid="false"
      units="px"
-     inkscape:zoom="4.9362795"
+     inkscape:zoom="2.5309183"
-     inkscape:cx="152.03758"
+     inkscape:cx="71.713102"
-     inkscape:cy="214.93921"
+     inkscape:cy="128.807"
      inkscape:window-width="1920"
      inkscape:window-height="1131"
      inkscape:window-x="0"
@@ -827,7 +827,7 @@
          transform="scale(1,-1)"
          ry="0.52187622" />
       <path
-         d="m 52.973458,311.84361 c -17.19257,-10.18416 -13.627212,-21.32974 -7.581704,-32.19597 -5.294034,6.5384 -8.483787,14.0264 -8.550599,19.92657 -6.947399,-3.98531 -12.825932,-11.956 -12.825932,-19.92657 0,-10.3682 3.858911,-18.12445 13.745601,-21.44029 -0.730464,9.86958 -0.743042,9.35901 0.588169,18.66206 1.091225,1.45177 12.181505,1.77857 27.746426,2.76671 1.048021,-6.0838 1.779188,-13.44988 1.386469,-18.31657 5.658192,4.8458 8.619944,20.64515 0.986181,29.87614 -7.633763,9.23099 -15.816268,12.24946 -15.494611,20.64792 z"
+         d="m 55.481718,311.84361 c -17.19257,-10.18416 -13.28388,-21.36482 -7.238372,-32.23105 -5.294034,6.5384 -8.827119,14.06148 -8.893931,19.96165 -6.947399,-3.98531 -12.825932,-11.956 -12.825932,-19.92657 0,-10.3682 3.634338,-16.49279 11.238643,-21.23708 -0.730464,9.86958 -1.07534,9.87792 0.255871,19.18097 1.091225,1.45177 13.247842,0.98189 28.812763,1.97003 1.048021,-6.0838 0.786877,-14.5301 0.394158,-19.39679 9.058119,4.13463 11.385174,21.79993 3.751411,31.03092 -7.633763,9.23099 -15.816268,12.24946 -15.494611,20.64792 z"
          fill="#2e3436"
          id="path5150"
          style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#ef2929;fill-opacity:1;stroke:none;stroke-width:0.515585;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;marker:none;stop-color:#000000;stop-opacity:1"
@@ -1044,7 +1044,7 @@
            style="fill:url(#radialGradient7387);fill-opacity:1;stroke:#303030;stroke-width:1.00157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </g>
       <path
-         d="m 49.746992,297.89274 c 2.921113,-6.70052 7.774398,-18.46795 -3.12961,-19.48327 -4.530056,-0.51686 -12.585796,6.67666 -12.633315,11.17836 -5.598534,-6.81781 -4.761608,-18.9136 2.699934,-25.26505 3.579612,1.56789 -2.564763,6.03158 1.539159,10.07564 10.611921,2.13789 18.7402,5.16893 27.835867,4.80357 1.981671,-1.05176 1.0129,-4.40152 1.331478,-4.7951 3.205597,12.14363 -9.848011,19.72051 -17.643513,23.48585 z"
+         d="m 52.255252,297.89274 c 2.921113,-6.70052 7.774398,-18.46795 -3.12961,-19.48327 -4.530056,-0.51686 -12.585796,6.67666 -12.633315,11.17836 -5.598534,-6.81781 -6.800253,-17.59585 0.661289,-23.9473 -0.184506,4.51295 0.846628,11.73377 0.846628,11.73377 0,0 19.020083,2.41681 28.11575,2.05145 1.981671,-1.05176 1.462193,-12.26798 1.780771,-12.66156 10.336216,14.88568 -7.846011,27.36321 -15.641513,31.12855 z"
          fill="#2e3436"
          id="path3847"
          style="font-variation-settings:normal;opacity:0.798054;mix-blend-mode:normal;vector-effect:none;fill:#f57900;fill-opacity:1;stroke:none;stroke-width:0.501652;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;marker:none;stop-color:#000000;stop-opacity:1"

resources/ui/gtk3/generalPage.ui

@@ -21,7 +21,8 @@
     <child>
       <object class="GtkLabel">
         <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
-        <property name="margin-bottom">4</property>
+        <property name="margin-top">8</property>
+        <property name="margin-bottom">6</property>
         <style>
           <class name="large-title" />
         </style>

resources/ui/gtk4/generalPage.ui

@@ -21,7 +21,8 @@
     <child>
       <object class="GtkLabel">
         <property name="label" translatable="yes">Welcome to Burn-My-Windows!</property>
-        <property name="margin-bottom">4</property>
+        <property name="margin-top">8</property>
+        <property name="margin-bottom">6</property>
         <style>
           <class name="large-title" />
         </style>

src/TRexEffect.js

@@ -182,7 +182,7 @@ if (utils.isInShellProcess()) {
 
           cellUV -= 0.5;
           cellUV = vec2(cellUV.x * cos(rotation) - cellUV.y * sin(rotation),
-          cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
+                        cellUV.x * sin(rotation) + cellUV.y * cos(rotation));
           cellUV += 0.5;
 
           // Clamp resulting coordinates.