From 3178a99e48167ad31b1e52e9afc2041bfee34593 Mon Sep 17 00:00:00 2001

From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>

Date: Wed, 17 May 2017 19:13:50 +0200

Subject: [PATCH 1/6] extensions: Resurrect systemMonitor extension

The extension was removed upstream because:

 - it hooks into the message tray that was removed

 - it was known to have performance issues

 - there are plenty of alternatives

Those aren't good enough reasons for dropping it downstream

as well though, so we need to bring it back ...

This reverts commit c9a6421f362cd156cf731289eadc11f44f6970ac.

---

 extensions/systemMonitor/extension.js     | 376 ++++++++++++++++++++++

 extensions/systemMonitor/meson.build      |   5 +

 extensions/systemMonitor/metadata.json.in |  11 +

 extensions/systemMonitor/stylesheet.css   |  35 ++

 meson.build                               |   1 +

 5 files changed, 428 insertions(+)

 create mode 100644 extensions/systemMonitor/extension.js

 create mode 100644 extensions/systemMonitor/meson.build

 create mode 100644 extensions/systemMonitor/metadata.json.in

 create mode 100644 extensions/systemMonitor/stylesheet.css

diff --git a/extensions/systemMonitor/extension.js b/extensions/systemMonitor/extension.js

new file mode 100644

index 00000000..7b09df01

--- /dev/null

+++ b/extensions/systemMonitor/extension.js

@@ -0,0 +1,376 @@

