Repository: Fred78290/vuemeter-system
Pull request #5: Use accent colours
Author: login: ToeKnee
Created: 2025-02-25T20:42:43Z | Merged: 2025-03-03T10:05:40Z

Use `-st-accent-colour` in the CSS to get the [Gnome Accent Colour](https://gjs.guide/extensions/upgrading/gnome-shell-47.html#accent-color). This is available from Gnome 47 onwards, so the shell-version has been bumped accordingly.

Also, removed the colour cache from `lookupColor` as it was stopping the accent colour from picking up updates without restarting the extension (or Gnome). I'm not sure how heavy `widget.get_theme_node()` and `themeNode.lookup_color(name, true);` are, or if the cache was necessary. But I'm not seeing any increase in resource usage. If caching these colours is desirable, perhaps we could move it up a level and cache the colour once per update.


Diff:
diff --git a/README.md b/README.md
index b253371..4832534 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # vuemeter-system
 
-vuemeter-system is a full rewrite and port to Gnome version 46 and 47 of the [unmaintened gnome-stats-pro extension](https://github.com/tpenguin/gnome-stats-pro) from Thralling Penguin .
+vuemeter-system is a full rewrite and port to Gnome version 46, 47 and 48 of the [unmaintened gnome-stats-pro extension](https://github.com/tpenguin/gnome-stats-pro) from Thralling Penguin .
 
 ## As the original
 
diff --git a/bin/pack.sh b/bin/pack.sh
index 03808a3..679e8c9 100755
--- a/bin/pack.sh
+++ b/bin/pack.sh
@@ -119,7 +119,7 @@ if [ ${GNOME_VERSION_MAJOR} -ge 46 ]; then
         --extra-source=./LICENSE.md \
         --extra-source=./README.md \
         .
-    # Add all schemas files    
+    # Add all schemas files
     zip -ur vuemeter-system@aldunelabs.com.shell-extension.zip schemas
 else
     gnome-extensions pack --force \
diff --git a/metadata.json b/metadata.json
index 8389998..8a6cac4 100644
--- a/metadata.json
+++ b/metadata.json
@@ -1,5 +1,5 @@
 {
-    "shell-version": ["46", "47"],
+    "shell-version": ["46", "47", "48"],
     "uuid": "vuemeter-system@aldunelabs.com",
     "extension-id": "vuemeter-system",
     "settings-schema": "org.gnome.shell.extensions.vuemeter-system",
@@ -8,6 +8,6 @@
     "name": "VueMeter System",
     "description": "System monitor showing CPU and memory usage.",
     "url": "https://github.com/Fred78290/vuemeter-system",
-    "version": 7,
-    "version-name": "1.0.4"
+    "version": 8,
+    "version-name": "1.0.5"
 }
diff --git a/po/vuemeter-system@aldunelabs.pot b/po/vuemeter-system@aldunelabs.pot
index 4782cc3..3ab0821 100644
--- a/po/vuemeter-system@aldunelabs.pot
+++ b/po/vuemeter-system@aldunelabs.pot
@@ -6,9 +6,9 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: vuemeter-system 1.0.4\n"
+"Project-Id-Version: vuemeter-system 1.0.5\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-02-26 10:18+0000\n"
+"POT-Creation-Date: 2025-03-01 10:23+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
diff --git a/src/indicator.ts b/src/indicator.ts
index aa8ee7a..265968f 100644
--- a/src/indicator.ts
+++ b/src/indicator.ts
@@ -11,6 +11,7 @@ import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import HorizontalGraph from './horizontalgraph.js';
 import { Color, Constantes, Dictionary } from './types.js';
 import Utils from './utils.js';
+import { adjustStyleClass } from './style.js';
 
 export type IndicatorOptions = {
 	updateInterval: number;
@@ -87,7 +88,7 @@ export default GObject.registerClass(
 				reactive: true,
 				canFocus: true,
 				trackHover: true,
-				styleClass: 'panel-button gsp-color gsp-header',
+				styleClass: adjustStyleClass('panel-button gsp-color gsp-header'),
 				accessibleName: name,
 				accessibleRole: Atk.Role.MENU,
 				layoutManager: new Clutter.BinLayout(),
diff --git a/src/style.ts b/src/style.ts
new file mode 100644
index 0000000..d043ee2
--- /dev/null
+++ b/src/style.ts
@@ -0,0 +1,15 @@
+import { PACKAGE_VERSION } from 'resource:///org/gnome/shell/misc/config.js';
+
+function adjustStyleClass(style: string): string {
+	const [major, _minor] = PACKAGE_VERSION.split('.').map(s => Number(s));
+	const minVersion = 46;
+	const shellVersion = major;
+
+	for (let i = minVersion; i <= shellVersion; i++) {
+		style += ` gnomeVersion${i}`;
+	}
+
+	return style;
+}
+
+export { adjustStyleClass };
diff --git a/src/utils.ts b/src/utils.ts
index 81a0444..32e49c8 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,12 +1,10 @@
-import Gio from 'gi://Gio';
 import GLib from 'gi://GLib';
 import St from 'gi://St';
+import Gio from 'gi://Gio';
 import { Extension, ExtensionMetadata } from 'resource:///org/gnome/shell/extensions/extension.js';
 import { ExtensionPreferences } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';
 import Config from './config.js';
-import { Color, Dictionary } from './types.js';
-
-type CachedColor = Dictionary<Color>;
+import { Color } from './types.js';
 
 export default class Utils {
 	static HEADER = 'vuemeter-system';
@@ -18,13 +16,11 @@ export default class Utils {
 	static extension: Extension | ExtensionPreferences | null;
 	static metadata: ExtensionMetadata | null;
 	static settings: Gio.Settings | null;
-	private static cachedColor?: Dictionary<CachedColor> = {};
 
 	static release() {
 		Utils.extension = null;
 		Utils.metadata = null;
 		Utils.settings = null;
-		Utils.cachedColor = undefined;
 		Config.settings = undefined;
 	}
 
@@ -198,41 +194,24 @@ export default class Utils {
 
 	static lookupColor(widget: St.Widget, name: string, defaultColor: Color): Color {
 		if (widget.get_stage()) {
-			if (this.cachedColor === undefined) {
-				this.cachedColor = {};
-			}
-
-			let cachedColorPerWidget = this.cachedColor[widget.name];
-
-			if (cachedColorPerWidget === undefined) {
-				cachedColorPerWidget = {};
-				this.cachedColor[widget.name] = cachedColorPerWidget;
-			}
-
-			if (cachedColorPerWidget[name]) {
-				defaultColor = cachedColorPerWidget[name];
+			const themeNode = widget.get_theme_node();
+			const [hasColor, color] = themeNode.lookup_color(name, true);
+
+			if (hasColor) {
+				Utils.debug(
+					`${widget.name}::lookupColor->${this.name}, name:${name} red: ${color.red}, blue: ${color.blue}, green: ${color.green}, alpha:${color.alpha}`
+				);
+
+				defaultColor = {
+					red: color.red / 255.0,
+					blue: color.blue / 255.0,
+					green: color.green / 255.0,
+					alpha: color.alpha / 255.0,
+				};
 			} else {
-				const themeNode = widget.get_theme_node();
-				const [hasColor, color] = themeNode.lookup_color(name, true);
-
-				if (hasColor) {
-					Utils.debug(
-						`${widget.name}::lookupColor->${this.name}, name:${name} red: ${color.red}, blue: ${color.blue}, green: ${color.green}, alpha:${color.alpha}`
-					);
-
-					defaultColor = {
-						red: color.red / 255.0,
-						blue: color.blue / 255.0,
-						green: color.green / 255.0,
-						alpha: color.alpha / 255.0,
-					};
-
-					cachedColorPerWidget[name] = defaultColor;
-				} else {
-					Utils.debug(
-						`${widget.name}::lookupColor->${this.name}, name:${name} not found, use red: ${defaultColor.red}, blue: ${defaultColor.blue}, green: ${defaultColor.green}, alpha:${defaultColor.alpha}`
-					);
-				}
+				Utils.debug(
+					`${widget.name}::lookupColor->${this.name}, name:${name} not found, use red: ${defaultColor.red}, blue: ${defaultColor.blue}, green: ${defaultColor.green}, alpha:${defaultColor.alpha}`
+				);
 			}
 		}
 
diff --git a/stylesheet.css b/stylesheet.css
index 40bd23a..0713df8 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -32,6 +32,24 @@
     network-bad-color: rgba(240, 85, 0, 1);
 }
 
+/* Gnome 47 accent colour */
+.gsp-color.gnomeVersion47 {
+    cpu-color: -st-accent-color;
+    cpu-total-color: -st-accent-color;
+    mem-used-color: -st-accent-color;
+    swap-used-color: -st-accent-color;
+}
+.gsp-color.gnomeVersion47 .bg-cpu-total-color {
+    background-color: -st-accent-color;
+}
+.gsp-color.gnomeVersion47 .bg-swap-used-color {
+    background-color: rgba(99, 189, 246, 1);
+}
+.gsp-color.gnomeVersion47 .bg-mem-used-color {
+    background-color: rgba(99, 189, 246, 1);
+}
+/* END Gnome 47 accent colour */
+
 .gsp-header {
     padding: 0;
     margin: 0;


Reviews:
user: login: Fred78290
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-01T11:13:45Z
user: login: Fred78290
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-01T11:15:09Z
user: login: Fred78290
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-01T11:16:59Z

Review comments:
path: src/utils.ts
user: login: Fred78290
body: import { PACKAGE_VERSION } from 'resource:///org/gnome/shell/misc/config.js';

Fail when we right click on the widget to display pref panel, because in config.js we import utils.js

adjustStyleClass must be in separate file.
created_at: 2025-03-01T11:13:44Z
author_association: OWNER
path: src/utils.ts
user: login: Fred78290
body: ![image](https://github.com/user-attachments/assets/cc5c3eff-9a39-49be-a458-287351bc5782)

created_at: 2025-03-01T11:15:09Z
author_association: OWNER
path: src/utils.ts
user: login: Fred78290
body: https://gjs.guide/extensions/upgrading/gnome-shell-45.html

extension.js vs prefs.js section
created_at: 2025-03-01T11:16:59Z
author_association: OWNER

PR comments:
user: login: Fred78290
created_at: 2025-02-26T10:06:32Z
body: @ToeKnee Can't merge because Gnome 46 is not supported for accent colour
author_association: OWNER
user: login: ToeKnee
created_at: 2025-02-26T11:24:09Z
body: Yep, it looks like I missed a couple of version checks. Added now.
I'm looking to see if there is a way to have conditional CSS in there, or supply an extra CSS file if >=47.
author_association: CONTRIBUTOR
user: login: Fred78290
created_at: 2025-02-26T11:39:28Z
body: The good approach will be create style class specific for gnome 47 and above

```
.gsp-color-47 {
...
}
```
And change at runtime 

```
styleClass: Utils.adjustStyleClass('panel-button gsp-color gsp-header')
```

```
adjustStyleClass(style: string): string {
 if (gnomeVersion > 47) {
   return style.split(' ').map(s => s + '-47').join(' ')
 }

 return style
}
author_association: OWNER
user: login: Fred78290
created_at: 2025-03-01T11:15:59Z
body: On gnome 47, colours look ugly.
![image](https://github.com/user-attachments/assets/02aade25-8c0f-43ba-90fd-aaab995c2fb4)

author_association: OWNER
user: login: Fred78290
created_at: 2025-03-01T11:46:50Z
body: Should also apply st-accent-color on horizontal graph?

![image](https://github.com/user-attachments/assets/1d4e57ec-d40c-44ad-9501-57312f52b384)

author_association: OWNER
user: login: Fred78290
created_at: 2025-03-01T15:16:22Z
body: @ToeKnee 
Works also on gnome 48.
author_association: OWNER
user: login: ToeKnee
created_at: 2025-03-02T11:55:07Z
body: > Should also apply st-accent-color on horizontal graph?

I'm not sure. I can see good arguments for both points of views.

* :+1: It would make the colour consistent between the widget and graph
* :-1: The accent colour would only affect the primary colour in the graph, it might not fit the colour scheme of the rest of the graph.

I don't have a strong preference either way.
author_association: CONTRIBUTOR
user: login: Fred78290
created_at: 2025-03-03T10:05:34Z
body: @ToeKnee 
OK probably the next step is to add graph color editing in prefs.
author_association: OWNER