popupMenu: Break separator drawing code out of PopupSeparatorMenuItem

https://bugzilla.gnome.org/show_bug.cgi?id=681797

data/theme/gnome-shell.css

@@ -724,6 +724,14 @@ StScrollBar StButton#vhandle:active {
     spacing: 16px;
 }
 
+.search-section-separator {
+    -gradient-height: 1px;
+    -gradient-start: rgba(255,255,255,0);
+    -gradient-end: rgba(255,255,255,0.5);
+    -margin-horizontal: 1.5em;
+    height: 1px;
+}
+
 .search-section-content {
     /* This is the space between the provider icon and the results container */
     spacing: 25px;

js/ui/popupMenu.js

@@ -404,9 +404,17 @@ const PopupSeparatorMenuItem = new Lang.Class({
         this.parent({ reactive: false,
                       can_focus: false});
 
-        this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' });
+        this._separator = new HorzSeparator({ style_class: 'popup-separator-menu-item' });
-        this.addActor(this._drawingArea, { span: -1, expand: true });
+        this.addActor(this._separator.actor, { span: -1, expand: true });
-        this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint));
+    }
+});
+
+const HorzSeparator = new Lang.Class({
+    Name: 'HorzSeparator',
+
+    _init: function (params) {
+        this.actor = new St.DrawingArea(params);
+        this.actor.connect('repaint', Lang.bind(this, this._onRepaint));
     },
 
     _onRepaint: function(area) {

js/ui/searchDisplay.js

@@ -406,8 +406,8 @@ const SearchDisplay = new Lang.Class({
 
         let providerIcon;
         if (!isAppsProvider) {
-            let separator = new PopupMenu.PopupSeparatorMenuItem();
+            let separator = new PopupMenu.HorzSeparator({ style_class: 'search-section-separator' });
-            providerBox.add(separator.actor);
+            providerBox.add(separator.actor, { expand: true });
 
             providerIcon = new ProviderIcon(provider);
             providerIcon.connect('launch-search', Lang.bind(this, function(providerIcon) {