🎉 Make fire color configurable

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;
@@ -184,20 +196,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) {

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,20 @@ var PreferencesDialog = class PreferencesDialog {
 
     // Bind all properties.
     this._bindAdjustment('destroy-animation-time');
+    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');
+    });
 
     // As we do not have something like a destructor, we just listen for the destroy
     // signal of our main widget.
@@ -74,6 +88,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,8 +119,7 @@ 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);
     });
   }

resources/ui/settings.ui

@@ -61,7 +61,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>
@@ -86,6 +86,65 @@
                       </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>

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

@@ -9,6 +9,36 @@
       <description>The time it takes to burn the windows.</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>