Separator cleanup

files/usr/share/cinnamon/applets/calendar@cinnamon.org/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;
@@ -531,31 +532,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();
     }
-};
+});