[gnome-shell/T27795: 10/138] Revert "separator: Remove HorizontalSeparator"

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit e2a31e0ce25a72472441427821c472a63206ec8c
Author: Mario Sanchez Prada <mario endlessm com>
Date:   Fri Feb 2 20:58:38 2018 +0000

    Revert "separator: Remove HorizontalSeparator"
    
    We will still use this type of separator on Endless for the search results
    panel, so we need to bring this bit back from upstream GNOME Shell 3.24.
    
    This reverts commit c1eaa8e52d00c70a4fa1f88683a1fa483437b93a.

 js/js-resources.gresource.xml |  1 +
 js/ui/separator.js            | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)
---
diff --git a/js/js-resources.gresource.xml b/js/js-resources.gresource.xml
index b5348ddcb5..624373c94d 100644
--- a/js/js-resources.gresource.xml
+++ b/js/js-resources.gresource.xml
@@ -93,6 +93,7 @@
     <file>ui/screenshot.js</file>
     <file>ui/scripting.js</file>
     <file>ui/search.js</file>
+    <file>ui/separator.js</file>
     <file>ui/sessionMode.js</file>
     <file>ui/shellDBus.js</file>
     <file>ui/shellEntry.js</file>
diff --git a/js/ui/separator.js b/js/ui/separator.js
new file mode 100644
index 0000000000..1c2fe2ce7d
--- /dev/null
+++ b/js/ui/separator.js
@@ -0,0 +1,32 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+
+const Cairo = imports.cairo;
+const { St } = imports.gi;
+
+var HorizontalSeparator = class {
+    constructor(params) {
+        this.actor = new St.DrawingArea(params);
+        this.actor.connect('repaint', this._onRepaint.bind(this));
+    }
+
+    _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();
+    }
+};