feat: allow active hint border width changes

dark.css

@@ -10,7 +10,7 @@
 }
 
 .pop-shell-border-normal {
-    border-width: 3px;
+    border-width: var(--active-hint-border-width, 3px);
 }
 
 .pop-shell-border-maximize {

highcontrast.css

@@ -10,7 +10,7 @@
 }
 
 .pop-shell-border-normal {
-    border-width: 3px;
+    border-width: var(--active-hint-border-width, 3px);
 }
 
 .pop-shell-border-maximize {

light.css

@@ -10,7 +10,7 @@
 }
 
 .pop-shell-border-normal {
-    border-width: 3px;
+    border-width: var(--active-hint-border-width, 3px);
 }
 
 .pop-shell-border-maximize {

schemas/org.gnome.shell.extensions.pop-shell.gschema.xml

@@ -13,6 +13,12 @@
             <summary>Border radius for active window hint, in pixels</summary>
         </key>
 
+        <key type="u" name="active-hint-border-width">
+            <default>3</default>
+            <range min="1" max="15"/>
+            <summary>Border width for active window hint, in pixels</summary>
+        </key>
+
         <key type="b" name="fullscreen-launcher">
             <default>false</default>
             <summary>Allow showing launcher above fullscreen windows</summary>

src/panel_settings.ts

@@ -17,6 +17,7 @@ export class Indicator {
     toggle_titles: null | any
     toggle_active: any
     border_radius: any
+    border_width: any
 
     entry_gaps: any
 
@@ -77,6 +78,18 @@ export class Indicator {
             }
         )
 
+        this.border_width = number_entry(
+            _("Active Border Width"),
+            {
+              value: ext.settings.active_hint_border_width(),
+              min: 1,
+              max: 15
+            },
+            (value) => {
+                ext.settings.set_active_hint_border_width(value);
+            }
+        )
+
         bm.addMenuItem(this.toggle_tiled);
         bm.addMenuItem(floating_window_exceptions(ext, bm));
 
@@ -92,6 +105,7 @@ export class Indicator {
 
         bm.addMenuItem(this.toggle_active);
         bm.addMenuItem(this.border_radius);
+        bm.addMenuItem(this.border_width);
 
         // CSS Selector
         bm.addMenuItem(color_selector(ext, bm),);

src/settings.ts

@@ -49,6 +49,7 @@ function settings_new_schema(schema: string): Settings {
 
 const ACTIVE_HINT = "active-hint";
 const ACTIVE_HINT_BORDER_RADIUS = "active-hint-border-radius";
+const ACTIVE_HINT_BORDER_WIDTH = "active-hint-border-width";
 const STACKING_WITH_MOUSE = "stacking-with-mouse";
 const COLUMN_SIZE = "column-size";
 const EDGE_TILING = "edge-tiling";
@@ -83,6 +84,10 @@ export class ExtensionSettings {
         return this.ext.get_uint(ACTIVE_HINT_BORDER_RADIUS);
     }
 
+    active_hint_border_width(): number {
+        return this.ext.get_uint(ACTIVE_HINT_BORDER_WIDTH);
+    }
+
     stacking_with_mouse(): boolean {
         return this.ext.get_boolean(STACKING_WITH_MOUSE);
     }
@@ -187,6 +192,10 @@ export class ExtensionSettings {
         this.ext.set_uint(ACTIVE_HINT_BORDER_RADIUS, set);
     }
 
+    set_active_hint_border_width(set: number) {
+        this.ext.set_uint(ACTIVE_HINT_BORDER_WIDTH, set);
+    }
+
     set_stacking_with_mouse(set: boolean) {
         this.ext.set_boolean(STACKING_WITH_MOUSE, set);
     }

src/window.ts

@@ -631,8 +631,9 @@ export class ShellWindow {
         const { settings } = this.ext
         const color_value = settings.hint_color_rgba();
         const radius_value = settings.active_hint_border_radius();
+        const width_value = settings.active_hint_border_width();
         if (this.border) {
-            this.border.set_style(`border-color: ${color_value}; border-radius: ${radius_value}px;`);
+            this.border.set_style(`border-color: ${color_value}; border-radius: ${radius_value}px; border-width: ${width_value}px;`);
         }
     }