From 8176b0c2fc500971e000bad29a1f8fb46a2bc0d4 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 02:51:07 +0500
Subject: [PATCH 01/10] inspector: Remove list header style

The one from the theme works just fine.
---
 gtk/inspector/inspector.css | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
index ba14df0ed3..59f6445e4a 100644
--- a/gtk/inspector/inspector.css
+++ b/gtk/inspector/inspector.css
@@ -1,31 +1,5 @@
 /* some style for the inspector */
 
-.list header {
-  background: white;
-  border: 1px solid lightgray;
-}
-
-.list header button {
-  background: none;
-}
-
-.list header button.dnd {
-  background: gray;
-}
-
-.list header>* {
-  padding: 2px;
-  font-weight: bold;
-}
-
-.list header sort_indicator {
-  min-width: 16px;
-}
-
-.list header>*:not(:last-child) {
-  border-right: 1px solid lightgray;
-}
-
 .list .cell {
   font-size: smaller;
   padding: 0 2px;

From 131683fdcfd876a8b967cdfb9f28fac65fc924cc Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 02:53:22 +0500
Subject: [PATCH 02/10] inspector: Use a GtkSeparator for the object details
 toolbar

Remove a hardcoded light grey border from the sidebar that was used for
this.
---
 gtk/inspector/inspector.css | 4 ----
 gtk/inspector/window.ui     | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
index 59f6445e4a..aeca38209a 100644
--- a/gtk/inspector/inspector.css
+++ b/gtk/inspector/inspector.css
@@ -22,10 +22,6 @@
   padding: 0 4px;
 }
 
-stacksidebar.object-details {
-  border-top: 1px solid lightgray;
-}
-
 picture.dark {
   background: gray;
 }
diff --git a/gtk/inspector/window.ui b/gtk/inspector/window.ui
index c76af022c6..52ba9f065a 100644
--- a/gtk/inspector/window.ui
+++ b/gtk/inspector/window.ui
@@ -380,6 +380,9 @@
                                 </child>
                               </object>
                             </child>
+                            <child>
+                              <object class="GtkSeparator"/>
+                            </child>
                             <child>
                               <object class="GtkBox">
                                 <child>
@@ -389,9 +392,6 @@
                                     <child>
                                       <object class="GtkStackSidebar">
                                         <property name="stack">object_details</property>
-                                        <style>
-                                          <class name="object-details"/>
-                                        </style>
                                       </object>
                                     </child>
                                   </object>

From bec9141233f2139dcc6ec08da27a0c7f10be38d8 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 03:10:54 +0500
Subject: [PATCH 03/10] inspector: Use .toolbar for toolbars

Remove all of the manual margins, spacing and has-frame=0, be more
consistent.
---
 gtk/inspector/css-editor.ui | 10 +++------
 gtk/inspector/recorder.ui   | 14 +++---------
 gtk/inspector/tree-data.ui  |  9 +++-----
 gtk/inspector/window.ui     | 44 ++++++-------------------------------
 4 files changed, 16 insertions(+), 61 deletions(-)

diff --git a/gtk/inspector/css-editor.ui b/gtk/inspector/css-editor.ui
index dc4649904c..c1163efba4 100644
--- a/gtk/inspector/css-editor.ui
+++ b/gtk/inspector/css-editor.ui
@@ -22,14 +22,11 @@
     <property name="orientation">vertical</property>
     <child>
       <object class="GtkBox">
-        <property name="spacing">6</property>
-        <property name="margin-start">6</property>
-        <property name="margin-end">6</property>
-        <property name="margin-top">6</property>
-        <property name="margin-bottom">6</property>
+        <style>
+          <class name="toolbar"/>
+        </style>
         <child>
           <object class="GtkToggleButton" id="disable_button">
-            <property name="has-frame">0</property>
             <property name="tooltip-text" translatable="yes">Disable this custom CSS</property>
             <property name="icon-name">media-playback-pause-symbolic</property>
             <signal name="toggled" handler="disable_toggled"/>