+/* -*- 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;

+

+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;

+

+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() {

+        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() {

+            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._timeout = Mainloop.timeout_add(INDICATOR_UPDATE_INTERVAL, Lang.bind(this, function () {

+            this._updateValues();

+            this.drawing_area.queue_repaint();

+            return true;

+        }));

+    },

+

+    showLabel: function() {

+        if (this.label == null)

+            return;

+

+        this.label.opacity = 0;

+        this.label.show();

+

+        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 labelWidth = this.label.width;

+        let labelHeight = this.label.height;

+        let xOffset = Math.floor((itemWidth - labelWidth) / 2)

+

+        let x = stageX + xOffset;

+

+        let node = this.label.get_theme_node();

+        let yOffset = node.get_length('-y-offset');

+

+        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) {

+        if (this.label == null)

+            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);

+

+        this.actor.destroy();

+	if (this.label)

+	    this.label.destroy();

+    },

+

+    _initValues: function() {

+    },

+

+    _updateValues: function() {

+    },

+

+    _draw: function(area) {

+        let [width, height] = area.get_surface_size();

+        let themeNode = this.actor.get_theme_node();

+        let cr = area.get_context();

+

+        //draw the background grid

+        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);

+        }

+        Clutter.cairo_set_source_color(cr, color);

+        cr.setLineWidth(1);

+        cr.setDash([4,1], 0);

+        cr.stroke();

+

+        //draw the foreground

+

+        function makePath(values, reverse, nudge) {

+            if (nudge == null) {

+                nudge = 0;

+            }

+            //if we are going in reverse, we are completing the bottom of a chart, so use lineTo

+            if (reverse) {

+                cr.lineTo(values.length - 1, (1 - values[values.length - 1]) * height + nudge);

+                for (let k = values.length - 2; k >= 0; --k) {

+                    cr.lineTo(k, (1 - values[k]) * height + nudge);

+                }

+            } else {

+                cr.moveTo(0, (1 - values[0]) * height + nudge);

+                for (let k = 1; k < values.length; ++k) {

+                    cr.lineTo(k, (1 - values[k]) * height + nudge);

+                }

+

+            }

+        }

+

+        let renderStats = this.renderStats;

+

+        // Make sure we don't have more sample points than pixels

+        renderStats.map(Lang.bind(this, function(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]];

+            // We outline at full opacity and fill with 40% opacity

+            let outlineColor = themeNode.get_color(stat.color);

+            let color = new Clutter.Color(outlineColor);

+            color.alpha = color.alpha * .4;

+

+            // Render the background between us and the next level

+            makePath(stat.values, false);

+            // If there is a process below us, render the cpu between us and it, otherwise,

+            // render to the bottom of the chart

+            if (i == renderStats.length - 1) {

+                cr.lineTo(stat.values.length - 1, height);

+                cr.lineTo(0, height);

+                cr.closePath();

+            } else {

+                let nextStat = this.stats[renderStats[i+1]];

+                makePath(nextStat.values, true);

+            }

+            cr.closePath()

+            Clutter.cairo_set_source_color(cr, color);

+            cr.fill();

+

+            // Render the outline of this level

+            makePath(stat.values, false, .5);

+            Clutter.cairo_set_source_color(cr, outlineColor);

+            cr.setLineWidth(1.0);

+            cr.setDash([], 0);

+            cr.stroke();

+        }

+    }

+});

+

+const CpuIndicator = new Lang.Class({

+    Name: 'SystemMonitor.CpuIndicator',

+    Extends: Indicator,

+

+    _init: function() {

+        this.parent();

+

+        this.gridColor = '-grid-color';

+        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) {

+            return renderStatOrder[a] - renderStatOrder[b];

+        });

+

+	this.setLabelText(_("CPU"));

+    },

+

+    _initValues: function() {

+        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() {

+        let cpu = new GTop.glibtop_cpu;

+        let t = 0.0;

+        GTop.glibtop_get_cpu(cpu);

+        let total = cpu.total - this._prev.total;

+        let user = cpu.user - this._prev.user;

+        let sys = cpu.sys - this._prev.sys;

+        let iowait = cpu.iowait - this._prev.iowait;

+        let idle = cpu.idle - this._prev.idle;

+

+        t += iowait / total;

+        this.stats['cpu-iowait'].values.push(t);

+        t += sys / total;

+        this.stats['cpu-sys'].values.push(t);

+        t += user / total;

+        this.stats['cpu-user'].values.push(t);

+        this.stats['cpu-total'].values.push(1 - idle / total);

+

+        this._prev = cpu;

+    }

+});

+

+const MemoryIndicator = new Lang.Class({

+    Name: 'SystemMonitor.MemoryIndicator',

+    Extends: Indicator,

+

+    _init: function() {

+        this.parent();

+

+        this.gridColor = '-grid-color';

+        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) {

+            return renderStatOrder[a] - renderStatOrder[b];

+        });

+

+	this.setLabelText(_("Memory"));

+    },

+

+    _initValues: function() {

+        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: [] }

+                     };

+    },

+

+    _updateValues: function() {

+        GTop.glibtop_get_mem(this.mem);

+

+        let t = this.mem.user / this.mem.total;

+        this.stats['mem-user'].values.push(t);

+        t += (this.mem.used - this.mem.user - this.mem.cached) / this.mem.total;

+        this.stats['mem-other'].values.push(t);

+        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) {

+        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;

+                }

+            }

+        } else {

+            if (this._showLabelTimeoutId > 0)

+                Mainloop.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;

+                    }));

+            }

+        }

+    },

+});

+

+function init() {

+    return new Extension();

+}

diff --git a/extensions/systemMonitor/meson.build b/extensions/systemMonitor/meson.build

new file mode 100644

index 00000000..48504f63

--- /dev/null

+++ b/extensions/systemMonitor/meson.build

@@ -0,0 +1,5 @@

+extension_data += configure_file(

+  input: metadata_name + '.in',

+  output: metadata_name,

+  configuration: metadata_conf

+)

diff --git a/extensions/systemMonitor/metadata.json.in b/extensions/systemMonitor/metadata.json.in

new file mode 100644

index 00000000..fa750074

--- /dev/null

+++ b/extensions/systemMonitor/metadata.json.in

@@ -0,0 +1,11 @@

+{

+    "shell-version": ["@shell_current@" ],

+    "uuid": "@uuid@",

+    "extension-id": "@extension_id@",

+    "settings-schema": "@gschemaname@",

+    "gettext-domain": "@gettext_domain@",

+    "original-author": "zaspire@rambler.ru",

+    "name": "SystemMonitor",

+    "description": "System monitor showing CPU and memory usage in the message tray.",

+    "url": "@url@"

+}

diff --git a/extensions/systemMonitor/stylesheet.css b/extensions/systemMonitor/stylesheet.css

new file mode 100644

index 00000000..13f95ec7

--- /dev/null

+++ b/extensions/systemMonitor/stylesheet.css

@@ -0,0 +1,35 @@

+.extension-systemMonitor-container {

+    spacing: 5px;

+    padding-left: 5px;

+    padding-right: 5px;

+    padding-bottom: 10px;

+    padding-top: 10px;

+}

+

+.extension-systemMonitor-indicator-area {

+    border: 1px solid #8d8d8d;

+    border-radius: 3px;

+    width: 100px;

+    /* message tray is 72px, so 20px padding of the container,

+       2px of border, makes it 50px */

+    height: 50px;

