Use the display aspect ratio instead of 16:9 in layout previews

Vagrantfile

@@ -126,6 +126,11 @@ Vagrant.configure("2") do |config|
     configure_gnome_vm(gnome46, "bento/fedora-40")
   end
 
+  # GNOME 47 on Fedora 41
+  config.vm.define "gnome47", primary: true do |gnome46|
+    configure_gnome_vm(gnome46, "bento/fedora-41")
+  end
+
   # GNOME 49 on Fedora 43
   config.vm.define "gnome49" do |gnome49|
     configure_gnome_vm(gnome49, "bento/fedora-43")

package.json

@@ -23,10 +23,13 @@
     "prettier:check": "prettier --check \"**/*.{ts,scss}\"",
     "prettier:fix": "prettier --write \"**/*.{ts,scss}\"",
     "vm:sync": "vagrant rsync",
-    "dev:vm:gnome46": "npm run vm:sync; vagrant up gnome46",
+    "dev:vm:gnome46": "npm run vm:sync gnome46; vagrant up gnome46",
     "vm:destroy:gnome46": "vagrant destroy gnome46",
     "vm:halt:gnome46": "vagrant halt gnome46",
-    "dev:vm:gnome49": "npm run vm:sync; vagrant up gnome49",
+    "dev:vm:gnome47": "npm run vm:sync gnome47; vagrant up gnome47",
+    "vm:destroy:gnome47": "vagrant destroy gnome47",
+    "vm:halt:gnome47": "vagrant halt gnome47",
+    "dev:vm:gnome49": "npm run vm:sync gnome49; vagrant up gnome49",
     "vm:destroy:gnome49": "vagrant destroy gnome49",
     "vm:halt:gnome49": "vagrant halt gnome49"
   },

resources/metadata.json

@@ -13,7 +13,7 @@
     "49"
   ],
   "version": 99,
-  "version-name": "17.0",
+  "version-name": "17.1",
   "url": "https://github.com/domferr/tilingshell",
   "settings-schema": "org.gnome.shell.extensions.tilingshell",
   "gettext-domain": "tilingshell",

resources/schemas/org.gnome.shell.extensions.tilingshell.gschema.xml

@@ -152,6 +152,11 @@
             <summary>Focused window border color</summary>
             <description>The color of the focused window's border.</description>
         </key>
+        <key name="window-use-custom-border-color" type="b">
+            <default>false</default>
+            <summary>Use custom color</summary>
+            <description>Use the color defined here for the focused window's border.</description>
+        </key>
         <key name="window-border-width" type="u">
             <default>3</default>
             <summary>Focused window border width</summary>

src/components/layout/LayoutUtils.ts

@@ -0,0 +1,31 @@
+import { St } from '@gi.ext';
+import { getScalingFactorOf } from '@utils/ui';
+export default class LayoutUtils {
+    static calc_size(
+        widget: St.Widget,
+        monitorIndex: number,
+        smallEdgeSize: number,
+    ): [number, number] {
+        const monitorGeometry =
+            global.display.get_monitor_geometry(monitorIndex);
+
+        const aspectRatio = monitorGeometry.width / monitorGeometry.height;
+        const [, scalingFactor] = getScalingFactorOf(widget);
+
+        if (aspectRatio === 1) {
+            return [
+                smallEdgeSize * scalingFactor,
+                smallEdgeSize * scalingFactor,
+            ];
+        }
+
+        return [
+            (aspectRatio > 1.0
+                ? Math.round(smallEdgeSize * aspectRatio)
+                : smallEdgeSize) * scalingFactor,
+            (aspectRatio < 1.0
+                ? Math.round(smallEdgeSize / aspectRatio)
+                : smallEdgeSize) * scalingFactor,
+        ];
+    }
+}

src/components/snapassist/snapAssist.ts

@@ -3,6 +3,7 @@ import { GObject, St, Clutter, Mtk, Meta, Gio } from '@gi.ext';
 import SnapAssistTile from './snapAssistTile';
 import SnapAssistLayout from './snapAssistLayout';
 import Layout from '../layout/Layout';
+import LayoutUtils from '../layout/LayoutUtils';
 import Tile from '../layout/Tile';
 import Settings from '@settings/settings';
 import GlobalState from '@utils/globalState';
@@ -19,9 +20,9 @@ import { buildBlurEffect } from '@utils/gnomesupport';
 export const SNAP_ASSIST_SIGNAL = 'snap-assist';
 
 const GAPS = 4;
-// 16:9 ratio and then rounded to int
-const SNAP_ASSIST_LAYOUT_WIDTH = 120;
-const SNAP_ASSIST_LAYOUT_HEIGHT = 68;
+// The size of the smallest size of the monitor
+// Will result into a size of 120x68 if the monitor is 16:9
+const SNAP_ASSIST_LAYOUT_SIZE = 68;
 
 const debug = logger('SnapAssist');
 
