Use gnome accent color as default color for the window border (#373)

* feat: use gnome accent color as default for window border color

* preserve previous border color set and improve user settings

* Disable the setting if accent colors are not supported

* enable only on GNOME 47+

---------

Co-authored-by: Domenico Ferraro <[email protected]>

Author: my-name-ez

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/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/prefs.ts

@@ -52,6 +52,8 @@ function buildPrefsWidget(): Gtk.Widget {
 }
 
 export default class TilingShellExtensionPreferences extends ExtensionPreferences {
+    private GNOME_VERSION_MAJOR = Number(Config.PACKAGE_VERSION.split('.')[0]);
+
     /**
      * This function is called when the preferences window is first created to fill
      * the `Adw.PreferencesWindow`.
@@ -130,41 +132,54 @@ export default class TilingShellExtensionPreferences extends ExtensionPreference
             ),
         );
 
-        const windowBorderRow = new Adw.ExpanderRow({
+        const windowBorderExpanderRow = new Adw.ExpanderRow({
             title: _('Window border'),
             subtitle: _('Show a border around focused window'),
         });
-        appearenceGroup.add(windowBorderRow);
-        windowBorderRow.add_row(
+        appearenceGroup.add(windowBorderExpanderRow);
+        windowBorderExpanderRow.add_row(
             this._buildSwitchRow(
                 Settings.KEY_ENABLE_WINDOW_BORDER,
                 _('Enable'),
                 _('Show a border around focused window'),
             ),
         );
-        windowBorderRow.add_row(
+        windowBorderExpanderRow.add_row(
             this._buildSwitchRow(
                 Settings.KEY_ENABLE_SMART_WINDOW_BORDER_RADIUS,
                 _('Smart border radius'),
                 _('Dynamically adapt to the window’s actual border radius'),
             ),
         );
-        windowBorderRow.add_row(
+        windowBorderExpanderRow.add_row(
             this._buildSpinButtonRow(
                 Settings.KEY_WINDOW_BORDER_WIDTH,
                 _('Width'),
                 _('The size of the border'),
                 1,
             ),
         );
-        windowBorderRow.add_row(
-            this._buildColorRow(
-                _('Border color'),
-                _('Choose the color of the border'),
-                this._getRGBAFromString(Settings.WINDOW_BORDER_COLOR),
-                (val: string) => (Settings.WINDOW_BORDER_COLOR = val),
-            ),
+        const colorButton = this._buildColorButton(
+            this._getRGBAFromString(Settings.WINDOW_BORDER_COLOR),
+            (val: string) => (Settings.WINDOW_BORDER_COLOR = val),
         );
+        const windowBorderColorRow = new Adw.ActionRow({
+            title: _('Border color'),
+            subtitle: _('Choose the color of the border'),
+        });
+        windowBorderColorRow.add_suffix(colorButton);
+        colorButton.set_visible(Settings.WINDOW_USE_CUSTOM_BORDER_COLOR);
+        if (this.GNOME_VERSION_MAJOR >= 47) {
+            const customColorDropDown = this._buildCustomColorDropDown(
+                Settings.WINDOW_USE_CUSTOM_BORDER_COLOR,
+                (use_custom_color: boolean) => {
+                    colorButton.set_visible(use_custom_color);
+                    Settings.WINDOW_USE_CUSTOM_BORDER_COLOR = use_custom_color;
+                },
+            );
+            windowBorderColorRow.add_suffix(customColorDropDown);
+        }
+        windowBorderExpanderRow.add_row(windowBorderColorRow);
 
         const animationsRow = new Adw.ExpanderRow({
             title: _('Animations'),
@@ -1199,12 +1214,10 @@ export default class TilingShellExtensionPreferences extends ExtensionPreference
         return rgba;
     }
 
-    _buildColorRow(
-        title: string,
-        subtitle: string,
+    _buildColorButton(
         rgba: Gdk.RGBA,
         onChange: (s: string) => void,
-    ): Adw.ActionRow {
+    ): Gtk.ColorButton {
         const colorButton = new Gtk.ColorButton({
             rgba,
             use_alpha: true,
@@ -1213,13 +1226,30 @@ export default class TilingShellExtensionPreferences extends ExtensionPreference
         colorButton.connect('color-set', () => {
             onChange(colorButton.get_rgba().to_string());
         });
-        const adwRow = new Adw.ActionRow({
-            title,
-            subtitle,
-            activatableWidget: colorButton,
+        return colorButton;
+    }
+
+    _buildCustomColorDropDown(
+        initialValue: boolean,
+        onChange: (_: boolean) => void,
+        styleClass?: string,
+    ) {
+        const options = new Gtk.StringList();
+        options.append(_('Choose custom color')); // true
+        options.append(_('Use system accent color')); // false
+        const dropdown = new Gtk.DropDown({
+            model: options,
+            selected: initialValue ? 0 : 1,
         });
-        adwRow.add_suffix(colorButton);
-        return adwRow;
+        dropdown.connect('notify::selected-item', (dd: Gtk.DropDown) => {
+            const index = dd.get_selected();
+            const selected = index === 0; // 0 is true, which means to use custom color
+            onChange(selected);
+        });
+        if (styleClass) dropdown.add_css_class(styleClass);
+        dropdown.set_vexpand(false);
+        dropdown.set_valign(Gtk.Align.CENTER);
+        return dropdown;
     }
 
     _buildFileChooserDialog(
@@ -1245,12 +1275,9 @@ export default class TilingShellExtensionPreferences extends ExtensionPreference
         window.connect('map', () => {
             fc.set_transient_for(window);
         });
-        const [major] = Config.PACKAGE_VERSION.split('.').map((s: string) =>
-            Number(s),
-        );
         // due to a bug, file chooser doesn't open on GNOME 42 when a filter is set
         // filter is then enabled for GNOME 43+
-        if (major >= 43) fc.set_filter(filter);
+        if (this.GNOME_VERSION_MAJOR >= 43) fc.set_filter(filter);
         fc.set_current_folder(Gio.File.new_for_path(GLib.get_home_dir()));
         fc.connect('response', onResponse);
 
@@ -1484,7 +1511,7 @@ const ShortcutSettingButton = class extends Gtk.Button {
         // Because the cairo module isn't real, we have to use these to ignore `any`.
         // We keep them to the minimum possible scope to catch real errors.
         /* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
 /* ctx.setLineCap(Cairo.LineCap.SQUARE);
         //@ts-ignore
         ctx.setAntialias(Cairo.Antialias.NONE);

src/settings/settings.ts

@@ -79,6 +79,8 @@ export default class Settings {
     static KEY_LAST_VERSION_NAME_INSTALLED = 'last-version-name-installed';
     static KEY_OVERRIDDEN_SETTINGS = 'overridden-settings';
     static KEY_WINDOW_BORDER_COLOR = 'window-border-color';
+    static KEY_WINDOW_USE_CUSTOM_BORDER_COLOR =
+        'window-use-custom-border-color';
     static KEY_TILING_SYSTEM = 'enable-tiling-system';
     static KEY_SNAP_ASSIST = 'enable-snap-assist';
     static KEY_SHOW_INDICATOR = 'show-indicator';
@@ -395,6 +397,14 @@ export default class Settings {
         set_string(Settings.KEY_WINDOW_BORDER_COLOR, val);
     }
 
+    static get WINDOW_USE_CUSTOM_BORDER_COLOR(): boolean {
+        return get_boolean(Settings.KEY_WINDOW_USE_CUSTOM_BORDER_COLOR);
+    }
+
+    static set WINDOW_USE_CUSTOM_BORDER_COLOR(val: boolean) {
+        set_boolean(Settings.KEY_WINDOW_USE_CUSTOM_BORDER_COLOR, val);
+    }
+
     static get WINDOW_BORDER_WIDTH(): number {
         return get_unsigned_number(Settings.KEY_WINDOW_BORDER_WIDTH);
     }

src/utils/gnomesupport.ts

@@ -37,6 +37,7 @@ export function getEventCoords(event: any): number[] {
 }
 
 export function maximizeWindow(window: Meta.Window): void {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     window.get_maximized ? window.maximize(Meta.MaximizeFlags.BOTH):window.maximize();
 }