@@ -37,7 +34,6 @@
         </child>
         <child>
           <object class="GtkButton" id="save_button">
-            <property name="has-frame">0</property>
             <property name="tooltip-text" translatable="yes">Save the current CSS</property>
             <property name="icon-name">document-save-symbolic</property>
             <signal name="clicked" handler="save_clicked"/>
diff --git a/gtk/inspector/recorder.ui b/gtk/inspector/recorder.ui
index de0d7cd9f3..ce25148196 100644
--- a/gtk/inspector/recorder.ui
+++ b/gtk/inspector/recorder.ui
@@ -6,14 +6,11 @@
         <property name="orientation">vertical</property>
         <child>
           <object class="GtkBox">
-            <property name="spacing">6</property>
-            <property name="margin-start">6</property>
-            <property name="margin-end">6</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
+            <style>
+              <class name="toolbar"/>
+            </style>
             <child>
               <object class="GtkToggleButton">
-                <property name="has-frame">0</property>
                 <property name="icon-name">media-record-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Record frames</property>
                 <property name="active" bind-source="GtkInspectorRecorder" bind-property="recording" bind-flags="bidirectional|sync-create"/>
@@ -21,7 +18,6 @@
             </child>
             <child>
               <object class="GtkButton">
-                <property name="has-frame">0</property>
                 <property name="icon-name">edit-clear-all-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Clear recorded frames</property>
                 <signal name="clicked" handler="recordings_clear_all"/>
@@ -29,7 +25,6 @@
             </child>
             <child>
               <object class="GtkToggleButton">
-                <property name="has-frame">0</property>
                 <property name="icon-name">insert-object-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Add debug nodes</property>
                 <property name="active" bind-source="GtkInspectorRecorder" bind-property="debug-nodes" bind-flags="bidirectional|sync-create"/>
@@ -39,7 +34,6 @@
             </child>
             <child>
               <object class="GtkToggleButton" id="dark_mode_button">
-                <property name="has-frame">0</property>
                 <property name="icon-name">display-brightness-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Use a dark background</property>
                 <signal name="notify::active" handler="toggle_dark_mode" swapped="0" object="render_node_view"/>
@@ -47,7 +41,6 @@
             </child>
             <child>
               <object class="GtkButton" id="render_node_save_button">
-                <property name="has-frame">0</property>
                 <property name="sensitive">0</property>
                 <property name="icon-name">document-save-as-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Save selected node</property>
@@ -56,7 +49,6 @@
             </child>
             <child>
               <object class="GtkButton" id="render_node_clip_button">
-                <property name="has-frame">0</property>
                 <property name="sensitive">0</property>
                 <property name="icon-name">edit-copy-symbolic</property>
                 <property name="tooltip-text" translatable="yes">Copy to clipboard</property>
diff --git a/gtk/inspector/tree-data.ui b/gtk/inspector/tree-data.ui
index 84fe5acd6f..d06c228136 100644
--- a/gtk/inspector/tree-data.ui
+++ b/gtk/inspector/tree-data.ui
@@ -2,14 +2,11 @@
   <template class="GtkInspectorTreeData" parent="GtkWidget">
     <child>
       <object class="GtkBox">
-        <property name="spacing">6</property>
-        <property name="margin-start">6</property>
-        <property name="margin-end">6</property>
-        <property name="margin-top">6</property>
-        <property name="margin-bottom">6</property>
+        <style>
+          <class name="toolbar"/>
+        </style>
         <child>
           <object class="GtkToggleButton" id="show_button">
-            <property name="has-frame">0</property>
             <property name="tooltip-text" translatable="yes">Show data</property>
             <property name="icon-name">view-refresh-symbolic</property>
             <signal name="toggled" handler="toggle_show"/>
diff --git a/gtk/inspector/window.ui b/gtk/inspector/window.ui
index 52ba9f065a..c56f941bdd 100644
--- a/gtk/inspector/window.ui
+++ b/gtk/inspector/window.ui
@@ -214,16 +214,13 @@
                               <object class="GtkCenterBox">
                                 <child type="start">
                                   <object class="GtkBox">
