From 9a048af1fb9ecc6c390f4b5ca28b6a64ba462932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Mon, 21 Feb 2011 19:04:40 +0100
Subject: [PATCH] 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(-)
 create mode 100644 data/theme/panel-border.svg

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f05d04ab3..08c85b775 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 000000000..4405ea296
--- /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 c331f4dff..b6fbc62cd 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);
     }
 };