panel: Indicate focus using a pill-shaped background

The current way of indicating focus of elements in the panel does not
work very well with a fully-transparent panel, a line at the bottom of
the panel doesn't make too much sense if there is no real panel, but
only the text and icons.

To make the indicators look better in this case, switch to a pill-shaped
background color to indicate the focus of items in the panel.

For this to look good, there has to be a small black border above and
below the background, this also requires increasing the height of the
panel (from 1.86em to 2.2em) for visual purposes.

Also, since we now no longer need to color the lower bottom of the
panel, we can remove the custom drawing code for the border of the
panels corner, so do that.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>

data/theme/gnome-shell-sass/widgets/_calendar.scss

@@ -1,11 +1,11 @@
 /* Date/Time Menu */
 
 .clock-display-box {
-  spacing: $base_spacing / 2;
+  spacing: 2px;
 
   .clock {
-    padding-left: $base_padding;
-    padding-right: $base_padding;
+    padding-left: $base_padding * 2;
+    padding-right: $base_padding * 2;
   }
 }
 

data/theme/gnome-shell-sass/widgets/_panel.scss

@@ -4,7 +4,7 @@
 $panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
 $panel_fg_color: #ccc;
-$panel_height: 1.86em;
+$panel_height: 2.2em;
 
 
 #panel {
@@ -21,7 +21,6 @@ $panel_height: 1.86em;
     .panel-corner {
       -panel-corner-radius: 0;
       -panel-corner-background-color: transparent;
-      -panel-corner-border-color: transparent;
     }
   }
 
@@ -35,11 +34,6 @@ $panel_height: 1.86em;
     -panel-corner-radius: $panel_corner_radius;
     -panel-corner-background-color: $panel_bg_color;
     -panel-corner-border-width: 2px;
-    -panel-corner-border-color: transparent;
-
-    &:active, &:overview, &:focus {
-      -panel-corner-border-color: lighten($selected_bg_color,5%);
-    }
   }
 
   // panel menus
@@ -48,13 +42,30 @@ $panel_height: 1.86em;
     color: $panel_fg_color;
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding;
+    transition-duration: 150ms;
+    border: 3px solid transparent;
+    border-radius: 99px;
 
-    &:hover {
-      color: lighten($panel_fg_color, 20%);
+    &.clock-display {
+      .clock {
+        transition-duration: 150ms;
+        border: 3px solid transparent;
+        border-radius: 99px;
+      }
     }
 
-    &:active, &:overview, &:focus, &:checked {
-      color: lighten($panel_fg_color, 20%);
+    &:hover, &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+
+      // The clock display needs to have the background on .clock because
+      // we want to exclude the do-not-disturb indicator from the background
+      &.clock-display {
+        box-shadow: none;
+
+        .clock {
+          box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+        }
+      }
     }
 
     // status area icons
@@ -83,25 +94,6 @@ $panel_height: 1.86em;
     }
   }
 
-  .panel-button {
-    &:active, &:overview, &:focus, &:checked {
-      // Trick due to St limitations. It needs a background to draw a box-shadow
-      background-color: rgba(0, 0, 0, 0.01);
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
-    }
-  }
-
-  .panel-button.clock-display {
-    // Move highlight from .panel-button to .clock
-    &:active, &:overview, &:focus, &:checked {
-      box-shadow: none;
-
-      .clock {
-        background-color: rgba(0, 0, 0, 0.01);
-        box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
-      }
-    }
-  }
 
   .panel-status-indicators-box,
   .panel-status-menu-box {

js/ui/panel.js

@@ -18,48 +18,6 @@ var APP_MENU_ICON_MARGIN = 0;
 
 var BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
-// To make sure the panel corners blend nicely with the panel,
-// we draw background and borders the same way, e.g. drawing
-// them as filled shapes from the outside inwards instead of
-// using cairo stroke(). So in order to give the border the
-// appearance of being drawn on top of the background, we need
-// to blend border and background color together.
-// For that purpose we use the following helper methods, taken
-// from st-theme-node-drawing.c
-function _norm(x) {
-    return Math.round(x / 255);
-}
-
-function _over(srcColor, dstColor) {
-    let src = _premultiply(srcColor);
-    let dst = _premultiply(dstColor);
-    let result = new Clutter.Color();
-
-    result.alpha = src.alpha + _norm((255 - src.alpha) * dst.alpha);
-    result.red = src.red + _norm((255 - src.alpha) * dst.red);
-    result.green = src.green + _norm((255 - src.alpha) * dst.green);
-    result.blue = src.blue + _norm((255 - src.alpha) * dst.blue);
-
-    return _unpremultiply(result);
-}
-
-function _premultiply(color) {
-    return new Clutter.Color({ red: _norm(color.red * color.alpha),
-                               green: _norm(color.green * color.alpha),
-                               blue: _norm(color.blue * color.alpha),
-                               alpha: color.alpha });
-}
-
-function _unpremultiply(color) {
-    if (color.alpha == 0)
-        return new Clutter.Color();
-
-    let red = Math.min((color.red * 255 + 127) / color.alpha, 255);
-    let green = Math.min((color.green * 255 + 127) / color.alpha, 255);
-    let blue = Math.min((color.blue * 255 + 127) / color.alpha, 255);
-    return new Clutter.Color({ red, green, blue, alpha: color.alpha });
-}
-
 class AppMenu extends PopupMenu.PopupMenu {
     constructor(sourceActor) {
         super(sourceActor, 0.5, St.Side.TOP);
@@ -630,15 +588,11 @@ class PanelCorner extends St.DrawingArea {
         let borderWidth = node.get_length('-panel-corner-border-width');
 
         let backgroundColor = node.get_color('-panel-corner-background-color');
-        let borderColor = node.get_color('-panel-corner-border-color');
-
-        let overlap = borderColor.alpha != 0;
-        let offsetY = overlap ? 0 : borderWidth;
 
         let cr = this.get_context();
         cr.setOperator(Cairo.Operator.SOURCE);
 
-        cr.moveTo(0, offsetY);
+        cr.moveTo(0, 0);
         if (this._side == St.Side.LEFT) {
             cr.arc(cornerRadius,
                    borderWidth + cornerRadius,
@@ -648,27 +602,12 @@ class PanelCorner extends St.DrawingArea {
                    borderWidth + cornerRadius,
                    cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
         }
-        cr.lineTo(cornerRadius, offsetY);
+        cr.lineTo(cornerRadius, 0);
         cr.closePath();
 
-        let savedPath = cr.copyPath();
-
-        let xOffsetDirection = this._side == St.Side.LEFT ? -1 : 1;
-        let over = _over(borderColor, backgroundColor);
-        Clutter.cairo_set_source_color(cr, over);
+        Clutter.cairo_set_source_color(cr, backgroundColor);
         cr.fill();
 
-        if (overlap) {
-            let offset = borderWidth;
-            Clutter.cairo_set_source_color(cr, backgroundColor);
-
-            cr.save();
-            cr.translate(xOffsetDirection * offset, -offset);
-            cr.appendPath(savedPath);
-            cr.fill();
-            cr.restore();
-        }
-
         cr.$dispose();
     }