[gnome-shell-extensions/wip/rstrode/heads-up-display: 12/62] systemMonitor: Modernise code
- From: Ray Strode <halfline src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell-extensions/wip/rstrode/heads-up-display: 12/62] systemMonitor: Modernise code
- Date: Thu, 26 Aug 2021 19:31:30 +0000 (UTC)
commit a6ea21986de9bc020eb6570db180d5a57b7599e2
Author: Florian Müllner <fmuellner gnome org>
Date: Fri May 17 22:55:48 2019 +0000
systemMonitor: Modernise code
- port to ES6 classes
- replace Lang.bind()
- destructure imports
- fix style issues (stray/missing spaces/semi-colons, indent, ...)
extensions/systemMonitor/extension.js | 377 +++++++++++++++++-----------------
1 file changed, 192 insertions(+), 185 deletions(-)
---
diff --git a/extensions/systemMonitor/extension.js b/extensions/systemMonitor/extension.js
index 7b09df0..89f8916 100644
--- a/extensions/systemMonitor/extension.js
+++ b/extensions/systemMonitor/extension.js
@@ -1,22 +1,16 @@
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
-const Clutter = imports.gi.Clutter;
-const GTop = imports.gi.GTop;
-const Lang = imports.lang;
-const Mainloop = imports.mainloop;
-const St = imports.gi.St;
-const Shell = imports.gi.Shell;
+/* exported init */
+const { Clutter, GLib, GTop, Shell, St } = imports.gi;
+
+const ExtensionUtils = imports.misc.extensionUtils;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const Gettext = imports.gettext.domain('gnome-shell-extensions');
const _ = Gettext.gettext;
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
-const Convenience = Me.imports.convenience;
-
const INDICATOR_UPDATE_INTERVAL = 500;
const INDICATOR_NUM_GRID_LINES = 3;
@@ -24,32 +18,38 @@ const ITEM_LABEL_SHOW_TIME = 0.15;
const ITEM_LABEL_HIDE_TIME = 0.1;
const ITEM_HOVER_TIMEOUT = 300;
-const Indicator = new Lang.Class({
- Name: 'SystemMonitor.Indicator',
-
- _init: function() {
+const Indicator = class {
+ constructor() {
this._initValues();
- this.drawing_area = new St.DrawingArea({ reactive: true });
- this.drawing_area.connect('repaint', Lang.bind(this, this._draw));
- this.drawing_area.connect('button-press-event', function() {
+ this._drawingArea = new St.DrawingArea({ reactive: true });
+ this._drawingArea.connect('repaint', this._draw.bind(this));
+ this._drawingArea.connect('button-press-event', () => {
let app = Shell.AppSystem.get_default().lookup_app('gnome-system-monitor.desktop');
app.open_new_window(-1);
return true;
});
- this.actor = new St.Bin({ style_class: "extension-systemMonitor-indicator-area",
- reactive: true, track_hover: true,
- x_fill: true, y_fill: true });
- this.actor.add_actor(this.drawing_area);
+ this.actor = new St.Bin({
+ style_class: 'extension-systemMonitor-indicator-area',
+ reactive: true,
+ track_hover: true,
+ x_fill: true,
+ y_fill: true
+ });
+ this.actor.add_actor(this._drawingArea);
- this._timeout = Mainloop.timeout_add(INDICATOR_UPDATE_INTERVAL, Lang.bind(this, function () {
- this._updateValues();
- this.drawing_area.queue_repaint();
- return true;
- }));
- },
+ this.actor.connect('destroy', this._onDestroy.bind(this));
- showLabel: function() {
+ this._timeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
+ INDICATOR_UPDATE_INTERVAL,
+ () => {
+ this._updateValues();
+ this._drawingArea.queue_repaint();
+ return GLib.SOURCE_CONTINUE;
+ });
+ }
+
+ showLabel() {
if (this.label == null)
return;
@@ -58,12 +58,10 @@ const Indicator = new Lang.Class({
let [stageX, stageY] = this.actor.get_transformed_position();
- let itemWidth = this.actor.allocation.x2 - this.actor.allocation.x1;
- let itemHeight = this.actor.allocation.y2 - this.actor.allocation.y1;
+ let itemWidth = this.actor.allocation.x2 - this.actor.allocation.x1;
- let labelWidth = this.label.width;
- let labelHeight = this.label.height;
- let xOffset = Math.floor((itemWidth - labelWidth) / 2)
+ let labelWidth = this.label.width;
+ let xOffset = Math.floor((itemWidth - labelWidth) / 2);
let x = stageX + xOffset;
@@ -73,48 +71,51 @@ const Indicator = new Lang.Class({
let y = stageY - this.label.get_height() - yOffset;
this.label.set_position(x, y);
- Tweener.addTween(this.label,
- { opacity: 255,
- time: ITEM_LABEL_SHOW_TIME,
- transition: 'easeOutQuad',
- });
- },
-
- setLabelText: function(text) {
+ Tweener.addTween(this.label, {
+ opacity: 255,
+ time: ITEM_LABEL_SHOW_TIME,
+ transition: 'easeOutQuad',
+ });
+ }
+
+ setLabelText(text) {
if (this.label == null)
- this.label = new St.Label({ style_class: 'extension-systemMonitor-indicator-label'});
+ this.label = new St.Label({
+ style_class: 'extension-systemMonitor-indicator-label'
+ });
this.label.set_text(text);
Main.layoutManager.addChrome(this.label);
this.label.hide();
- },
-
- hideLabel: function () {
- Tweener.addTween(this.label,
- { opacity: 0,
- time: ITEM_LABEL_HIDE_TIME,
- transition: 'easeOutQuad',
- onComplete: Lang.bind(this, function() {
- this.label.hide();
- })
- });
- },
-
- destroy: function() {
- Mainloop.source_remove(this._timeout);
+ }
+ hideLabel() {
+ Tweener.addTween(this.label, {
+ opacity: 0,
+ time: ITEM_LABEL_HIDE_TIME,
+ transition: 'easeOutQuad',
+ onComplete: () => this.label.hide()
+ });
+ }
+
+ destroy() {
this.actor.destroy();
- if (this.label)
- this.label.destroy();
- },
+ }
+
+ _onDestroy() {
+ GLib.source_remove(this._timeout);
+
+ if (this.label)
+ this.label.destroy();
+ }
- _initValues: function() {
- },
+ _initValues() {
+ }
- _updateValues: function() {
- },
+ _updateValues() {
+ }
- _draw: function(area) {
+ _draw(area) {
let [width, height] = area.get_surface_size();
let themeNode = this.actor.get_theme_node();
let cr = area.get_context();
@@ -123,12 +124,12 @@ const Indicator = new Lang.Class({
let color = themeNode.get_color(this.gridColor);
let gridOffset = Math.floor(height / (INDICATOR_NUM_GRID_LINES + 1));
for (let i = 1; i <= INDICATOR_NUM_GRID_LINES; ++i) {
- cr.moveTo(0, i * gridOffset + .5);
- cr.lineTo(width, i * gridOffset + .5);
+ cr.moveTo(0, i * gridOffset + .5);
+ cr.lineTo(width, i * gridOffset + .5);
}
Clutter.cairo_set_source_color(cr, color);
cr.setLineWidth(1);
- cr.setDash([4,1], 0);
+ cr.setDash([4, 1], 0);
cr.stroke();
//draw the foreground
@@ -155,12 +156,12 @@ const Indicator = new Lang.Class({
let renderStats = this.renderStats;
// Make sure we don't have more sample points than pixels
- renderStats.map(Lang.bind(this, function(k){
+ renderStats.map(k => {
let stat = this.stats[k];
if (stat.values.length > width) {
stat.values = stat.values.slice(stat.values.length - width, stat.values.length);
}
- }));
+ });
for (let i = 0; i < renderStats.length; ++i) {
let stat = this.stats[renderStats[i]];
@@ -178,10 +179,10 @@ const Indicator = new Lang.Class({
cr.lineTo(0, height);
cr.closePath();
} else {
- let nextStat = this.stats[renderStats[i+1]];
+ let nextStat = this.stats[renderStats[i + 1]];
makePath(nextStat.values, true);
}
- cr.closePath()
+ cr.closePath();
Clutter.cairo_set_source_color(cr, color);
cr.fill();
@@ -193,40 +194,42 @@ const Indicator = new Lang.Class({
cr.stroke();
}
}
-});
-
-const CpuIndicator = new Lang.Class({
- Name: 'SystemMonitor.CpuIndicator',
- Extends: Indicator,
+};
- _init: function() {
- this.parent();
+const CpuIndicator = class extends Indicator {
+ constructor() {
+ super();
this.gridColor = '-grid-color';
- this.renderStats = [ 'cpu-user', 'cpu-sys', 'cpu-iowait' ];
+ this.renderStats = ['cpu-user', 'cpu-sys', 'cpu-iowait'];
// Make sure renderStats is sorted as necessary for rendering
- let renderStatOrder = {'cpu-total': 0, 'cpu-user': 1, 'cpu-sys': 2, 'cpu-iowait': 3};
- this.renderStats = this.renderStats.sort(function(a,b) {
+ let renderStatOrder = {
+ 'cpu-total': 0,
+ 'cpu-user': 1,
+ 'cpu-sys': 2,
+ 'cpu-iowait': 3
+ };
+ this.renderStats = this.renderStats.sort((a, b) => {
return renderStatOrder[a] - renderStatOrder[b];
});
- this.setLabelText(_("CPU"));
- },
+ this.setLabelText(_('CPU'));
+ }
- _initValues: function() {
+ _initValues() {
this._prev = new GTop.glibtop_cpu;
GTop.glibtop_get_cpu(this._prev);
this.stats = {
- 'cpu-user': {color: '-cpu-user-color', values: []},
- 'cpu-sys': {color: '-cpu-sys-color', values: []},
- 'cpu-iowait': {color: '-cpu-iowait-color', values: []},
- 'cpu-total': {color: '-cpu-total-color', values: []}
- };
- },
-
- _updateValues: function() {
+ 'cpu-user': { color: '-cpu-user-color', values: [] },
+ 'cpu-sys': { color: '-cpu-sys-color', values: [] },
+ 'cpu-iowait': { color: '-cpu-iowait-color', values: [] },
+ 'cpu-total': { color: '-cpu-total-color', values: [] }
+ };
+ }
+
+ _updateValues() {
let cpu = new GTop.glibtop_cpu;
let t = 0.0;
GTop.glibtop_get_cpu(cpu);
@@ -246,37 +249,34 @@ const CpuIndicator = new Lang.Class({
this._prev = cpu;
}
-});
+};
-const MemoryIndicator = new Lang.Class({
- Name: 'SystemMonitor.MemoryIndicator',
- Extends: Indicator,
-
- _init: function() {
- this.parent();
+const MemoryIndicator = class extends Indicator {
+ constructor() {
+ super();
this.gridColor = '-grid-color';
- this.renderStats = [ 'mem-user', 'mem-other', 'mem-cached' ];
+ this.renderStats = ['mem-user', 'mem-other', 'mem-cached'];
// Make sure renderStats is sorted as necessary for rendering
let renderStatOrder = { 'mem-cached': 0, 'mem-other': 1, 'mem-user': 2 };
- this.renderStats = this.renderStats.sort(function(a,b) {
+ this.renderStats = this.renderStats.sort((a, b) => {
return renderStatOrder[a] - renderStatOrder[b];
});
- this.setLabelText(_("Memory"));
- },
+ this.setLabelText(_('Memory'));
+ }
- _initValues: function() {
+ _initValues() {
this.mem = new GTop.glibtop_mem;
this.stats = {
- 'mem-user': { color: "-mem-user-color", values: [] },
- 'mem-other': { color: "-mem-other-color", values: [] },
- 'mem-cached': { color: "-mem-cached-color", values: [] }
- };
- },
+ 'mem-user': { color: '-mem-user-color', values: [] },
+ 'mem-other': { color: '-mem-other-color', values: [] },
+ 'mem-cached': { color: '-mem-cached-color', values: [] }
+ };
+ }
- _updateValues: function() {
+ _updateValues() {
GTop.glibtop_get_mem(this.mem);
let t = this.mem.user / this.mem.total;
@@ -286,90 +286,97 @@ const MemoryIndicator = new Lang.Class({
t += this.mem.cached / this.mem.total;
this.stats['mem-cached'].values.push(t);
}
-});
+};
const INDICATORS = [CpuIndicator, MemoryIndicator];
-const Extension = new Lang.Class({
- Name: 'SystemMonitor.Extension',
-
- _init: function() {
- Convenience.initTranslations();
-
- this._showLabelTimeoutId = 0;
- this._resetHoverTimeoutId = 0;
- this._labelShowing = false;
- },
-
- enable: function() {
- this._box = new St.BoxLayout({ style_class: 'extension-systemMonitor-container',
- x_align: Clutter.ActorAlign.START,
- x_expand: true });
- this._indicators = [ ];
-
- for (let i = 0; i < INDICATORS.length; i++) {
- let indicator = new (INDICATORS[i])();
-
- indicator.actor.connect('notify::hover', Lang.bind(this, function() {
- this._onHover(indicator);
- }));
- this._box.add_actor(indicator.actor);
- this._indicators.push(indicator);
- }
-
- this._boxHolder = new St.BoxLayout({ x_expand: true,
- y_expand: true,
- x_align: Clutter.ActorAlign.START,
- });
- let menuButton = Main.messageTray._messageTrayMenuButton.actor;
- Main.messageTray.actor.remove_child(menuButton);
- Main.messageTray.actor.add_child(this._boxHolder);
-
- this._boxHolder.add_child(this._box);
- this._boxHolder.add_child(menuButton);
- },
-
- disable: function() {
- this._indicators.forEach(function(i) { i.destroy(); });
-
- let menuButton = Main.messageTray._messageTrayMenuButton.actor;
- this._boxHolder.remove_child(menuButton);
- Main.messageTray.actor.add_child(menuButton);
-
- this._box.destroy();
- this._boxHolder.destroy();
- },
-
- _onHover: function (item) {
+class Extension {
+ constructor() {
+ ExtensionUtils.initTranslations();
+
+ this._showLabelTimeoutId = 0;
+ this._resetHoverTimeoutId = 0;
+ this._labelShowing = false;
+ }
+
+ enable() {
+ this._box = new St.BoxLayout({
+ style_class: 'extension-systemMonitor-container',
+ x_align: Clutter.ActorAlign.START,
+ x_expand: true
+ });
+ this._indicators = [];
+
+ for (let i = 0; i < INDICATORS.length; i++) {
+ let indicator = new (INDICATORS[i])();
+
+ indicator.actor.connect('notify::hover', () => {
+ this._onHover(indicator);
+ });
+ this._box.add_actor(indicator.actor);
+ this._indicators.push(indicator);
+ }
+
+ this._boxHolder = new St.BoxLayout({
+ x_expand: true,
+ y_expand: true,
+ x_align: Clutter.ActorAlign.START,
+ });
+ let menuButton = Main.messageTray._messageTrayMenuButton.actor;
+ Main.messageTray.actor.remove_child(menuButton);
+ Main.messageTray.actor.add_child(this._boxHolder);
+
+ this._boxHolder.add_child(this._box);
+ this._boxHolder.add_child(menuButton);
+ }
+
+ disable() {
+ this._indicators.forEach(i => i.destroy());
+
+ let menuButton = Main.messageTray._messageTrayMenuButton.actor;
+ this._boxHolder.remove_child(menuButton);
+ Main.messageTray.actor.add_child(menuButton);
+
+ this._box.destroy();
+ this._boxHolder.destroy();
+ }
+
+ _onHover(item) {
if (item.actor.get_hover()) {
- if (this._showLabelTimeoutId == 0) {
- let timeout = this._labelShowing ? 0 : ITEM_HOVER_TIMEOUT;
- this._showLabelTimeoutId = Mainloop.timeout_add(timeout,
- Lang.bind(this, function() {
- this._labelShowing = true;
- item.showLabel();
- return false;
- }));
- if (this._resetHoverTimeoutId > 0) {
- Mainloop.source_remove(this._resetHoverTimeoutId);
- this._resetHoverTimeoutId = 0;
- }
+ if (this._showLabelTimeoutId)
+ return;
+
+ let timeout = this._labelShowing ? 0 : ITEM_HOVER_TIMEOUT;
+ this._showLabelTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
+ timeout,
+ () => {
+ this._labelShowing = true;
+ item.showLabel();
+ this._showLabelTimeoutId = 0;
+ return GLib.SOURCE_REMOVE;
+ });
+
+ if (this._resetHoverTimeoutId > 0) {
+ GLib.source_remove(this._resetHoverTimeoutId);
+ this._resetHoverTimeoutId = 0;
}
} else {
if (this._showLabelTimeoutId > 0)
- Mainloop.source_remove(this._showLabelTimeoutId);
+ GLib.source_remove(this._showLabelTimeoutId);
this._showLabelTimeoutId = 0;
item.hideLabel();
- if (this._labelShowing) {
- this._resetHoverTimeoutId = Mainloop.timeout_add(ITEM_HOVER_TIMEOUT,
- Lang.bind(this, function() {
- this._labelShowing = false;
- return false;
- }));
- }
+ if (!this._labelShowing)
+ return;
+
+ this._resetHoverTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
+ ITEM_HOVER_TIMEOUT,
+ () => {
+ this._labelShowing = false;
+ return GLib.SOURCE_REMOVE;
+ });
}
- },
-});
+ }
+}
function init() {
return new Extension();
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
