[gnome-shell/wip/fmuellner/gtk4: 17/19] dbusServices/extensions: Stop stacking frames

[Florian Müllner <fmuellner src gnome org>]

commit 00a1f3b62566ee3cc3db1b2e98b5c6d0cc5381aa
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Nov 13 02:36:08 2020 +0100

    dbusServices/extensions: Stop stacking frames
    
    We currently use separate frames for the details expander and the
    expanded details. That layout works as long as frames are boxy (as
    in the default GTK3 style), but breaks down with rounded corners
    (as in the default GTK4 style).
    
    In order to work with either style, adapt the layout to use a single
    surrounding frame and appropriate borders as separator.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1495

 js/dbusServices/extensions/css/application.css         |  2 +-
 js/dbusServices/extensions/extensionsService.js        | 10 ++++++++++
 .../extensions/ui/extension-prefs-dialog.ui            | 18 +++++-------------
 3 files changed, 16 insertions(+), 14 deletions(-)
---
diff --git a/js/dbusServices/extensions/css/application.css b/js/dbusServices/extensions/css/application.css
index 1acbf36c89..fb7c475567 100644
--- a/js/dbusServices/extensions/css/application.css
+++ b/js/dbusServices/extensions/css/application.css
@@ -1,4 +1,4 @@
-.expander-frame > * { border-top-width: 0; }
+.expanded { border: 0 solid @borders; border-bottom-width: 1px; }
 .expander-toolbar {
   border: 0 solid @borders;
   border-top-width: 1px;
diff --git a/js/dbusServices/extensions/extensionsService.js b/js/dbusServices/extensions/extensionsService.js
index 456ca6ba79..34107cdb32 100644
--- a/js/dbusServices/extensions/extensionsService.js
+++ b/js/dbusServices/extensions/extensionsService.js
@@ -192,7 +192,10 @@ var ExtensionPrefsDialog = GObject.registerClass({
             this._expanderArrow.icon_name = this._revealer.reveal_child
                 ? 'pan-down-symbolic'
                 : 'pan-end-symbolic';
+            this._syncExpandedStyle();
         });
+        this._revealer.connect('notify::child-revealed',
+            () => this._syncExpandedStyle());
 
         try {
             ExtensionUtils.installImporter(extension);
@@ -211,6 +214,13 @@ var ExtensionPrefsDialog = GObject.registerClass({
         }
     }
 
+    _syncExpandedStyle() {
+        if (this._revealer.reveal_child)
+            this._expander.get_style_context().add_class('expanded');
+        else if (!this._revealer.child_revealed)
+            this._expander.get_style_context().remove_class('expanded');
+    }
+
     _setError(exc) {
         this._errorView.buffer.text = `${exc}\n\nStack trace:\n`;
         // Indent stack trace.
diff --git a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui 
b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
index 020bc44629..9e51e3c58e 100644
--- a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
+++ b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
@@ -53,16 +53,16 @@
                       </object>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkFrame">
                         <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
                         <property name="margin-top">12</property>
                         <child>
-                          <object class="GtkFrame" id="expander">
+                          <object class="GtkBox">
                             <property name="visible">True</property>
                             <property name="hexpand">True</property>
+                            <property name="orientation">vertical</property>
                             <child>
-                              <object class="GtkEventBox">
+                              <object class="GtkEventBox" id="expander">
                                 <property name="visible">True</property>
                                 <child>
                                   <object class="GtkBox">
@@ -88,17 +88,9 @@
                                 </child>
                               </object>
                             </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkRevealer" id="revealer">
-                            <property name="visible">True</property>
                             <child>
-                              <object class="GtkFrame">
+                              <object class="GtkRevealer" id="revealer">
                                 <property name="visible">True</property>
-                                <style>
-                                  <class name="expander-frame"/>
-                                </style>
                                 <child>
                                   <object class="GtkBox">
                                     <property name="visible">True</property>