panel: Remove panel corners

They were a cute gimmick for a decade, now it's time to say
goodbye ... 😢️

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5010

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

data/theme/gnome-shell-high-contrast.scss

@@ -22,10 +22,6 @@ stage {
   &.unlock-screen,
   &:overview {
     background-color: #000;
-
-    .panel-corner {
-      -panel-corner-opacity: 1;
-    }
   }
 
   .panel-button {

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

@@ -1,7 +1,6 @@
 /* Top Bar */
 // a.k.a. the panel
 
-$panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
 $panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
 $panel_height: 2.2em;
@@ -19,20 +18,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &.login-screen,
   &:overview {
     background-color: transparent;
-
-    .panel-corner {
-      -panel-corner-opacity: 0;
-    }
-  }
-
-  // the rounded outset corners
-  .panel-corner {
-    -panel-corner-radius: $panel_corner_radius;
-    -panel-corner-background-color: $panel_bg_color;
-    -panel-corner-border-width: 2px;
-    -panel-corner-border-color: transparent;
-    -panel-corner-opacity: 1;
-    transition-duration: $panel_transition_duration;
   }
 
   // panel menus

js/ui/panel.js

@@ -2,7 +2,6 @@
 /* exported Panel */
 
 const { Atk, Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
-const Cairo = imports.cairo;
 
 const Animation = imports.ui.animation;
 const { AppMenu } = imports.ui.appMenu;
@@ -344,170 +343,6 @@ class ActivitiesButton extends PanelMenu.Button {
     }
 });
 
-var PanelCorner = GObject.registerClass(
-class PanelCorner extends St.DrawingArea {
-    _init(side) {
-        this._side = side;
-
-        super._init({ style_class: 'panel-corner' });
-    }
-
-    _findRightmostButton(container) {
-        if (!container.get_children)
-            return null;
-
-        let children = container.get_children();
-
-        if (!children || children.length == 0)
-            return null;
-
-        // Start at the back and work backward
-        let index;
-        for (index = children.length - 1; index >= 0; index--) {
-            if (children[index].visible)
-                break;
-        }
-        if (index < 0)
-            return null;
-
-        if (!(children[index] instanceof St.Widget))
-            return null;
-
-        if (!children[index].has_style_class_name('panel-menu') &&
-            !children[index].has_style_class_name('panel-button'))
-            return this._findRightmostButton(children[index]);
-
-        return children[index];
-    }
-
-    _findLeftmostButton(container) {
-        if (!container.get_children)
-            return null;
-
-        let children = container.get_children();
-
-        if (!children || children.length == 0)
-            return null;
-
-        // Start at the front and work forward
-        let index;
-        for (index = 0; index < children.length; index++) {
-            if (children[index].visible)
-                break;
-        }
-        if (index == children.length)
-            return null;
-
-        if (!(children[index] instanceof St.Widget))
-            return null;
-
-        if (!children[index].has_style_class_name('panel-menu') &&
-            !children[index].has_style_class_name('panel-button'))
-            return this._findLeftmostButton(children[index]);
-
-        return children[index];
-    }
-
-    setStyleParent(box) {
-        let side = this._side;
-
-        let rtlAwareContainer = box instanceof St.BoxLayout;
-        if (rtlAwareContainer &&
-            box.get_text_direction() == Clutter.TextDirection.RTL) {
-            if (this._side == St.Side.LEFT)
-                side = St.Side.RIGHT;
-            else if (this._side == St.Side.RIGHT)
-                side = St.Side.LEFT;
-        }
-
-        let button;
-        if (side == St.Side.LEFT)
-            button = this._findLeftmostButton(box);
-        else if (side == St.Side.RIGHT)
-            button = this._findRightmostButton(box);
-
-        if (button) {
-            if (this._button) {
-                if (this._buttonStyleChangedSignalId) {
-                    this._button.disconnect(this._buttonStyleChangedSignalId);
-                    this._button.style = null;
-                }
-
-                if (this._buttonDestroySignalId)
-                    this._button.disconnect(this._buttonDestroySignalId);
-            }
-
-            this._button = button;
-
-            this._buttonDestroySignalId = button.connect('destroy', () => {
-                if (this._button == button) {
-                    this._button = null;
-                    this._buttonStyleChangedSignalId = 0;
-                }
-            });
-
-            // Synchronize the locate button's pseudo classes with this corner
-            this._buttonStyleChangedSignalId = button.connect('style-changed',
-                () => {
-                    let pseudoClass = button.get_style_pseudo_class();
-                    this.set_style_pseudo_class(pseudoClass);
-                });
-        }
-    }
-
-    vfunc_repaint() {
-        let node = this.get_theme_node();
-
-        let cornerRadius = node.get_length("-panel-corner-radius");
-        let borderWidth = node.get_length('-panel-corner-border-width');
-
-        let backgroundColor = node.get_color('-panel-corner-background-color');
-
-        let cr = this.get_context();
-        cr.setOperator(Cairo.Operator.SOURCE);
-
-        cr.moveTo(0, 0);
-        if (this._side == St.Side.LEFT) {
-            cr.arc(cornerRadius,
-                   borderWidth + cornerRadius,
-                   cornerRadius, Math.PI, 3 * Math.PI / 2);
-        } else {
-            cr.arc(0,
-                   borderWidth + cornerRadius,
-                   cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
-        }
-        cr.lineTo(cornerRadius, 0);
-        cr.closePath();
-
-        Clutter.cairo_set_source_color(cr, backgroundColor);
-        cr.fill();
-
-        cr.$dispose();
-    }
-
-    vfunc_style_changed() {
-        super.vfunc_style_changed();
-        let node = this.get_theme_node();
-
-        let cornerRadius = node.get_length("-panel-corner-radius");
-        let borderWidth = node.get_length('-panel-corner-border-width');
-
-        const transitionDuration =
-            node.get_transition_duration() / St.Settings.get().slow_down_factor;
-        const opacity = node.get_double('-panel-corner-opacity');
-
-        this.set_size(cornerRadius, borderWidth + cornerRadius);
-        this.translation_y = -borderWidth;
-
-        this.remove_transition('opacity');
-        this.ease({
-            opacity: opacity * 255,
-            duration: transitionDuration,
-            mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
-        });
-    }
-});
-
 const UnsafeModeIndicator = GObject.registerClass(
 class UnsafeModeIndicator extends PanelMenu.SystemIndicator {
     _init() {
@@ -656,14 +491,6 @@ class Panel extends St.Widget {
         this._rightBox = new St.BoxLayout({ name: 'panelRight' });
         this.add_child(this._rightBox);
 
-        this._leftCorner = new PanelCorner(St.Side.LEFT);
-        this.bind_property('style', this._leftCorner, 'style', GObject.BindingFlags.SYNC_CREATE);
-        this.add_child(this._leftCorner);
-
-        this._rightCorner = new PanelCorner(St.Side.RIGHT);
-        this.bind_property('style', this._rightCorner, 'style', GObject.BindingFlags.SYNC_CREATE);
-        this.add_child(this._rightCorner);
-
         Main.overview.connect('showing', () => {
             this.add_style_pseudo_class('overview');
         });
@@ -748,24 +575,6 @@ class Panel extends St.Widget {
             childBox.x2 = allocWidth;
         }
         this._rightBox.allocate(childBox);
-
-        let cornerWidth, cornerHeight;
-
-        [, cornerWidth] = this._leftCorner.get_preferred_width(-1);
-        [, cornerHeight] = this._leftCorner.get_preferred_height(-1);
-        childBox.x1 = 0;
-        childBox.x2 = cornerWidth;
-        childBox.y1 = allocHeight;
-        childBox.y2 = allocHeight + cornerHeight;
-        this._leftCorner.allocate(childBox);
-
-        [, cornerWidth] = this._rightCorner.get_preferred_width(-1);
-        [, cornerHeight] = this._rightCorner.get_preferred_height(-1);
-        childBox.x1 = allocWidth - cornerWidth;
-        childBox.x2 = allocWidth;
-        childBox.y1 = allocHeight;
-        childBox.y2 = allocHeight + cornerHeight;
-        this._rightCorner.allocate(childBox);
     }
 
     _tryDragWindow(event) {
@@ -880,19 +689,11 @@ class Panel extends St.Widget {
             Main.messageTray.bannerAlignment = Clutter.ActorAlign.CENTER;
 
         if (this._sessionStyle)
-            this._removeStyleClassName(this._sessionStyle);
+            this.remove_style_class_name(this._sessionStyle);
 
         this._sessionStyle = Main.sessionMode.panelStyle;
         if (this._sessionStyle)
-            this._addStyleClassName(this._sessionStyle);
+            this.add_style_class_name(this._sessionStyle);
-
-        if (this.get_text_direction() == Clutter.TextDirection.RTL) {
-            this._leftCorner.setStyleParent(this._rightBox);
-            this._rightCorner.setStyleParent(this._leftBox);
-        } else {
-            this._leftCorner.setStyleParent(this._leftBox);
-            this._rightCorner.setStyleParent(this._rightBox);
-        }
     }
 
     _hideIndicators() {
@@ -971,18 +772,6 @@ class Panel extends St.Widget {
         return indicator;
     }
 
-    _addStyleClassName(className) {
-        this.add_style_class_name(className);
-        this._rightCorner.add_style_class_name(className);
-        this._leftCorner.add_style_class_name(className);
-    }
-
-    _removeStyleClassName(className) {
-        this.remove_style_class_name(className);
-        this._rightCorner.remove_style_class_name(className);
-        this._leftCorner.remove_style_class_name(className);
-    }
-
     _onMenuSet(indicator) {
         if (!indicator.menu || indicator.menu._openChangedId)
             return;