Persistent centered mode (aka "Sticky Centering")

minimap.js

@@ -122,7 +122,7 @@ var Minimap = class Minimap extends Array {
         }
 
         this.layout();
-        let time = animate ? 0.25 : 0;
+        let time = animate ? prefs.animation_time : 0;
         this.actor.show();
         Tweener.addTween(this.actor,
                          {opacity: 255, time, mode: Clutter.AnimationMode.EASE_OUT_EXPO});
@@ -131,7 +131,7 @@ var Minimap = class Minimap extends Array {
     hide(animate) {
         if (this.destroyed)
             return;
-        let time = animate ? 0.25 : 0;
+        let time = animate ? prefs.animation_time : 0;
         Tweener.addTween(this.actor,
                          {opacity: 0, time, mode: Clutter.AnimationMode.EASE_OUT_EXPO,
                           onComplete: () => this.actor.hide() });

resources/ICONS.info

@@ -0,0 +1,5 @@
+SVG icons adapted from "GNOME Project" adwaita-icon-theme (https://github.com/GNOME/adwaita-icon-theme).
+
+See http://www.gnome.org for more information.
+
+Please see terms, under which these icons have been copied, at https://github.com/GNOME/adwaita-icon-theme/blob/master/COPYING.

stylesheet.css

@@ -1,5 +1,5 @@
 .space-label-wrapper {
-    padding: 0 12px 0 0;
+    padding: 0 10px 0 0;
     background-color: transparent;
     border-image: none;
     background-image: none;
@@ -8,12 +8,13 @@
 
 .space-focus-mode-icon {
     icon-size: 16px;
-    padding: 0px 21px 0 21px;
+    padding: 0 18px 0 18px;
+    margin-left: 3px;
     background-color: transparent;
 }
 
 .focus-button-tooltip {
-    background-color: rgba(0, 0, 0, 0.35);
+    background-color: rgba(0, 0, 0, 0.7);
     padding: 8px;
     border-radius: 8px;
     font-weight: 600;

tiling.js

@@ -148,7 +148,6 @@ var Space = class Space extends Array {
         // default focusMode (can be overriden by saved user pref in Space.init method)
         this.focusMode = FocusModes.DEFAULT;
         this.focusModeIcon = new TopBar.FocusIcon({
-            reactive: true,
             name: 'panel',
             style_class: 'space-focus-mode-icon',
         })
@@ -1683,7 +1682,7 @@ var Spaces = class Spaces extends Map {
          * Ensures correct window layout with multi-monitors, and if windows already exist on init, 
          * (e.g. resetting gnome-shell) then will ensure selectedWindow is activated.
          */
-        imports.mainloop.timeout_add(0, () => {
+        imports.mainloop.timeout_add(200, () => {
             const space = spaces.getActiveSpace();
             if (space.selectedWindow) {
                 space.layout(false);

topbar.js

@@ -201,13 +201,20 @@ class ColorEntry {
  */
 var FocusIcon = Utils.registerClass(
 class FocusIcon extends St.Icon {
-    _init(properties = {}) {
+    _init(properties = {}, tooltip_x_point=0) {
         super._init(properties);
+        this.reactive = true;
+
+        // allow custom x position for tooltip
+        this.tooltip_x_point = tooltip_x_point;
 
         // read in focus icons from resources folder
         this.gIconDefault = Gio.icon_new_for_string(`${Path}/resources/focus-mode-default-symbolic.svg`);
         this.gIconCenter = Gio.icon_new_for_string(`${Path}/resources/focus-mode-center-symbolic.svg`);
 
+        this._initToolTip();
+        this.setMode();
+
         this.connect('button-press-event', () => {
             if (this.clickFunction) {
                 this.clickFunction();
@@ -224,19 +231,65 @@ class FocusIcon extends St.Icon {
         this.clickFunction = clickFunction;
         return this;
     }
+
+    _initToolTip() {
+        const tt = new St.Label({style_class: 'focus-button-tooltip'});
+        tt.hide();
+        global.stage.add_child(tt);
+        this.connect('enter-event', icon => {
+            this._updateTooltipPosition(this.tooltip_x_point);
+            this._updateTooltipText();
+            tt.show();
+        });
+        this.connect('leave-event', (icon, event) => {
+            if (!this.has_pointer) {
+                tt.hide();
+            }
+        });
+        this.tooltip = tt;
+    }
+
+    /**
+     * Updates tooltip position relative to this button.
+     */
+    _updateTooltipPosition(xpoint=0) {
+        //const offset = Tiling.spaces.getActiveSpace().width;
+        let point = this.apply_transform_to_point(
+            new Clutter.Vertex({x: xpoint, y: 0}));
+        this.tooltip.set_position(Math.max(0, point.x - 62), point.y + 34);
+    }
+
+    _updateTooltipText() {
+        const markup = (color, mode) => {
+            this.tooltip.clutter_text
+                .set_markup(
+`    <i>Window focus mode</i>
+Current mode: <span foreground="${color}"><b>${mode}</b></span>`);
+        };
+        if (this.mode === Tiling.FocusModes.DEFAULT) {
+            markup('#6be67b', 'DEFAULT');
+        }
+        else if (this.mode === Tiling.FocusModes.CENTER) {
+            markup('#6be6cb', 'CENTER');
+        } else {
+            this.tooltip.set_text('');
+        }
+    }
 
     /**
      * Set the mode that this icon will display.
      * @param {Tiling.FocusModes} mode
      */
     setMode(mode) {
         mode = mode ?? Tiling.FocusModes.DEFAULT;
+        this.mode = mode;
         if (mode === Tiling.FocusModes.DEFAULT) {
             this.gicon = this.gIconDefault;
         }
         else if (mode === Tiling.FocusModes.CENTER) {
             this.gicon = this.gIconCenter;
         }
+        this._updateTooltipText()
         return this;
     }
 
@@ -256,66 +309,23 @@ class FocusButton extends PanelMenu.Button {
     _init() {
         super._init(0.0, 'FocusMode');
 
-        this.focusMode = Tiling.FocusModes.DEFAULT;
         this._icon = new FocusIcon({
-            reactive: true,
-            style_class: 'system-status-icon'
-        });
-        this._initToolTip();
+            style_class: 'system-status-icon focus-mode-button'
+        }, -10);
 
-        this.setFocusMode(this.focusMode);
+        this.setFocusMode();
         this.add_child(this._icon);
         this.connect('event', this._onClicked.bind(this));
-        this.connect('notify::allocation', () => {
-            let point = this._icon.apply_transform_to_point(new Clutter.Vertex({x: 0, y: 0}));
-            let pos = this.get_position();
-            log('position', pos.x, pos.y);
-        });
-    }
-
-    _initToolTip() {
-        const tt = new St.Label({style_class: 'focus-button-tooltip'});
-        tt.hide();
-        global.stage.add_child(tt);
-        this._icon.connect('enter-event', icon => {
-            this._setTooltipText();
-            tt.show();
-        });
-        this._icon.connect('leave-event', icon => {
-            tt.hide();
-        });
-        this.tooltip = tt;
-    }
-
-    setTooltipPosition(x, y) {
-        this.tooltip.set_position(x, y);
-    }
-
-    _setTooltipText() {
-        const markup = (color, mode) => {
-            this.tooltip.clutter_text
-                .set_markup(
-`    <i>Window focus mode</i>
-Current mode: <span foreground="${color}"><b>${mode}</b></span>`);
-        };
-        if (this.focusMode == Tiling.FocusModes.DEFAULT) {
-            markup('#6be67b', 'DEFAULT');
-        }
-        else if (this.focusMode == Tiling.FocusModes.CENTER) {
-            markup('#6be6cb', 'CENTER');
-        } else {
-            this.tooltip.set_text('');
-        }
     }
 
     /**
      * Sets the focus mode with this button.
      * @param {*} mode 
      */
     setFocusMode(mode) {
+        mode = mode ?? Tiling.FocusModes.DEFAULT;
         this.focusMode = mode;
         this._icon.setMode(mode);
-        this._setTooltipText()
         return this;
     }
 
@@ -659,7 +669,6 @@ function enable () {
         const pos = focusButton.apply_relative_transform_to_point(panel, 
             new Clutter.Vertex({ x: 0, y: 0 }));
         Tiling.spaces.setFocusIconPosition(pos.x, pos.y);
-        focusButton.setTooltipPosition(Math.max(0, pos.x - 56), pos.y + 34);
     });
     fixFocusModeIcon();