Custom vertical activation areas & side tiling shapes

[tlarcher]

Coming from the old ShellTile extension on an old Ubuntu version, I was looking for an up-to-date replacement for Gnome Shell 42.9 on Ubuntu 22.04, and I'm fond of this extension. Much more control, especially the ability to disable windows auto-rescaling.

However, the tiling activation areas, when moving a window to an edge, are a bit different from what I was used to and I wanted to changed them slightly.

So, in the hope that this little ad-hoc tweaking can help others too, here is how I managed to customize the left/right vertical "trigger" areas for half and quarter resizing:

1. Open up ~/.local/share/gnome-shell/extensions/tilingshell@ferrarodomenico.com/extension.js
2. Line 1976: variable activationPercentage controls the area of a quarter resizing (in percentage). Setting this value to 0.1 for e.g. means that 10% of the vertical space from the top down, and 10% of the vertical space from the bottom up, will trigger a quarter resizing; while the 80% remaining vertical space in between will trigger a half resizing.

Personally I set this value to 0.3

3. Hit alt + f2 and run r to refresh your Gnome shell

To go further:

Variable quarterPercentage (line 1975) is a scaling parameter of the new sizes used for both quarter and half resizing.
By introducing new variables to separate the width and height control, you can more precisely control the new heights and widths of all corners and side centers:

// const quarterPercentage = 0.5  // Line 1975
const topleft_w = 0.1; const topleft_h = 0.1; const botleft_w = 0.2; const botleft_h = 0.2; const centerleft_w = 0.9;  // custom
const topright_w = 0.3; const topright_h = 0.3; const botright_w = 0.4; const botright_h = 0.4; const centerright_w = 0.8;  // custom

// ... // Lines 1979 to 2011

// previewRect.width = this._workArea.width * quarterPercentage;  // Line 2012
// previewRect.height = this._workArea.height * quarterPercentage;
previewRect.y = this._workArea.y;
// Left Side
if (x <= this._workArea.x + this._workArea.width / 2) {
  previewRect.x = this._workArea.x;
  if (isPointInsideRect({ x, y }, topLeft)) {
    previewRect.width = this._workArea.width * topleft_w  // custom
    previewRect.height = this._workArea.height * topleft_h;  // custom
    this._activeEdgeTile = topLeft;
  } else if (isPointInsideRect({ x, y }, bottomLeft)) {
    // previewRect.y = this._workArea.y + this._workArea.height - previewRect.height;
    previewRect.y = this._workArea.y + this._workArea.height - this._workArea.height * botleft_h;  // custom
    previewRect.height = this._workArea.height * botleft_h;  // custom
    previewRect.width = this._workArea.width * botleft_w  // custom
    this._activeEdgeTile = bottomLeft;
  } else if (y <= topRight.y + topRight.height) {
    isCenterSide = true;
  } else if (y <= bottomLeft.y) {  // vertical center left
    previewRect.width = this._workArea.width * centerleft_w;  // custom
    // previewRect.width = this._workArea.width * quarterPercentage;  
    previewRect.height = this._workArea.height;
    this._activeEdgeTile.x = topLeft.x;
    this._activeEdgeTile.y = topLeft.y + topLeft.height;
    this._activeEdgeTile.height = bottomLeft.y - this._activeEdgeTile.y;
    this._activeEdgeTile.width = topLeft.width;
  } else {
    return;
  }
// Right Side
} else {
  isRightSide = true;
  previewRect.x = this._workArea.x + this._workArea.width - previewRect.width;
  if (isPointInsideRect({ x, y }, topRight)) {
    previewRect.x = this._workArea.x + this._workArea.width - this._workArea.width * topright_w;  // custom
    previewRect.width = this._workArea.width * topright_w;  // custom
    previewRect.height = this._workArea.height * topright_h;  // custom
    this._activeEdgeTile = topRight;
  } else if (isPointInsideRect({ x, y }, bottomRight)) {
    // previewRect.y = this._workArea.y + this._workArea.height - previewRect.height;
    previewRect.y = this._workArea.y + this._workArea.height - this._workArea.height * botright_h;  // custom
    previewRect.x = this._workArea.x + this._workArea.width - this._workArea.width * botright_w;  // custom
    previewRect.width = this._workArea.width * botright_w;  // custom
    previewRect.height = this._workArea.height * botright_h;  // custom
    this._activeEdgeTile = bottomRight;
  } else if (y <= topRight.y + topRight.height) {
    isCenterSide = true;
  } else if (y <= bottomRight.y) { // vertical center right
    previewRect.x = this._workArea.x + this._workArea.width - this._workArea.width * centerright_w;  // custom
    previewRect.width = this._workArea.width * centerright_w;  // custom
    // previewRect.width = this._workArea.width * quarterPercentage;
    previewRect.height = this._workArea.height;
    this._activeEdgeTile.x = topRight.x;
    this._activeEdgeTile.y = topRight.y + topRight.height;
    this._activeEdgeTile.height = bottomRight.y - this._activeEdgeTile.y;
    this._activeEdgeTile.width = topRight.width;
  } else {
    return;
  }
}

Added code lines are marked with a // custom comment. Original code lines are commented.

This is just re-using existing variables with different values, to fill a use case that might not even exist, but maybe it can help people who are curious but not used to manipulate Gnome extensions (as myself) 🙂