[gnome-shell/wip/re-search-v2: 5/28] popupMenu: Break separator drawing code out of PopupSeparatorMenuItem

[Cosimo Cecchi <cosimoc src gnome org>]

commit 159c8277b37791d084383293f6fad6abc2d7fa81
Author: Tanner Doshier <doshitan gmail com>
Date:   Wed Aug 15 20:28:49 2012 -0500

    popupMenu: Break separator drawing code out of PopupSeparatorMenuItem
    
    And into a separate HorizontalSeparatorClass.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=681797

 js/Makefile.am     |    1 +
 js/ui/popupMenu.js |   27 +++------------------------
 js/ui/separator.js |   34 ++++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 24 deletions(-)
---
diff --git a/js/Makefile.am b/js/Makefile.am
index a3e4917..4aa61f7 100644
--- a/js/Makefile.am
+++ b/js/Makefile.am
@@ -62,6 +62,7 @@ nobase_dist_js_DATA = 	\
 	ui/main.js		\
 	ui/messageTray.js	\
 	ui/modalDialog.js	\
+	ui/separator.js		\
 	ui/sessionMode.js	\
 	ui/shellEntry.js	\
 	ui/shellMountOperation.js \
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index a469388..f27472a 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1,6 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const Cairo = imports.cairo;
 const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const Gtk = imports.gi.Gtk;
@@ -14,6 +13,7 @@ const Atk = imports.gi.Atk;
 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
+const Separator = imports.ui.separator;
 const Tweener = imports.ui.tweener;
 
 const SLIDER_SCROLL_STEP = 0.05; /* Slider scrolling step in % */
@@ -404,29 +404,8 @@ const PopupSeparatorMenuItem = new Lang.Class({
         this.parent({ reactive: false,
                       can_focus: false});
 
-        this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' });
-        this.addActor(this._drawingArea, { span: -1, expand: true });
-        this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint));
-    },
-
-    _onRepaint: function(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();
+        this._separator = new Separator.HorizontalSeparator({ style_class: 'popup-separator-menu-item' });
+        this.addActor(this._separator.actor, { span: -1, expand: true });
     }
 });
 
diff --git a/js/ui/separator.js b/js/ui/separator.js
new file mode 100644
index 0000000..1f41448
--- /dev/null
+++ b/js/ui/separator.js
@@ -0,0 +1,34 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Cairo = imports.cairo;
+const Lang = imports.lang;
+const St = imports.gi.St;
+
+const HorizontalSeparator = new Lang.Class({
+    Name: 'HorizontalSeparator',
+
+    _init: function (params) {
+        this.actor = new St.DrawingArea(params);
+        this.actor.connect('repaint', Lang.bind(this, this._onRepaint));
+    },
+
+    _onRepaint: function(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();
+    }
+});