[gnome-shell] quickSettings: Support child menus in QuickSettingsMenu

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

commit 24e842c52eb871588a1a95f3f8fd64d756f41748
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Jul 29 15:05:27 2022 +0200

    quickSettings: Support child menus in QuickSettingsMenu
    
    This is where it gets hairy.
    
    Some quick settings items will have an associated menu. When
    opened, the main menu should grow to make room for the child
    menu, as it would do if it contained the child.
    
    At the same time, the child menu will attach to its parent, and
    block all input there while it is open.
    
    Menu-modal menus so to speak.
    
    Implement this as follows:
    
     - change the QuickSettingsMenu actor to a stack that holds
       - the boxpointer (a.k.a. the actual menu)
       - an overlay actor to hold child menus
    
     - use constraints to bind the overlay's position and width
       to the boxpointer; the y position is offset to align the
       overlay with the grid inside the actual menu
    
     - add a placeholder actor to the main grid, whose height is
       bound to the overlay height; using a "clone" instead of
       the actual overlay means that layout changes are not triggered
       from outside the grid hierarchy, which would be prone to
       allocation warnings
    
     - update the layout manager to not allocate the placeholder as
       a regular grid child, but instead include its height in the
       space underneath the row with an open menu
    
     - apply a dim effect to the boxpointer when a child menu is
       open, to indicate that input is blocked
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>

 js/ui/quickSettings.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 111 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index 0858d69228..0e1b83cef1 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -1,9 +1,12 @@
 /* exported QuickToggle, QuickSettingsMenu, SystemIndicator */
-const {Atk, Clutter, Gio, GLib, GObject, Pango, St} = imports.gi;
+const {Atk, Clutter, Gio, GLib, GObject, Graphene, Pango, St} = imports.gi;
 
 const Main = imports.ui.main;
 const PopupMenu = imports.ui.popupMenu;
 