+                                    <style>
+                                      <class name="toolbar"/>
+                                    </style>
                                     <child>
                                       <object class="GtkToggleButton" id="sidebar_toggle">
                                         <property name="icon-name">open-menu-symbolic</property>
                                         <property name="tooltip-text" translatable="yes">Toggle Sidebar</property>
-                                        <property name="margin-start">6</property>
-                                        <property name="margin-end">6</property>
-                                        <property name="margin-top">6</property>
-                                        <property name="margin-bottom">6</property>
-                                        <property name="halign">center</property>
-                                        <property name="valign">center</property>
                                         <property name="active">1</property>
                                       </object>
                                     </child>
@@ -244,13 +241,8 @@
                                             <property name="name">actions</property>
                                             <property name="child">
                                               <object class="GtkButton" id="refresh_actions_button">
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="icon-name">view-refresh-symbolic</property>
                                                 <property name="tooltip-text" translatable="yes">Refresh action state</property>
-                                                <property name="has-frame">0</property>
                                               </object>
                                             </property>
                                           </object>
@@ -260,10 +252,6 @@
                                             <property name="name">magnifier</property>
                                             <property name="child">
                                               <object class="GtkScale">
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="width-request">150</property>
                                                 <property name="draw-value">0</property>
                                                 <property name="adjustment">magnification_adjustment</property>
@@ -302,11 +290,8 @@
                                         <property name="name">prop-search</property>
                                         <property name="child">
                                           <object class="GtkSearchEntry" id="prop_search_entry">
-                                            <property name="margin-start">6</property>
-                                            <property name="margin-end">6</property>
-                                            <property name="margin-top">6</property>
-                                            <property name="margin-bottom">6</property>
                                             <property name="max-width-chars">40</property>
+                                            <property name="valign">center</property>
                                           </object>
                                         </property>
                                       </object>
@@ -316,10 +301,6 @@
                                         <property name="name">layout-prop-search</property>
                                         <property name="child">
                                           <object class="GtkSearchEntry" id="layout_prop_search_entry">
-                                            <property name="margin-start">6</property>
-                                            <property name="margin-end">6</property>
-                                            <property name="margin-top">6</property>
-                                            <property name="margin-bottom">6</property>
                                             <property name="max-width-chars">40</property>
                                           </object>
                                         </property>
@@ -329,15 +310,13 @@
                                 </child>
                                 <child type="end">
                                   <object class="GtkBox">
-                                    <property name="margin-start">6</property>
-                                    <property name="margin-end">6</property>
+                                    <style>
+                                      <class name="toolbar"/>
+                                    </style>
                                     <child>
                                       <object class="GtkButton" id="go_up_button">
                                         <property name="icon-name">go-up-symbolic</property>
                                         <property name="tooltip-text" translatable="yes">Previous object</property>
-                                        <property name="has-frame">0</property>
-                                        <property name="halign">center</property>
-                                        <property name="valign">center</property>
                                         <signal name="clicked" handler="go_up_cb"/>
                                       </object>
                                     </child>
@@ -345,9 +324,6 @@
                                       <object class="GtkButton" id="go_down_button">
                                         <property name="icon-name">go-down-symbolic</property>
                                         <property name="tooltip-text" translatable="yes">Child object</property>
-                                        <property name="has-frame">0</property>
-                                        <property name="halign">center</property>
-                                        <property name="valign">center</property>
                                         <signal name="clicked" handler="go_down_cb"/>
                                       </object>
                                     </child>
@@ -355,9 +331,6 @@
                                       <object class="GtkButton" id="go_previous_button">
                                         <property name="icon-name">go-previous-symbolic</property>
                                         <property name="tooltip-text" translatable="yes">Previous sibling</property>
-                                        <property name="has-frame">0</property>
-                                        <property name="halign">center</property>
-                                        <property name="valign">center</property>
                                         <signal name="clicked" handler="go_previous_cb"/>
                                       </object>
                                     </child>
