Separator cleanup (#13573)

* separator.js: Convert to GObject

We only had one user of this in Cinnamon's codebase. Should be a pretty easy
fix for any spice that uses it. Also removes the use of Lang.bind()

* popupmenu.js: Use the standalone separator object

We are duplicating the code for drawing the separator in object in menus for
no real reason. Just use the the standalone separtor object instead.

Author: JosephMcc

files/usr/share/cinnamon/applets/[email protected]/eventView.js

@@ -796,7 +796,7 @@ class EventList {
 
         for (let event_data of events) {
             if (first_row_done) {
-                this.events_box.add_actor(new Separator.Separator().actor);
+                this.events_box.add_actor(new Separator.Separator());
             }
 
             let row = new EventRow(

js/ui/popupMenu.js

@@ -14,6 +14,7 @@ const Atk = imports.gi.Atk;
 const BoxPointer = imports.ui.boxpointer;
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
+const Separator = imports.ui.separator;
 const SignalManager = imports.misc.signalManager;
 const CheckBox = imports.ui.checkBox;
 const RadioButton = imports.ui.radioButton;
@@ -532,31 +533,9 @@ var PopupSeparatorMenuItem = class PopupSeparatorMenuItem extends PopupBaseMenuI
     _init () {
         super._init.call(this, { reactive: false });
 
-        this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' });
-        this.addActor(this._drawingArea, { span: -1, expand: true });
-        this._signals.connect(this._drawingArea, 'repaint', Lang.bind(this, this._onRepaint));
-    }
-
-    _onRepaint(area) {
-        let cr = area.get_context();
-        let themeNode = area.get_theme_node();
-        let [width, height] = area.get_surface_size();
-        let margin = themeNode.get_length('-margin-horizontal');
-        let gradientHeight = themeNode.get_length('-gradient-height');
-        let startColor = themeNode.get_color('-gradient-start');
-        let endColor = themeNode.get_color('-gradient-end');
-
-        let gradientWidth = (width - margin * 2);
-        let gradientOffset = (height - gradientHeight) / 2;
-        let pattern = new Cairo.LinearGradient(margin, gradientOffset, width - margin, gradientOffset + gradientHeight);
-        pattern.addColorStopRGBA(0, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
-        pattern.addColorStopRGBA(0.5, endColor.red / 255, endColor.green / 255, endColor.blue / 255, endColor.alpha / 255);
-        pattern.addColorStopRGBA(1, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
-        cr.setSource(pattern);
-        cr.rectangle(margin, gradientOffset, gradientWidth, gradientHeight);
-        cr.fill();
-
-        cr.$dispose();
+        let separator = new Separator.Separator();
+        separator.set_style_class_name('popup-separator-menu-item');
+        this.addActor(separator, { span: -1, expand: true });
     }
 }
 

js/ui/separator.js

@@ -1,23 +1,19 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
 const Cairo = imports.cairo;
-const Lang = imports.lang;
+const GObject = imports.gi.GObject;
 const St = imports.gi.St;
 
-function Separator() {
-    this._init();
-}
-
-Separator.prototype = {
-    _init: function() {
-        this.actor = new St.DrawingArea({ style_class: 'separator' });
-        this.actor.connect('repaint', Lang.bind(this, this._onRepaint));
-    },
+var Separator = GObject.registerClass(
+class Separator extends St.DrawingArea {
+    _init() {
+        super._init({ style_class: 'separator' });
+    }
 
-    _onRepaint: function(area) {
-        let cr = area.get_context();
-        let themeNode = area.get_theme_node();
-        let [width, height] = area.get_surface_size();
+    vfunc_repaint() {
+        let cr = this.get_context();
+        let themeNode = this.get_theme_node();
+        let [width, height] = this.get_surface_size();
         let margin = themeNode.get_length('-margin-horizontal');
         let gradientHeight = themeNode.get_length('-gradient-height');
         let startColor = themeNode.get_color('-gradient-start');
@@ -35,4 +31,4 @@ Separator.prototype = {
 
         cr.$dispose();
     }
-};
+});