[gnome-shell] panel: Indicate focus using a pill-shaped background

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

commit c894ec95cdc2907290d02296148bd8f7ca2fbeaf
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Tue Aug 4 13:47:59 2020 +0200

    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 |  6 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    | 52 +++++++----------
 js/ui/panel.js                                     | 67 +---------------------
 3 files changed, 28 insertions(+), 97 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 16391a14e9..33aea17a6b 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/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;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 1ee17d36a8..9c41c153b5 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/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 {
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 31b88f7fdd..5b0eaec434 100644
--- a/js/ui/panel.js
+++ b/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();
     }