[gnome-shell-extensions/wip/rstrode/heads-up-display: 13/62] systemMonitor: Move indicators to calendar

[Ray Strode <halfline src gnome org>]

commit eec387d6d3357ae6b906263b52c696fc502e091e
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed May 17 19:31:58 2017 +0200

    systemMonitor: Move indicators to calendar
    
    The message tray joined the invisible choir, so we have to find
    a new home for the extension UI. The message list in the calendar
    drop-down looks like the best option, given that it replaced the
    old tray (and also took over the old keyboard shortcut to bring
    it up quickly).

 extensions/systemMonitor/extension.js   | 65 ++++++++++++++++-----------------
 extensions/systemMonitor/stylesheet.css | 14 -------
 2 files changed, 31 insertions(+), 48 deletions(-)
---
diff --git a/extensions/systemMonitor/extension.js b/extensions/systemMonitor/extension.js
index 89f8916..0188960 100644
--- a/extensions/systemMonitor/extension.js
+++ b/extensions/systemMonitor/extension.js
@@ -3,9 +3,11 @@
 /* exported init */
 
 const { Clutter, GLib, GTop, Shell, St } = imports.gi;
+const Signals = imports.signals;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Main = imports.ui.main;
+const MessageList = imports.ui.messageList;
 const Tweener = imports.ui.tweener;
 
 const Gettext = imports.gettext.domain('gnome-shell-extensions');
@@ -21,22 +23,25 @@ const ITEM_HOVER_TIMEOUT = 300;
 const Indicator = class {
     constructor() {
         this._initValues();
-        this._drawingArea = new St.DrawingArea({ reactive: true });
+        this._drawingArea = new St.DrawingArea();
         this._drawingArea.connect('repaint', this._draw.bind(this));
-        this._drawingArea.connect('button-press-event', () => {
+
+        this.actor = new St.Button({
+            style_class: 'message message-content extension-systemMonitor-indicator-area',
+            child: this._drawingArea,
+            x_expand: true,
+            x_fill: true,
+            y_fill: true,
+            can_focus: true
+        });
+
+        this.actor.connect('clicked', () => {
             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
+            Main.overview.hide();
+            Main.panel.closeCalendar();
         });
-        this.actor.add_actor(this._drawingArea);
 
         this.actor.connect('destroy', this._onDestroy.bind(this));
 
@@ -71,6 +76,7 @@ const Indicator = class {
         let y = stageY - this.label.get_height() - yOffset;
 
         this.label.set_position(x, y);
+        this.label.get_parent().set_child_above_sibling(this.label, null);
         Tweener.addTween(this.label, {
             opacity: 255,
             time: ITEM_LABEL_SHOW_TIME,
@@ -98,6 +104,14 @@ const Indicator = class {
         });
     }
 
+    /* MessageList.Message boilerplate */
+    canClose() {
+        return false;
+    }
+
+    clear() {
+    }
+
     destroy() {
         this.actor.destroy();
     }
@@ -195,6 +209,7 @@ const Indicator = class {
         }
     }
 };
+Signals.addSignalMethods(Indicator.prototype); // For MessageList.Message compat
 
 const CpuIndicator = class extends Indicator {
     constructor() {
@@ -300,11 +315,7 @@ class Extension {
     }
 
     enable() {
-        this._box = new St.BoxLayout({
-            style_class: 'extension-systemMonitor-container',
-            x_align: Clutter.ActorAlign.START,
-            x_expand: true
-        });
+        this._section = new MessageList.MessageListSection(_('System Monitor'));
         this._indicators = [];
 
         for (let i = 0; i < INDICATORS.length; i++) {
@@ -313,32 +324,18 @@ class Extension {
             indicator.actor.connect('notify::hover', () => {
                 this._onHover(indicator);
             });
-            this._box.add_actor(indicator.actor);
+            this._section.addMessage(indicator, false);
             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);
+        Main.panel.statusArea.dateMenu._messageList._addSection(this._section);
+        this._section.actor.get_parent().set_child_at_index(this._section.actor, 0);
     }
 
     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();
+        Main.panel.statusArea.dateMenu._messageList._removeSection(this._section);
     }
 
     _onHover(item) {
diff --git a/extensions/systemMonitor/stylesheet.css b/extensions/systemMonitor/stylesheet.css
index 13f95ec..978ac12 100644
--- a/extensions/systemMonitor/stylesheet.css
+++ b/extensions/systemMonitor/stylesheet.css
@@ -1,17 +1,4 @@
-.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);
@@ -21,7 +8,6 @@
     -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 {