Add a basic border

extension.js

@@ -7,20 +7,23 @@ const State = Me.imports.sources.state;
 const Renderer = Me.imports.sources.renderer;
 const Keybinds = Me.imports.sources.keybinds;
 const Indicator = Me.imports.sources.indicator;
+const Border = Me.imports.sources.border;
 
 class Extension {
 	constructor() {
 		this._state = new State.StateManager();
 		this._settings = ExtensionUtils.getSettings("org.gnome.shell.extensions.fairy");
 
+		this._border = new Border.BorderManager(this._state);
 		this._indicator = new Indicator.Indicator(this._state, this._renderer, this._keybinds);
-		this._renderer = new Renderer.Renderer(this._state, this._settings, this._indicator);
+		this._renderer = new Renderer.Renderer(this._state, this._settings, this._indicator, this._border);
 		this._keybinds = new Keybinds.KeyboardManager(this._state, this._renderer, this._indicator);
 
 		this._indicator.endInit(this);
 	}
 
 	enable() {
+		this._border.enable();
 		this._renderer.enable();
 		this._keybinds.enable();
 		this._indicator.enable();
@@ -30,6 +33,7 @@ class Extension {
 		this._renderer.disable();
 		this._keybinds.disable();
 		this._indicator.disable();
+		this._border.disable();
 	}
 }
 

schemas/org.gnome.shell.extensions.fairy.gschema.xml

@@ -90,7 +90,7 @@
 			<summary>Increase the number of windows in the master area</summary>
 		</key>
 		<key type="as" name="decrnmaster">
-			<default><![CDATA[['<Super>o']]]></default>
+			<default><![CDATA[['<Super>u']]]></default>
 			<summary>Decrease the number of windows in the master area</summary>
 		</key>
 

sources/border.js

@@ -0,0 +1,58 @@
+"use strict";
+
+const Meta = imports.gi.Meta;
+const Gdk = imports.gi.Gdk;
+const GLib = imports.gi.GLib;
+const GObject = imports.gi.GObject;
+const St = imports.gi.St;
+
+
+const Main = imports.ui.main;
+const Mainloop = imports.mainloop;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me = ExtensionUtils.getCurrentExtension();
+
+var BorderManager = GObject.registerClass(
+	class BorderManager extends GObject.Object {
+		_init(state) {
+			super._init();
+			this._state = state;
+			this._border = null;
+			this._renderCount = 0;
+		}
+
+		enable() {
+			this._border =new St.Bin({ style_class: "fairy-border" });
+			if (global.window_group) global.window_group.add_child(this._border);
+		}
+
+		disable() {
+			this._border.destroy();
+			this._border = null;
+		}
+
+		updateBorders() {
+			// Hide the border during transitions.
+			this._border.hide();
+			this._renderCount++;
+
+			const state = this._state.monitors[this._state.focusedMon];
+			const handle = state.focused;
+			if (!handle || state.layout === "monocle") return;
+
+			const rc = this._renderCount;
+			Mainloop.timeout_add(200, () => {
+				// If the updateBorders has already been recalled, dont show the border in the first call.
+				// The windows have probably already change place/been refocused.
+				if (rc !== this._renderCount) return;
+
+				const rect = handle.get_frame_rect();
+				const inset = 2;
+				this._border.set_size(rect.width + (inset * 2), rect.height + (inset * 2));
+				this._border.set_position(rect.x - inset, rect.y - inset);
+				this._border.show();
+			});
+		}
+	}
+);

sources/renderer.js

@@ -4,18 +4,21 @@ const Meta = imports.gi.Meta;
 const Gdk = imports.gi.Gdk;
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
+
 const Main = imports.ui.main;
 const Mainloop = imports.mainloop;
+
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 
 var Renderer = GObject.registerClass(
 	class Renderer extends GObject.Object {
-		_init(state, settings, indicator) {
+		_init(state, settings, indicator, border) {
 			super._init();
 			this._state = state;
 			this._settings = settings;
 			this._indicator = indicator;
+			this._border = border;
 			this.gaps = {
 				smart: true,
 				size: 10,
@@ -238,6 +241,10 @@ var Renderer = GObject.registerClass(
 					this._state.monitors[handle.get_monitor()].focused = handle;
 					this.renderForHandle(handle);
 				}),
+				handle.connect("position-changed", () => this._border.updateBorders()),
+				handle.connect("size-changed", () => this._border.updateBorders()),
+				handle.connect("raised", () => this._border.updateBorders()),
+				handle.connect("shown", () => this._border.updateBorders()),
 			];
 
 			this._state.newWindow(handle);
@@ -257,6 +264,7 @@ var Renderer = GObject.registerClass(
 			handle.focus(global.display.get_current_time());
 			handle.activate(global.display.get_current_time());
 			this.warpCursor(handle);
+			this._border.updateBorders();
 		}
 
 		/**
@@ -369,6 +377,7 @@ var Renderer = GObject.registerClass(
 				) {
 					if (window.maximized) {
 						window.handle.maximize(Meta.MaximizeFlags.BOTH);
+						window.handle.raise();
 						// Do not resize if maximizing to keep the overview tiled.
 						continue;
 					} else window.handle.unmaximize(Meta.MaximizeFlags.BOTH);
@@ -402,6 +411,7 @@ var Renderer = GObject.registerClass(
 					monGeo.y + size.y,
 				);
 			}
+			this._border.updateBorders();
 		}
 
 		addGaps(window, monGeo) {

sources/state.js

@@ -25,6 +25,9 @@ var StateManager = GObject.registerClass(
 				mfact: 55,
 			}));
 
+			// The currently focused monitor.
+			this.focusedMon = 0;
+
 			/**
 			 * @type {FairyWindow[]}
 			 */

stylesheet.css

@@ -1 +1,6 @@
-/* Add your custom extension styling here */
+.fairy-border {
+	border-width: 3px;
+	border-color: rgba(236, 94, 94, 1);
+	border-style: solid;
+	/* border-radius: 14px; */
+}