@@ -370,9 +343,6 @@
                                       <object class="GtkButton" id="go_next_button">
                                         <property name="icon-name">go-next-symbolic</property>
                                         <property name="tooltip-text" translatable="yes">Next sibling</property>
-                                        <property name="has-frame">0</property>
-                                        <property name="halign">center</property>
-                                        <property name="valign">center</property>
                                         <signal name="clicked" handler="go_next_cb"/>
                                       </object>
                                     </child>

From 3aee23c17224a38be4c0eb8fc7b669096ab4c801 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 03:22:56 +0500
Subject: [PATCH 04/10] inspector: Use tabular figures for list position label

Avoid buttons jumping around while moving through list models.
---
 gtk/inspector/window.ui | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/gtk/inspector/window.ui b/gtk/inspector/window.ui
index c56f941bdd..69ae8624e5 100644
--- a/gtk/inspector/window.ui
+++ b/gtk/inspector/window.ui
@@ -337,6 +337,9 @@
                                     <child>
                                       <object class="GtkLabel" id="list_position_label">
                                         <property name="tooltip-text" translatable="yes">List Position</property>
+                                        <attributes>
+                                          <attribute name="font-features" value="tnum=1"/>
+                                        </attributes>
                                       </object>
                                     </child>
                                     <child>

From 7aa34cb3d2c179bdc2c3ddd966138d6d7850407b Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 03:55:26 +0500
Subject: [PATCH 05/10] inspector: Add a separator under toolbar in css editor

Same as object properties.
---
 gtk/inspector/css-editor.ui | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/gtk/inspector/css-editor.ui b/gtk/inspector/css-editor.ui
index c1163efba4..18eb32d8e7 100644
--- a/gtk/inspector/css-editor.ui
+++ b/gtk/inspector/css-editor.ui
@@ -41,6 +41,9 @@
         </child>
       </object>
     </child>
+    <child>
+      <object class="GtkSeparator"/>
+    </child>
     <child>
       <object class="GtkScrolledWindow">
         <property name="hscrollbar-policy">never</property>

From 2ac8132499405e864f91299934e8a5fd254a4834 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 03:58:21 +0500
Subject: [PATCH 06/10] inspector: Use consistent GtkTextView margins

---
 gtk/inspector/css-editor.ui    | 2 ++
 gtk/inspector/resource-list.ui | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/gtk/inspector/css-editor.ui b/gtk/inspector/css-editor.ui
index 18eb32d8e7..7663af860b 100644
--- a/gtk/inspector/css-editor.ui
+++ b/gtk/inspector/css-editor.ui
@@ -56,6 +56,8 @@
             <property name="monospace">1</property>
             <property name="left-margin">6</property>
             <property name="right-margin">6</property>
+            <property name="top-margin">6</property>
+            <property name="bottom-margin">6</property>
             <property name="has-tooltip">1</property>
             <signal name="query-tooltip" handler="query_tooltip_cb"/>
           </object>
diff --git a/gtk/inspector/resource-list.ui b/gtk/inspector/resource-list.ui
index 358458327d..4c78ca2083 100644
--- a/gtk/inspector/resource-list.ui
+++ b/gtk/inspector/resource-list.ui
@@ -201,6 +201,10 @@
                               <object class="GtkTextView">
                                 <property name="editable">0</property>
                                 <property name="buffer">buffer</property>
+                                <property name="left-margin">6</property>
+                                <property name="right-margin">6</property>
+                                <property name="top-margin">6</property>
+                                <property name="bottom-margin">6</property>
                               </object>
                             </child>
                           </object>

From 0053160f281b04c48030eda0612b7668175d37a1 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 04:01:35 +0500
Subject: [PATCH 07/10] inspector: Stop using .sidebar for the recorder page

Those aren't sidebars. Add separators manually instead of misusing the
style class.
---
 gtk/inspector/recorder.ui | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/gtk/inspector/recorder.ui b/gtk/inspector/recorder.ui
index ce25148196..aa6f67aca7 100644
--- a/gtk/inspector/recorder.ui
+++ b/gtk/inspector/recorder.ui
@@ -69,9 +69,6 @@
               <object class="GtkScrolledWindow">
                 <property name="hscrollbar-policy">never</property>
                 <property name="propagate-natural-width">1</property>
