Add option to add and customize a panel border

panel.js

@@ -1103,8 +1103,12 @@ export const Panel = GObject.registerClass({
         }
     }
 
+    _getDefaultLineColor(isBrightOverride) {
+        return (typeof isBrightOverride === 'undefined' && this._getBackgroundBrightness()) || isBrightOverride ? "rgba(55, 55, 55, .2)" : "rgba(200, 200, 200, .2)";
+    }
+
     _setShowDesktopButtonStyle() {
-        let rgb = this._getBackgroundBrightness() ? "rgba(55, 55, 55, .2)" : "rgba(200, 200, 200, .2)";
+        let rgb = this._getDefaultLineColor();
 
         let isLineCustom = SETTINGS.get_boolean('desktop-line-use-custom-color');
         rgb = isLineCustom ? SETTINGS.get_string('desktop-line-custom-color') : rgb;

prefs.js

@@ -1144,6 +1144,48 @@ const Preferences = class {
 
         });
 
+
+        // Panel border
+        this._settings.bind('trans-use-border',
+                            this._builder.get_object('trans_border_switch'),
+                            'active',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        this._settings.bind('trans-use-border',
+                            this._builder.get_object('trans_border_color_box'),
+                            'sensitive',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        this._settings.bind('trans-use-border',
+                            this._builder.get_object('trans_border_width_box'),
+                            'sensitive',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        this._settings.bind('trans-border-use-custom-color',
+                            this._builder.get_object('trans_border_color_switch'),
+                            'active',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        this._settings.bind('trans-border-use-custom-color',
+                            this._builder.get_object('trans_border_color_colorbutton'),
+                            'sensitive',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+        rgba.parse(this._settings.get_string('trans-border-custom-color'));
+        this._builder.get_object('trans_border_color_colorbutton').set_rgba(rgba);
+        this._builder.get_object('trans_border_color_colorbutton').connect('color-set',  (button) => {
+            let rgba = button.get_rgba();
+            let css = rgba.to_string();
+            this._settings.set_string('trans-border-custom-color', css);
+        });
+
+        this._builder.get_object('trans_border_width_spinbutton').set_value(this._settings.get_int('trans-border-width'));
+        this._builder.get_object('trans_border_width_spinbutton').connect('value-changed', (widget) => {
+            this._settings.set_int('trans-border-width', widget.get_value());
+        });
+
+
+
         this._settings.bind('desktop-line-use-custom-color',
                             this._builder.get_object('override_show_desktop_line_color_switch'),
                             'active',

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -313,6 +313,26 @@
       <summary>Custom gradient bottom opacity</summary>
       <description>Custom gradient bottom opacity for the panel</description>
     </key>
+    <key type="b" name="trans-use-border">
+      <default>false</default>
+      <summary>Display border</summary>
+      <description>Display a border between panel and the rest of the desktop</description>
+    </key>
+    <key type="i" name="trans-border-width">
+      <default>1</default>
+      <summary>Width of panel border</summary>
+      <description>Customize the width of the panel border</description>
+    </key>
+    <key type="b" name="trans-border-use-custom-color">
+      <default>false</default>
+      <summary>Override panel border color</summary>
+      <description>Replace current panel border color</description>
+    </key>
+    <key type="s" name="trans-border-custom-color">
+      <default>"rgba(200,200,200,0.2)"</default>
+      <summary>Custom panel border color</summary>
+      <description>Custom panel border color</description>
+    </key>
     <key type="b" name="intellihide">
       <default>false</default>
       <summary>Intellihide</summary>

transparency.js

@@ -98,6 +98,16 @@ export const DynamicTransparency = class {
                 ],
                 () => this._updateGradientAndSet()
             ],
+            [
+                SETTINGS,
+                [
+                    'changed::trans-use-border',
+                    'changed::trans-border-use-custom-color',
+                    'changed::trans-border-custom-color',
+                    'changed::trans-border-width',
+                ],
+                () => this._updateBorderAndSet()
+            ],
             [
                 SETTINGS,
                 [
@@ -149,6 +159,7 @@ export const DynamicTransparency = class {
         this._updateColor(themeBackground);
         this._updateAlpha(themeBackground);
         this._updateComplementaryStyles();
+        this._updateBorder();
         this._updateGradient();
         this._setBackground();
         this._setGradient();
@@ -169,6 +180,11 @@ export const DynamicTransparency = class {
         this._setGradient();
     }
 
+    _updateBorderAndSet() {
+        this._updateBorder();
+        this._setBackground();
+    }
+
     _updateComplementaryStyles() {
         let panelThemeNode = this._dtpPanel.panel.get_theme_node();
 
@@ -181,6 +197,25 @@ export const DynamicTransparency = class {
                                   (themeBackground || this._getThemeBackground());
     }
 
+    _updateBorder() {
+        let rgba = this._dtpPanel._getDefaultLineColor(Utils.checkIfColorIsBright(this.backgroundColorRgb)); // supply parameter manually or else an exception (something is undefined) will arise
+        const isLineCustom = SETTINGS.get_boolean('trans-border-use-custom-color');
+        rgba = isLineCustom ? SETTINGS.get_string('trans-border-custom-color') : rgba;
+
+        const showBorder = SETTINGS.get_boolean('trans-use-border');
+        const borderWidth = SETTINGS.get_int('trans-border-width');
+
+        const position = this._dtpPanel.getPosition();
+        let borderPosition = '';
+        if (position == St.Side.LEFT) { borderPosition = 'right'; }
+        if (position == St.Side.RIGHT) { borderPosition = 'left'; }
+        if (position == St.Side.TOP) { borderPosition = 'bottom'; }
+        if (position == St.Side.BOTTOM) { borderPosition = 'top'; }
+
+        const style = `border: 0 solid ${rgba}; border-${borderPosition}-width:${borderWidth}px;`;
+        this._borderStyle = showBorder ? style : '';
+    }
+
     _updateAlpha(themeBackground) {
         if (this._windowOverlap && !Main.overview.visibleTarget && SETTINGS.get_boolean('trans-use-dynamic-opacity')) {
             this.alpha = SETTINGS.get_double('trans-dynamic-anim-target');
@@ -208,7 +243,7 @@ export const DynamicTransparency = class {
 
         let transition = 'transition-duration:' + this.animationDuration;
 
-        this._dtpPanel.set_style('background-color: ' + this.currentBackgroundColor + transition + this._complementaryStyles);
+        this._dtpPanel.set_style('background-color: ' + this.currentBackgroundColor + transition + this._complementaryStyles + this._borderStyle);
     }
 
     _setGradient() {

ui/SettingsStyle.ui

@@ -34,6 +34,19 @@
     <property name="page_increment">10</property>
   </object>
 
+  <object class="GtkAdjustment" id="trans_border_opacity_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">5</property>
+    <property name="page_increment">10</property>
+  </object>
+
+  <object class="GtkAdjustment" id="trans_border_width_adjustment">
+    <property name="lower">1</property>
+    <property name="upper">10</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">2</property>
+  </object>
+
   <object class="AdwPreferencesPage" id="style">
     <property name="title" translatable="yes">Style</property>
     <property name="icon_name">applications-graphics-symbolic</property>
@@ -355,5 +368,50 @@
       </object>
     </child>
 
+    <!-- group dynamic trans4 -->
+    <child>
+      <object class="AdwPreferencesGroup" id="style_group_dynamic_trans4">
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Panel border</property>
+            <child>
+              <object class="GtkSwitch" id="trans_border_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow" id="trans_border_color_box">
+            <property name="title" translatable="yes">Override border color</property>
+            <child>
+              <object class="GtkColorButton" id="trans_border_color_colorbutton">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+                <property name="use_alpha">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSwitch" id="trans_border_color_switch">
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="AdwActionRow" id="trans_border_width_box">
+            <property name="title" translatable="yes">Border thickness</property>
+            <child>
+              <object class="GtkSpinButton" id="trans_border_width_spinbutton">
+                <property name="valign">center</property>
+                <property name="text" translatable="yes">1</property>
+                <property name="adjustment">trans_border_width_adjustment</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+
   </object>
 </interface>