@@ -209,7 +210,7 @@ class SnapAssistContent extends St.BoxLayout {
             ? Math.max(
                   0,
                   this._snapAssistantThreshold -
-                      this.height / 2 +
+                      46 * getMonitorScalingFactor(this._monitorIndex) +
                       this._padding,
               )
             : -this.height + this._padding;
@@ -237,12 +238,13 @@ class SnapAssistContent extends St.BoxLayout {
         this._snapAssistLayouts.forEach((lay) => lay.destroy());
         this.remove_all_children();
 
-        const [, scalingFactor] = getScalingFactorOf(this);
-
         const layoutGaps = buildMarginOf(GAPS);
+        const [width, height] = LayoutUtils.calc_size(
+            this,
+            this._monitorIndex,
+            SNAP_ASSIST_LAYOUT_SIZE,
+        );
 
-        const width = SNAP_ASSIST_LAYOUT_WIDTH * scalingFactor;
-        const height = SNAP_ASSIST_LAYOUT_HEIGHT * scalingFactor;
         // build the layouts inside the snap assistant. Place a spacer between each layout
         this._snapAssistLayouts = layouts.map((lay, ind) => {
             const saLay = new SnapAssistLayout(

src/components/windowBorderManager.ts

@@ -29,6 +29,7 @@ class WindowBorder extends St.Bin {
     private readonly _signals: SignalHandling;
 
     private _window: Meta.Window;
+    private _interfaceSettings: Gio.Settings;
     private _windowMonitor: number;
     private _bindings: GObject.Binding[];
     private _enableScaling: boolean;
@@ -45,6 +46,9 @@ class WindowBorder extends St.Bin {
         this._bindings = [];
         this._borderWidth = 1;
         this._window = win;
+        this._interfaceSettings = new Gio.Settings({
+            schema_id: 'org.gnome.desktop.interface',
+        });
         this._windowMonitor = win.get_monitor();
         this._enableScaling = enableScaling;
         this._delayedSmartBorderRadius = false;
@@ -321,6 +325,30 @@ class WindowBorder extends St.Bin {
             cached_radius;
     }
 
+    private _getGnomeAccentColor(): string {
+        // get the system's accent color, fallback to user's custom color
+        try {
+            const accentColorName =
+                this._interfaceSettings.get_string('accent-color');
+            debug('accentColorName', accentColorName);
+            return accentColorName;
+            const gnomeAccentColorMapping: Record<string, string> = {
+                blue: '#3584e4',
+                teal: '#2190a4',
+                green: '#3a944a',
+                yellow: '#c88800',
+                orange: '#ed5b00',
+                red: '#e62d42',
+                pink: '#d56199',
+                purple: '#9141ac',
+                slate: '#6f8396',
+            };
+            return gnomeAccentColorMapping[accentColorName];
+        } catch (_unused) {
+            return '#000000';
+        }
+    }
+
     public updateStyle(): void {
         // handle scale factor of the monitor
         const monitorScalingFactor = this._enableScaling
@@ -335,6 +363,9 @@ class WindowBorder extends St.Bin {
             (alreadyScaled ? 1 : scalingFactor) *
             (Settings.WINDOW_BORDER_WIDTH /
                 (alreadyScaled ? scalingFactor : 1));
+        const borderColor = Settings.WINDOW_USE_CUSTOM_BORDER_COLOR
+            ? Settings.WINDOW_BORDER_COLOR
+            : '-st-accent-color';
         const radius = this._borderRadiusValue.map((val) => {
             const valWithBorder = val === 0 ? val : val + borderWidth;
             return (
@@ -347,7 +378,7 @@ class WindowBorder extends St.Bin {
             ? `${getScalingFactorSupportString(monitorScalingFactor)};`
             : '';
         this.set_style(
-            `border-color: ${Settings.WINDOW_BORDER_COLOR}; border-width: ${borderWidth}px; border-radius: ${radius[St.Corner.TOPLEFT]}px ${radius[St.Corner.TOPRIGHT]}px ${radius[St.Corner.BOTTOMRIGHT]}px ${radius[St.Corner.BOTTOMLEFT]}px; ${scalingFactorSupportString}`,
+            `border-color: ${borderColor}; border-width: ${borderWidth}px; border-radius: ${radius[St.Corner.TOPLEFT]}px ${radius[St.Corner.TOPRIGHT]}px ${radius[St.Corner.BOTTOMRIGHT]}px ${radius[St.Corner.BOTTOMLEFT]}px; ${scalingFactorSupportString}`,
         );
 
         if (this._borderWidth !== borderWidth) {
@@ -384,11 +415,15 @@ export class WindowBorderManager {
 
     private _border: WindowBorder | null;
     private _enableScaling: boolean;
+    private _interfaceSettings: Gio.Settings;
 
     constructor(enableScaling: boolean) {
         this._signals = new SignalHandling();
         this._border = null;
         this._enableScaling = enableScaling;
+        this._interfaceSettings = new Gio.Settings({
+            schema_id: 'org.gnome.desktop.interface',
+        });
     }
 
     public enable(): void {
@@ -415,7 +450,14 @@ export class WindowBorderManager {
         this._signals.connect(Settings, Settings.KEY_WINDOW_BORDER_COLOR, () =>
             this._border?.updateStyle(),
         );
-
+        this._signals.connect(
+            Settings,
+            Settings.KEY_WINDOW_USE_CUSTOM_BORDER_COLOR,
+            () => this._border?.updateStyle(),
+        );
+        this._interfaceSettings.connect('changed::accent-color', () =>
+            this._border?.updateStyle(),
+        );
         this._signals.connect(Settings, Settings.KEY_WINDOW_BORDER_WIDTH, () =>
             this._border?.updateStyle(),
         );

src/extension.ts

@@ -53,6 +53,8 @@ import { Extension } from '@polyfill';
 import OverriddenAltTab from '@components/altTab/overriddenAltTab';
 import { LayoutSwitcherPopup } from '@components/layoutSwitcher/layoutSwitcher';
 import { unmaximizeWindow } from '@utils/gnomesupport';
+// @ts-expect-error "Module exists"
+import * as Config from 'resource:///org/gnome/Shell/Extensions/js/misc/config.js';
 
 const debug = logger('extension');
 
@@ -85,23 +87,38 @@ export default class TilingShellExtension extends Extension {
     }
 
     private _validateSettings() {
-        if (Settings.LAST_VERSION_NAME_INSTALLED === '14.0') {
+        if (Settings.LAST_VERSION_NAME_INSTALLED === '17.0') {
             debug('apply compatibility changes');
-            Settings.save_selected_layouts([]);
+            // if users enabled window border, they set it custom in the past, so enable the custom border
+            // keep using the custom border instead of using the accent color by default
+            Settings.WINDOW_USE_CUSTOM_BORDER_COLOR =
+                Settings.ENABLE_WINDOW_BORDER;
         }
+    }
 
-        // Setting used for compatibility changes if necessary
-        if (this.metadata['version-name']) {
-            Settings.LAST_VERSION_NAME_INSTALLED =
-                this.metadata['version-name'] || '0';
-        }
+    private _onInstall() {
+        const GNOME_VERSION_MAJOR = Number(
+            Config.PACKAGE_VERSION.split('.')[0],
+        );
+        // Force use of customer border color on GNOME < 47 since accent colors are not available
+        Settings.WINDOW_USE_CUSTOM_BORDER_COLOR = GNOME_VERSION_MAJOR < 47;
     }
 
     enable(): void {
         if (this._signals) this._signals.disconnect();
         this._signals = new SignalHandling();
 
         Settings.initialize(this.getSettings());
+        if (Settings.LAST_VERSION_NAME_INSTALLED === '0') {
+            this._onInstall();
+
+            // Setting used for compatibility changes if necessary
+            if (this.metadata['version-name']) {
+                Settings.LAST_VERSION_NAME_INSTALLED =
+                    this.metadata['version-name'] || '0';
+            }
+        }
+
         this._validateSettings();
 
         // force initialization and tracking of windows

src/indicator/defaultMenu.ts

@@ -20,6 +20,7 @@ import { Monitor } from 'resource:///org/gnome/shell/ui/layout.js';
 import Layout from '@components/layout/Layout';
 import { _ } from '../translations';
 import { openPrefs } from '@polyfill';
+import LayoutUtils from '@components/layout/LayoutUtils';
 import { widgetOrientation } from '@utils/gnomesupport';
 
 const debug = logger('DefaultMenu');
@@ -76,8 +77,11 @@ class LayoutsRow extends St.BoxLayout {
         const selectedIndex = layouts.findIndex((lay) => lay.id === selectedId);
         const hasGaps = Settings.get_inner_gaps(1).top > 0;
 
-        const layoutHeight: number = 36;
-        const layoutWidth: number = 64; // 16:9 ratio. -> (16*layoutHeight) / 9 and then rounded to int
+        const [layoutWidth, layoutHeight] = LayoutUtils.calc_size(
+            this,
+            this._monitor.index,
+            36,
+        );
 
         this._layoutsButtons = layouts.map((lay, ind) => {
             const btn = new LayoutButton(