[gnome-shell] panel: Move panel border into the background

[Florian Müllner <fmuellner src gnome org>]

commit 9a048af1fb9ecc6c390f4b5ca28b6a64ba462932
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Feb 21 19:04:40 2011 +0100

    panel: Move panel border into the background
    
    In the mockups the bottom border of active panel buttons is drawn
    on top of the panel's border. To get this effect, move the panel
    border into the background, so that it is not subtracted from the
    vertical space given to the buttons. Adjust the drawing of the rounded
    corners to reflect that change.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=643001

 data/theme/gnome-shell.css  |    3 +--
 data/theme/panel-border.svg |   33 +++++++++++++++++++++++++++++++++
 js/ui/panel.js              |   20 ++++++++++----------
 3 files changed, 44 insertions(+), 12 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f05d04a..08c85b7 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -187,8 +187,7 @@ StTooltip StLabel {
 #panel {
     color: #ffffff;
     background-color: black;
-    border: 0px solid #536272;
-    border-bottom-width: 1px;
+    border-image: url("panel-border.svg") 1;
 }
 
 #panelLeft, #panelCenter, #panelRight {
diff --git a/data/theme/panel-border.svg b/data/theme/panel-border.svg
new file mode 100644
index 0000000..4405ea2
--- /dev/null
+++ b/data/theme/panel-border.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   width="3"
+   height="10"
+   id="svg2"
+   version="1.1">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+  </metadata>
+  <g
+     id="layer1">
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke-width:0.43599999000000000;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3779"
+       width="3"
+       height="10"
+       x="0"
+       y="0" />
+    <rect
+       style="fill:#536272;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3796"
+       width="3"
+       height="1"
+       x="0"
+       y="9" />
+  </g>
+</svg>
diff --git a/js/ui/panel.js b/js/ui/panel.js
index c331f4d..b6fbc62 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -580,18 +580,19 @@ PanelCorner.prototype = {
         cr.moveTo(0, 0);
         if (this._side == St.Side.LEFT)
             cr.arc(cornerRadius,
-                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   innerBorderWidth + cornerRadius,
                    cornerRadius, Math.PI, 3 * Math.PI / 2);
         else
             cr.arc(0,
-                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   innerBorderWidth + cornerRadius,
                    cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
         cr.lineTo(cornerRadius, 0);
         cr.closePath();
 
         let savedPath = cr.copyPath();
 
-        let over = _over(outerBorderColor, backgroundColor);
+        let over = _over(innerBorderColor,
+                         _over(outerBorderColor, backgroundColor));
         Clutter.cairo_set_source_color(cr, over);
         cr.fill();
 
@@ -607,12 +608,12 @@ PanelCorner.prototype = {
         cr.restore();
 
         if (this._side == St.Side.LEFT)
-            cr.rectangle(cornerRadius - offset, 0, offset, innerBorderWidth);
+            cr.rectangle(cornerRadius - offset, 0, offset, outerBorderWidth);
         else
-            cr.rectangle(0, 0, offset, innerBorderWidth);
+            cr.rectangle(0, 0, offset, outerBorderWidth);
         cr.fill();
 
-        offset = innerBorderWidth + outerBorderWidth;
+        offset = innerBorderWidth;
         Clutter.cairo_set_source_color(cr, backgroundColor);
 
         cr.save();
@@ -627,16 +628,15 @@ PanelCorner.prototype = {
 
         let cornerRadius = node.get_length("-panel-corner-radius");
         let innerBorderWidth = node.get_length('-panel-corner-inner-border-width');
-        let outerBorderWidth = node.get_length('-panel-corner-outer-border-width');
 
         this.actor.set_size(cornerRadius,
-                            innerBorderWidth + outerBorderWidth + cornerRadius);
+                            innerBorderWidth + cornerRadius);
         if (this._side == St.Side.LEFT)
             this.actor.set_position(Main.panel.actor.x,
-                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
         else
             this.actor.set_position(Main.panel.actor.x + Main.panel.actor.width - cornerRadius,
-                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
     }
 };