From 31997fa2f9f3183d97c22f073e878b308331f288 Mon Sep 17 00:00:00 2001
From: Sebastian Keller <skeller@gnome.org>
Date: Sun, 17 Mar 2024 12:43:03 +0100
Subject: [PATCH] appDisplay: Set running indicator dot offset via CSS

The offset was given as a hardcoded (physical) pixel value and did not
take scaling into account. This lead to it being shifted closer towards
the icon as the scale increased.

This now replaces the hardcoded value with a CSS property which
automatically includes the scale factor.

Further this allows simplifying some calculations that previously were
trying to counteract the hardcoded offset using margins by using the
intended offset directly.

With this the dot in the dash is also now placed at exactly the bottom
of the hover highlight, while previously there was an unintentional 1px
space.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7488
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3245>
---
 data/theme/gnome-shell-sass/widgets/_app-grid.scss | 4 ++--
 data/theme/gnome-shell-sass/widgets/_dash.scss     | 2 +-
 js/ui/appDisplay.js                                | 7 ++++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index fcada18a2..179b2d51e 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -49,9 +49,9 @@ $app_folder_size: 720px;
   background-color: $system_fg_color;
 
   @if $contrast == 'high' {
-    margin-bottom: 4px;
+    offset-y: 4px;
   } @else {
-    margin-bottom: 2px;
+    offset-y: 6px;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 02323fcc6..d73f9cada 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -71,7 +71,7 @@ $dash_spacing: $base_margin * 0.5;
     // running app dot
     .app-grid-running-dot {
       // manually position the dot within the dash item
-      margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
+      offset-y: -$dash_padding;
     }
   }
 
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index f107c44e9..117a3864d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -3014,7 +3014,7 @@ export const AppIcon = GObject.registerClass({
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.END,
         });
-        this._dot.translationY = 8;
+        this._dot.connect('style-changed', () => this._updateDotStyle());
         this._iconContainer.add_child(this._dot);
 
         this.label_actor = this.icon.label;
@@ -3059,6 +3059,11 @@ export const AppIcon = GObject.registerClass({
         }
     }
 
+    _updateDotStyle() {
+        const themeNode = this._dot.get_theme_node();
+        this._dot.translationY = themeNode.get_length('offset-y');
+    }
+
     _updateRunningStyle() {
         if (this.app.state !== Shell.AppState.STOPPED)
             this._dot.show();