From 99a796e426ed81e16faf7d1651ee7b859615df84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Fri, 13 Nov 2020 02:36:08 +0100
Subject: [PATCH] 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.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1495>
---
 js/dbusServices/extensions/css/application.css |  2 +-
 .../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 1acbf36c8..fb7c47556 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 456ca6ba7..34107cdb3 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 020bc4462..9e51e3c58 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>