📝 Add some comments

README.md

@@ -1,7 +1,99 @@
+<p align="center">
+  <img src ="docs/pics/teaser.gif" />
+</p>
+
 # Set your Windows on Fire!
 
 <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/4648/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://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>
 
-## :construction: This is under Construction :construction:
+When I released the [Desktop Cube Extension](https://github.com/Schneegans/Desktop-Cube/), many people requested to revive the 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)!
+
+
+## Installation
+
+You can either install the Burn-My-Windows extension from extensions.gnome.org (a), download a stable release
+from GitHub (b) or clone the latest version directly with `git` (c).
+
+### a) Installing from extensions.gnome.org
+
+This is the easiest way to install the Burn-My-Windows extension. Just head over to
+[extensions.gnome.org](https://extensions.gnome.org/extension/4679/burn-my-windows/) and flip the switch!
+If you want to use a more up-to-date version, you can try one of the methods listed below.
+
+### b) Downloading a Stable Release
+
+Execute this command to download the latest stable release:
+
+```bash
+wget https://github.com/Schneegans/Burn-My-Windows/releases/latest/download/burn-my-windows@schneegans.github.com.zip
+```
+
+Install it by executing the following command. If you have the Burn-My-Windows extension already installed and want to upgrade to
+the latest version, append the `--force` flag in order to overwrite existing installs of the Burn-My-Windows extension.
+
+```bash
+gnome-extensions install burn-my-windows@schneegans.github.com.zip
+```
+
+Then restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland.
+Then you can enable the extension with the *Gnome Tweak Tool*, the *Extensions* application or with this command:
+
+```bash
+gnome-extensions enable burn-my-windows@schneegans.github.com
+```
+
+### c) Cloning the Latest Version with `git`
+
+You should **not** clone the Burn-My-Windows extension directly to the `~/.local/share/gnome-shell/extensions` directory as this may get overridden occasionally!
+Execute the clone command below where you want to have the source code of the extension.
+
+```bash
+git clone https://github.com/Schneegans/Burn-My-Windows.git
+cd Burn-My-Windows
+```
+
+Now you will have to install the extension.
+The `make` command below compiles the locales, schemas and resources, creates a zip file of the extension and finally installs it with the `gnome-extensions` tool.
+
+```bash
+make install
+```
+
+Then restart GNOME Shell with <kbd>Alt</kbd> + <kbd>F2</kbd>, <kbd>r</kbd> + <kbd>Enter</kbd>.
+Or logout / login if you are on Wayland.
+Then you can enable the extension with the *Gnome Tweak Tool*, the *Extensions* application or with this command:
+
+```bash
+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:
+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!
+
+Emoji | Description
+------|------------
+:tada: `:tada:` | When you added a cool new feature.
+:wrench: `:wrench:` | When you added a piece of code.
+:recycle: `:recycle:` | When you refactored a part of the code.
+:sparkles: `:sparkles:` | When you applied clang-format.
+:globe_with_meridians: `:globe_with_meridians:` | When you worked on translations.
+:art: `:art:` | When you improved / added assets like themes.
+:lipstick: `:lipstick:` | When you worked on the UI of the preferences dialog.
+:rocket: `:rocket:` | When you improved performance.
+:memo: `:memo:` | When you wrote documentation.
+:beetle: `:beetle:` | When you fixed a bug.
+:revolving_hearts: `:revolving_hearts:` | When a new sponsor is added or credits are updated.
+:heavy_check_mark: `:heavy_check_mark:` | When you worked on checks or adjusted the code to be compliant with them.
+:twisted_rightwards_arrows: `:twisted_rightwards_arrows:` | When you merged a branch.
+:fire: `:fire:` | When you removed something.
+:truck: `:truck:` | When you moved / renamed something.

docs/changelog.md

@@ -1,7 +1,17 @@
 # Changelog of the Burn-My-Windows Extension
 
+## [Burn My Window 2](https://github.com/schneegans/Burn-My-Windows/releases/tag/v2)
+
+**Release Date:** 2021-12-16
+
+#### New Features
+
+* Added the possibility to adjust fire colors.
+* Added the possibility to adjust flame speed and scale.
+* Added some fire presets.
+
 ## [Burn My Window 1](https://github.com/schneegans/Burn-My-Windows/releases/tag/v1)
 
-**Release Date:** TBD
+**Release Date:** 2021-12-14
 
 * Initial publication on GitHub supporting GNOME 40 and GNOME 41.

extension.js

@@ -131,6 +131,18 @@ class Extension {
         shader_type: Clutter.ShaderType.FRAGMENT_SHADER,
       });
 
+      // Load the gradient values from the settings. We directly inject the values in the
+      // GLSL code below. The shader is compiled once for each window-closing anyways. In
+      // the future, we my want to prevent this frequent recompilations of shaders,
+      // though.
+      const gradient = [];
+      for (let i = 1; i <= 5; i++) {
+        const color =
+            Clutter.Color.from_string(this._settings.get_string('fire-color-' + i))[1];
+        gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
+            color.blue / 255}, ${color.alpha / 255})`);
+      }
+
       shader.set_shader_source(`
         uniform sampler2D texture;
         uniform float     progress;
@@ -142,8 +154,9 @@ class Extension {
         const float EDGE_BLEND = 70;
         const float BURN_RANGE = 0.1;
         const float BURN_TIME  = 0.2;
-        const vec2  FIRE_SCALE = vec2(400, 600);
+        const vec2  FIRE_SCALE = vec2(400, 600) * ${
-        const float FIRE_SPEED = 0.5;
+          this._settings.get_double('flame-scale')};
+        const float FIRE_SPEED = ${this._settings.get_double('flame-movement-speed')};
 
         float rand(vec2 co) {
           return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
@@ -184,20 +197,26 @@ class Extension {
         }
 
         vec4 getFireColor(float v) {
-          const float steps[5] = float[](0.0, 0.2, 0.3, 0.5, 1.0);
+          const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
           const vec4 colors[5] = vec4[](
-            vec4(0.3, 0.2, 0.1,  0.0),
+            ${gradient[0]},
-            vec4(1.0, 0.3, 0.15, 0.7),
+            ${gradient[1]},
-            vec4(1.0, 0.3, 0.15, 0.9),
+            ${gradient[2]},
-            vec4(1.0, 0.65, 0.1, 1.0),
+            ${gradient[3]},
-            vec4(1, 1, 1, 1.0)
+            ${gradient[4]}
           );
 
+          if (v < steps[0]) {
+            return colors[0];
+          }
+
           for (int i=0; i<4; ++i) {
             if (v <= steps[i+1]) {
               return mix(colors[i], colors[i+1], vec4(v - steps[i])/(steps[i+1]-steps[i]));
             }
           }
+
+          return colors[4];
         }
 
         void main(void) {

metadata.json

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

prefs.js

@@ -13,7 +13,7 @@
 
 'use strict';
 
-const {Gio, Gtk} = imports.gi;
+const {Gio, Gtk, Gdk} = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
@@ -44,6 +44,25 @@ var PreferencesDialog = class PreferencesDialog {
 
     // Bind all properties.
     this._bindAdjustment('destroy-animation-time');
+    this._bindAdjustment('flame-movement-speed');
+    this._bindAdjustment('flame-scale');
+    this._bindColorButton('fire-color-1');
+    this._bindColorButton('fire-color-2');
+    this._bindColorButton('fire-color-3');
+    this._bindColorButton('fire-color-4');
+    this._bindColorButton('fire-color-5');
+
+    // The fire-gradient-reset button needs to by bound explicitly.
+    this._builder.get_object('reset-fire-colors').connect('clicked', () => {
+      this._settings.reset('fire-color-1');
+      this._settings.reset('fire-color-2');
+      this._settings.reset('fire-color-3');
+      this._settings.reset('fire-color-4');
+      this._settings.reset('fire-color-5');
+    });
+
+    // Initialize the fire-preset dropdown.
+    this._createFirePresets();
 
     // As we do not have something like a destructor, we just listen for the destroy
     // signal of our main widget.
@@ -74,6 +93,30 @@ var PreferencesDialog = class PreferencesDialog {
     this._bind(settingsKey, 'active');
   }
 
+  // Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
+  // is not available yet, we need to do the color conversion manually.
+  _bindColorButton(settingsKey) {
+
+    const button = this._builder.get_object(settingsKey);
+
+    // Update the settings when the color is modified.
+    button.connect('color-set', () => {
+      this._settings.set_string(settingsKey, button.get_rgba().to_string());
+    });
+
+    // Update the button state when the settings change.
+    const settingSignalHandler = () => {
+      const rgba = new Gdk.RGBA();
+      rgba.parse(this._settings.get_string(settingsKey));
+      button.rgba = rgba;
+    };
+
+    this._settings.connect('changed::' + settingsKey, settingSignalHandler);
+
+    // Initialize the button with the state in the settings.
+    settingSignalHandler();
+  }
+
   // Connects any widget's property to a settings key. The widget must have the same ID as
   // the settings key. It also binds the corresponding reset button.
   _bind(settingsKey, property) {
@@ -81,11 +124,95 @@ var PreferencesDialog = class PreferencesDialog {
         settingsKey, this._builder.get_object(settingsKey), property,
         Gio.SettingsBindFlags.DEFAULT);
 
-    const resetButton = this._builder.get_object('reset-' + settingsKey);
+    this._builder.get_object('reset-' + settingsKey)?.connect('clicked', () => {
-    resetButton.connect('clicked', () => {
       this._settings.reset(settingsKey);
     });
   }
+
+  // This populates the preset dropdown menu for the fire options.
+  _createFirePresets() {
+    this._widget.connect('realize', (widget) => {
+      const presets = [
+        {
+          name: 'Default Fire',
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(76, 51, 25, 0.0)',
+          color2: 'rgba(180, 55, 30, 0.7)',
+          color3: 'rgba(255, 76, 38, 0.9)',
+          color4: 'rgba(255, 166, 25, 1)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: 'Hell Fire',
+          scale: 1.5,
+          speed: 0.2,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(103,7,80,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,200,0)',
+          color5: 'rgba(255, 255, 255, 1)'
+        },
+        {
+          name: 'Dark and Smutty',
+          scale: 1.0,
+          speed: 0.5,
+          color1: 'rgba(0,0,0,0)',
+          color2: 'rgba(36,3,0,0.5)',
+          color3: 'rgba(150,0,24,0.9)',
+          color4: 'rgb(255,177,21)',
+          color5: 'rgb(255,238,166)'
+        },
+        {
+          name: 'Cold Breeze',
+          scale: 1.5,
+          speed: -0.1,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(30,111,180,0.24)',
+          color3: 'rgba(38,181,255,0.54)',
+          color4: 'rgba(34,162,255,0.84)',
+          color5: 'rgb(97,189,255)'
+        },
+        {
+          name: 'Santa is Coming',
+          scale: 0.4,
+          speed: -0.5,
+          color1: 'rgba(0,110,255,0)',
+          color2: 'rgba(208,233,255,0.24)',
+          color3: 'rgba(207,235,255,0.84)',
+          color4: 'rgb(208,243,255)',
+          color5: 'rgb(255,255,255)'
+        }
+      ];
+
+      const menu      = Gio.Menu.new();
+      const group     = Gio.SimpleActionGroup.new();
+      const groupName = 'presets';
+
+      // Add all presets.
+      presets.forEach((preset, i) => {
+        const actionName = 'fire' + i;
+        menu.append(preset.name, groupName + '.' + actionName);
+        let action = Gio.SimpleAction.new(actionName, null);
+
+        // Load the preset on activation.
+        action.connect('activate', () => {
+          this._settings.set_double('flame-movement-speed', preset.speed);
+          this._settings.set_double('flame-scale', preset.scale);
+          this._settings.set_string('fire-color-1', preset.color1);
+          this._settings.set_string('fire-color-2', preset.color2);
+          this._settings.set_string('fire-color-3', preset.color3);
+          this._settings.set_string('fire-color-4', preset.color4);
+          this._settings.set_string('fire-color-5', preset.color5);
+        });
+
+        group.add_action(action);
+      });
+
+      this._builder.get_object('fire-preset-button').set_menu_model(menu);
+      widget.get_root().insert_action_group(groupName, group);
+    });
+  }
 }
 
 // Nothing to do for now...

resources/ui/settings.ui

@@ -22,13 +22,15 @@
               <object class="GtkLabel">
                 <property name="margin-top">30</property>
                 <property name="margin-bottom">10</property>
-                <property name="label">Fire Options</property>
+                <property name="label">General Options</property>
                 <property name="xalign">0</property>
                 <style>
                   <class name="title-4" />
                 </style>
               </object>
             </child>
+
+
             <child>
               <object class="GtkFrame">
                 <child>
@@ -61,7 +63,7 @@
                                 <property name="draw-value">1</property>
                                 <property name="digits">0</property>
                                 <property name="value-pos">left</property>
-                                <property name="width-request">250</property>
+                                <property name="width-request">300</property>
                                 <property name="adjustment">
                                   <object class="GtkAdjustment" id="destroy-animation-time">
                                     <property name="upper">10000</property>
@@ -92,6 +94,196 @@
             </child>
 
 
+            <child>
+              <object class="GtkBox">
+                <property name="margin-top">30</property>
+                <property name="margin-bottom">10</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label">Fire Options</property>
+                    <property name="xalign">0</property>
+                    <property name="hexpand">1</property>
+                    <style>
+                      <class name="title-4" />
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkMenuButton" id="fire-preset-button">
+                    <property name="label">Choose a Preset</property>
+                    <property name="has-frame">0</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkFrame">
+                <child>
+                  <object class="GtkListBox">
+                    <property name="selection-mode">none</property>
+                    <property name="show-separators">1</property>
+                    <style>
+                      <class name="rich-list" />
+                    </style>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Flame Scale</property>
+                                <property name="xalign">0</property>
+                                <property name="halign">start</property>
+                                <property name="valign">center</property>
+                                <property name="hexpand">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkScale">
+                                <property name="halign">end</property>
+                                <property name="valign">center</property>
+                                <property name="draw-value">1</property>
+                                <property name="digits">2</property>
+                                <property name="value-pos">left</property>
+                                <property name="width-request">300</property>
+                                <property name="adjustment">
+                                  <object class="GtkAdjustment" id="flame-scale">
+                                    <property name="upper">3</property>
+                                    <property name="lower">0.1</property>
+                                    <property name="step-increment">0.01</property>
+                                    <property name="page-increment">0.1</property>
+                                  </object>
+                                </property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="reset-flame-scale">
+                                <property name="icon-name">edit-clear-symbolic</property>
+                                <property name="tooltip-text">Reset to Default Value</property>
+                                <style>
+                                  <class name="flat" />
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Flame Movement Speed</property>
+                                <property name="xalign">0</property>
+                                <property name="halign">start</property>
+                                <property name="valign">center</property>
+                                <property name="hexpand">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkScale">
+                                <property name="halign">end</property>
+                                <property name="valign">center</property>
+                                <property name="draw-value">1</property>
+                                <property name="digits">2</property>
+                                <property name="value-pos">left</property>
+                                <property name="width-request">300</property>
+                                <property name="adjustment">
+                                  <object class="GtkAdjustment" id="flame-movement-speed">
+                                    <property name="upper">2.0</property>
+                                    <property name="lower">-2.0</property>
+                                    <property name="step-increment">0.01</property>
+                                    <property name="page-increment">0.1</property>
+                                  </object>
+                                </property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="reset-flame-movement-speed">
+                                <property name="icon-name">edit-clear-symbolic</property>
+                                <property name="tooltip-text">Reset to Default Value</property>
+                                <style>
+                                  <class name="flat" />
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="activatable">0</property>
+                        <child>
+                          <object class="GtkBox">
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">Fire Gradient</property>
+                                <property name="xalign">0</property>
+                                <property name="halign">start</property>
+                                <property name="valign">center</property>
+                                <property name="hexpand">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkColorButton" id="fire-color-1">
+                                <property name="use_alpha">1</property>
+                                <property name="show_editor">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkColorButton" id="fire-color-2">
+                                <property name="use_alpha">1</property>
+                                <property name="show_editor">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkColorButton" id="fire-color-3">
+                                <property name="use_alpha">1</property>
+                                <property name="show_editor">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkColorButton" id="fire-color-4">
+                                <property name="use_alpha">1</property>
+                                <property name="show_editor">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkColorButton" id="fire-color-5">
+                                <property name="use_alpha">1</property>
+                                <property name="show_editor">1</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="reset-fire-colors">
+                                <property name="icon-name">edit-clear-symbolic</property>
+                                <property name="tooltip-text">Reset to Default Value</property>
+                                <style>
+                                  <class name="flat" />
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+
+
+                  </object>
+                </child>
+              </object>
+            </child>
+
+
           </object>
         </child>
       </object>

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

@@ -9,6 +9,48 @@
       <description>The time it takes to burn the windows.</description>
     </key>
 
+    <key name="flame-movement-speed" type="d">
+      <default>0.5</default>
+      <summary>Flame Movement Speed</summary>
+      <description>The speed at which the flames move.</description>
+    </key>
+
+    <key name="flame-scale" type="d">
+      <default>1.0</default>
+      <summary>Flame Scale</summary>
+      <description>The size of the flames.</description>
+    </key>
+
+    <key name="fire-color-1" type="s">
+      <default>"rgba(76, 51, 25, 0.0)"</default>
+      <summary>Fire Color 1</summary>
+      <description>The first color of the fire gradient.</description>
+    </key>
+
+    <key name="fire-color-2" type="s">
+      <default>"rgba(180, 55, 30, 0.7)"</default>
+      <summary>Fire Color 2</summary>
+      <description>The second color of the fire gradient.</description>
+    </key>
+
+    <key name="fire-color-3" type="s">
+      <default>"rgba(255, 76, 38, 0.9)"</default>
+      <summary>Fire Color 3</summary>
+      <description>The third color of the fire gradient.</description>
+    </key>
+
+    <key name="fire-color-4" type="s">
+      <default>"rgba(255, 166, 25, 1)"</default>
+      <summary>Fire Color 4</summary>
+      <description>The fourth color of the fire gradient.</description>
+    </key>
+
+    <key name="fire-color-5" type="s">
+      <default>"rgba(255, 255, 255, 1)"</default>
+      <summary>Fire Color 5</summary>
+      <description>The fifth color of the fire gradient.</description>
+    </key>
+
   </schema>
 
 </schemalist>