fix(active-hint): Improvements to display of active hints

Author: jmmaranan

dark.css

@@ -1,11 +1,18 @@
 .pop-shell-active-hint {
-    border-width: 5px;
     border-style: solid;
     border-color: #FBB86C;
     border-radius: 5px;
     box-shadow: inset 0 0 0 1px rgba(24, 23, 23, 0)
 }
 
+.pop-shell-border-normal {
+    border-width: 3px;
+}
+
+.pop-shell-border-maximize {
+    border-width: 3px;
+}
+
 .pop-shell-search-element:select{
     background: rgba(246, 246, 246, .2);
     border-radius: 5px;

light.css

@@ -1,11 +1,18 @@
 .pop-shell-active-hint {
-    border-width: 5px;
     border-style: solid;
     border-color: #FFAD00;
     border-radius: 5px;
     box-shadow: inset 0 0 0 1px rgba(200, 200, 200, 0);
 }
 
+.pop-shell-border-normal {
+    border-width: 3px;
+}
+
+.pop-shell-border-maximize {
+    border-width: 3px;
+}
+
 .pop-shell-search-element:select{
     background: rgba(0, 0, 0, .1);
     border-radius: 5px;
@@ -29,4 +36,4 @@
 .pop-shell-gaps-entry {
     /* Seems to get the width just right to fit 3 digits */
     width: 75px;
-}
+}

src/auto_tiler.ts

@@ -6,16 +6,16 @@ import * as log from 'log';
 import * as node from 'node';
 import * as result from 'result';
 
-import type {Entity} from 'ecs';
-import type {Ext} from 'extension';
-import type {Forest} from 'forest';
-import type {Fork} from 'fork';
-import type {Rectangle} from 'rectangle';
-import type {Result} from 'result';
-import type {ShellWindow} from 'window';
-
-const {Ok, Err, ERR} = result;
-const {NodeKind} = node;
+import type { Entity } from 'ecs';
+import type { Ext } from 'extension';
+import type { Forest } from 'forest';
+import type { Fork } from 'fork';
+import type { Rectangle } from 'rectangle';
+import type { Result } from 'result';
+import type { ShellWindow } from 'window';
+
+const { Ok, Err, ERR } = result;
+const { NodeKind } = node;
 const Tags = Me.imports.tags;
 
 export class AutoTiler {
@@ -57,6 +57,13 @@ export class AutoTiler {
             rect.height -= ext.gap_outer * 2;
         }
 
+        if (fork.left.kind === NodeKind.WINDOW) {
+            const win = ext.windows.get(fork.left.entity);
+            if (win) {
+                win.smart_gapped = smart_gaps && fork.right === null;
+            }
+        }
+
         fork.smart_gaps = smart_gaps;
 
         let ratio;
@@ -87,6 +94,7 @@ export class AutoTiler {
         const [entity, fork] = this.forest.create_toplevel(win.entity, rect.clone(), workspace_id)
         this.attached.insert(win.entity, entity);
         fork.smart_gaps = smart_gaps;
+        win.smart_gapped = smart_gaps;
 
         this.tile(ext, fork, rect);
         this.log_tree_nodes(ext);

src/extension.ts

@@ -1042,6 +1042,7 @@ export class Ext extends Ecs.System<ExtEvent> {
                     break;
                 case 'smart-gaps':
                     this.on_smart_gap();
+                    this.show_border_on_focused();
             }
         });
 

src/window.ts

@@ -52,6 +52,9 @@ export class ShellWindow {
 
     was_attached_to?: [Entity, boolean];
 
+    // True if this window is currently smart-gapped
+    smart_gapped: boolean = false;
+
     private was_hidden: boolean = false;
 
     private window_app: any;
@@ -62,7 +65,7 @@ export class ShellWindow {
         xid_: new OnceCell()
     };
 
-    private _border: St.Bin = new St.Bin({ style_class: 'pop-shell-active-hint' });
+    private _border: St.Bin = new St.Bin({ style_class: 'pop-shell-active-hint pop-shell-border-normal' });
 
     private _border_size = 0;
 
@@ -181,6 +184,15 @@ export class ShellWindow {
         return this.meta.get_maximized() !== 0;
     }
 
+    /**
+     * Window is maximized, 0 gapped or smart gapped
+     */
+    is_max_screen(): boolean {
+        // log.debug(`title: ${this.meta.get_title()}`);
+        // log.debug(`max: ${this.is_maximized()}, 0-gap: ${this.ext.settings.gap_inner() === 0}, smart: ${this.smart_gapped}`);
+        return this.is_maximized() || this.ext.settings.gap_inner() === 0 || this.smart_gapped;
+    }
+
     is_tilable(ext: Ext): boolean {
         return !ext.contains_tag(this.entity, Tags.Floating)
             && ext.tilable.get_or(this.entity, () => {
@@ -302,9 +314,8 @@ export class ShellWindow {
     show_border() {
         if (this.ext.settings.active_hint()) {
             let border = this._border;
-            if (!this.is_maximized() &&
+            if (!this.meta.is_fullscreen() &&
                 !this.meta.minimized &&
-                !this.meta.is_fullscreen() &&
                 this.same_workspace()) {
                 border.show();
             }
@@ -384,7 +395,8 @@ export class ShellWindow {
 
     hide_border() {
         let border = this._border;
-        border.hide();
+        if (border)
+            border.hide();
     }
 
     private _update_border_layout() {
@@ -394,8 +406,15 @@ export class ShellWindow {
         let border = this._border;
         let borderSize = this._border_size;
 
+        if (!this.is_max_screen()) {
+            border.remove_style_class_name('pop-shell-border-maximize');
+        } else {
+            borderSize = 0;
+            border.add_style_class_name('pop-shell-border-maximize');
+        }
+
         border.set_position(frameX - borderSize, frameY - borderSize);
-        border.set_size(frameWidth + 2 * borderSize, frameHeight + 2 * borderSize);
+        border.set_size(frameWidth + (2 * borderSize), frameHeight + (2 * borderSize));
 
         this.restack();
     }