[gnome-shell] dash: Add separator between favorite and running apps

[Marge Bot <marge-bot src gnome org>]

commit 55d85cd55b79c948cb98e087fc371fdb3e32f5f0
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Jan 28 23:24:44 2021 +0100

    dash: Add separator between favorite and running apps
    
    Only the area used by favorite apps can be used as drop targets, it
    is not possible to add new favorites between the running apps at the
    end. While that behavior makes sense, it is currently impossible to
    distinguish the two areas with confusing results.
    
    Address this by adding a visual separator between favorites and
    running apps.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1606>

 data/theme/gnome-shell-sass/widgets/_dash.scss |  5 ++++
 js/ui/dash.js                                  | 35 ++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 82901309d3..50483830b9 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -30,6 +30,11 @@ $dash_border_radius: $modal_radius * 1.5;
   padding: ($dash_spacing / 2) $dash_spacing;
 }
 
+.dash-separator {
+  width: 1px;
+  background-color: transparentize($osd_fg_color,0.7);
+}
+
 // OSD Tooltip
 .dash-label {
   background-color: transparentize($osd_bg_color,0.05);
diff --git a/js/ui/dash.js b/js/ui/dash.js
index 0e100cea6b..2d329ae91e 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -303,6 +303,7 @@ var Dash = GObject.registerClass({
         this.iconSize = 64;
         this._shownInitially = false;
 
+        this._separator = null;
         this._dragPlaceholder = null;
         this._dragPlaceholderPos = -1;
         this._animatingPlaceholdersCount = 0;
@@ -608,6 +609,14 @@ var Dash = GObject.registerClass({
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             });
         }
+
+        if (this._separator) {
+            this._separator.ease({
+                height: this.iconSize,
+                duration: DASH_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            });
+        }
     }
 
     _redisplay() {
@@ -734,6 +743,26 @@ var Dash = GObject.registerClass({
         for (let i = 0; i < addedItems.length; i++)
             addedItems[i].item.show(animate);
 
+        // Update separator
+        const nFavorites = Object.keys(favorites).length;
+        if (nFavorites > 0) {
+            if (!this._separator) {
+                this._separator = new St.Widget({
+                    style_class: 'dash-separator',
+                    y_align: Clutter.ActorAlign.CENTER,
+                    height: this.iconSize,
+                });
+                this._box.add_child(this._separator);
+            }
+            let pos = nFavorites;
+            if (this._dragPlaceholder)
+                pos++;
+            this._box.set_child_at_index(this._separator, pos);
+        } else if (this._separator) {
+            this._separator.destroy();
+            this._separator = null;
+        }
+
         // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744
         // Without it, StBoxLayout may use a stale size cache
         this._box.queue_relayout();
@@ -785,6 +814,12 @@ var Dash = GObject.registerClass({
             numChildren--;
         }
 
+        // Same with the separator
+        if (this._separator) {
+            boxWidth -= this._separator.width;
+            numChildren--;
+        }
+
         let pos;
         if (!this._emptyDropTarget)
             pos = Math.floor(x * numChildren / boxWidth);