+    -grid-color: #575757;

+    -cpu-total-color: rgb(0,154,62);

+    -cpu-user-color: rgb(69,154,0);

+    -cpu-sys-color: rgb(255,253,81);

+    -cpu-iowait-color: rgb(210,148,0);

+    -mem-user-color: rgb(210,148,0);

+    -mem-cached-color: rgb(90,90,90);

+    -mem-other-color: rgb(205,203,41);

+    background-color: #1e1e1e;

+}

+

+.extension-systemMonitor-indicator-label {

+    border-radius: 7px;

+    padding: 4px 12px;

+    background-color: rgba(0,0,0,0.9);

+    text-align: center;

+    -y-offset: 8px;

+    font-size: 9pt;

+    font-weight: bold;

+}

diff --git a/meson.build b/meson.build

index b95dfc30..ada6b921 100644

--- a/meson.build

+++ b/meson.build

@@ -48,6 +48,7 @@ all_extensions += [

   'dash-to-dock',

   'native-window-placement',

   'panel-favorites',

+  'systemMonitor',

   'top-icons',

   'updates-dialog',

   'user-theme'

-- 

2.31.1

From d93f5edfc243dc065db74535de3db1222b483865 Mon Sep 17 00:00:00 2001

From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>

Date: Fri, 17 May 2019 22:55:48 +0000

Subject: [PATCH 2/6] systemMonitor: Modernise code

 - port to ES6 classes

 - replace Lang.bind()

 - replace Tweener

 - use standard align/expand properties

 - destructure imports

 - fix style issues (stray/missing spaces/semi-colons, indent, ...)

---

 extensions/systemMonitor/extension.js | 422 +++++++++++++-------------

 1 file changed, 212 insertions(+), 210 deletions(-)

diff --git a/extensions/systemMonitor/extension.js b/extensions/systemMonitor/extension.js

index 7b09df01..f7c6a4a9 100644

--- a/extensions/systemMonitor/extension.js

+++ b/extensions/systemMonitor/extension.js

@@ -1,56 +1,57 @@

 /* -*- 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;

-const ITEM_LABEL_SHOW_TIME = 0.15;

-const ITEM_LABEL_HIDE_TIME = 0.1;

+const ITEM_LABEL_SHOW_TIME = 150;

+const ITEM_LABEL_HIDE_TIME = 100;

 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,

+            x_expand: true,

+            y_expand: 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,

+        });

+        this.actor.add_actor(this._drawingArea);

+

+        this.actor.connect('destroy', this._onDestroy.bind(this));

-        this._timeout = Mainloop.timeout_add(INDICATOR_UPDATE_INTERVAL, Lang.bind(this, function () {

-            this._updateValues();

-            this.drawing_area.queue_repaint();

-            return true;

-        }));

-    },

+        this._timeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT,

+            INDICATOR_UPDATE_INTERVAL,

+            () => {

+                this._updateValues();

+                this._drawingArea.queue_repaint();

+                return GLib.SOURCE_CONTINUE;

+            });

+    }

-    showLabel: function() {

-        if (this.label == null)

+    showLabel() {

+        if (this.label === null)

             return;

         this.label.opacity = 0;

@@ -58,12 +59,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,116 +72,113 @@ 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',

-                         });

-    },

+        this.label.ease({

+            opacity: 255,

+            duration: ITEM_LABEL_SHOW_TIME,

+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,

+        });

+    }

-    setLabelText: function(text) {

-        if (this.label == null)

-            this.label = new St.Label({ style_class: 'extension-systemMonitor-indicator-label'});

+    setLabelText(text) {

+        if (this.label === null) {

+            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() {

+        this.label.ease({

+            opacity: 0,

+            duration: ITEM_LABEL_HIDE_TIME,

+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,

+            onComplete: () => this.label.hide(),

+        });

+    }

+

+    destroy() {

         this.actor.destroy();

-	if (this.label)

-	    this.label.destroy();

-    },

+    }

-    _initValues: function() {

-    },

+    _onDestroy() {

+        GLib.source_remove(this._timeout);

-    _updateValues: function() {

-    },

+        if (this.label)

+            this.label.destroy();

+    }

+

+    _initValues() {

+    }

-    _draw: function(area) {

+    _updateValues() {

+    }

+

+    _draw(area) {

         let [width, height] = area.get_surface_size();

         let themeNode = this.actor.get_theme_node();

         let cr = area.get_context();

-        //draw the background grid

+        // draw the background grid

         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();