Blur onscreen keyboard

.gitignore

@@ -1,3 +1,8 @@
 /build/
 /pkg/
-*~
+*~
+.idea/
+.ts-for-gir.js
+.vscode/
+jsconfig.json
+@types/

README.md

@@ -2,13 +2,15 @@
 
 A GNOME Shell extension that adds a blur look to different parts of the GNOME Shell, including the top panel, dash and overview.
 
-![Capture d’écran de 2021-04-21 23-59-06](https://user-images.githubusercontent.com/31563930/115626495-dc37c480-a2fd-11eb-8066-002dee4b5159.png)
-*blurred top panel*
-![Capture d’écran de 2021-04-21 23-59-11](https://user-images.githubusercontent.com/31563930/115626626-10ab8080-a2fe-11eb-89a5-7392cbe7c2f8.png)
-*blurred overview*
-
 [<img src="https://github.com/aunetx/files_utils/raw/master/get_it_on_gnome_extensions.png" height="100">](https://extensions.gnome.org/extension/3193/blur-my-shell/)
 
+## Screenshots
+
+*Blurred Overview:*
+![Blurred Overview](https://user-images.githubusercontent.com/38633812/116588850-779beb80-a935-11eb-8f2f-81bcd46fe694.png)
+*Blurred Top Panel:*
+![Blurred Top Panel](https://user-images.githubusercontent.com/38633812/116588885-81bdea00-a935-11eb-9c80-c97716369b7c.png)
+
 ## Known bugs
 
 ### Note
@@ -17,16 +19,16 @@ This extension can be buggy, as the gnome-shell's blur implementation is quite f
 
 To entirely remove artifacts from the top panel, you can use static blur with the appropriate switch, **use static blur**.
 
-Moreover, selecting *no artifacts* in the settings allows the blur to regenerate itself a lot better, at the expense of CPU time (adds ~3% CPU usage for the gnome-shell process in my old Thinkpad).\
-**note: in Gnome 40, selecting this option is not possible for the moment**
+Moreover, if you don't use static blur, selecting *no artifacts* in the settings allows the blur to regenerate itself a lot better, at the expense of CPU time (but cannot currently tell the difference, less than 0.5% CPU on my middle-range i5)
 
-Selecting another profile might be enought (especially if you have disabled animations), feel free to test!
+Selecting another profile might be enough (especially if you have disabled animations and/or windows borders), feel free to test!
 
 ### List of bugs
 
 - artifacts on blurred parts [gnome shell bug](https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2857)
 - some apps may become transparent, a weird issue...
-- cannot create rounded blur
+- cannot create rounded blur (so no rounded dash-to-dock, or panel corners, ...)
+- overview blur is transparent on second monitor when using Wayland, sometimes :(
 - etc (see in *issues*)
 
 If you find other bugs, please report them!
@@ -45,16 +47,21 @@ make install
 
 And restart GNOME Shell if needed.
 
+### Force overview blur update
+
+In case you have problems with your dynamic timed wallpaper not being updated due to using third-party process to change the wallpaper, you can force the overview blur to be updated with the command:\
+`gsettings set org.gnome.desktop.background picture-opacity 99 && gsettings set org.gnome.desktop.background picture-opacity 100`
+
 ### Versions support
 
-The current extension supports those GNOME Shell versions:
+The current extension supports these GNOME Shell versions:
 
 - 40
 
-Older GNOME versions are supported up to Blur my Shell version 6:
+Older GNOME Shell versions are supported up to Blur my Shell version 6, and by version 17:
 
-- 3.36
 - 3.38
+- 3.36
 
 ## License
 

src/appfolders.js

@@ -0,0 +1,229 @@
+'use strict';
+
+const { Shell, GLib, Clutter } = imports.gi;
+const Main = imports.ui.main;
+
+const Me = imports.misc.extensionUtils.getCurrentExtension();
+const Settings = Me.imports.settings;
+const Utils = Me.imports.utilities;
+const PaintSignals = Me.imports.paint_signals;
+
+const default_sigma = 30;
+const default_brightness = 0.6;
+const transparent = Clutter.Color.from_pixel(0x00000000);
+const FOLDER_DIALOG_ANIMATION_TIME = 200;
+const FRAME_UPDATE_PERIOD = 16;
+
+let original_zoomAndFadeIn = null;
+let original_zoomAndFadeOut = null;
+let sigma = default_sigma;
+let brightness = default_brightness;
+
+let _zoomAndFadeIn = function () {
+    let [sourceX, sourceY] =
+        this._source.get_transformed_position();
+    let [dialogX, dialogY] =
+        this.child.get_transformed_position();
+
+    this.child.set({
+        translation_x: sourceX - dialogX,
+        translation_y: sourceY - dialogY,
+        scale_x: this._source.width / this.child.width,
+        scale_y: this._source.height / this.child.height,
+        opacity: 0,
+    });
+
+    this.set_background_color(transparent);
+
+    let effect = this.get_effect("appfolder-blur");
+
+    effect.sigma = 0;
+    Utils.ease_property(effect, 'sigma', 0, sigma, FOLDER_DIALOG_ANIMATION_TIME, FRAME_UPDATE_PERIOD);
+
+    effect.brightness = 1.0;
+    Utils.ease_property(effect, 'brightness', 1.0, brightness, FOLDER_DIALOG_ANIMATION_TIME, FRAME_UPDATE_PERIOD);
+
+    this.child.ease({
+        translation_x: 0,
+        translation_y: 0,
+        scale_x: 1,
+        scale_y: 1,
+        opacity: 255,
+        duration: FOLDER_DIALOG_ANIMATION_TIME,
+        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+    });
+
+    this._needsZoomAndFade = false;
+
+    if (this._sourceMappedId === 0) {
+        this._sourceMappedId = this._source.connect(
+            'notify::mapped', this._zoomAndFadeOut.bind(this));
+    }
+}
+
+let _zoomAndFadeOut = function () {
+    if (!this._isOpen)
+        return;
+
+    if (!this._source.mapped) {
+        this.hide();
+        return;
+    }
+
+    let [sourceX, sourceY] =
+        this._source.get_transformed_position();
+    let [dialogX, dialogY] =
+        this.child.get_transformed_position();
+
+    this.set_background_color(transparent);
+
+    let effect = this.get_effect("appfolder-blur");
+
+    Utils.ease_property(effect, 'sigma', effect.sigma, 0, FOLDER_DIALOG_ANIMATION_TIME, FRAME_UPDATE_PERIOD);
+
+    Utils.ease_property(effect, 'brightness', effect.brightness, 1.0, FOLDER_DIALOG_ANIMATION_TIME, FRAME_UPDATE_PERIOD);
+
+    this.child.ease({
+        translation_x: sourceX - dialogX,
+        translation_y: sourceY - dialogY,
+        scale_x: this._source.width / this.child.width,
+        scale_y: this._source.height / this.child.height,
+        opacity: 0,
+        duration: FOLDER_DIALOG_ANIMATION_TIME,
+        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        onComplete: () => {
+            this.child.set({
+                translation_x: 0,
+                translation_y: 0,
+                scale_x: 1,
+                scale_y: 1,
+                opacity: 255,
+            });
+            this.hide();
+
+            this._popdownCallbacks.forEach(func => func());
+            this._popdownCallbacks = [];
+        },
+    });
+
+    this._needsZoomAndFade = false;
+}
+
+
+var AppFoldersBlur = class AppFoldersBlur {
+    constructor(connections, prefs) {
+        this.connections = connections;
+        this.paint_signals = new PaintSignals.PaintSignals(connections);
+        this.prefs = prefs;
+    }
+
+    enable() {
+        this._log("blurring appfolders");
+
+        if (Main.overview._overview.controls._appDisplay._folderIcons.length > 0) {
+            this.blur_appfolders();
+        }
+        this.connections.connect(Main.overview._overview.controls._appDisplay, 'view-loaded', () => {
+            this.blur_appfolders();
+        })
+    }
+
+    blur_appfolders() {
+        Main.overview._overview.controls._appDisplay._folderIcons.forEach(icon => {
+            icon._ensureFolderDialog();
+
+            if (original_zoomAndFadeIn == null) {
+                original_zoomAndFadeIn = icon._dialog._zoomAndFadeIn;
+            }
+            if (original_zoomAndFadeOut == null) {
+                original_zoomAndFadeOut = icon._dialog._zoomAndFadeOut;
+            }
+
+            let effect = new Shell.BlurEffect({
+                name: "appfolder-blur",
+                sigma: sigma,
+                brightness: brightness,
+                mode: 1
+            });
+            icon._dialog.remove_effect_by_name("appfolder-blur");
+            icon._dialog.add_effect(effect);
+
+            // HACK
+            // ! DIRTY PART: hack because `Shell.BlurEffect` does not repaint when shadows are under it
+            // ! this does not entirely fix this bug (shadows caused by windows still cause artefacts)
+            // ! but it prevents the shadows of the panel buttons to cause artefacts on the panel itself
+            // ! note: issue opened at https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2857
+
+            if (this.prefs.HACKS_LEVEL.get() == 1) {
+                this._log("appfolders hack level 1");
+                this.paint_signals.disconnect_all();
+
+                Utils.setTimeout(() => {
+                    this.paint_signals.connect(Main.overview._overview, effect);
+                    this.paint_signals.connect(icon._dialog, effect);
+                }, 100);
+            } else if (this.prefs.HACKS_LEVEL.get() == 2) {
+                this._log("panel hack level 2");
+                this.paint_signals.disconnect_all();
+
+                Utils.setTimeout(() => {
+                    this.paint_signals.connect(Main.overview._overview, effect);
+                    this.paint_signals.connect(icon._dialog, effect);
+                }, 100);
+            } else {
+                this.paint_signals.disconnect_all();
+            }
+
+            // ! END OF DIRTY PART
+
+            icon._dialog._viewBox.add_style_class_name('transparent-app-folder-dialogs');
+
+            icon._dialog._zoomAndFadeIn = _zoomAndFadeIn;
+            icon._dialog._zoomAndFadeOut = _zoomAndFadeOut;
+        });
+    }
+
+    set_sigma(s) {
+        sigma = s;
+        if (this.prefs.BLUR_APPFOLDERS.get())
+            this.blur_appfolders();
+    }
+
+    set_brightness(b) {
+        brightness = b;
+        if (this.prefs.BLUR_APPFOLDERS.get())
+            this.blur_appfolders();
+    }
+
+    disable() {
+        this._log("removing blur from appfolders");
+
+        if (original_zoomAndFadeIn != null) {
+            Main.overview._overview.controls._appDisplay._folderIcons.forEach(icon => {
+                if (icon._dialog)
+                    icon._dialog._zoomAndFadeIn = original_zoomAndFadeIn;
+            });
+        }
+        if (original_zoomAndFadeOut != null) {
+            Main.overview._overview.controls._appDisplay._folderIcons.forEach(icon => {
+                if (icon._dialog)
+                    icon._dialog._zoomAndFadeOut = original_zoomAndFadeOut;
+            });
+        }
+        Main.overview._overview.controls._appDisplay._folderIcons.forEach(icon => {
+            if (icon._dialog) {
+                icon._dialog.remove_effect_by_name("appfolder-blur")
+                icon._dialog._viewBox.remove_style_class_name('transparent-app-folder-dialogs');
+            }
+        });
+
+        this._log(`before: ${this.connections.buffer}`)
+        this.connections.disconnect_all();
+        this._log(`after: ${this.connections.buffer}`)
+    }
+
+    _log(str) {
+        if (this.prefs.DEBUG.get())
+            log(`[Blur my Shell] ${str}`)
+    }
+}

src/connections.js

@@ -30,7 +30,6 @@ var Connections = class Connections {
 
     connect(actor, signal, handler) {
         let id = actor.connect(signal, handler);
-
         this.process_connection(actor, id);
     }
 
@@ -40,6 +39,25 @@ var Connections = class Connections {
         this.process_connection(actor, id);
     }
 
+    disconnect_all_for(actor) {
+        let actor_connections = this.buffer.filter((infos) => {
+            infos.actor == actor
+        });
+
+        actor_connections.forEach((connection) => {
+            // disconnect
+            try {
+                connection.actor.disconnect(connection.id)
+            } catch (e) {
+                this._log(`error removing connection: ${e}; continuing`)
+            }
+
+            // remove from buffer
+            let index = this.buffer.indexOf(connection);
+            this.buffer.splice(index, 1);
+        })
+    }
+
     disconnect_all() {
         this.buffer.forEach((connection) => {
             try {
@@ -51,6 +69,7 @@ var Connections = class Connections {
         this.buffer = [];
     }
 
+    // no need to check if DEBUG here, the log function is only used on error
     _log(str) {
         log(`[Blur my Shell] ${str}`)
     }

src/dash.js

@@ -5,14 +5,14 @@ const Main = imports.ui.main;
 
 const Me = imports.misc.extensionUtils.getCurrentExtension();
 const Settings = Me.imports.settings;
-let prefs = new Settings.Prefs;
 
 const default_sigma = 30;
 const default_brightness = 0.6;
 
 var DashBlur = class DashBlur {
-    constructor(connections) {
+    constructor(connections, prefs) {
         this.connections = connections;
+        this.prefs = prefs;
     }
 
     enable() {
@@ -22,7 +22,7 @@ var DashBlur = class DashBlur {
 
     update() {
         if (Main.overview.dash.constructor.name == "Dash") {
-            Main.overview.dash.get_child_at_index(0).style = "background-color:rgba(0,0,0," + prefs.DASH_OPACITY.get() + ")";
+            Main.overview.dash.get_child_at_index(0).style = "background-color:rgba(0,0,0," + this.prefs.DASH_OPACITY.get() + ")";
         }
     }
 
@@ -38,9 +38,12 @@ var DashBlur = class DashBlur {
                 }
             }
         }
+
+        this.connections.disconnect_all();
     }
 
     _log(str) {
-        log(`[Blur my Shell] ${str}`)
+        if (this.prefs.DEBUG.get())
+            log(`[Blur my Shell] ${str}`)
     }
-}
+}