-                <style>
-                  <class name="sidebar"/>
-                </style>
                 <child>
                   <object class="GtkListBox" id="recordings_list">
                     <property name="vexpand">1</property>
@@ -80,13 +77,13 @@
                 </child>
               </object>
             </child>
+            <child>
+              <object class="GtkSeparator"/>
+            </child>
             <child>
               <object class="GtkScrolledWindow">
                 <property name="hscrollbar-policy">never</property>
                 <property name="propagate-natural-width">1</property>
-                <style>
-                  <class name="sidebar"/>
-                </style>
                 <child>
                   <object class="GtkListView" id="render_node_list">
                     <property name="vexpand">1</property>
@@ -95,6 +92,9 @@
                 </child>
               </object>
             </child>
+            <child>
+              <object class="GtkSeparator"/>
+            </child>
             <child>
               <object class="GtkPaned" id="render_paned">
                 <property name="orientation">vertical</property>

From 2aa2b7f61e620a3ff8854bbb199ead4052292e46 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 22:19:36 +0500
Subject: [PATCH 08/10] inspector: Clean up the .list style

Make it work with the property list as well, handle spinbuttons, adjust
paddings so that buttons don't touch each other, don't override horizontal
padding unnecessarily.
---
 gtk/inspector/inspector.css | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
index aeca38209a..702dc59690 100644
--- a/gtk/inspector/inspector.css
+++ b/gtk/inspector/inspector.css
@@ -1,24 +1,26 @@
 /* some style for the inspector */
 
-.list .cell {
+.list cell {
   font-size: smaller;
-  padding: 0 2px;
+  padding-top: 1px;
+  padding-bottom: 1px;
   min-height: 24px;
 }
 
-.list .cell entry,
-.list .cell spinbutton,
-.list .cell button,
-.list .cell dropdown
-.list .cell combobox {
+.list cell entry,
+.list cell spinbutton,
+.list cell button,
+.list cell dropdown
+.list cell combobox {
   min-height: 24px;
   min-width: 0;
 }
 
-.list .cell entry,
-.list .cell button,
-.list .cell dropdown
-.list .cell combobox {
+.list cell entry,
+.list cell spinbutton text,
+.list cell button,
+.list cell dropdown
+.list cell combobox {
   padding: 0 4px;
 }
 

From 516dc796057b90394d1bdec9d19dc49396d9cda8 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 22:20:13 +0500
Subject: [PATCH 09/10] inspector: Use .list for property list as well

---
 gtk/inspector/prop-list.ui | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gtk/inspector/prop-list.ui b/gtk/inspector/prop-list.ui
index 54285d9b61..c5789daed1 100644
--- a/gtk/inspector/prop-list.ui
+++ b/gtk/inspector/prop-list.ui
@@ -17,6 +17,7 @@
               <object class="GtkColumnView" id="list">
                 <style>
                   <class name="data-table"/>
+                  <class name="list"/>
                 </style>
                 <child>
                   <object class="GtkColumnViewColumn" id="name">

From 83319a3ea62fbe0d321ffec9a06673cec800fdb2 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 24 Oct 2021 22:23:26 +0500
Subject: [PATCH 10/10] inspector: Expand the controllers column view

---
 gtk/inspector/controllers.c | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gtk/inspector/controllers.c b/gtk/inspector/controllers.c
index 08144f1e10..d91bd02b9f 100644
--- a/gtk/inspector/controllers.c
+++ b/gtk/inspector/controllers.c
@@ -182,6 +182,7 @@ gtk_inspector_controllers_init (GtkInspectorControllers *self)
   g_signal_connect (factory, "bind", G_CALLBACK (bind_name), NULL);
 
   column = gtk_column_view_column_new ("Name", factory);
+  gtk_column_view_column_set_expand (column, TRUE);
   gtk_column_view_append_column (GTK_COLUMN_VIEW (self->view), column);
   g_object_unref (column);