+const {POPUP_ANIMATION_TIME} = imports.ui.boxpointer;
+const DIM_BRIGHTNESS = -0.4;
+
 var QuickToggle = GObject.registerClass({
     Properties: {
         'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
@@ -92,6 +95,12 @@ const QuickSettingsLayout = GObject.registerClass({
             1, GLib.MAXINT32, 1),
     },
 }, class QuickSettingsLayout extends Clutter.LayoutManager {
+    _init(overlay, params) {
+        super._init(params);
+
+        this._overlay = overlay;
+    }
+
     _containerStyleChanged() {
         const node = this._container.get_theme_node();
 
@@ -120,6 +129,9 @@ const QuickSettingsLayout = GObject.registerClass({
         let [minWidth, natWidth] = [0, 0];
 
         for (const child of container) {
+            if (child === this._overlay)
+                continue;
+
             const [childMin, childNat] = child.get_preferred_width(-1);
             const colSpan = this._getColSpan(container, child);
             minWidth = Math.max(minWidth, childMin / colSpan);
@@ -145,6 +157,9 @@ const QuickSettingsLayout = GObject.registerClass({
             if (!child.visible)
                 continue;
 
+            if (child === this._overlay)
+                continue;
+
             if (lineIndex === 0)
                 appendRow();
 
@@ -195,7 +210,9 @@ const QuickSettingsLayout = GObject.registerClass({
     vfunc_get_preferred_height(container, _forWidth) {
         const rows = this._getRows(container);
 
-        let [minHeight, natHeight] = [0, 0];
+        let [minHeight, natHeight] = this._overlay
+            ? this._overlay.get_preferred_height(-1)
+            : [0, 0];
 
         const spacing = (rows.length - 1) * this.row_spacing;
         minHeight += spacing;
@@ -213,9 +230,15 @@ const QuickSettingsLayout = GObject.registerClass({
     vfunc_allocate(container, box) {
         const rows = this._getRows(container);
 
+        const [, overlayHeight] = this._overlay
+            ? this._overlay.get_preferred_height(-1)
+            : [0, 0];
+
         const availWidth = box.get_width() - (this.nColumns - 1) * this.row_spacing;
         const childWidth = availWidth / this.nColumns;
 
+        this._overlay?.allocate_available_size(0, 0, box.get_width(), box.get_height());
+
         const isRtl = container.text_direction === Clutter.TextDirection.RTL;
 
         const childBox = new Clutter.ActorBox();
@@ -240,6 +263,9 @@ const QuickSettingsLayout = GObject.registerClass({
             });
 
             y += rowNat + this.row_spacing;
+
+            if (row.some(c => c.menu?.actor.visible))
+                y += overlayHeight;
         });
     }
 });
@@ -248,24 +274,106 @@ var QuickSettingsMenu = class extends PopupMenu.PopupMenu {
     constructor(sourceActor, nColumns = 1) {
         super(sourceActor, 0, St.Side.TOP);
 
+        this.actor = new St.Widget({reactive: true});
+        this.actor.add_child(this._boxPointer);
+        this.actor._delegate = this;
+
+        this.connect('menu-closed', () => this.actor.hide());
+
         Main.layoutManager.connectObject('system-modal-opened',
             () => this.close(), this);
 
+        this._dimEffect = new Clutter.BrightnessContrastEffect({
+            enabled: false,
+        });
+        this._boxPointer.add_effect_with_name('dim', this._dimEffect);
         this.box.add_style_class_name('quick-settings');
 
+        // Overlay layer for menus
+        this._overlay = new Clutter.Actor({
+            layout_manager: new Clutter.BinLayout(),
+        });
+
+        // "clone"
+        const placeholder = new Clutter.Actor({
+            constraints: new Clutter.BindConstraint({
+                coordinate: Clutter.BindCoordinate.HEIGHT,
+                source: this._overlay,
+            }),
+        });
+
         this._grid = new St.Widget({
             style_class: 'quick-settings-grid',
-            layout_manager: new QuickSettingsLayout({
+            layout_manager: new QuickSettingsLayout(placeholder, {
                 nColumns,
             }),
         });
         this.box.add_child(this._grid);
+        this._grid.add_child(placeholder);
+
+        const yConstraint = new Clutter.BindConstraint({
+            coordinate: Clutter.BindCoordinate.Y,
+            source: this._boxPointer,
+        });
+
+        // Pick up additional spacing from any intermediate actors
+        const updateOffset = () => {
+            const offset = this._grid.apply_relative_transform_to_point(
+                this._boxPointer, new Graphene.Point3D());
+            yConstraint.offset = offset.y;
+        };
+        this._grid.connect('notify::y', updateOffset);
+        this.box.connect('notify::y', updateOffset);
+        this._boxPointer.bin.connect('notify::y', updateOffset);
+
+        this._overlay.add_constraint(yConstraint);
+        this._overlay.add_constraint(new Clutter.BindConstraint({
+            coordinate: Clutter.BindCoordinate.X,
+            source: this._boxPointer,
+        }));
+        this._overlay.add_constraint(new Clutter.BindConstraint({
+            coordinate: Clutter.BindCoordinate.WIDTH,
+            source: this._boxPointer,
+        }));
+
+        this.actor.add_child(this._overlay);
     }
 
     addItem(item, colSpan = 1) {
         this._grid.add_child(item);
         this._grid.layout_manager.child_set_property(
             this._grid, item, 'column-span', colSpan);
+
+        if (item.menu) {
+            this._overlay.add_child(item.menu.actor);
+
+            item.menu.connect('open-state-changed', (m, isOpen) => {
+                this._setDimmed(isOpen);
+                this._activeMenu = isOpen ? item.menu : null;
+            });
+        }
+    }
+
+    open(animate) {
+        this.actor.show();
+        super.open(animate);
+    }
+
+    close(animate) {
+        this._activeMenu?.close(animate);
+        super.close(animate);
+    }
+
+    _setDimmed(dim) {
+        const val = 127 * (1 + (dim ? 1 : 0) * DIM_BRIGHTNESS);
+        const color = Clutter.Color.new(val, val, val, 255);
+
+        this._boxPointer.ease_property('@effects.dim.brightness', color, {
+            mode: Clutter.AnimationMode.LINEAR,
+            duration: POPUP_ANIMATION_TIME,
+            onStopped: () => (this._dimEffect.enabled = dim),
+        });
+        this._dimEffect.enabled = true;
     }
 };